/*
Theme Name: FQD
Theme URI: https://franklinqd.nl/
Template: twentytwentyfive
Author: Franklin D Handelsonderneming
Description: Child theme van Twenty Twenty-Five voor FQD in Velsen-Noord. Donker of licht, redactioneel en toegankelijk, met patronen voor voorraad, werkplaats, tijdlijn, opslag en contact. Het moederthema levert de structuur en de updates; dit thema levert het ontwerp.
Version: 3.10.1
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fqd
Tags: full-site-editing, block-patterns, dark, business, accessibility-ready
*/

/* =========================================================================
   Tokens.
   De waarden staan in theme.json, zodat ze ook in de blokeditor te kiezen
   zijn. Hieronder alleen de koppeling naar kortere namen, met een fallback
   voor het geval de stylesheet los van WordPress wordt bekeken.
   ========================================================================= */
:root {
  --fqd-ink:        var(--wp--preset--color--ink, #0e0d0c);
  --fqd-surface:    var(--wp--preset--color--surface, #171413);
  --fqd-surface-2:  var(--wp--preset--color--surface-2, #211d1b);
  --fqd-surface-3:  var(--wp--preset--color--surface-3, #2b2624);
  --fqd-text:       var(--wp--preset--color--text, #f4f0ec);
  --fqd-muted:      var(--wp--preset--color--muted, #a9a09a);
  --fqd-muted-2:    var(--wp--preset--color--muted-2, #918981);
  --fqd-red:        var(--wp--preset--color--red, #e63023);

  /* Het logorood zelf is #e63023. Prachtig als accent, maar wit erop haalt
     maar 4,36:1 en dat is net te weinig. Alleen wáár het als vlak achter
     witte tekst ligt gebruiken we deze fractie diepere variant: 5,1:1, en
     naast elkaar zie je het verschil niet. */
  --fqd-red-fill:   #d42a1d;
  --fqd-red-bright: var(--wp--preset--color--red-bright, #f2634f);

  --fqd-hairline:   rgba(243, 239, 236, 0.10);
  --fqd-hairline-2: rgba(243, 239, 236, 0.16);
  --fqd-red-dim:    rgba(230, 48, 35, 0.14);
  --fqd-red-edge:   rgba(230, 48, 35, 0.30);
  --fqd-red-faint:  rgba(230, 48, 35, 0.07);
  --fqd-red-hover:  #f2412f;
  --fqd-text-strong:#ffffff;

  --fqd-veil-faint: rgba(244, 240, 236, 0.025);
  --fqd-veil:       rgba(244, 240, 236, 0.035);
  --fqd-veil-2:     rgba(244, 240, 236, 0.06);
  --fqd-veil-3:     rgba(244, 240, 236, 0.09);
  --fqd-inner-light:rgba(255, 255, 255, 0.06);
  --fqd-on-primary: rgba(14, 13, 12, 0.09);
  --fqd-on-red:     rgba(255, 255, 255, 0.18);

  --fqd-nav-bg:     rgba(23, 20, 19, 0.72);
  --fqd-overlay:    rgba(14, 13, 12, 0.88);
  --fqd-glow-1:     rgba(230, 48, 35, 0.15);
  --fqd-glow-2:     rgba(120, 96, 88, 0.14);
  --grain-opacity:  0.035;
  --grain-blend:    normal;

  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;

  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;  --r-pill: 999px;

  --font-display: var(--wp--preset--font-family--display, "Archivo", "Helvetica Neue", Arial, sans-serif);
  --font-body:    var(--wp--preset--font-family--body, "Instrument Sans", system-ui, sans-serif);

  --fs-base:  var(--wp--preset--font-size--base, 1.0625rem);
  --fs-h2:    var(--wp--preset--font-size--h-2, clamp(2rem, 4vw, 3.1rem));
  --fs-h3:    var(--wp--preset--font-size--h-3, clamp(1.25rem, 1.8vw, 1.6rem));
  --fs-lead:  var(--wp--preset--font-size--lead, clamp(1.05rem, 1.4vw, 1.3rem));
  --fs-sm:    var(--wp--preset--font-size--sm, 0.9375rem);
  --fs-xs:    var(--wp--preset--font-size--xs, 0.8125rem);
  --fs-label: 0.6875rem;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 420ms;
  --dur-slow: 780ms;

  --z-sticky: 20;  --z-overlay: 40;  --z-modal: 60;  --z-grain: 80;

  --shadow-warm: 0 30px 70px -30px rgba(0, 0, 0, 0.85),
                 0 2px 8px -2px rgba(0, 0, 0, 0.5);
}

/* =========================================================================
   Licht palet.
   Geen omkering van het donkere — dat geeft grauw grijs en een rood dat
   op wit niet leesbaar is. Dit is een eigen set: warm papier in plaats van
   wit, en een dieper rood dat 5.4:1 haalt.

   De waarden staan hier als letterlijke kleur en niet als theme.json-preset,
   omdat theme.json maar één palet kent. Wil je ze kunnen kiezen in de
   editor, dan moeten het extra presets worden (bijv. "ink-licht").

   Het attribuut heet data-fqd-theme, niet data-theme: dat laatste gebruikt
   WordPress zelf en zou botsen.
   ========================================================================= */
:root[data-fqd-theme="light"] {
  --fqd-ink:        #f6f3f0;
  --fqd-surface:    #fffdfb;
  --fqd-surface-2:  #efe9e4;
  --fqd-surface-3:  #e6ded8;
  --fqd-text:       #1a1614;
  --fqd-text-strong:#000000;
  --fqd-muted:      #665d58;   /* 5.8:1 */
  --fqd-muted-2:    #6f655f;   /* 5.1:1 */

  /* Blokken die je in de editor de kleur "muted" geeft, pakken niet onze
     variabele maar de preset uit theme.json. Die staat vast op de donkere
     waarde, dus in de lichte weergave bleef die tekst lichtgrijs op bijna
     wit — de alinea in de voettekst haalde zo maar 2,1:1. Hier zetten we
     de presets mee om, dan volgen alle blokken vanzelf. */
  --wp--preset--color--muted:   #665d58;
  --wp--preset--color--muted-2: #6f655f;
  --fqd-red:        #e63023;   /* ook hier het echte logorood als accent */
  --fqd-red-fill:   #d42a1d;   /* en de diepere variant onder witte tekst */
  --fqd-red-hover:  #b8231a;
  --fqd-red-bright: #b8231a;   /* 5.6:1 op het lichte vlak */

  --fqd-hairline:   rgba(26, 22, 20, 0.12);
  --fqd-hairline-2: rgba(26, 22, 20, 0.20);
  --fqd-red-dim:    rgba(212, 42, 29, 0.10);
  --fqd-red-edge:   rgba(212, 42, 29, 0.28);
  --fqd-red-faint:  rgba(212, 42, 29, 0.05);

  --fqd-veil-faint: rgba(26, 22, 20, 0.03);
  --fqd-veil:       rgba(26, 22, 20, 0.045);
  --fqd-veil-2:     rgba(26, 22, 20, 0.055);
  --fqd-veil-3:     rgba(26, 22, 20, 0.09);
  --fqd-inner-light:rgba(255, 255, 255, 0.9);
  --fqd-on-primary: rgba(244, 240, 236, 0.16);

  --fqd-nav-bg:     rgba(255, 253, 251, 0.78);
  --fqd-overlay:    rgba(246, 243, 240, 0.94);
  --fqd-glow-1:     rgba(200, 64, 42, 0.10);
  --fqd-glow-2:     rgba(160, 120, 100, 0.10);
  --grain-opacity:  0.022;
  --grain-blend:    multiply;

  --shadow-warm: 0 24px 50px -28px rgba(60, 40, 32, 0.28),
                 0 2px 6px -2px rgba(60, 40, 32, 0.12);
}

/* Body volgt het palet; zonder deze regel houdt WordPress zijn eigen
   achtergrond uit theme.json aan en blijft de pagina donker. */
:root[data-fqd-theme] body {
  background-color: var(--fqd-ink);
  color: var(--fqd-text);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* =========================================================================
   Zon/maan-schakelaar
   ========================================================================= */
.fqd-theme-toggle {
  position: relative;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: var(--fqd-veil-2);
  color: var(--fqd-text);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fqd-theme-toggle:hover { background: var(--fqd-veil-3); }
.fqd-theme-toggle:active { transform: scale(0.94); }

.fqd-theme-toggle svg {
  grid-area: 1 / 1;
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}
.fqd-theme-toggle .icon-sun  { opacity: 1; transform: none; }
.fqd-theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.4); }

:root[data-fqd-theme="light"] .fqd-theme-toggle .icon-sun  { opacity: 0; transform: rotate(90deg) scale(0.4); }
:root[data-fqd-theme="light"] .fqd-theme-toggle .icon-moon { opacity: 1; transform: none; }

/* =========================================================================
   Basis
   ========================================================================= */
html { scroll-behavior: smooth; }
body {
  /* overflow-x: hidden maakt van body een scrollcontainer, en daarmee sneuvelt
     position: sticky op alles wat erin zit — de kop bleef daardoor niet staan.
     clip knipt net zo goed af maar laat het scrollen met rust. De regel
     erboven blijft staan als terugval voor browsers zonder clip. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================================
   De basis terugpakken van Bootstrap.

   Op deze site laadt een oude plugin bootstrap.min.css op elke pagina. Die
   begint met twee regels die alles hier onderuit halen:

       html { font-size: 10px }
       body { font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial }

   De eerste is de oude 62,5%-truc. Elke rem in dit thema — letters én
   afstanden — werd daardoor 37,5% te klein: de keurmerkregel onder de hero
   stond op 9,4px in plaats van 15px, en de vinkjes ernaast zijn een vaste
   13x8px, dus die liepen uit het lood. De tweede regel verving Archivo
   en Instrument Sans door Helvetica.

   Wat uit theme.json komt verliest het, want dat is ook maar `body` en
   `h1..h6` — gelijke specificiteit, en Bootstrap staat later in de pagina.
   Daarom hier selectoren die wel winnen, zonder !important:

     html:root      = 0,1,1  tegen  html  = 0,0,1
     .wp-site-blocks = 0,1,0  tegen  body  = 0,0,1

   Bootstrap zelf blijft gewoon laden; alleen deze twee regels neutraliseren
   we. Zo blijft werken wat er verder op leunt.
   ========================================================================= */
html:root { font-size: 100%; }

.wp-site-blocks {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
}

/* Bootstrap zet h1..h6 op font-family: inherit, dus zonder deze regel erven
   de koppen Helvetica van body. Het zet ook vaste groottes (h1 op 36px), dus
   die moeten hier ook staan. :where() houdt de specificiteit op 0,1,0, zodat
   elke regel verderop in dit bestand er nog overheen kan.

   Let op de variabelenamen: WordPress maakt van de slug `h2` het token
   `--wp--preset--font-size--h-2`, met een streepje. Stond er `--h2`, dan
   bestond de variabele niet, viel de hele declaratie weg en won Bootstrap.
   Precies daardoor stond "Nu op het terrein" op 17px in plaats van 50px. */
.wp-site-blocks :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.wp-site-blocks :where(h1) { font-size: var(--wp--preset--font-size--display, 5.2rem); }
.wp-site-blocks :where(h2) { font-size: var(--fs-h2); }
.wp-site-blocks :where(h3) { font-size: var(--fs-h3); }
.wp-site-blocks :where(h4) { font-size: var(--fs-lead); }
.wp-site-blocks :where(h5, h6) { font-size: var(--fs-base); }

/* Formuliervelden erven hun letter niet vanzelf. */
.wp-site-blocks :where(input, select, textarea, button) { font-family: inherit; }

/* Linkkleur veiligstellen.

   Op deze site laadt de Car Dealer-plugin Bootstrap op elke pagina, en die
   zet a { color: #337ab7 }. De regel die theme.json genereert is
   a:where(:not(.wp-element-button)) en heeft dezelfde specificiteit (0,0,1),
   dus wie het laatst in de pagina staat wint — en dat is de plugin. Zonder
   dit blok waren 22 links op de homepage Bootstrap-blauw.

   .wp-site-blocks ervoor zetten maakt het 0,1,1: genoeg om te winnen, laag
   genoeg zodat elke regel verderop in dit bestand er nog overheen kan. Het
   :where() rond :not() houdt die specificiteit vlak. */
.wp-site-blocks a:where(:not(.wp-element-button)) { color: var(--fqd-text); }
.wp-site-blocks a:where(:not(.wp-element-button)):hover { color: var(--fqd-red-bright); }

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
img { max-width: 100%; height: auto; }   /* height:auto, anders wint het height-attribuut van aspect-ratio */

:focus-visible {
  outline: 2px solid var(--fqd-red-bright);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.tabular { font-variant-numeric: tabular-nums; }

/* De koptekst zweeft boven de pagina. Zonder deze marge springt een
   ankerlink precies zó ver dat de kop eronder verdwijnt. */
:where([id]:not(body):not(html)) { scroll-margin-top: 6.5rem; }

/* =========================================================================
   Autodetailpagina
   ========================================================================= */
.fqd-crumbs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  list-style: none; margin: 0 0 var(--sp-5); padding: 0;
  font-size: var(--fs-sm); color: var(--fqd-muted-2);
}
.fqd-crumbs li::after { content: "/"; margin-left: var(--sp-2); opacity: 0.5; }
.fqd-crumbs li:last-child::after { content: none; }
.fqd-crumbs a { text-decoration: none; color: var(--fqd-muted); }

/* min-width:0 is nodig: anders duwt de fotostrook het raster open in
   plaats van zelf te scrollen. */
.fqd-vehicle-top > * { min-width: 0; }

.fqd-gallery__main { position: relative; }
.fqd-gallery__main img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.fqd-gallery__count {
  position: absolute; right: var(--sp-4); bottom: var(--sp-4);
  background: var(--fqd-overlay); backdrop-filter: blur(8px);
}

.fqd-gallery__strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 96px;
  gap: var(--sp-2); margin-top: var(--sp-3);
  overflow-x: auto; padding-bottom: var(--sp-2);
}
.fqd-gallery__thumb {
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--fqd-hairline);
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fqd-gallery__thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.fqd-gallery__thumb:hover { opacity: 0.85; }
.fqd-gallery__thumb[aria-current="true"] { opacity: 1; box-shadow: inset 0 0 0 2px var(--fqd-red-bright); }

.fqd-summary { padding: var(--sp-6); }
.fqd-summary__brand {
  font-size: var(--fs-label) !important; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fqd-muted-2); font-weight: 600; margin: 0 !important;
}
/* Prijzen staan bewust niet in het rood. Quincy: rood schrikt af bij een
   bedrag. Ze krijgen daarom gewoon de tekstkleur — bijna wit in de donkere
   weergave, bijna zwart in de lichte. Het rood blijft voor doorkliks. */
.fqd-summary__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.75rem) !important; font-weight: 700; letter-spacing: -0.04em;
  color: var(--fqd-text); margin: var(--sp-5) 0 0 !important;
}
.fqd-summary__vat { font-size: var(--fs-xs) !important; color: var(--fqd-muted-2); margin: 2px 0 0 !important; }

.fqd-keyspecs {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--fqd-hairline);
  margin: var(--sp-5) 0; border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 0 0 1px var(--fqd-hairline);
}
.fqd-keyspecs > * { background: var(--fqd-surface); padding: var(--sp-3) var(--sp-4); margin: 0; }
.fqd-keyspecs__label { font-size: var(--fs-xs) !important; color: var(--fqd-muted-2); margin: 0 !important; }
.fqd-keyspecs__value { font-weight: 600; font-size: var(--fs-sm) !important; margin: 2px 0 0 !important; }

.fqd-specs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.fqd-specs__grid h3 {
  font-size: var(--fs-label) !important; letter-spacing: 0.18em; text-transform: uppercase;
  font-family: var(--font-body) !important; font-weight: 600;
  color: var(--fqd-red-bright); margin-bottom: var(--sp-4);
}
.fqd-spec-row {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-3); border-bottom: 1px solid var(--fqd-hairline);
}
.fqd-spec-row p { margin: 0; font-size: var(--fs-sm); }
.fqd-spec-row p:first-child { color: var(--fqd-muted); }
.fqd-spec-row p:last-child { font-weight: 600; text-align: right; }

.fqd-options__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.fqd-options__grid h3 {
  font-size: var(--fs-label) !important; letter-spacing: 0.18em; text-transform: uppercase;
  font-family: var(--font-body) !important; font-weight: 600;
  color: var(--fqd-muted-2); margin-bottom: var(--sp-4);
}
.fqd-options { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.fqd-options li { position: relative; padding-left: var(--sp-5); font-size: var(--fs-sm); color: var(--fqd-muted); }
.fqd-options li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 11px; height: 6px;
  border-left: 1.6px solid var(--fqd-red-bright);
  border-bottom: 1.6px solid var(--fqd-red-bright);
  transform: rotate(-45deg);
}

.fqd-description { max-width: 68ch; }
.fqd-description p { margin-bottom: var(--sp-4); color: var(--fqd-muted); }
.fqd-description p:first-of-type { font-size: var(--fs-lead); color: var(--fqd-text); line-height: 1.6; }

@media (max-width: 1020px) {
  .fqd-specs__grid, .fqd-options__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .fqd-specs__grid, .fqd-options__grid { grid-template-columns: 1fr; }
  .fqd-summary { padding: var(--sp-5); }
}

/* Skip-link — WordPress plaatst deze zelf niet in blokthema's */
.fqd-skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  z-index: var(--z-modal);
  transform: translateY(-200%);
  background: var(--fqd-text); color: var(--fqd-ink);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  font-weight: 600; text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.fqd-skip-link:focus { transform: translateY(0); }

/* Filmkorrel over de hele pagina */
.fqd-grain {
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   Onderdelen — als blokstijlen bruikbaar via extra CSS-klasse
   ========================================================================= */
.fqd-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-label) !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fqd-red-bright);
  margin-bottom: var(--sp-4);
}
.fqd-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.7; }

.fqd-lead { font-size: var(--fs-lead); color: var(--fqd-muted); max-width: 58ch; line-height: 1.6; }

/* Dubbele bezel: buitenschil + binnenkern met concentrische radii */
.fqd-bezel {
  padding: 6px;
  border-radius: var(--r-xl);
  background: var(--fqd-veil);
  box-shadow: inset 0 0 0 1px var(--fqd-hairline);
}
.fqd-bezel > * {
  border-radius: calc(var(--r-xl) - 6px);
  background: var(--fqd-surface);
  box-shadow: inset 0 1px 0 var(--fqd-inner-light);
  overflow: hidden;
}
.fqd-panel { padding: var(--sp-7); height: 100%; }

/* Panelen naast elkaar even hoog maken.

   In een kolommenblok rekt WordPress de kolommen wel op tot de hoogste,
   maar niet wat erin staat. Bij "Waarom FQD" stond links een paneel van
   423px naast twee van samen 510px: 87px lege ruimte onder de linkerkaart,
   en de onderranden liepen dus niet gelijk.

   De kolom wordt hier zelf een flexkolom, zodat de kaart erin de resterende
   hoogte pakt. :has() kiest alleen de kolommenblokken die ook echt een
   paneel bevatten — andere kolommen op de site blijven ongemoeid. */
.wp-block-columns:has(.fqd-panel) > .wp-block-column {
  display: flex;
  flex-direction: column;
}
.wp-block-columns:has(.fqd-panel) > .wp-block-column > .fqd-bezel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.wp-block-columns:has(.fqd-panel) > .wp-block-column > .fqd-bezel > .fqd-panel {
  flex: 1 1 auto;
}
.fqd-panel > :where(p) { color: var(--fqd-muted); font-size: var(--fs-sm); }

/* Chips */
.fqd-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--fqd-veil-2);
  box-shadow: inset 0 0 0 1px var(--fqd-hairline);
  font-size: var(--fs-xs);
  color: var(--fqd-muted);
  white-space: nowrap;
}
.fqd-chip--accent {
  background: var(--fqd-red-dim);
  color: var(--fqd-red-bright);
  box-shadow: inset 0 0 0 1px var(--fqd-red-edge);
}

/* =========================================================================
   Knoppen — core/button met onze eigen huid
   ========================================================================= */
.wp-block-button__link {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-5);
  letter-spacing: -0.01em;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.wp-block-button__link:active { transform: scale(0.977); }

.wp-block-button.is-style-fqd-primary .wp-block-button__link {
  background: var(--fqd-text); color: var(--fqd-ink);
}
.wp-block-button.is-style-fqd-primary .wp-block-button__link:hover { background: var(--fqd-text-strong); }

.wp-block-button.is-style-fqd-red .wp-block-button__link {
  background: var(--fqd-red-fill); color: #fff;         /* 5.1:1, haalt AA in beide weergaven */
}
.wp-block-button.is-style-fqd-red .wp-block-button__link:hover { background: var(--fqd-red-hover); }

.wp-block-button.is-style-fqd-ghost .wp-block-button__link {
  background: transparent; color: var(--fqd-text);
  box-shadow: inset 0 0 0 1px var(--fqd-hairline-2);
}
.wp-block-button.is-style-fqd-ghost .wp-block-button__link:hover { background: var(--fqd-veil-2); }

/* Pijl in een eigen rondje, rechts in de knop */
.wp-block-button.has-arrow .wp-block-button__link::after {
  content: "";
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: var(--r-pill);
  background-color: var(--fqd-on-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230e0d0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  margin-left: auto;
  transition: transform var(--dur) var(--ease);
}
.wp-block-button.has-arrow .wp-block-button__link:hover::after { transform: translate(3px, -2px) scale(1.06); }
.wp-block-button.has-arrow.is-style-fqd-red .wp-block-button__link::after,
.wp-block-button.has-arrow.is-style-fqd-ghost .wp-block-button__link::after {
  background-color: var(--fqd-on-red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f4f0ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* =========================================================================
   Header — zwevende glazen pil
   ========================================================================= */
.fqd-header {
  position: sticky; top: 0;
  z-index: var(--z-sticky);
  padding-top: var(--sp-5);
  transition: padding-top var(--dur) var(--ease);
}
.fqd-header.is-scrolled { padding-top: var(--sp-3); }

.fqd-nav-shell {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-5);
  /* Links staat het logo, rechts eindigt de balk op ronde knopjes. Die
     willen strak tegen de rand, anders bungelen ze in de lucht; het logo
     heeft juist ruimte nodig. Vandaar links meer dan rechts. */
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--fqd-nav-bg);
  box-shadow: inset 0 0 0 1px var(--fqd-hairline), var(--shadow-warm);
}

/* De vervaging staat op een laagje eronder, niet op de balk zelf.

   Reden: een element met backdrop-filter wordt het referentiekader voor
   alles wat erin position:fixed is. Het uitklapmenu van WordPress is
   fixed en vult normaal het scherm — maar met de vervaging op deze balk
   mat het zich af tegen de balk. Op de telefoon kwam er dan een doosje
   van 327x64px tevoorschijn met alleen "Home" erin, en was het menu dus
   onbruikbaar. Op een pseudo-element blijft het glaseffect hetzelfde en
   is de balk geen referentiekader meer. */
.fqd-nav-shell::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  pointer-events: none;
}
/* Het logo. Het merk is bijna vierkant (1181x1025), dus we sturen op hoogte.

   Twee versies in de HTML, hier wisselen we ze om. De F en D zijn wit in de
   diapositieve versie en leisteen in de gewone; op een lichte balk viel die
   witte versie volledig weg. De Q blijft in allebei het logorood.

   margin-right: auto duwt de rest van de balk naar rechts, wat eerst de
   site-titel deed. */
.fqd-logo {
  display: inline-flex;
  margin-right: auto;
  line-height: 0;
}
.fqd-logo__img { display: block; height: 44px; width: auto; }
.fqd-logo__img--licht { display: none; }

:root[data-fqd-theme="light"] .fqd-logo__img--donker { display: none; }
:root[data-fqd-theme="light"] .fqd-logo__img--licht  { display: block; }

@media (max-width: 620px) {
  .fqd-logo__img { height: 34px; }
}

/* In de voettekst mag het merk iets ruimer staan; daar staat het alleen,
   zonder menu ernaast. margin-right: auto is daar niet nodig. */
.fqd-logo--voet { margin-right: 0; }
.fqd-logo--voet .fqd-logo__img { height: 56px; }
@media (max-width: 620px) {
  .fqd-logo--voet .fqd-logo__img { height: 46px; }
}

/* De twee knopjes rechts horen bij elkaar: weergave omschakelen en bellen.
   Ze zitten in een eigen doosje, want de balk verdeelt zijn vrije ruimte met
   space-between — los van elkaar stonden ze 156px uit elkaar. */
.fqd-nav-acties { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }

/* Bellen vanuit de balk. Hier stond het nummer voluit, en dat moest onder
   1020px verdwijnen omdat het niet meer paste. Als rond knopje past het
   overal, ook op een telefoon — en juist daar wil je die knop hebben. */
.fqd-nav-bel {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--fqd-veil-2);
  color: var(--fqd-text);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fqd-nav-bel:hover { background: var(--fqd-veil-3); color: var(--fqd-red-bright); }
.fqd-nav-bel:active { transform: scale(0.94); }
.fqd-nav-bel svg { display: block; }

/* WordPress klapt het menu pas onder 600px in. Met zeven items past het
   daarboven allang niet meer: op 900px stak de balk 102px buiten zijn eigen
   vak, wikkelde "Over ons" over twee regels en viel "Contact" eraf. Daarom
   hier het uitklapmenu al vanaf 1119px. */
@media (max-width: 1119px) {
  .fqd-nav-shell .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .fqd-nav-shell .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

.fqd-nav-shell .wp-block-navigation { font-size: var(--fs-sm); }
.fqd-nav-shell .wp-block-navigation-item__content {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-pill);
  color: var(--fqd-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.fqd-nav-shell .wp-block-navigation-item__content:hover { color: var(--fqd-text); background: var(--fqd-veil-2); }
.fqd-nav-shell .current-menu-item > .wp-block-navigation-item__content {
  color: var(--fqd-text); background: var(--fqd-veil-3);
}

/* Het openklap-menu van core krijgt dezelfde glaslaag */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--fqd-overlay) !important;
  backdrop-filter: blur(28px);
  padding: var(--sp-8) var(--sp-5);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  letter-spacing: -0.04em;
  color: var(--fqd-text);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--fqd-hairline);
  border-radius: 0;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  min-width: 48px; min-height: 48px;   /* ruim aanraakdoel */
  /* Het knopje is 48 bij 48 zodat een vinger het makkelijk raakt, maar het
     icoontje erin is 24 bij 24 en hing bovenin dat vak. Daardoor stond de
     hamburger twaalf pixels te hoog in de balk, terwijl het logo en de
     weergaveknop er wel netjes middenin stonden.

     Alleen uitlijnen, geen display hier: core gebruikt display om het
     knopje op een groot scherm te verbergen. */
  align-items: center;
  justify-content: center;
}

/* Het menu staat op een groot scherm rechts uitgelijnd — dat is de
   justifyContent van het navigatieblok zelf. Klapt het uit op de telefoon,
   dan wordt die rij een kolom en erft die dezelfde uitlijning: alle items
   plakten tegen de rechterrand. Links hoort het, op dezelfde lijn als de
   koppen en de tekst van de pagina eronder (allebei 24px van de rand). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right {
  align-items: flex-start;
}

/* =========================================================================
   Formulieren (Contact Form 7)

   Contact Form 7 levert kale invoervelden: witte blokken met een systeemrand.
   Hieronder krijgen ze dezelfde donkere vlakken, ronding en focusring als de
   rest van de site, en volgen ze de lichte weergave vanzelf omdat alles op
   de themavariabelen staat.

   Let op de <p> en <br> in de selectors: CF7 zet zijn eigen alinea's om de
   velden heen, ook als je in de sjabloon netjes divs gebruikt. Die <br>
   tussen twee labels in een rij zetten we uit, anders valt de tweede kolom
   eronder in plaats van ernaast.
   ========================================================================= */
.fqd-form { margin-top: var(--sp-6); }

.fqd-form p { margin: 0 0 var(--sp-4); }

.fqd-form__blok {
  margin: 0 0 var(--sp-6);
  padding: 0;
  border: 0;
}
.fqd-form__blok legend {
  padding: 0 0 var(--sp-3);
  width: 100%;
  border-bottom: 1px solid var(--fqd-hairline);
  margin-bottom: var(--sp-5);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fqd-muted);
}

/* Twee velden naast elkaar, en onder 640px onder elkaar. */
.fqd-form__rij > p {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.fqd-form__rij > p > br { display: none; }

.fqd-form__veld {
  flex: 1 1 200px;
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fqd-text);
}
.fqd-form__veld--vol { flex-basis: 100%; }

.fqd-form__hint {
  font-weight: 400;
  color: var(--fqd-muted);
}

.fqd-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: var(--sp-2);
}

.fqd-form input[type="text"],
.fqd-form input[type="tel"],
.fqd-form input[type="email"],
.fqd-form input[type="number"],
.fqd-form textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-radius: 12px;
  background: var(--fqd-veil-2);
  box-shadow: inset 0 0 0 1px var(--fqd-hairline-2);
  color: var(--fqd-text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fqd-form textarea {
  min-height: 120px;
  padding-top: var(--sp-3);
  resize: vertical;
}
.fqd-form input::placeholder,
.fqd-form textarea::placeholder { color: var(--fqd-muted); opacity: 1; }

.fqd-form input:hover,
.fqd-form textarea:hover { background: var(--fqd-veil-3); }

.fqd-form input:focus,
.fqd-form textarea:focus {
  outline: 2px solid var(--fqd-red-bright);
  outline-offset: 2px;
  background: var(--fqd-veil-3);
}

/* Het pijltje van een getalveld is in de donkere weergave onzichtbaar; de
   waarde typen werkt prima, dus die halen we weg. */
.fqd-form input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.fqd-form input[type="number"]::-webkit-outer-spin-button,
.fqd-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Het vinkje voor inruil. */
.fqd-form__vink label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--fqd-text);
}
.fqd-form__vink input[type="checkbox"] {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  accent-color: var(--fqd-red-fill);
  cursor: pointer;
}
.fqd-form__vink .wpcf7-list-item { margin: 0; }

/* De verzendknop krijgt dezelfde vorm als "Bekijk het aanbod". */
.fqd-form__verzend > p {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: 0;
}
.fqd-form input[type="submit"] {
  min-height: 52px;
  padding: var(--sp-3) var(--sp-6);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fqd-text);
  color: var(--fqd-ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.fqd-form input[type="submit"]:hover { background: var(--fqd-text-strong); }
.fqd-form input[type="submit"]:active { transform: scale(0.977); }

/* Meldingen: rood alleen waar het echt misgaat, groen als het gelukt is. */
.fqd-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--sp-2);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fqd-red-bright);
}
.fqd-form input.wpcf7-not-valid,
.fqd-form textarea.wpcf7-not-valid {
  box-shadow: inset 0 0 0 1px var(--fqd-red-bright);
}

.wpcf7 .wpcf7-response-output {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4) var(--sp-5);
  border: 0;
  border-radius: 14px;
  background: var(--fqd-veil-2);
  box-shadow: inset 0 0 0 1px var(--fqd-hairline-2);
  color: var(--fqd-text);
  font-size: var(--fs-sm);
}
/* CF7 zet zelf een oranje rand van 2px om de melding en een groene als het
   verstuurd is. Die selectors wegen zwaarder dan de regel hierboven, dus we
   halen de rand hier per toestand weg en laten de ring het werk doen. */
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border: 0 !important;
  border-radius: 14px;
  background: var(--fqd-veil-2);
  color: var(--fqd-text);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  box-shadow: inset 0 0 0 1px var(--fqd-red-edge);
}

.wpcf7-spinner { margin: 0; }

@media (max-width: 640px) {
  .fqd-form__rij > p { gap: var(--sp-4); }
  .fqd-form__veld { flex-basis: 100%; }
}

/* =========================================================================
   Hero
   ========================================================================= */
.fqd-hero { position: relative; overflow: clip; }
/* De gloed liep vroeger 30% buiten de hero door, omdat de hero in het
   prototype de volle schermbreedte had en die overhang dus buiten beeld
   viel. In WordPress is de hero 1280px binnen een bredere kolom, en
   `overflow: clip` sneed de gloed precies bij de linkerrand af — een
   zichtbare verticale streep midden in het verloop.

   Nu blijft de gloed binnen de hero en doven beide verlopen uit vóór de
   rand. Geen overhang, dus ook niets om af te snijden. */
.fqd-hero::before {
  content: "";
  position: absolute; inset: 0;
  /* Elke ellips moet bínnen het vlak uitdoven, anders zie je de rand van het
     vlak zelf. Middelpunt 36% met straal 32% loopt van 4% tot 68%, en 44%
     met 42% van 2% tot 86% — overal ruimte tot de rand. Voor de tweede
     ellips geldt hetzelfde: 74±24 en 26±24. */
  background: radial-gradient(32% 42% at 36% 44%, var(--fqd-glow-1), transparent 100%),
              radial-gradient(24% 24% at 74% 26%, var(--fqd-glow-2), transparent 100%);
  pointer-events: none;
}
.fqd-hero > * { position: relative; }

/* Een slag kleiner dan de gewone h1 (5.2rem). Dezelfde meeschalende vorm als
   de preset uit theme.json, alleen overal zo'n 12% terug: 4.6rem op een breed
   scherm, 2.3rem op een telefoon. De kop blijft zo twee regels. */
.fqd-hero__title {
  max-width: 15ch;
  font-size: clamp(2.3rem, 2.3rem + ((1vw - 0.2rem) * 3.833), 4.6rem);
}
.fqd-hero__title em { font-style: normal; color: var(--fqd-red-bright); }

.fqd-trust {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--fqd-hairline);
  list-style: none; padding-left: 0;
  font-size: var(--fs-sm); color: var(--fqd-muted);
}
.fqd-trust li { position: relative; padding-left: var(--sp-5); }
.fqd-trust li::before {
  content: ""; position: absolute; left: 0;
  /* 0.45em is een gok op de lettergrootte; de regelhoogte bepaalt waar het
     midden van de tekstregel ligt. Met 1lh staat het vinkje er exact op.
     Browsers zonder lh houden de regel erboven — dan zit het er 1,5px
     naast in plaats van goed, en dat valt niemand op. */
  top: 0.45em;
  top: calc((1lh - 8px) / 2);
  width: 13px; height: 8px;
  border-left: 1.8px solid var(--fqd-red-bright);
  border-bottom: 1.8px solid var(--fqd-red-bright);
  transform: rotate(-45deg);
}

/* Uitgelichte auto — rotatie op de bezel, niet op het reveal-element */
.fqd-feature .fqd-bezel { transform: rotate(-1.1deg); }
.fqd-feature figure, .fqd-feature .wp-block-image { margin: 0; overflow: hidden; }
.fqd-feature img {
  aspect-ratio: 3 / 2; object-fit: cover; width: 100%;
  transition: transform var(--dur-slow) var(--ease);
}
/* De foto en de naam linken allebei naar dezelfde auto in de voorraadwidget.
   De link om de foto is inline-block, anders zet de regelhoogte een streep
   wit onder de afbeelding. */
.fqd-feature figure > a { display: block; line-height: 0; }
.fqd-feature:hover img { transform: scale(1.03); }
.fqd-feature__name a { text-decoration: none; transition: color var(--dur) var(--ease); }
.fqd-feature:hover .fqd-feature__name a,
.fqd-feature__name a:hover { color: var(--fqd-red-bright); }

.fqd-feature__meta {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-5);
  background: var(--fqd-surface-2);
}
/* Zonder prijs ernaast: naam en ondertitel gewoon onder elkaar */
.fqd-feature__meta--stack { display: block; }
.fqd-feature__name {
  font-family: var(--font-display); font-weight: 600; line-height: 1.05;
  font-size: var(--fs-h3); letter-spacing: -0.03em; margin: 0;
}
.fqd-feature__sub { font-size: var(--fs-xs) !important; color: var(--fqd-muted-2); margin: 4px 0 0 !important; }
.fqd-feature__price {
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 700;
  letter-spacing: -0.04em; color: var(--fqd-text); white-space: nowrap; margin: 0;
}

/* =========================================================================
   Keurmerkenstrip
   ========================================================================= */
.fqd-marks { border-block: 1px solid var(--fqd-hairline); }
.fqd-marks p {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  letter-spacing: -0.02em;
  color: var(--fqd-muted-2);
  margin: 0;
}
.fqd-marks strong { color: var(--fqd-text); font-weight: 600; }

/* =========================================================================
   Voorraadkaarten
   ========================================================================= */
.fqd-cars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

/* WordPress zet op elk blok behalve het eerste een marge aan de bovenkant
   (--wp--style--block-gap, hier 24px). In een gewone kolom klopt dat, maar
   deze twee zijn rasters met hun eigen tussenruimte: de marge kwam er dus
   bovenop en alleen bij het eerste blok niet.

   Zichtbaar effect: de Mercedes-camper linksboven stond 24px hoger dan de
   twee kaarten ernaast. Bij de tijdlijn leverde het 17px loze ruimte per
   rij op. */
.fqd-cars > *,
.fqd-timeline__row > * { margin-block-start: 0; }

.fqd-car { transition: transform var(--dur) var(--ease); }
.fqd-car:hover { transform: translateY(-5px); }
/* De kaart is zelf de bezel (.fqd-car.fqd-bezel), geen afstammeling ervan.
   Met een spatie ertussen zou deze regel nooit aanslaan. */
.fqd-car.fqd-bezel,
.fqd-car.fqd-bezel > * { display: flex; flex-direction: column; height: 100%; }

.fqd-car figure, .fqd-car .wp-block-image { margin: 0; overflow: hidden; }
.fqd-car img {
  aspect-ratio: 3 / 2; object-fit: cover; width: 100%;
  transition: transform var(--dur-slow) var(--ease);
}
.fqd-car:hover img { transform: scale(1.045); }

.fqd-car__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); gap: var(--sp-4); }
.fqd-car__brand {
  font-size: var(--fs-label) !important; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fqd-muted-2); font-weight: 600; margin: 0 !important;
}
.fqd-car__name {
  font-size: 1.15rem !important; letter-spacing: -0.03em; line-height: 1.2; margin: 4px 0 0 !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fqd-car__specs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-4); }
.fqd-car__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-top: var(--sp-4); border-top: 1px solid var(--fqd-hairline);
}
.fqd-car__price {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.04em; margin: 0;
}
.fqd-car__price--reserved { color: var(--fqd-muted-2); font-size: 1.15rem; }
.fqd-car__cta { font-size: var(--fs-sm); font-weight: 600; color: var(--fqd-red-bright); margin: 0; }

/* =========================================================================
   Inbegrepen
   ========================================================================= */
.fqd-included__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 1px; background: var(--fqd-hairline); }
.fqd-included__grid > * { background: var(--fqd-surface); padding: var(--sp-6); margin: 0; }
.fqd-included__num {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 700;
  letter-spacing: -0.05em; color: var(--fqd-red-bright); line-height: 1; margin: 0 !important;
}

/* =========================================================================
   Verhaal
   ========================================================================= */
.fqd-names {
  gap: var(--sp-6); margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--fqd-hairline);
}
.fqd-names__name {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  letter-spacing: -0.03em; color: var(--fqd-text); margin: 0 !important;
}
.fqd-names__role { font-size: var(--fs-xs) !important; color: var(--fqd-muted-2); margin: 2px 0 0 !important; }

/* =========================================================================
   Tijdlijn
   ========================================================================= */
.fqd-timeline__row {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-6);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--fqd-hairline);
  transition: background-color var(--dur) var(--ease);
  /* Het jaartal is 24px en de omschrijving 17px. Zonder dit zet het raster
     beide bovenaan hun eigen cel en staan ze zichtbaar niet op één lijn:
     de middens lagen 12px uit elkaar. Op de basislijn uitlijnen is wat het
     oog hier verwacht. */
  align-items: baseline;
}
.fqd-timeline__row:last-child { border-bottom: 1px solid var(--fqd-hairline); }
.fqd-timeline__row:hover { background: var(--fqd-veil-faint); }

.fqd-timeline__year {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.04em; color: var(--fqd-red-bright); margin: 0 !important;
}
.fqd-timeline__what {
  font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--fqd-text); margin: 0 !important;
}
.fqd-timeline__role { font-size: var(--fs-sm); color: var(--fqd-muted); margin: 2px 0 0 !important; }
.fqd-timeline__till { font-size: var(--fs-xs); color: var(--fqd-muted-2); margin: var(--sp-2) 0 0 !important; }

/* =========================================================================
   Opslag
   ========================================================================= */
.fqd-facts { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.fqd-facts li { position: relative; padding-left: var(--sp-6); font-size: var(--fs-sm); color: var(--fqd-muted); }
.fqd-facts li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 10px; height: 10px; border-radius: 2px;
  box-shadow: inset 0 0 0 1.8px var(--fqd-red-bright);
}
.fqd-note {
  margin-top: var(--sp-6); padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--fqd-red-dim);
  box-shadow: inset 0 0 0 1px var(--fqd-red-edge);
  font-size: var(--fs-sm);
}

/* =========================================================================
   Contact
   ========================================================================= */
.fqd-hours { margin-top: var(--sp-5); }
.fqd-hours__row {
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--fqd-hairline);
  font-size: var(--fs-sm);
  gap: var(--sp-4);
}
.fqd-hours__row:last-child { border-bottom: 0; }
.fqd-hours__row p { margin: 0; font-size: var(--fs-sm); }
.fqd-hours__row p:first-child { color: var(--fqd-muted); }

.fqd-address { font-style: normal; margin-top: var(--sp-5); font-size: var(--fs-sm); line-height: 1.9; color: var(--fqd-muted); }
.fqd-address strong { color: var(--fqd-text); font-weight: 600; }

/* =========================================================================
   Voettekst
   ========================================================================= */
.fqd-footer { border-top: 1px solid var(--fqd-hairline); }
.fqd-footer .wp-block-navigation { display: block; }
.fqd-footer .wp-block-navigation-item__content {
  display: inline-block; padding-block: var(--sp-2);   /* aanraakdoel ≥ 24px */
  font-size: var(--fs-sm); color: var(--fqd-muted); text-decoration: none;
}
.fqd-footer .wp-block-navigation-item__content:hover { color: var(--fqd-text); }
.fqd-footer a { color: var(--fqd-muted); text-decoration: none; }

/* De regel onderaan met de maker van de site. Bewust ingetogen: het hoort
   bij het kleine lettertje naast copyright en voorwaarden, niet ernaast als
   derde reclame. De naam zelf wel onderstreept, zodat je ziet dat het een
   link is. */
.fqd-credit a {
  color: inherit;
  border-bottom: 1px solid var(--fqd-hairline-2);
}
.fqd-credit a:hover { color: var(--fqd-text); border-color: currentColor; }
.fqd-footer a:hover { color: var(--fqd-text); }

/* Een lijstblok houdt in de editor zijn bolletjes en inspringing; in de
   voettekst is het gewoon een rijtje contactgegevens. */
.fqd-footer-contact {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.fqd-footer-contact li + li { margin-top: var(--sp-2); }

.fqd-footer h2, .fqd-footer h4 {
  font-family: var(--font-body) !important;
  font-size: var(--fs-label) !important;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fqd-muted-2); font-weight: 600;
}

/* =========================================================================
   Scroll-reveal
   ========================================================================= */
/* Verbergen gebeurt alleen als JavaScript draait: de klasse fqd-js wordt in
   de <head> gezet. Zonder JavaScript staat alle inhoud er gewoon — anders
   zou de pagina leeg zijn voor wie scripts blokkeert of bij een laadfout. */
.fqd-js .fqd-reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.fqd-js .fqd-reveal.is-visible { opacity: 1; transform: none; }

/* In de editor nooit verbergen — anders bewerk je onzichtbare blokken */
.editor-styles-wrapper .fqd-reveal { opacity: 1 !important; transform: none !important; }

/* =========================================================================
   Responsief
   ========================================================================= */
@media (max-width: 1080px) {
  .fqd-cars { grid-template-columns: repeat(2, 1fr); }
  .fqd-included__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .fqd-feature .fqd-bezel { transform: none; }
  .fqd-hero__title { max-width: 100%; }
}

@media (max-width: 620px) {
  .fqd-cars { grid-template-columns: 1fr; }
  .fqd-included__grid { grid-template-columns: 1fr; }
  .fqd-panel { padding: var(--sp-5); }
  .fqd-timeline li { grid-template-columns: 76px 1fr; gap: var(--sp-4); }
  .wp-block-button { width: 100%; }
  .wp-block-button__link { width: 100%; justify-content: space-between; }
}

/* =========================================================================
   Toegankelijkheid
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .fqd-feature .fqd-bezel { transform: none; }
}

/* Per weergave apart: de donkere waarden zouden in het lichte palet juist
   minder contrast geven in plaats van meer. */
@media (prefers-contrast: more) {
  :root:not([data-fqd-theme="light"]) {
    --fqd-muted: #d0c9c4;
    --fqd-muted-2: #b3aba6;
    --fqd-hairline: rgba(243, 239, 236, 0.24);
    --fqd-hairline-2: rgba(243, 239, 236, 0.34);
  }
  :root[data-fqd-theme="light"] {
    --fqd-muted: #4a423e;
    --fqd-muted-2: #4a423e;
    --fqd-red-bright: #97300f;
    --fqd-hairline: rgba(26, 22, 20, 0.26);
    --fqd-hairline-2: rgba(26, 22, 20, 0.38);
  }
}

@media print {
  .fqd-header, .fqd-grain, .fqd-hero::before { display: none; }
  body { background: #fff; color: #000; }
}

/* Het pijltje in de knop, lichte weergave.

   De knop is in de lichte weergave juist donker (licht op donker), maar het
   pijltje bleef getekend in bijna-zwart met een nauwelijks zichtbaar rondje
   eromheen: donker op donker. In de donkere weergave klopt het wel, want
   daar is de knop licht.

   Dus hier het spiegelbeeld: een iets sterker lichtvlak met een licht
   pijltje erin. De tekening zit als data-URI in de achtergrond, vandaar een
   tweede kopie met een andere lijnkleur. */
:root[data-fqd-theme="light"] .wp-block-button.has-arrow .wp-block-button__link::after {
  background-color: rgba(246, 243, 240, 0.24);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f6f3f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* =========================================================================
   De kop blijft in beeld bij het scrollen
   ========================================================================= */

/* position: sticky stond al op .fqd-header, maar werkte nergens. WordPress
   zet een template-onderdeel in een eigen wrapper, en die wrapper is precies
   zo hoog als de kop zelf (88px). Een sticky element kan niet buiten zijn
   ouder plakken, dus liet hij meteen los.

   Nu plakt de wrapper zelf, binnen .wp-site-blocks — en dat is de hele
   pagina. Samen met de overflow-aanpassing bovenaan blijft de balk staan
   waar je ook heen scrolt. */
.wp-site-blocks > .wp-block-template-part:has(> .fqd-header) {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

/* Het contactblok staat sinds het weghalen van het formulierblok alleen in
   zijn rij. Over de volle 1280px wordt zo’n kaart een lege vlakte: het adres
   links, de openingstijden helemaal rechts. Daarom een bovengrens, gecentreerd. */
.wp-block-columns:has(> .wp-block-column:only-child) > .wp-block-column:has(.fqd-panel) {
  max-width: 720px;
  margin-inline: auto;
}

/* Kaart op de contactpagina.

   Bewust OpenStreetMap en geen ingesloten Google Maps: die laatste zet
   cookies zodra de pagina laadt, dus vóór iemand toestemming heeft gegeven.
   OpenStreetMap doet dat niet en laat wel gewoon een speld zien. */
.fqd-kaart {
  margin-top: var(--sp-5);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--fqd-hairline);
  background: var(--fqd-surface-2);
}
.fqd-kaart iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
}
@media (max-width: 620px) {
  .fqd-kaart iframe { height: 260px; }
}

/* Koppen breken niet midden in een woord.

   WordPress zet word-break: break-word op koppen. In het Engels valt dat
   nauwelijks op, in het Nederlands wel: "aanhanger" werd "aanhang-" met
   "er huren" op de volgende regel. Met normal breekt hij alleen op een
   spatie; overflow-wrap blijft het vangnet voor een woord dat echt niet
   past. */
.wp-block-heading,
.fqd-panel h2,
.fqd-panel h3 {
  word-break: normal;
  overflow-wrap: break-word;
}

/* De keurmerkenregel onder de knoppen in de hero.

   Met vier items paste "Maandag t/m zaterdag open" er net niet meer bij en
   viel hij als enige op een tweede regel. Het scheelde vijf pixels. Op een
   breed scherm halen we die ruimte uit de tussenafstand en uit de inspringing
   van het vinkje; dan staan alle vier naast elkaar met nog zo'n 27px over.

   Onder 1080px blijft alles zoals het was en mag de rij gewoon afbreken —
   op een telefoon passen vier van deze labels nooit naast elkaar. */
@media (min-width: 1080px) {
  .fqd-trust { column-gap: 20px; }
  .fqd-trust li { padding-left: 19px; }
}