/* ══ MOBIELE LAAG — Koraal Advocaten ══
   Wordt op elke pagina als laatste stylesheet geladen (onderaan de body),
   zodat deze regels voorgaan op de inline stijlen in de <head> van elke pagina.
   Alles hier geldt enkel voor smalle schermen, tenzij anders vermeld. */

/* ── Vaste actiebalk onderaan (opgebouwd door js/mobiel.js) ── */
.mb-bar{display:none}
@media (max-width:768px){
.mb-bar{
  display:flex;gap:8px;align-items:stretch;
  position:fixed;left:0;right:0;bottom:0;z-index:8999;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 -1px 0 #E0DAD4,0 -8px 24px rgba(13,46,40,.08);
  transform:translateY(110%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.mb-bar.mb-zichtbaar{transform:none}
.mb-bar a,.mb-bar button{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 14px;border-radius:2px;
  font-family:'DM Sans',system-ui,sans-serif;font-size:15px;font-weight:600;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.mb-bar svg{width:19px;height:19px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mb-bel{flex:0 0 auto;border:1.5px solid #164F47;color:#164F47;background:#fff}
.mb-hulp{flex:0 0 48px;padding:0 !important;border:1.5px solid #E0DAD4;background:#F5F1EC;color:#164F47}
.mb-actie{flex:1 1 auto;background:#E9613B;color:#fff;border:0}
.mb-bel:active,.mb-hulp:active{background:#F5F1EC}
.mb-actie:active{background:#D4532F}
/* Terwijl de balk zichtbaar is, zit de wegwijzer erin: zwevende knop weg */
body.mb-balk-aan .ww-fab{opacity:0;pointer-events:none;transform:scale(.6)}
.ww-fab{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,opacity .25s}
/* Menu open: geen zwevende knoppen boven het menu */
body.mb-menu-open .ww-fab,body.mb-menu-open .mb-bar{opacity:0;pointer-events:none}
}

/* ── Mobiel menu: grotere, rustigere items + snelkeuze per doelgroep ── */
.nav-paden{display:none}
@media (max-width:768px){
nav .nav-links li:not(.nav-mobile-only) a:not(.nav-lab-pill){
  font-size:22px !important;font-weight:600 !important;text-transform:none !important;
  letter-spacing:-.01em !important;padding:13px 0 !important;color:#fff !important;
}
nav .nav-links a.nav-lab-pill{padding:13px 0 !important;font-size:15px !important}
nav .nav-links li.nav-paden{display:block;border-bottom:none !important;padding-top:24px}
.nav-paden-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:12px}
.nav-paden-rij{display:flex;flex-wrap:wrap;gap:8px}
nav .nav-links .nav-paden-rij a{
  display:inline-flex !important;width:auto !important;align-items:center;
  padding:10px 16px !important;font-size:14px !important;font-weight:500 !important;
  text-transform:none !important;letter-spacing:0 !important;
  border:1px solid rgba(255,255,255,.22);border-radius:40px;color:#fff !important;
}
nav .nav-links a.nav-mobile-cta{margin-top:20px !important}
}

/* ── Formulieren: 16px voorkomt dat iPhone inzoomt bij het typen ── */
@media (max-width:768px){
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{font-size:16px !important}
.form-check input[type=checkbox]{width:22px !important;height:22px !important;flex-shrink:0}
}

/* ── Aanraakzones: kleine tekstlinks krijgen meer hoogte ── */
@media (max-width:768px){
footer .footer-grid{grid-template-columns:1fr 1fr !important;column-gap:24px !important;row-gap:32px !important}
footer .footer-brand{grid-column:1/-1}
footer .footer-col ul{gap:0 !important}
footer .footer-col a{display:block;padding:9px 0;font-size:14px !important}
footer .footer-contact{gap:0 !important}
footer .footer-contact a{display:inline-block;padding:8px 0;font-size:15px !important;color:#fff !important}
footer .footer-bottom a{display:inline-block;padding:6px 8px}
.read-more,.domain-team-cta,.member-email,.ar-link,.ph-hero-tel,.ph-cta-tel,.btn-ghost-white,.btn-ghost-teal{display:inline-flex;align-items:center;min-height:44px}
.locations-grid a,.contact-section a[href*="google.com/maps"]{padding:10px 0;margin-top:0 !important}
}

/* ── Teamkaarten: e-mailadres als compacte knop i.p.v. afgebroken adres ── */
@media (max-width:600px){
.team-grid .team-email,.portret-team .portret-kaart a{
  display:inline-flex !important;align-items:center;gap:6px;align-self:flex-start;
  min-height:36px;margin-top:10px !important;padding:0 12px !important;
  border:1px solid #E0DAD4 !important;border-radius:40px;background:#fff;
  font-size:13px !important;font-weight:600;color:#164F47 !important;word-break:normal !important;
}
.team-grid .team-email::before,.portret-team .portret-kaart a::before{
  content:'';width:14px;height:14px;flex-shrink:0;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.team-grid .team-email::after,.portret-team .portret-kaart a::after{content:'Mail'}
/* adres blijft voorleesbaar voor schermlezers */
.team-grid .team-email [data-adres],.portret-team .portret-kaart a [data-adres]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

/* ── Collectief: één kolom, foto naast naam, bio over de volle breedte ── */
@media (max-width:600px){
.team-section .team-grid:has(> .member-card){grid-template-columns:1fr !important;gap:14px !important}
.member-card{display:grid !important;grid-template-columns:112px 1fr;column-gap:16px;padding:16px !important;align-items:start}
.member-card .member-photo{grid-row:1 / span 2;aspect-ratio:3/4;height:auto !important;width:112px;margin:0 !important}
.member-card .member-photo img{width:100%;height:100%;object-fit:cover}
.member-card .member-info{display:contents}
.member-card .member-role{grid-column:2;align-self:end;margin:0 0 6px !important;font-size:11px !important}
.member-card .member-name{grid-column:2;align-self:start;font-size:19px !important;margin:0 !important}
.member-card .member-bio,.member-card .member-tags,.member-card .member-footer{grid-column:1 / -1}
.member-card .member-bio{margin:16px 0 12px !important;font-size:15px !important;line-height:1.65 !important}
.member-card .member-tags{min-height:0 !important;margin-bottom:8px !important}
.member-card .member-tag{font-size:11px !important}
.member-card .member-linkedin{width:44px !important;height:44px !important}
}

/* ── Homepage ── */
@media (max-width:768px){
/* Kerncijfers: 2 × 2 in plaats van vier volle rijen */
.stats-bar{grid-template-columns:1fr 1fr !important}
.stats-bar .stat-item{padding:22px 20px !important;border-bottom:1px solid rgba(255,255,255,.08) !important}
.stats-bar .stat-item:nth-child(odd){border-right:1px solid rgba(255,255,255,.08) !important}
.stats-bar .stat-num{font-size:36px !important}
/* Teamcarrousel: eerste kaart niet tegen de rand, minder bolletjes */
.team-carousel{scroll-padding-left:20px;scroll-padding-right:20px}
.team-track .team-card{flex-basis:72vw !important}
.carousel-controls{display:none !important}
/* Slot-CTA: telefoonnummer als echte knop */
.cta-final .cta-phone{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;
  border:1.5px solid rgba(255,255,255,.4);border-radius:2px;
  font-size:15px !important;font-weight:600;color:#fff !important;letter-spacing:.01em;
}
.cta-final .cta-actions{flex-direction:row !important;flex-wrap:wrap;align-items:center !important;gap:12px !important}
}

/* ── Contact: snelknoppen bovenaan ── */
.snel-contact{display:none}
@media (max-width:768px){
.snel-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:28px;position:relative;z-index:2}
.snel-contact a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:72px;border-radius:2px;text-decoration:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:#fff;font-size:13px;font-weight:600;
}
.snel-contact a:first-child{background:#E9613B;border-color:#E9613B}
.snel-contact svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
}

/* ── Artikels: categorielabel leesbaar op de foto ── */
@media (max-width:768px){
.post-hero .post-cat{background:rgba(13,46,40,.85) !important;color:#fff !important;border-color:transparent !important}
}

/* ── Lange dienstpagina's (Overheden, Administratief recht): details dichtgeklapt op gsm ── */
.mb-details-knop{display:none}
@media (max-width:768px){
.ar-kaart.mb-dicht ul{display:none}
.mb-details-knop{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;padding:0;
  background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  font-family:'DM Sans',system-ui,sans-serif;font-size:14px;font-weight:600;color:#164F47;
}
.mb-details-knop::after{
  content:'';width:8px;height:8px;margin-top:-3px;border-right:2px solid #E9613B;border-bottom:2px solid #E9613B;
  transform:rotate(45deg);transition:transform .25s;
}
.mb-details-knop[aria-expanded=true]::after{transform:rotate(-135deg);margin-top:3px}
.ar-kaart ul{margin-top:4px !important}
/* Domeinlijst in de hero: horizontaal schuiven i.p.v. 12 regels onder elkaar */
.ar-chips{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;margin-right:-20px !important;padding-right:20px !important;-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}
.ar-chips::-webkit-scrollbar{display:none}
.ar-chips li{flex-shrink:0;white-space:nowrap}
}

/* ── Teamblok op Overheden / Administratief recht: compacte rij per advocaat ── */
@media (max-width:600px){
.ar-team{grid-template-columns:1fr !important;gap:10px !important}
.ar-lid{display:grid !important;grid-template-columns:84px 1fr;column-gap:16px;row-gap:2px;padding:14px !important;align-items:center}
.ar-lid > :not(img){margin:0 !important;grid-column:2}
.ar-lid img{grid-row:1 / span 4;width:84px !important;aspect-ratio:3/4;margin:0 !important;align-self:start}
.ar-lid-naam{font-size:17px !important}
.ar-lid-spec{font-size:13px !important}
.ar-lid a{
  display:inline-flex !important;align-items:center;gap:6px;justify-self:start;
  min-height:36px;margin-top:6px !important;padding:0 12px !important;
  border:1px solid #E0DAD4 !important;border-radius:40px;background:#fff;
  font-size:13px !important;font-weight:600;color:#164F47 !important;word-break:normal !important;
}
.ar-lid a::after{content:'Mail'}
.ar-lid a [data-adres]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

/* ── Inhoudsbalk op lange dienstpagina's (opgebouwd door js/mobiel.js) ── */
.mb-inhoud{display:none}
@media (max-width:768px){
.mb-inhoud{
  display:flex;gap:6px;position:sticky;top:68px;z-index:150;
  overflow-x:auto;scrollbar-width:none;padding:10px 20px;
  background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 #E0DAD4;
}
.mb-inhoud::-webkit-scrollbar{display:none}
.mb-inhoud a{
  flex-shrink:0;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:40px;
  border:1px solid #E0DAD4;background:#fff;color:#164F47;text-decoration:none;
  font-size:13px;font-weight:600;white-space:nowrap;transition:background .2s,color .2s,border-color .2s;
}
.mb-inhoud a.mb-actief{background:#164F47;border-color:#164F47;color:#fff}
.ar-sec[id],.ar-aanpak[id],.ar-contact[id]{scroll-margin-top:124px}
}

/* ── Plakkende balken (filterbalk Expertises, inhoudsbalk) werkend houden ──
   'overflow-x:hidden' op html/body maakt van body een scrollcontainer, waardoor
   position:sticky niet meer werkt. 'clip' knipt evengoed af, zonder dat neveneffect.
   Oudere browsers zonder 'clip' houden 'hidden'. */
@media (max-width:768px){
html,body{overflow-x:hidden !important;overflow-x:clip !important}
}

/* ── Over: "20+" als duidelijk kerncijfer i.p.v. half verborgen watermerk ── */
@media (max-width:768px){
.intro-left .intro-number{color:#E9613B !important;margin-bottom:6px !important;font-size:72px !important}
}