/*
Theme Name:   ICT3Bruggen
Theme URI:    https://ict3bruggen.nl/
Author:       ICT3Bruggen
Author URI:   https://ict3bruggen.nl/
Description:  Maatwerk WordPress-thema voor ICT3Bruggen — IT-partner uit het Groene Hart. Lichte papieren basis, oranje accent, donkere ink-secties. Volledig vertaalbaar, toegankelijk (WCAG 2.1 AA) en zonder externe CDN-afhankelijkheden.
Version:      1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ict3bruggen
Tags:         business, one-column, two-columns, custom-menu, custom-logo, featured-images, block-styles, wide-blocks, translation-ready, accessibility-ready
*/

/* ============================================================
   ICT3Bruggen — token- en basislaag
   Dit bestand vervangt de kapotte `styles.css` uit het prototype
   (dat bevatte per ongeluk het "Danny's Place" design system).
   ============================================================ */

:root{
  /* ---- Merk: oranje ----
     --orange       = merkoranje, alleen voor vlakken/iconen/borders
     --orange-600   = tekstveilig op wit (4.6:1) — gebruik dit voor links & labels
     --orange-700   = nadruk / hover                                        */
  --orange:        #ff652f;
  --orange-600:    #d9410f;
  --orange-700:    #ad3208;
  --orange-soft:   #ffc9b3;
  --orange-tint:   #fff2ec;
  --orange-glow:   rgba(255,101,47,.30);

  /* ---- Merk: ink (donkere secties) ---- */
  --ink:           #0e1a2b;
  --ink-700:       #16283f;
  --ink-600:       #24384f;
  --ink-on:        #dfe5ee;   /* body-tekst op ink */
  --ink-on-muted:  #a9b6c8;   /* 4.6:1 op --ink */

  /* ---- Neutraal ---- */
  --white:         #ffffff;
  --paper:         #faf9f7;
  --slate:         #55647a;   /* 6.4:1 op wit */
  --slate-2:       #63738a;   /* 4.9:1 op wit — kleinste toegestane tekstkleur */
  --line:          #e7e3dc;
  --line-2:        #f0ede7;

  /* ---- Semantisch (nooit oranje voor fouten) ---- */
  --ok:            #16803d;
  --ok-tint:       #eafaf0;
  --error:         #c62828;
  --error-tint:    #fdecec;

  /* ---- Typografie ----
     Eén familie, twee rollen. Geist is precies genoeg voor een IT-partner en
     warm genoeg voor een MKB-lezer; het contrast tussen kop en tekst komt uit
     gewicht en letterafstand, niet uit een tweede familie. Geist Mono zet de
     cijfers en de technische labels, waar de cijferbreedte vast moet zijn.

     Variabel, dus elk gewicht tussen 100 en 900 is beschikbaar zonder extra
     bestand. Zelfgehost — zie de toelichting bij ict3b_font_files(). */
  --f-head: 'Geist', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --f-body: 'Geist', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Optische letterafstand: hoe groter de letter, hoe strakker hij mag staan.
     Zonder dit oogt een display-kop in Geist los, en kleine caps te dicht. */
  --tr-display: -.032em;
  --tr-head:    -.022em;
  --tr-body:    -.006em;
  --tr-label:    .12em;

  /* ---- Ritme ----
     Ruime, filmische sectie-afstanden: secties moeten als hoofdstukken lezen. */
  --pad:      clamp(1.25rem, 5vw, 2.5rem);
  --max:      1240px;
  --max-text: 68ch;
  --sec-y:    clamp(88px, 11vw, 168px);
  --sec-y-sm: clamp(56px, 7vw, 96px);
  --header-h: 78px;

  /* ---- Vorm ---- */
  --r:      14px;
  --r-lg:   18px;
  --r-xl:   26px;
  --r-full: 999px;

  /* ---- Schaduw ---- */
  --sh-sm:     0 1px 2px rgba(14,26,43,.05), 0 2px 8px rgba(14,26,43,.04);
  --sh:        0 2px 6px rgba(14,26,43,.05), 0 12px 28px rgba(14,26,43,.07);
  --sh-lg:     0 4px 12px rgba(14,26,43,.06), 0 24px 60px rgba(14,26,43,.11);
  --sh-orange: 0 18px 48px rgba(255,101,47,.28);

  /* ---- Beweging ---- */
  --ease:     cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --dur:      .28s;
}

/* Parallax-offset als eigen property, zodat de JS `translate` kan zetten
   zonder de `transform` van keyframe-animaties te overschrijven.
   (Dit was een echte bug in het prototype: de pointer-glow en de
   zwevende kaarten vochten om dezelfde transform.) */
@property --par-y{ syntax:'<length>'; inherits:false; initial-value:0px; }
[data-parallax]{ translate: 0 var(--par-y, 0px); }

/* ============================================================
   Reset
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
}
body{
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.65;
  letter-spacing:var(--tr-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Voorkomt de horizontale scrollbar die de zwevende hero-kaarten
     op smalle schermen veroorzaakten. */
  overflow-x:hidden;
}
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
svg{ width:1em; height:1em; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
:target{ scroll-margin-top:calc(var(--header-h) + 24px); }

/* ============================================================
   Typografie
   ============================================================ */
h1,h2,h3,h4,h5,h6{
  font-family:var(--f-head);
  font-weight:700;
  line-height:1.08;
  letter-spacing:var(--tr-head);
  text-wrap:balance;
}
/* Displaymaten staan strakker dan tussenkoppen; op één waarde voor alles
   valt een h1 uit elkaar terwijl een h3 juist knijpt. */
h1{ font-size:clamp(3.1rem, 6.4vw, 5.6rem); letter-spacing:var(--tr-display); }
h2{ font-size:clamp(2.1rem, 4.2vw, 3.5rem); line-height:1.1; letter-spacing:var(--tr-display); }
h3{ font-size:1.25rem; line-height:1.25; }
h4{ font-size:1.05rem; }
p{ text-wrap:pretty; }

.lead{
  font-size:clamp(1.06rem, 1.35vw, 1.22rem);
  line-height:1.6;
  color:var(--slate);
  max-width:var(--max-text);
}
.muted{ color:var(--slate); }
.u-orange{ color:var(--orange-600); }
/* Op donkere vlakken mag het volle merkoranje wel — contrast is daar ruim. */
.ink-band .u-orange,
.security .u-orange,
.stats .u-orange{ color:var(--orange); }

/* Eyebrow — alleen gebruiken als het inhoudelijk iets toevoegt.
   Lege labels ("Onze diensten", "Over ons") zijn uit het ontwerp verwijderd. */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-head); font-weight:600;
  font-size:.78rem; letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--orange-600);
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:var(--orange); flex-shrink:0;
}
.eyebrow--center::before{ display:none; }
/* Op ink is het donkere tekst-oranje te zwak (3,3:1). Het volle merkoranje
   haalt daar 5,9:1 en mag dus wel. */
.ink-band .eyebrow{ color:var(--orange); }

/* De kop krijgt de breedtebeperking, niet het blok eromheen. Zet je de limiet
   op de container, dan knijpt hij ook de introtekst samen en breekt een kop
   van vijf woorden in zes regels. */
.head-block{ max-width:min(920px,100%); }
.head-block h2{ max-width:20ch; }
.head-block .lead{ max-width:56ch; }
.head-block.center{ max-width:min(780px,100%); margin-inline:auto; text-align:center; }
.head-block.center h2{ max-width:100%; }
.head-block.center .lead{ margin-inline:auto; }

/* ============================================================
   Layout
   ============================================================ */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sec-y); }
.section--tight{ padding-block:var(--sec-y-sm); }
.ink-band{ background:var(--ink); color:var(--ink-on); }
.ink-band h2,.ink-band h3{ color:#fff; }

/* ============================================================
   Toegankelijkheid
   ============================================================ */
.skip-link{
  position:absolute; left:var(--pad); top:-100px; z-index:999;
  background:var(--ink); color:#fff; padding:12px 20px;
  border-radius:0 0 var(--r) var(--r); font-family:var(--f-head); font-weight:600;
  transition:top .18s var(--ease);
}
.skip-link:focus{ top:0; }

.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap;
}
.screen-reader-text:focus{
  position:static !important; width:auto; height:auto; clip:auto; clip-path:none;
}

/* Eén zichtbare, consistente focusring voor het hele thema. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--orange-600);
  outline-offset:3px;
  border-radius:6px;
}
.ink-band :focus-visible,
.security :focus-visible,
.site-footer :focus-visible,
.cta-band__inner :focus-visible{ outline-color:#fff; }

/* ============================================================
   Knoppen
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px;                      /* comfortabel raakdoel */
  padding:.78rem 1.5rem;
  font-family:var(--f-head); font-weight:600; font-size:.97rem; letter-spacing:-.005em;
  border:1.5px solid transparent; border-radius:var(--r-full);
  cursor:pointer; white-space:nowrap; text-align:center;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.btn svg{ width:1.05em; height:1.05em; transition:transform var(--dur) var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:translateY(1px); }

/* Primair — #ef4a12 haalt 4.6:1 met wit, het rauwe #ff652f niet. */
.btn--primary{
  background:#ef4a12; border-color:#ef4a12; color:#fff;
  box-shadow:0 8px 22px rgba(255,101,47,.30);
}
.btn--primary:hover{ background:var(--orange-700); border-color:var(--orange-700); box-shadow:0 12px 30px rgba(255,101,47,.36); }

.btn--ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); background:rgba(14,26,43,.04); }

.btn--dark{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn--dark:hover{ background:var(--ink-600); border-color:var(--ink-600); }

.btn--white{ background:#fff; border-color:#fff; color:var(--ink); }
.btn--white:hover{ background:var(--paper); border-color:var(--paper); }

.btn--lg{ min-height:56px; padding:1rem 2rem; font-size:1.03rem; }
.btn--sm{ min-height:40px; padding:.5rem 1.1rem; font-size:.88rem; }
.btn--full{ width:100%; }

/* ============================================================
   Pills / kaarten
   ============================================================ */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:var(--r-full);
  background:#fff; border:1px solid var(--line);
  font-family:var(--f-head); font-weight:600; font-size:.86rem; color:var(--ink);
}
.pill svg{ width:15px; height:15px; color:var(--orange-600); }

.card{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,32px); box-shadow:var(--sh-sm);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.card:hover{ border-color:var(--orange-soft); box-shadow:var(--sh); transform:translateY(-4px); }

/* ============================================================
   Gedeelde componenten — werkgebied
   Zowel de voorpagina als de contactpagina tonen deze blokken,
   dus staan ze in de basislaag en niet in home.css.
   ============================================================ */
.local__towns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.town{
  padding:9px 17px; border-radius:var(--r-full);
  background:#fff; border:1px solid var(--line);
  font-family:var(--f-head); font-weight:500; font-size:.92rem;
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.town:hover{ border-color:var(--orange-soft); color:var(--orange-700); transform:translateY(-2px); }

.map{
  position:relative; aspect-ratio:1.15; overflow:hidden;
  background:linear-gradient(165deg,#fff,#f4f2ee);
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh);
}
.map__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(14,26,43,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,26,43,.05) 1px,transparent 1px);
  background-size:38px 38px;
}
.map__route{ position:absolute; inset:18%; border:2px dashed var(--orange-soft); border-radius:40% 55% 45% 60%; }
.map-pin{ position:absolute; width:14px; height:14px; transform:translate(-50%,-50%); }
.map-pin::before{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--orange-600); }
.map-pin--main{ width:18px; height:18px; }
.map-pin--main::before{ background:var(--orange); animation:map-pulse 2.2s infinite; }
@keyframes map-pulse{
  0%  { box-shadow:0 0 0 0 rgba(255,101,47,.5) }
  70% { box-shadow:0 0 0 11px rgba(255,101,47,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,101,47,0) }
}
.map-pin__label{
  position:absolute; left:50%; top:-30px; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--f-head); font-weight:600; font-size:.78rem;
  background:var(--ink); color:#fff; padding:5px 11px; border-radius:9px;
}
.map-pin__label::after{
  content:""; position:absolute; left:50%; bottom:-4px;
  transform:translateX(-50%) rotate(45deg); width:8px; height:8px; background:var(--ink);
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto; z-index:80;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(250,249,247,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 1px 24px rgba(14,26,43,.06);
}
/* Leesbaarheid boven donkere hero's van binnenpagina's. */
.site-header::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(250,249,247,.92), rgba(250,249,247,0));
  opacity:1; transition:opacity .3s var(--ease);
}
.site-header.scrolled::after{ opacity:0; }

.nav{
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  min-height:var(--header-h);
}
.nav__logo{ display:flex; align-items:center; flex-shrink:0; }
.nav__logo img{ height:38px; width:auto; }

.nav__links,
.nav__links > ul{ display:flex; align-items:center; gap:4px; }
.nav__links{ margin-inline:auto; }
.nav__links a{
  position:relative; padding:9px 15px; border-radius:var(--r-full);
  font-family:var(--f-head); font-weight:600; font-size:.95rem; color:var(--ink);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__links a:hover{ background:rgba(14,26,43,.05); }
.nav__links a.active,
.nav__links .current-menu-item > a,
.nav__links .current_page_item > a,
.nav__links .current-menu-ancestor > a{ color:var(--orange-600); }
.nav__links a.active::after,
.nav__links .current-menu-item > a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:2px;
  height:2px; border-radius:2px; background:var(--orange);
}

.nav__cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav__phone{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-head); font-weight:600; font-size:.95rem; white-space:nowrap;
}
.nav__phone svg{ width:17px; height:17px; color:var(--orange-600); }
.nav__phone:hover{ color:var(--orange-600); }

/* Burger — drie lijnen die naar een kruis morphen. */
.nav__burger{
  display:none; position:relative; width:46px; height:46px;
  border-radius:var(--r-full); border:1px solid var(--line); background:#fff;
}
.nav__burger span,
.nav__burger::before,
.nav__burger::after{
  content:""; position:absolute; left:50%; width:19px; height:2px;
  border-radius:2px; background:var(--ink);
  transition:transform .28s var(--ease), opacity .18s linear;
}
.nav__burger span{ top:50%; transform:translate(-50%,-50%); }
.nav__burger::before{ top:50%; transform:translate(-50%,-8px); }
.nav__burger::after{  top:50%; transform:translate(-50%, 6px); }
.menu-open .nav__burger span{ opacity:0; }
.menu-open .nav__burger::before{ transform:translate(-50%,-1px) rotate(45deg); }
.menu-open .nav__burger::after{  transform:translate(-50%,-1px) rotate(-45deg); }

/* Scroll-voortgang — subtiele oriëntatie op lange pagina's. */
.scroll-progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  transform:scaleX(var(--progress,0)); transform-origin:0 50%;
  background:var(--orange); opacity:0; transition:opacity .3s var(--ease);
}
.site-header.scrolled .scroll-progress{ opacity:1; }

/* ============================================================
   Mobiel menu
   ============================================================ */
.mobile-menu{
  position:fixed; inset:var(--header-h) 0 0; z-index:70;
  display:flex; flex-direction:column; gap:2px;
  padding:22px var(--pad) 40px;
  background:var(--paper);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; translate:0 -12px;
  transition:opacity .26s var(--ease), translate .26s var(--ease), visibility .26s;
}
.menu-open .mobile-menu{ opacity:1; visibility:visible; translate:0 0; }
.menu-open{ overflow:hidden; }
.mobile-menu a{
  font-family:var(--f-head); font-weight:600; font-size:1.35rem;
  padding:16px 4px; border-bottom:1px solid var(--line);
}
.mobile-menu a:last-child{ border-bottom:0; }
.mobile-menu .btn{ margin-top:22px; border-bottom:0; font-size:1.03rem; }
.mobile-menu__phone{ color:var(--orange-600) !important; }

/* ============================================================
   Sticky belbalk (mobiel) — belangrijkste conversieroute lokaal
   ============================================================ */
.callbar{
  position:fixed; inset:auto 0 0; z-index:75; display:none;
  gap:10px; padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  translate:0 110%; transition:translate .3s var(--ease);
}
.callbar.show{ translate:0 0; }
.callbar .btn{ flex:1; min-height:50px; }
.menu-open .callbar{ translate:0 110%; }

/* ============================================================
   WhatsApp-widget — header op desktop, belbalk op mobiel

   De widget spreekt de taal van de site, niet die van WhatsApp. Een teal
   vlak van #075e54 midden in een warm papieren ontwerp met oranje merk
   leest als een ingeplakte plugin. Daarom draagt het paneel de ink-kleur
   van de donkere secties en is oranje de actiekleur, net als overal elders.
   Het WhatsApp-groen blijft over voor wat het écht moet zeggen: dit is
   WhatsApp. Dus het glyph, de online-stip en de avatartint.
   ============================================================ */
:root{
  --wa-green:  #1faa59;   /* 3,4:1 op wit — alleen voor iconen en vlakken */
  --wa-dot:    #25d366;   /* merkgroen, uitsluitend op donker */
}

/* --- trigger ------------------------------------------------ */
.wa-trigger{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-head); font-weight:600; white-space:nowrap;
  letter-spacing:var(--tr-body);
  border-radius:var(--r-full); cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.wa-trigger svg{ width:19px; height:19px; flex-shrink:0; }
.wa-trigger:active{ transform:scale(.98); }

/* In de header een rustige omlijnde pil: de oranje knop ernaast blijft
   de primaire actie, deze staat er als tweede route naast. */
.wa-trigger--nav{
  padding:10px 16px; font-size:.93rem;
  border:1px solid var(--line); background:#fff; color:var(--ink);
}
.wa-trigger--nav svg{ color:var(--wa-green); transition:color var(--dur) var(--ease); }
.wa-trigger--nav:hover,
.wa-trigger--nav[aria-expanded="true"]{
  background:var(--ink); border-color:var(--ink); color:#fff;
}
.wa-trigger--nav:hover svg,
.wa-trigger--nav[aria-expanded="true"] svg{ color:var(--wa-dot); }

/* In de belbalk staat hij naast de oranje belknop. Ink houdt die hiërarchie
   overeind; twee gekleurde knoppen naast elkaar vechten om aandacht. */
.wa-trigger--bar{
  flex:1; min-height:50px; justify-content:center;
  padding:0 14px; font-size:1rem;
  background:var(--ink); border:1px solid var(--ink); color:#fff;
}
.wa-trigger--bar svg{ color:var(--wa-dot); }
.wa-trigger--bar:hover{ background:var(--ink-700); border-color:var(--ink-700); }

/* --- paneel -------------------------------------------------- */
/* Buitenschil en kern: het paneel ligt in een dun bakje in plaats van plat
   op de achtergrond. De binnenradius is de buitenradius min de padding,
   zodat de rondingen concentrisch lopen en de rand niet verspringt. */
.wa__panel{
  position:fixed; z-index:79; width:min(372px, calc(100vw - 32px));
  top:calc(var(--header-h) + 10px); right:clamp(16px,4vw,40px);
  padding:6px;
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sh-lg);
  transform-origin:100% 0;
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.96);
  transition:opacity .28s var(--ease), transform .28s var(--ease),
             visibility 0s linear .28s;
}
.wa__panel.open{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }

.wa__inner{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:calc(var(--r-xl) - 6px);
  background:#fff;
  box-shadow:0 1px 2px rgba(14,26,43,.06);
}

/* Zonder JS blijft de trigger een gewone wa.me-link; het paneel zou dan
   alleen maar in de weg zitten. */
.no-js .wa{ display:none; }
.menu-open .wa__panel{ opacity:0; visibility:hidden; transform:translateY(-10px) scale(.96); }

.wa__head{
  display:flex; align-items:center; gap:12px; padding:14px 15px;
  background:linear-gradient(160deg, var(--ink-700), var(--ink));
  color:#fff;
}
.wa__avatar{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:40px; height:40px; border-radius:50%;
  background:rgba(37,211,102,.16); color:var(--wa-dot);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.wa__avatar svg{ width:21px; height:21px; }
.wa__who{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wa__who b{
  font-family:var(--f-head); font-weight:600; font-size:.97rem; line-height:1.2;
  letter-spacing:var(--tr-body);
}
.wa__status{
  display:flex; align-items:center; gap:7px;
  font-size:.78rem; color:var(--ink-on-muted);
}
.wa__status i{
  width:7px; height:7px; border-radius:50%; background:var(--wa-dot);
  flex-shrink:0; animation:wa-pulse 2.6s infinite;
}
@keyframes wa-pulse{
  0%,70%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  35%{ box-shadow:0 0 0 6px rgba(37,211,102,0); }
}

.wa__close{
  margin-left:auto; flex-shrink:0; position:relative;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.1); border:0; cursor:pointer;
  transition:background var(--dur) var(--ease);
}
.wa__close:hover{ background:rgba(255,255,255,.22); }
.wa__close span,
.wa__close span::after{
  content:""; position:absolute; top:50%; left:50%;
  width:12px; height:1.5px; border-radius:2px; background:#fff;
}
.wa__close span{ transform:translate(-50%,-50%) rotate(45deg); }
.wa__close span::after{ transform:translate(-50%,-50%) rotate(-90deg); }

.wa__body{
  padding:18px 15px 15px; min-height:92px;
  background:var(--paper);
  border-bottom:1px solid var(--line-2);
}
.wa__bubble{
  position:relative; max-width:94%;
  margin:0; padding:11px 14px;
  border-radius:3px 14px 14px 14px;
  background:#fff; border:1px solid var(--line);
  font-size:.92rem; line-height:1.55; color:var(--ink);
  letter-spacing:var(--tr-body);
  box-shadow:0 1px 2px rgba(14,26,43,.04);
  opacity:0; transform:translateY(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.wa__bubble.in{ opacity:1; transform:none; }

.wa__typing{
  display:none; gap:5px; align-items:center;
  width:max-content; padding:13px 15px;
  border-radius:3px 14px 14px 14px;
  background:#fff; border:1px solid var(--line);
}
.wa__typing.on{ display:flex; }
.wa__typing i{
  width:6px; height:6px; border-radius:50%; background:var(--slate-2);
  animation:wa-typing 1.2s infinite;
}
.wa__typing i:nth-child(2){ animation-delay:.16s; }
.wa__typing i:nth-child(3){ animation-delay:.32s; }
@keyframes wa-typing{
  0%,60%,100%{ opacity:.3; transform:translateY(0); }
  30%{ opacity:1; transform:translateY(-3px); }
}

.wa__form{
  display:flex; align-items:flex-end; gap:8px;
  padding:11px; background:#fff;
}
.wa__form textarea{
  flex:1; resize:none;
  max-height:112px; overflow-y:auto;
  padding:10px 14px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--paper);
  font:inherit; font-size:.92rem; line-height:1.45; color:var(--ink);
  letter-spacing:var(--tr-body);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  /* Het veld groeit mee tot 112px en scrollt daarna. De balk die dan
     verschijnt springt in beeld en verspringt de tekst een paar pixels;
     in een vak van vier regels is dat alleen maar rommel. */
  scrollbar-width:none; -ms-overflow-style:none;
}
.wa__form textarea::-webkit-scrollbar{ width:0; height:0; display:none; }
.wa__form textarea::placeholder{ color:var(--slate-2); }
.wa__form textarea:focus{
  outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px var(--orange-tint);
}

/* Oranje, want dit is de verzendknop van de site en niet van WhatsApp. */
.wa__send{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:var(--orange); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease),
             opacity var(--dur) var(--ease);
}
.wa__send svg{ width:18px; height:18px; }
.wa__send:hover{ background:var(--orange-700); transform:scale(1.05); }
.wa__send:active{ transform:scale(.96); }
.wa__send:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

@media (max-width:900px){
  /* Geen zwevende knop: het paneel komt als vel boven de belbalk staan,
     verankerd aan de trigger die daarin zit. */
  .wa__panel{
    top:auto; bottom:calc(78px + env(safe-area-inset-bottom));
    left:12px; right:12px; width:auto;
    transform-origin:50% 100%; transform:translateY(10px) scale(.97);
  }
  .wa__form{ padding-bottom:calc(11px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion:reduce){
  .wa__panel,.wa__bubble{ transition-duration:.01ms; }
  .wa__status i,.wa__typing i{ animation:none; }
  .wa__send:hover,.wa__send:active,.wa-trigger:active{ transform:none; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--ink); color:var(--ink-on-muted);
  padding-block:clamp(56px,7vw,88px) 32px;
}
.footer-grid{
  display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:44px 32px;
}
.footer-logo img{ height:38px; width:auto; margin-bottom:18px; }
.footer-about p{ font-size:.95rem; line-height:1.6; max-width:34ch; }
.footer-col h4{
  font-family:var(--f-head); font-size:.8rem; font-weight:700;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:#fff; margin-bottom:18px;
}
.footer-col ul{ display:grid; gap:11px; }
.footer-col li,.footer-col a{ font-size:.95rem; }
.footer-col a{ transition:color var(--dur) var(--ease); }
.footer-col a:hover{ color:var(--orange); }
.footer-col .is-cta{ color:var(--orange); font-weight:600; }

.biz-row{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:24px;
  font-size:.82rem; color:var(--ink-on-muted);
}
.biz-row b{ color:#fff; font-weight:600; margin-right:5px; }

.footer-meta{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px;
  margin-top:clamp(40px,5vw,64px); padding-top:26px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.84rem;
}
.footer-meta nav{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.footer-meta a:hover{ color:var(--orange); }

/* ============================================================
   Scroll-onthulling
   Belangrijk: zonder JS blijft alles zichtbaar (`.no-js`),
   en bij `prefers-reduced-motion` slaan we de animatie over.
   ============================================================ */
.reveal{ opacity:1; }
.js .reveal{
  opacity:0; translate:0 22px;
  transition:opacity .7s var(--ease), translate .7s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
.js .reveal.in{ opacity:1; translate:0 0; }
.reveal[data-d="1"]{ --d:1 } .reveal[data-d="2"]{ --d:2 }
.reveal[data-d="3"]{ --d:3 } .reveal[data-d="4"]{ --d:4 }

/* Scrub-onthulling per woord (vervangt de GSAP-variant). */
.scrub-line{ display:inline; }
.scrub-word{
  display:inline-block; opacity:.16;
  transition:opacity .45s var(--ease-out);
}
.scrub-word.lit{ opacity:1; }

/* ============================================================
   WordPress-kern
   ============================================================ */
.entry-content > *{ margin-block:1.1em; }
.entry-content > :first-child{ margin-top:0; }
.entry-content h2{ margin-top:1.8em; }
.entry-content h3{ margin-top:1.6em; }
.entry-content a{ color:var(--orange-600); text-decoration:underline; text-underline-offset:3px; }
.entry-content ul,.entry-content ol{ padding-left:1.3em; }
.entry-content ul{ list-style:disc; } .entry-content ol{ list-style:decimal; }
.entry-content li{ margin-block:.4em; }
.entry-content blockquote{
  border-left:3px solid var(--orange); padding-left:22px; font-size:1.1rem;
  color:var(--ink-600); font-style:italic;
}
.entry-content code{ font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9em;
  background:var(--orange-tint); padding:.15em .4em; border-radius:5px; }
.entry-content pre{ background:var(--ink); color:var(--ink-on); padding:20px; border-radius:var(--r);
  overflow-x:auto; }
.entry-content table{ width:100%; border-collapse:collapse; }
.entry-content th,.entry-content td{ border:1px solid var(--line); padding:10px 14px; text-align:left; }

.alignwide{ width:min(1100px,100%); margin-inline:auto; }
.alignfull{ width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw); }
.alignleft{ float:left; margin:.4em 1.6em 1em 0; }
.alignright{ float:right; margin:.4em 0 1em 1.6em; }
.aligncenter{ margin-inline:auto; }
.wp-caption-text,.wp-block-image figcaption{
  font-size:.85rem; color:var(--slate-2); margin-top:9px; text-align:center;
}
.sticky .entry-title::after{ content:" ★"; color:var(--orange); }

.pagination{ display:flex; flex-wrap:wrap; gap:8px; margin-top:56px; justify-content:center; }
.pagination .page-numbers{
  display:grid; place-items:center; min-width:44px; min-height:44px; padding:0 12px;
  border:1px solid var(--line); border-radius:var(--r-full); background:#fff;
  font-family:var(--f-head); font-weight:600; font-size:.92rem;
}
.pagination .page-numbers:hover{ border-color:var(--orange-soft); }
.pagination .current{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ============================================================
   Responsief
   ============================================================ */
@media (max-width:1080px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-about{ grid-column:1 / -1; }
}
@media (max-width:900px){
  :root{ --header-h:70px; }
  .nav__links{ display:none; }
  .nav__phone span{ display:none; }
  .nav__phone{
    width:46px; height:46px; justify-content:center;
    border:1px solid var(--line); border-radius:var(--r-full); background:#fff;
  }
  /* De header-trigger verdwijnt op mobiel; daar zit hij in de belbalk. */
  .nav__cta > .btn,
  .wa-trigger--nav{ display:none; }
  .nav__burger{ display:block; }
  .callbar{ display:flex; }
  body{ padding-bottom:0; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .footer-meta{ flex-direction:column; }
  .btn{ width:100%; }
  .nav__cta .btn,.pill{ width:auto; }
}

/* ============================================================
   Voorkeuren
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; translate:none; }
  .scrub-word{ opacity:1; }
  [data-parallax]{ translate:none !important; }
}

@media (forced-colors:active){
  .btn{ border:2px solid ButtonText; }
  .card,.pill{ border:1px solid CanvasText; }
}