/*
Theme Name: Blinq Twente
Theme URI: https://www.blinq-twente.nl
Author: Blinq Twente
Description: Maatwerk-thema voor Blinq Twente. Diensten, referenties met voor/na-foto's, klantreviews en de eigenaren zijn allemaal aan te passen in het WordPress-beheer. Aanvragen komen binnen via WhatsApp.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blinq
Tags: business, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   Let op: dit bestand bevat de volledige vormgeving van de site.
   De kleuren en lettertypes staan hieronder bij :root. Pas je daar iets aan,
   dan verandert dat op de hele website.
   ========================================================================== */
/* ==========================================================================
   Blinq Twente: Design System
   Merkkleuren en typografie overgenomen uit de Blinq-flyer en het logo.
   Eén stylesheet voor alle pagina's.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Merkkleuren (uit blinq-flyer.html) */
  --navy-deep:  #0A1930;
  --navy:       #12253F;
  --navy-soft:  #1B3654;
  --navy-line:  #3C5A78;
  --lime:       #A6D82B;
  --lime-bright:#B7E23F;
  /* Donkerder groen dan het flyer-groen (#4C8C2B): nodig voor leesbare tekst.
     #4C8C2B haalde maar 4,12:1 op wit; dit haalt 5,79:1 (WCAG AA). */
  --leaf:       #3D7222;
  --ivory:      #F2F1EC;
  --white:      #FFFFFF;

  /* Tekstkleuren */
  --ink:        #10263F;   /* koppen op licht */
  --body:       #3F4E5F;   /* lopende tekst op licht (contrast 7.4:1 op wit) */
  --muted:      #5A6A7B;   /* bijtekst op licht (contrast 5.1:1 op wit) */
  --on-navy:    #FFFFFF;
  --on-navy-dim:#C8D4E2;   /* bijtekst op navy (contrast 8.9:1) */

  /* Statuskleuren */
  --error:      #C0392B;
  --error-bg:   #FDECEA;
  --success:    #2E7D32;
  --success-bg: #EAF6EB;

  /* Vlakken */
  --surface:        var(--white);
  --surface-alt:    var(--ivory);
  --border:         #DFE3E8;   /* decoratieve randen (kaarten) */
  /* Randen van interactieve elementen (invoervelden, keuzekaarten, outline-knoppen).
     WCAG 1.4.11 eist 3:1 voor UI-componenten; dit haalt 4,05:1 op wit. */
  --border-strong:  #767F8C;

  /* Typografie */
  --font-display: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Ruimte: 4/8px ritme */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Vormgeving */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10, 25, 48, 0.06), 0 2px 8px rgba(10, 25, 48, 0.06);
  --shadow:    0 4px 12px rgba(10, 25, 48, 0.08), 0 12px 28px rgba(10, 25, 48, 0.08);
  --shadow-lg: 0 8px 24px rgba(10, 25, 48, 0.12), 0 24px 56px rgba(10, 25, 48, 0.14);
  --shadow-lime: 0 6px 20px rgba(166, 216, 43, 0.35);

  /* Beweging: UI-animaties blijven onder 300ms.
     --ease-out is de sterke curve voor verschijnen, verdwijnen en indrukken:
     die start snel, precies op het moment dat de gebruiker kijkt.
     --ease is zachter en uitsluitend voor kleur- en achtergrondovergangen. */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-snap: 120ms;
  --dur-fast: 150ms;
  --dur:      220ms;

  /* Layout */
  --wrap: 1180px;
  --wrap-narrow: 780px;
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset & basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture { max-width: 100%; display: block; }
img { height: auto; }

/* Browsers geven figure en blockquote standaard een marge van 40px, die halen we weg
   zodat de opmaak hieronder klopt (o.a. de reviewband rekent met exacte breedtes). */
figure, blockquote { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--leaf); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25em; }
li { margin-bottom: var(--space-2); }

strong { color: var(--ink); font-weight: 650; }

/* Zichtbare focus: nooit verwijderen (UX prioriteit 1) */
:focus-visible {
  outline: 3px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-navy :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--lime);
}

/* Skiplink */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  background: var(--lime);
  color: var(--navy-deep);
  font-weight: 700;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  text-decoration: none;
  /* Bewust geen transitie: de skiplink verschijnt op Tab. Toetsenbord-acties
     worden nooit geanimeerd, dat vertraagt precies het moment dat iemand
     hem nodig heeft. (En `top` is een layout-property, dus niet op de GPU.) */
}
.skip-link:focus { top: var(--space-4); color: var(--navy-deep); }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(var(--space-7), 7vw, var(--space-9)); }
.section-tight { padding-block: clamp(var(--space-6), 5vw, var(--space-8)); }
.section--alt { background: var(--surface-alt); }
.section--navy { background: var(--navy-deep); color: var(--on-navy-dim); }
.section--navy h2, .section--navy h3 { color: var(--white); }

.section-head { max-width: 720px; margin-bottom: var(--space-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.08rem; color: var(--muted); }
.section--navy .section-head p { color: var(--on-navy-dim); }

/* De .eyebrow-badges (het kleine groene label met sterretje boven elke kop) en
   de bijbehorende .sparkle zijn verwijderd; de koppen staan nu direct op de
   sectie. De stijlen daarvoor zijn weggehaald zodat er geen dode CSS blijft. */

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Vast 3-koloms raster, gecentreerd op de pagina (6 kaarten = 3 boven, 3 onder).
   Anders vult auto-fit de breedte op met 4 + 2 en staat de tweede rij scheef. */
.grid-3-center {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1020px;
  margin-inline: auto;
}
@media (max-width: 900px) { .grid-3-center { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; } }
@media (max-width: 620px) { .grid-3-center { grid-template-columns: 1fr; max-width: 420px; } }

/* Plekken die de eigenaar nog moet invullen */
.tofill {
  border-bottom: 1.5px dashed var(--border-strong);
  padding-bottom: 1px;
}
.tofill::after {
  content: " ✎";
  font-size: 0.8em;
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   4. Knoppen: min. 44px raakvlak
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  /* box-shadow zit hier niet in: geen enkele hover-state verandert de schaduw,
     dus dat was een overbodige repaint-property. */
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease-out);
}

/* Hover-beweging alleen bij een echte muis. Op touch vuurt een tik een
   hover-state die daarna blijft hangen, de knop zou opgetild blijven staan. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}

/* Indrukken geeft altijd feedback, ook op touch waar geen hover bestaat.
   Staat ná de hover-regel zodat indrukken de lift overschrijft. */
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--lime);
  color: var(--navy-deep);
  box-shadow: var(--shadow-lime);
}
.btn--primary:hover { background: var(--lime-bright); color: var(--navy-deep); }

.btn--dark {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn--dark:hover { background: var(--navy-deep); color: var(--white); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn--outline:hover { border-color: var(--ink); background: var(--white); color: var(--ink); }

.btn--ghost-light {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.16); color: var(--white); }

.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: var(--space-2) var(--space-5); font-size: 0.94rem; }
.btn--lg { min-height: 60px; font-size: 1.08rem; padding-inline: var(--space-7); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --------------------------------------------------------------------------
   5. Header & navigatie
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-header .wrap {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* raakvlak minimaal 44px */
  text-decoration: none;
  flex: none;
}
.brand img { height: 34px; width: auto; }
.brand:focus-visible { outline-offset: 6px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  color: var(--white);
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.1); }

.site-nav { display: flex; align-items: center; gap: var(--space-2); }
/* WordPress zet elk menu-item in een <li>. Een <li> is standaard een
   list-item en krijgt dan een opsommingsteken van de browser, ook zonder
   omhullende <ul>. Daarom hier list-style uit en display op flex: dat haalt
   het teken weg en laat de link op mobiel de volle breedte pakken. */
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.site-nav li { list-style: none; display: flex; }
.site-nav li > a { flex: 1 1 auto; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--on-navy-dim);
  text-decoration: none;
  border-radius: var(--radius-sm);
  /* transform staat erbij omdat deze regel (.site-nav a) specifieker is dan
     .btn en de transitielijst daarvan dus overschrijft. Zonder dit zou de
     press-feedback van de "Plan afspraak"-knop in het menu hard inklikken. */
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }
.site-nav a[aria-current="page"] {
  color: var(--white);
  box-shadow: inset 0 -3px 0 var(--lime);
}
/* De tekstkleur moet hier expliciet staan: .site-nav a is specifieker dan
   .btn--primary en zette de knoptekst op lichtgrijs (--on-navy-dim). Op het
   lime van de knop gaf dat 1,12:1, dus praktisch onleesbaar. Navy op lime
   haalt 10,45:1. */
.site-nav .btn {
  margin-left: var(--space-3);
  color: var(--navy-deep);
}
.site-nav .btn:hover { color: var(--navy-deep); background: var(--lime-bright); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5) var(--space-6);
    background: var(--navy);
    border-bottom: 3px solid var(--lime);
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    width: 100%;
  }
  .site-nav a { min-height: 52px; font-size: 1.05rem; }
  .site-nav a[aria-current="page"] { background: rgba(166, 216, 43, 0.14); box-shadow: none; }
  .site-nav .btn { margin: var(--space-3) 0 0; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(165deg, #173252 0%, var(--navy-deep) 72%);
  color: var(--on-navy-dim);
  overflow: hidden;
  padding-block: clamp(var(--space-7), 8vw, var(--space-9));
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 6%, rgba(166, 216, 43, 0.20), transparent 42%),
    radial-gradient(circle at 4% 92%, rgba(60, 110, 154, 0.28), transparent 46%);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--space-6), 5vw, var(--space-8));
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { color: var(--white); text-transform: uppercase; margin-bottom: var(--space-4); }
.hero h1 .accent { color: var(--lime); display: block; }
.hero-lead { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--on-navy-dim); max-width: 52ch; }

.hero-usps {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}
.hero-usps li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--white);
}
.hero-usps svg { width: 20px; height: 20px; flex: none; color: var(--lime); }

/* Handgeschreven quote-accent (Caveat) */
.script {
  font-family: "Caveat", var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  color: var(--lime);
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   7. Kaarten
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  /* Geen transitie: niets aan een kaart verandert van staat. De vroegere
     .card--hover-variant werd in geen enkele pagina gebruikt en is verwijderd,
     inclusief de box-shadow-transitie die alleen daarvoor bestond. */
}
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--body); font-size: 0.98rem; }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  background: rgba(166, 216, 43, 0.18);
  color: var(--leaf);
}
.card-icon svg { width: 26px; height: 26px; }

.section--navy .card {
  background: var(--navy);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--on-navy-dim);
}
.section--navy .card p { color: var(--on-navy-dim); }
.section--navy .card-icon { background: rgba(166, 216, 43, 0.16); color: var(--lime); }

/* --------------------------------------------------------------------------
   8. Formulier: boeking & offerte
   -------------------------------------------------------------------------- */
/* Aanvraagsectie: toelichting naast het formulier, gestapeld op smalle schermen */
.aanvraag-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
}
@media (max-width: 980px) {
  .aanvraag-grid { grid-template-columns: 1fr; }
}

.form-panel {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border: 1px solid var(--border);
}
.form-panel h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: var(--space-2); }
.form-intro { color: var(--muted); font-size: 0.98rem; margin-bottom: var(--space-5); }

/* Stap 1: keuze afspraak of offerte */
.choice { margin-bottom: var(--space-6); }
.choice-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.choice-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 560px) { .choice-options { grid-template-columns: 1fr; } }

/* display:flex zodat het label de volle hoogte van de rasterrij vult,
   beide keuzekaarten blijven daardoor even hoog, ook als één titel afbreekt. */
.choice-option { position: relative; display: flex; }
.choice-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice-option .choice-card {
  flex: 1;              /* vult de breedte én hoogte van .choice-option */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 76px;
  padding: var(--space-4);
  background: var(--white);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  /* box-shadow (de inset-ring bij 'gekozen') springt direct aan: een selectie
     moet als bevestiging voelen, niet infaden. */
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.choice-option .choice-card svg { width: 26px; height: 26px; flex: none; color: var(--leaf); }
.choice-option .choice-card strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.choice-option .choice-card span { display: block; font-size: 0.86rem; color: var(--muted); line-height: 1.4; }

.choice-option input:hover + .choice-card { border-color: var(--leaf); }
.choice-option input:focus-visible + .choice-card {
  outline: 3px solid var(--leaf);
  outline-offset: 3px;
}
.choice-option input:checked + .choice-card {
  border-color: var(--leaf);
  background: rgba(166, 216, 43, 0.12);
  box-shadow: inset 0 0 0 1px var(--leaf);
}
/* Vinkje bij de gekozen optie */
/* 120ms: statusbevestiging moet direct aanvoelen, 220ms leest als infaden. */
.choice-check { margin-left: auto; color: var(--leaf); opacity: 0; transition: opacity var(--dur-snap) var(--ease-out); }
.choice-option input:checked + .choice-card .choice-check { opacity: 1; }

/* Velden */
.field { margin-bottom: var(--space-5); }
.field label {
  display: block;
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.field .req { color: var(--error); }
.field .hint { display: block; font-weight: 400; font-size: 0.85rem; color: var(--muted); margin-top: 2px; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  /* Alleen de rand animeert; de focusring (box-shadow) springt direct aan,
     zodat focus onmiddellijk zichtbaar is. */
  transition: border-color var(--dur) var(--ease);
}
.field textarea { min-height: 96px; padding-top: var(--space-3); resize: vertical; line-height: 1.55; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310263F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 20px;
  padding-right: var(--space-8);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(76, 140, 43, 0.18);
  outline: none;
}
/* Placeholder donker genoeg om leesbaar te zijn (4,83:1 op wit) */
.field input::placeholder, .field textarea::placeholder { color: #68737F; }

/* Foutmelding direct bij het veld (UX prioriteit 8) */
.field .error-msg {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--error);
  background: var(--error-bg);
  border-radius: var(--radius-sm);
}
.field .error-msg svg { width: 16px; height: 16px; flex: none; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--error); background: #FFFBFA; }
.field.has-error .error-msg { display: flex; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.form-footer { margin-top: var(--space-6); }
.form-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
}
.form-note svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--leaf); }

/* Bevestiging na verzenden */
.form-success {
  display: none;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--success-bg);
  border: 1.5px solid var(--success);
  border-radius: var(--radius);
  color: #1E4620;
  font-size: 0.95rem;
}
.form-success.is-visible { display: flex; }
.form-success svg { width: 22px; height: 22px; flex: none; color: var(--success); margin-top: 2px; }
.form-success strong { display: block; color: #1E4620; font-family: var(--font-display); font-size: 1.05rem; }
.form-success a { color: #1E4620; font-weight: 700; }

/* --------------------------------------------------------------------------
   9. Reviews: doorlopende band van rechts naar links
   -------------------------------------------------------------------------- */
.reviews-viewport {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-2);
  /* Zachte fade aan beide randen */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.reviews-track {
  display: flex;
  width: max-content;
  /* Let op: géén `gap` hier. De lus schuift precies -50% van de spoorbreedte.
     Met gap valt die helft midden in een tussenruimte, waardoor er elke ronde
     een sprong ontstaat. De tussenruimte zit daarom in margin-right op .review,
     zodat één set exact de helft van het spoor is. */
}
/* Animatie start pas als JS de set heeft gedupliceerd (naadloze lus).
   Zonder JS blijft het een gewone, scrollbare rij. */
/* De duur hieronder is een terugval. JavaScript rekent hem uit op basis van de
   werkelijke breedte, zodat de band even langzaam blijft schuiven of er nu zes
   of dertig reviews staan. */
.reviews-track.is-ready { animation: review-scroll 70s linear infinite; }
.reviews-viewport:not(.is-ready) {
  overflow-x: auto;
  -webkit-mask-image: none;
  mask-image: none;
  padding-bottom: var(--space-4);
}
/* De band schuift bewust altijd door: geen pauzeknop, en ook niet stilzetten
   bij hover of focus. Dat is een keuze van de eigenaar. */

@keyframes review-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.review {
  flex: 0 0 340px;
  margin: 0 var(--space-5) 0 0;   /* tussenruimte hoort bij het item, zie .reviews-track */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) { .review { flex-basis: 280px; } }

.stars { display: flex; gap: 2px; color: var(--lime); }
.stars svg { width: 18px; height: 18px; }
.review blockquote { margin: 0; font-size: 0.98rem; color: var(--body); line-height: 1.6; }
.review blockquote::before { content: "“"; }
.review blockquote::after { content: "”"; }
.review-meta { margin-top: auto; display: flex; align-items: center; gap: var(--space-3); }
.review-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--navy);
  color: var(--lime);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}
.review-name { font-weight: 700; color: var(--ink); font-size: 0.95rem; line-height: 1.3; }
.review-place { font-size: 0.85rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   10. Diensten (pagina 2)
   -------------------------------------------------------------------------- */
.service {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(var(--space-5), 4vw, var(--space-7));
  align-items: center;
  padding-block: clamp(var(--space-6), 5vw, var(--space-8));
  border-bottom: 1px solid var(--border);
}
.service:last-of-type { border-bottom: 0; }
.service--flip .service-media { order: 2; }
@media (max-width: 860px) {
  .service { grid-template-columns: 1fr; gap: var(--space-5); }
  .service--flip .service-media { order: 0; }
}

.service-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-alt);
  box-shadow: var(--shadow);
}
.service-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.price-tag {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--lime);
  color: var(--navy-deep);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
}
.price-tag .amount { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; line-height: 1; }
.price-tag .unit { font-size: 0.82rem; font-weight: 700; }
.price-tag--quote { background: var(--navy); color: var(--white); }
.price-tag--quote .amount { font-size: 1.05rem; }

.service-body h2 { margin-bottom: var(--space-3); }
.service-features { list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-5); }
.service-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: 0.98rem;
}
.service-features svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--leaf); }

.price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--surface-alt);
  border-left: 4px solid var(--lime);
  border-radius: var(--radius-sm);
}
.price-line .price-amount {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.price-line .price-unit { font-weight: 650; color: var(--body); }
.price-line .price-note { font-size: 0.87rem; color: var(--muted); width: 100%; }

/* Abonnementsritmes containerreiniging */
.rhythm { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.rhythm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
}
.rhythm-chip svg { width: 16px; height: 16px; color: var(--leaf); }

/* Prijsoverzicht-tabel */
.price-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--white); }
table.price-table { width: 100%; border-collapse: collapse; min-width: 520px; }
table.price-table caption { text-align: left; padding: var(--space-4) var(--space-5) 0; color: var(--muted); font-size: 0.9rem; }
table.price-table th, table.price-table td { padding: var(--space-4) var(--space-5); text-align: left; }
table.price-table thead th {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1.5px solid var(--border);
}
table.price-table tbody tr + tr td { border-top: 1px solid var(--border); }
table.price-table tbody th { font-weight: 700; color: var(--ink); font-size: 1rem; }
table.price-table td.price { font-family: var(--font-display); font-weight: 700; color: var(--ink); white-space: nowrap; }

/* --------------------------------------------------------------------------
   11. Referenties: before/after schuif
   -------------------------------------------------------------------------- */
.ref-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.ba {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--navy);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}
.ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* "Na" ligt bovenop en wordt van links weggeklipt door de schuif.
   Dit is alleen de beginstand, tijdens het slepen zet JS de clip-path direct
   op dit element. Niet via een variabele op .ba: dat zou bij elke pointermove
   de stijl van álle kinderen opnieuw laten berekenen. */
.ba .ba-after { clip-path: inset(0 0 0 50%); }

.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Beginstand voor het geval JS niet draait; JS zet left daarna eenmalig op 0
     en verplaatst de lijn verder met transform, zodat het op de GPU blijft. */
  left: 50%;
  width: 3px;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(10, 25, 48, 0.25);
  pointer-events: none;
}
.ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-deep);
  box-shadow: var(--shadow);
}
.ba-handle svg { width: 22px; height: 22px; }

/* Onzichtbare range-input over de hele afbeelding: toetsenbord + touch */
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}
.ba-range:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
.ba-range::-webkit-slider-thumb { appearance: none; width: 46px; height: 100%; background: transparent; cursor: ew-resize; }
.ba-range::-moz-range-thumb { width: 46px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.ba-range::-moz-range-track { background: transparent; }

.ba-label {
  position: absolute;
  top: var(--space-3);
  padding: 6px var(--space-3);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.ba-label--before { left: var(--space-3); background: rgba(10, 25, 48, 0.82); color: var(--white); }
.ba-label--after  { right: var(--space-3); background: var(--lime); color: var(--navy-deep); }

.ref-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.ref-tag {
  align-self: flex-start;
  padding: 4px var(--space-3);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--leaf);
  background: rgba(166, 216, 43, 0.18);
  border-radius: var(--radius-pill);
}
.ref-body h3 { font-size: 1.15rem; margin: 0; }
.ref-body blockquote { margin: 0; color: var(--body); font-size: 0.97rem; }
.ref-footer {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ref-author { font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.ref-place { font-size: 0.85rem; color: var(--muted); font-weight: 400; }

/* --------------------------------------------------------------------------
   12. Over ons
   -------------------------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(var(--space-6), 5vw, var(--space-8));
  align-items: center;
}
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }

.owner {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 700px) { .owner { grid-template-columns: 1fr; } }
.owner-photo { border-radius: var(--radius); overflow: hidden; background: var(--surface-alt); }
.owner-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.owner-role {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: var(--space-2);
}
.owner h3 { margin-bottom: var(--space-3); }
.owner .script { font-size: 1.25rem; margin-top: var(--space-3); color: var(--leaf); }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  position: relative;
  padding-left: var(--space-7);
  padding-bottom: var(--space-6);
  margin: 0;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 26px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.timeline li:last-child::before { display: none; }
.timeline li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(166, 216, 43, 0.22);
}
.timeline h3 { font-size: 1.1rem; margin-bottom: var(--space-2); }
.timeline .year {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: 2px;
}

.value-card { text-align: left; }

/* --------------------------------------------------------------------------
   13. CTA-band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--on-navy-dim);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 92% 12%, rgba(166, 216, 43, 0.22), transparent 44%);
  pointer-events: none;
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); }
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.cta-inner > div { flex: 1 1 380px; }

/* --------------------------------------------------------------------------
   14. Bedrijfsgegevens & footer
   -------------------------------------------------------------------------- */
/* Drie contactknoppen, gecentreerd; op mobiel onder elkaar en volle breedte */
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
@media (max-width: 620px) {
  .contact-actions { flex-direction: column; align-items: stretch; }
}

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-5); }

.contact-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.contact-item .card-icon { margin-bottom: 0; width: 46px; height: 46px; }
.contact-item .card-icon svg { width: 22px; height: 22px; }
.contact-item h3 { font-size: 1.02rem; margin-bottom: var(--space-1); }
.contact-item a { color: var(--ink); font-weight: 650; text-decoration: none; border-bottom: 1.5px solid var(--lime); }
.contact-item a:hover { color: var(--leaf); }
.contact-item p, .contact-item address { font-size: 0.96rem; font-style: normal; margin: 0; color: var(--body); }

.hours { list-style: none; padding: 0; margin: 0; font-size: 0.96rem; }
.hours li { display: flex; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-1); }
.hours .day { color: var(--body); }
.hours .time { font-weight: 650; color: var(--ink); }

.site-footer {
  background: var(--navy-deep);
  color: var(--on-navy-dim);
  padding-block: var(--space-8) var(--space-5);
  font-size: 0.95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer h4 {
  color: var(--white);
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: var(--space-4);
}
.site-footer img.footer-logo { height: 40px; width: auto; margin-bottom: var(--space-4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer a { color: var(--on-navy-dim); text-decoration: none; }
.site-footer a:hover { color: var(--lime); }
.site-footer address { font-style: normal; }
.footer-tagline { font-family: var(--font-display); color: var(--white); font-size: 1.02rem; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.86rem;
  color: #A9B7C7;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Zwevende WhatsApp/bel-knoppen op mobiel */
.quick-actions {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quick-actions a {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: var(--white);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.quick-actions a:hover { color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .quick-actions a:hover { transform: scale(1.06); }
}
/* Dit zijn de meest aangetikte knoppen op mobiel, ná de hover-regel zodat
   het indrukken altijd zichtbaar is. */
.quick-actions a:active { transform: scale(0.95); }
.quick-actions svg { width: 28px; height: 28px; }
/* WhatsApp' donkere merkgroen (#128C7E) in plaats van het lichte #25D366:
   het witte icoon haalt daarop 4,14:1 in plaats van 1,98:1. */
.qa-whatsapp { background: #128C7E; }
.qa-phone { background: var(--navy); }
@media (min-width: 901px) { .quick-actions { display: none; } }

/* --------------------------------------------------------------------------
   15. Toegankelijkheid
   -------------------------------------------------------------------------- */
/* De scroll-reveal is verwijderd. Die zette inhoud op opacity: 0 en liet JS
   hem weer zichtbaar maken, laadt het script niet, dan bleef de pagina leeg
   (op diensten.html gold dat voor alle zeven dienstblokken). De beweging legde
   niets uit en vertraagde alleen het lezen, dus weghalen was beter dan tunen. */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Respecteer voorkeur voor minder beweging (UX prioriteit 1).
   Let op: "minder" is niet "geen". Kleur-, achtergrond- en opacity-overgangen
   blijven staan, die helpen begrijpen wat er verandert. Alleen beweging
   (transform) verdwijnt. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* transform uit de transitielijst halen: kleurovergangen blijven animeren,
     verplaatsingen worden direct toegepast. */
  *, *::before, *::after {
    transition-property: background-color, color, border-color, opacity, outline-color !important;
  }
  .btn:hover, .btn:active,
  .quick-actions a:hover, .quick-actions a:active { transform: none !important; }

  /* De reviewband blijft ook hier schuiven, dat is een uitdrukkelijke wens.
     JavaScript zet de snelheid wel omlaag, zodat het rustiger oogt. */
}

@media print {
  .site-header, .quick-actions, .reviews-viewport, .skip-link { display: none; }
  body { color: #000; }
}

/* --------------------------------------------------------------------------
   16. Tekstpagina's die de eigenaar zelf aanmaakt
   Bijvoorbeeld algemene voorwaarden of een privacyverklaring. De opmaak uit
   de WordPress-editor krijgt hier passende marges mee.
   -------------------------------------------------------------------------- */
.blinq-tekst > * + * { margin-top: var(--space-4); }
.blinq-tekst h2 { margin-top: var(--space-7); }
.blinq-tekst h3 { margin-top: var(--space-6); }
.blinq-tekst img { border-radius: var(--radius); height: auto; }
.blinq-tekst blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-alt);
  border-left: 4px solid var(--lime);
  border-radius: var(--radius-sm);
}
.blinq-tekst figure { margin: var(--space-5) 0; }
.blinq-tekst figcaption { font-size: 0.9rem; color: var(--muted); margin-top: var(--space-2); }
.blinq-tekst table { width: 100%; border-collapse: collapse; }
.blinq-tekst th, .blinq-tekst td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.blinq-tekst ul, .blinq-tekst ol { padding-left: 1.4em; }

/* WordPress-uitlijning in de editor */
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-5); }
.alignleft  { float: left;  margin: 0 var(--space-5) var(--space-4) 0; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}