/* Mastrent componenten (uit futuristisch-v6): glas, knoppen, kaart, eyebrow, chip, thema-wissel,
   header, footer, mobiele balk. Alleen tokens; werkt in licht en donker. */

/* ---------- Korrel (subtiel, statisch) ---------- */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:var(--mr-grain);will-change:transform;   /* eigen laag: niet opnieuw schilderen bij scrollen */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* Korrel kost een schermvullende laag; op telefoons/tablets (grove aanwijzer, smal scherm, profiel "laag") weglaten. */
@media (max-width:781px), (pointer:coarse), (prefers-reduced-data:reduce){ body::after{display:none} }

/* ---------- Glas met 1px gradiëntrand ---------- */
.mr-glass{position:relative;background:var(--mr-glass);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border-radius:var(--mr-r-l);box-shadow:var(--mr-shadow)}
.mr-glass::before,.mr-hair::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(145deg, var(--mr-hair-a), var(--mr-hair-b) 40%, var(--mr-hair-b) 62%, var(--mr-hair-c));
  -webkit-mask:linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0)}
.mr-hair{position:relative}

/* ---------- Knoppen ---------- */
.mr-btn,
.mr-btn-cta .wp-element-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mr-font-display);font-weight:600;font-size:1rem;letter-spacing:-.01em;line-height:1;
  min-height:48px;padding:16px 26px;border-radius:999px;text-decoration:none;cursor:pointer;border:0;white-space:nowrap;box-sizing:border-box;
  transition:transform .35s var(--mr-ease), box-shadow .35s, background .35s, color .35s, border-color .35s}
.mr-btn--primary,
.mr-btn-cta .wp-element-button{background:var(--mr-geel);color:var(--mr-on-geel);overflow:hidden;
  box-shadow:0 12px 30px -12px var(--mr-geel-schaduw), inset 0 -2px 0 rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.5)}
.mr-btn--primary::after,
.mr-btn-cta .wp-element-button::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);background-size:250% 100%;background-position:130% 0;transition:background-position .9s var(--mr-ease)}
.mr-btn--primary:hover,
.mr-btn-cta .wp-element-button:hover{background:var(--mr-geel);color:var(--mr-on-geel);box-shadow:0 18px 44px -12px var(--mr-geel-schaduw-sterk)}
.mr-btn--primary:hover::after,
.mr-btn-cta .wp-element-button:hover::after{background-position:-40% 0}
.mr-btn--ghost{color:var(--mr-text);background:var(--mr-glass);border:1px solid var(--mr-border-2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.mr-btn--ghost:hover{background:var(--mr-glass-strong);border-color:color-mix(in oklab, var(--mr-geel) 65%, transparent)}
.mr-btn--sm{min-height:44px;padding:12px 18px;font-size:.9rem}
.mr-btn svg{width:17px;height:17px;flex:none}
.mr-btn .mr-pijl{transition:transform .35s var(--mr-ease)}
.mr-btn:hover .mr-pijl{transform:translateX(4px)}
:is(.mr-btn,.mr-btn-cta .wp-element-button):focus-visible{outline:2px solid var(--mr-focus);outline-offset:3px}

/* ---------- Kaart, eyebrow, chip ---------- */
.mr-card{position:relative;padding:clamp(1.5rem,3vw,2.4rem);border-radius:var(--mr-r-l);background:var(--mr-glass);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);box-shadow:var(--mr-shadow);color:var(--mr-text)}
.mr-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(145deg, var(--mr-hair-a), var(--mr-hair-b) 40%, var(--mr-hair-b) 62%, var(--mr-hair-c));
  -webkit-mask:linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0)}
.mr-card--uitgelicht{background:var(--mr-cta-band);color:var(--mr-op-navy)}
.mr-card--uitgelicht :where(h2,h3,h4){color:var(--mr-wit)}
.mr-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mr-font-display);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mr-muted);margin:0 0 1.5rem}
.mr-eyebrow::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--mr-geel),var(--mr-border-2))}
.mr-eyebrow .mr-num{color:var(--mr-accent);font-variant-numeric:tabular-nums}
.mr-chip{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--mr-border-2);color:var(--mr-muted);background:transparent}
.mr-chip--geel{background:var(--mr-geel);border-color:var(--mr-geel);color:var(--mr-on-geel)}
.mr-hl{color:var(--mr-accent)}
:root:not([data-theme="light"]) .mr-hl{text-shadow:0 0 44px var(--mr-glow)}

/* ---------- Thema-wissel ---------- */
.mr-theme-toggle{position:relative;flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--mr-border-2);background:transparent;color:var(--mr-text);display:grid;place-items:center;cursor:pointer;transition:background .3s, transform .5s var(--mr-ease)}
.mr-theme-toggle:hover{background:var(--mr-border)}
.mr-theme-toggle:active{transform:scale(.92)}
.mr-theme-toggle svg{width:20px;height:20px;grid-area:1/1;transition:transform .7s var(--mr-ease), opacity .4s}
:root:not([data-theme="light"]) .mr-theme-toggle__maan{transform:rotate(-90deg) scale(.4);opacity:0}
:root[data-theme="light"] .mr-theme-toggle__zon{transform:rotate(90deg) scale(.4);opacity:0}

/* ---------- Merk ---------- */
.mr-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--mr-font-body);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--mr-text);border-radius:6px;flex:none}
/* Woordlogo: twee beelden (donker/licht) met vaste afmetingen; CSS toont er één, zoals de hero-beelden. */
.mr-brand__logo{display:block;width:auto;height:24px;max-width:none}
:root:not([data-theme="light"]) .mr-brand__logo--licht{display:none}
:root[data-theme="light"] .mr-brand__logo--donker{display:none}
.site-footer .mr-brand__logo{height:20px} /* footerlogo kleiner dan in de header */

/* ---------- Header (zwevende glazen balk) ---------- */
header.wp-block-template-part{position:sticky;top:0;z-index:40;padding:12px 12px 0;margin:0}
.admin-bar header.wp-block-template-part{top:32px}
.site-header{max-width:1200px;margin:0 auto}
.site-header__balk.wp-block-group{gap:12px;padding:8px 10px 8px 12px;border-radius:999px;background:var(--mr-glass-strong);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}
.site-header .hoofdmenu{margin-left:auto}
.site-header .hoofdmenu .wp-block-navigation-item__content{color:var(--mr-muted);text-decoration:none;padding:8px 12px;border-radius:999px;transition:color .25s, background .25s}
.site-header .hoofdmenu .wp-block-navigation-item__content:hover{color:var(--mr-text);background:var(--mr-border)}
.site-header .hoofdmenu .wp-block-navigation__submenu-container{background:var(--mr-surface)!important;color:var(--mr-text)!important;border:1px solid var(--mr-border-2)!important;border-radius:var(--mr-r-m);padding:6px!important;box-shadow:var(--mr-shadow)}
.site-header .hoofdmenu .wp-block-navigation__submenu-container .wp-block-navigation-item__content{border-radius:10px}
/* Uitklapmenu (telefoon en tablet): volledig scherm, links uitgelijnd; hoofditems als rijen met een lijn ertussen,
   submenu's als compact raster zonder kader (klant 2026-10-30). Onderaan ruimte voor de balk onderin (mobiel.css). */
.site-header .wp-block-navigation__responsive-container.is-menu-open{background:var(--mr-bg)!important;color:var(--mr-text)!important;padding:0!important;
  --navigation-layout-justification-setting:flex-start;--navigation-layout-justify:flex-start;--navigation-layout-align:flex-start;text-align:left}
.site-header .is-menu-open .wp-block-navigation__responsive-close{max-width:none}
.site-header .is-menu-open .wp-block-navigation__responsive-dialog{margin:0!important;padding:12px 20px calc(var(--mr-balk-h,0px) + 24px)}
.site-header .is-menu-open .wp-block-navigation__responsive-container-close{position:absolute;top:12px;right:16px;display:flex;border:1px solid var(--mr-border-2)}
.site-header .is-menu-open .wp-block-navigation__responsive-container-content{padding-top:56px!important;align-items:stretch!important;gap:0!important;max-width:600px}   /* tablet: niet over de hele breedte */
.site-header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container{align-items:stretch!important;gap:0!important;width:100%;font-size:1rem!important}
.site-header .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item{display:block!important;width:100%;border-bottom:1px solid var(--mr-border)}
.site-header .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content{display:flex!important;align-items:center;min-height:52px;padding:0!important;border-radius:0;
  font-family:var(--mr-font-display);font-size:1.2rem;font-weight:600;color:var(--mr-text)!important;background:none!important}
.site-header .is-menu-open .wp-block-navigation__submenu-container{display:grid!important;grid-template-columns:1fr;gap:0 16px;width:100%!important;position:static!important;
  padding:0 0 10px!important;margin:-4px 0 0;background:none!important;border:0!important;border-radius:0;box-shadow:none!important;opacity:1!important;visibility:visible!important;height:auto!important}
.site-header .is-menu-open .wp-block-navigation-submenu:has(a[href*="/werkgebied/"])>.wp-block-navigation__submenu-container{grid-template-columns:1fr 1fr}   /* korte provincienamen: twee kolommen */
.site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{display:block!important}
.site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{display:flex!important;align-items:center;min-height:44px;padding:0!important;border-radius:0;
  font-size:1rem;font-weight:500;line-height:1.25;color:var(--mr-muted)!important;background:none!important}
.site-header .is-menu-open .wp-block-navigation-item__content:is(:hover,:focus-visible){color:var(--mr-text)!important;text-decoration:underline;text-underline-offset:4px}
.site-header .is-menu-open .wp-block-navigation-item__content[aria-current="page"]{color:var(--mr-text)!important;box-shadow:inset 3px 0 0 var(--mr-geel);padding-left:12px!important}
.site-header .is-menu-open .wp-block-navigation__submenu-icon{display:none!important}
.site-header .wp-block-navigation__responsive-container-open,.site-header .wp-block-navigation__responsive-container-close{color:var(--mr-text);width:44px;height:44px;align-items:center;justify-content:center;border-radius:50%}
.site-header .wp-block-navigation__responsive-container-open{border:1px solid var(--mr-border-2)}
.header-acties.wp-block-group{gap:6px;align-items:center}
.header-acties>*{margin:0}
.header-tel{margin:0}
.header-tel a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;border-radius:999px;font-family:var(--mr-font-display);font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums;color:var(--mr-text);text-decoration:none;white-space:nowrap}
.header-tel a::before{content:"";width:17px;height:17px;flex:none;background:var(--mr-accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg 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'><path d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg 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'><path d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/></svg>") center/contain no-repeat}
.header-tel a:hover{background:var(--mr-border)}
.header-cta .mr-btn-cta .wp-element-button{min-height:44px;padding:12px 18px;font-size:.9rem}

/* Tot 1080px: hoofdmenu achter de menuknop (anders past de balk niet). */
@media (min-width:600px) and (max-width:1079px){
  .site-header .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
  .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none}
}
@media (max-width:1079px){
  .site-header .hoofdmenu{order:3;margin-left:0}
  .header-acties.wp-block-group{margin-left:auto}
}
/* backdrop-filter maakt een containing block voor position:fixed; zonder dit blijft het menu-overlay in de balk. */
.site-header__balk:has(.is-menu-open){-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--mr-bg)}
@media (max-width:781px){
  .admin-bar header.wp-block-template-part{top:46px}
  header.wp-block-template-part{padding:10px 10px 0}
  .site-header__balk.wp-block-group{padding:6px 6px 6px 8px;gap:8px}
  .header-acties .header-cta.wp-block-buttons{display:none}
  .header-tel a{width:44px;height:44px;padding:0;justify-content:center;border:1px solid var(--mr-border-2);font-size:0;gap:0}
  .mr-brand__logo{height:20px}
  .site-footer .mr-brand__logo{height:18px}
}

/* ---------- Footer ---------- */
.site-footer.wp-block-group{position:relative;margin-top:0;padding:clamp(3rem,6vw,4.5rem) 1rem 3rem;border-top:1px solid var(--mr-border);color:var(--mr-muted);font-size:.95rem;background:transparent}
.site-footer__kolommen.wp-block-columns{gap:2rem clamp(1.5rem,4vw,3.5rem)}
.site-footer__bedrijf>p{margin:.35rem 0 0}
.site-footer__intro{max-width:22rem;margin-top:1rem!important}
.site-footer__tel a{font-family:var(--mr-font-display);font-weight:600;color:var(--mr-text)}
h2.site-footer__kop{font-family:var(--mr-font-display);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mr-text);margin:0 0 1rem}
.footer-lijst{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.site-footer a{color:inherit;text-decoration:none;transition:color .25s}
.site-footer a:hover{color:var(--mr-text);text-decoration:underline;text-underline-offset:3px}
.werkgebied-lijst__overig{color:var(--mr-muted-2);font-size:.875rem;margin-top:.25rem}
.site-footer__onder.wp-block-group{gap:.35rem;margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--mr-border);color:var(--mr-muted-2)}
.site-footer__onder>p{margin:0}

/* ---------- Mobiele actiebalk ---------- */
.mobile-bar.wp-block-group{position:fixed;inset:auto 8px calc(8px + env(safe-area-inset-bottom)) 8px;z-index:50;gap:8px;padding:8px;border-radius:22px;background:var(--mr-glass-strong);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.mobile-bar>*{flex:1 1 0;min-width:0;margin:0}
.mobile-bar .mb-bel a,.mobile-bar .mb-whatsapp a{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid var(--mr-border-2);border-radius:999px;background:var(--mr-glass);font-family:var(--mr-font-display);font-weight:600;font-size:.9rem;text-decoration:none;color:var(--mr-text);text-align:center;line-height:1.2;padding-inline:.4rem}
.mobile-bar .wp-block-buttons{flex:1 1 0}
.mobile-bar .wp-block-button{width:100%}
.mobile-bar .mr-btn-cta .wp-element-button{width:100%;min-height:48px;padding:10px .5rem;font-size:.9rem;white-space:normal;text-align:center;line-height:1.2}
@media (min-width:782px){.wp-block-group.mobile-bar{display:none}}
@media (max-width:781px){body{padding-bottom:84px}}

@media (prefers-reduced-motion: reduce){
  .mr-btn,.mr-btn-cta .wp-element-button,.mr-theme-toggle,.mr-theme-toggle svg{transition:none}
  .mr-btn--primary::after,.mr-btn-cta .wp-element-button::after{display:none}
}

/* ---------- Provinciekaart (inline nl-kaart.svg, zie inc/kaart.php) ---------- */
.mr-kaart{margin:0 auto;width:100%;max-width:520px;box-sizing:border-box;padding:clamp(14px,3vw,26px) clamp(14px,3vw,26px) clamp(12px,2vw,18px)}
.mr-kaart>svg{display:block;width:100%;height:auto;overflow:visible}
.mr-kaart .nlk-actief{filter:drop-shadow(0 0 5px var(--mr-kaart-gloed))}
.mr-kaart__legenda{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin-top:12px;font-size:.8rem;font-weight:600;color:var(--mr-muted)}
.mr-kaart__sleutel{display:inline-flex;align-items:center;gap:8px}
.mr-kaart__bron{flex-basis:100%;text-align:center;font-size:.7rem;font-weight:500;color:var(--mr-muted-2)}
.mr-kaart__sleutel::before{content:"";width:14px;height:10px;border-radius:3px;flex:none}
.mr-kaart__sleutel--aan::before{background:color-mix(in oklab, var(--mr-kaart-aan) 30%, transparent);border:1.5px solid var(--mr-kaart-aan)}
.mr-kaart__sleutel--overig::before{background:var(--mr-kaart-basis);border:1px dashed var(--mr-kaart-rand)}