/* ============================================================
   Dive & Thrive: gedeelde basisstijlen in één bestand: tokens, FAQ, motion.
   Laadvolgorde per pagina: /assets/site.css, dan de eigen <style> van de
   pagina, dan /assets/site-quality.css (correctielaag, moet als laatste).
   De pagina's met dt-page.css (dienstpagina's, sportvakanties, 404) hebben
   geen eigen <style> ertussen en laden alleen /assets/page.css: server.js
   plakt site.css, site-quality.css en dt-page.css in die volgorde aan elkaar.
   ============================================================ */


/* ==================== Tokens, basis en typografie (was /dive-thrive.css) ==================== */

/* =====================================================================
   DIVE & THRIVE — DESIGN SYSTEM FOUNDATIONS
   ---------------------------------------------------------------------
   Brand: premium technical swim coaching.
   Built on the Workoutclub design language (Montserrat, generous 8pt
   spacing, premium structure, thin line-icons in chips, split heroes)
   — upgraded to the Dive & Thrive identity: deep navy + gold + cream,
   with the logo's blues as data / accent tints.

   Surfaces work in BOTH light and dark. Brand colours are theme-agnostic;
   semantic surface tokens flip per theme. Put .theme-dark or .theme-light
   on any container (they nest) to switch a subtree. <body> defaults light.
   Voice: Dutch with English headline hooks. Sentence-case headlines with
   periods for rhythm; a single word lifted in gold. Eyebrows UPPERCASE,
   widely tracked, separated by • dots.
   ===================================================================== */

/* ---- MONTSERRAT — one compact variable file per style ---- */
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
/* Zonder maatgelijke fallback springt de hele pagina zodra Montserrat
   binnenkomt (gemeten CLS 0,22 op telefoon). Dit is een schaalcorrectie op
   een systeemfont, geen extra download. */
@font-face {
  font-family: 'Montserrat fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 111.4%; ascent-override: 87%; descent-override: 22.5%; line-gap-override: 0%;
}
/* De lege <i data-lucide> is cursief tot lucide hem vervangt en trok zo de
   cursieve font binnen op pagina's zonder cursieve tekst. */
i[data-lucide]{font-style:normal}

:root {
  /* ===================================================================
     BRAND CORE — theme agnostic
     =================================================================== */

  /* -- Navy (cool, deep — the signature surface) -- */
  --navy-950: #07111E;   /* deepest — footer, gradient floor            */
  --navy-900: #0B1B2E;   /* PRIMARY dark surface — hero, bands          */
  --navy-800: #102539;   /* elevated card on dark                       */
  --navy-700: #173049;   /* raised / hover on dark                      */
  --navy-600: #20405C;   /* dark-mode borders (solid)                   */

  /* -- Gold (premium detail — used with restraint) -- */
  --gold:        #C9A24A;  /* PRIMARY accent — CTAs, eyebrows, highlight */
  --gold-bright: #E0C079;  /* highlight word, eyebrow on dark, star      */
  --gold-deep:   #74571D;  /* accessible text / hover on light surfaces  */
  --gold-tint:   rgba(201,162,74,0.14); /* chip / badge fill            */

  /* -- Cream (the swimmer figure — warm light for display on dark) -- */
  --cream:      #F4EEDE;
  --cream-soft: #E8DFC9;

  /* -- Logo blues (water → data & accent tints, never dominant) -- */
  --blue-deep:   #1C3D6E;
  --blue:        #2B6CA6;
  --blue-bright: #3E92C4;
  --blue-050:    #EAF2F8;  /* light tinted surface / chip on light       */

  /* -- Neutrals (subtly warm to harmonise with cream brand) -- */
  --paper:   #FCFBF7;   /* primary LIGHT surface — warm white           */
  --soft:    #F3F1E9;   /* cards / sections on light                    */
  --soft-2:  #ECE9DE;   /* deeper soft band                             */
  --line-lt: #E5E1D4;   /* hairline on light (warm)                     */
  --ink:     #0E2235;   /* primary text on light (cool near-black)      */
  --ink-soft:#56697B;   /* secondary text on light                      */
  --ink-mute:#5D6B78;   /* tertiary / captions on light (AA contrast)   */

  /* ===================================================================
     SEMANTIC SURFACES — default = LIGHT theme
     =================================================================== */
  --surface:      var(--paper);
  --surface-2:    var(--soft);
  --surface-3:    var(--soft-2);
  --surface-elev: #FFFFFF;
  --line:         var(--line-lt);
  --text:         var(--ink);
  --text-soft:    var(--ink-soft);
  --text-mute:    var(--ink-mute);
  --display:      var(--ink);       /* headline colour                  */
  --eyebrow-c:    var(--gold-deep); /* eyebrow reads as deep gold on light */
  --on-accent:    var(--navy-900);  /* text on a gold fill              */
  --chip-stroke:  var(--blue-deep);
  --chip-bg:      var(--blue-050);
  --shadow-color: 16,28,45;

  /* ===================================================================
     TYPE
     =================================================================== */
  --font-sans:    'Montserrat', 'Montserrat fallback', -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Montserrat', 'Montserrat fallback', -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;

  --fs-display: 76px;  /* hero — "Swim smarter."          */
  --fs-h1:      52px;
  --fs-h2:      38px;
  --fs-h3:      26px;
  --fs-h4:      20px;
  --fs-lead:    19px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-eyebrow: 13px;

  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-body:  1.62;

  --track-eyebrow: 0.2em;
  --track-tight:  -0.02em;
  --track-btn:     0.1em;

  /* ===================================================================
     SPACING (8pt, generous)   ·   RADII   ·   ELEVATION
     =================================================================== */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-btn:12px; --r-pill:999px;

  --shadow-xs: 0 1px 2px rgba(var(--shadow-color),0.06);
  --shadow-sm: 0 4px 14px rgba(var(--shadow-color),0.08);
  --shadow-md: 0 16px 44px rgba(var(--shadow-color),0.12);
  --shadow-lg: 0 30px 70px rgba(var(--shadow-color),0.16);
  --shadow-gold: 0 12px 30px rgba(160,126,51,0.30);  /* gold CTA lift   */
}

/* ===================================================================
   THEME FLIPS — nestable. .theme-dark on any container -> dark subtree.
   =================================================================== */
.theme-dark {
  --surface:      var(--navy-900);
  --surface-2:    var(--navy-800);
  --surface-3:    var(--navy-700);
  --surface-elev: var(--navy-800);
  --line:         rgba(255,255,255,0.10);
  --text:         rgba(255,255,255,0.92);
  --text-soft:    rgba(255,255,255,0.66);
  --text-mute:    rgba(255,255,255,0.44);
  --display:      var(--cream);
  --eyebrow-c:    var(--gold-bright);
  --chip-stroke:  var(--gold);
  --chip-bg:      rgba(201,162,74,0.10);
  --shadow-color: 0,0,0;
}
.theme-light { /* explicit reset back to light when nested in dark */
  --surface:      var(--paper);
  --surface-2:    var(--soft);
  --surface-3:    var(--soft-2);
  --surface-elev: #FFFFFF;
  --line:         var(--line-lt);
  --text:         var(--ink);
  --text-soft:    var(--ink-soft);
  --text-mute:    var(--ink-mute);
  --display:      var(--ink);
  --eyebrow-c:    var(--gold-deep);
  --chip-stroke:  var(--blue-deep);
  --chip-bg:      var(--blue-050);
  --shadow-color: 16,28,45;
}

/* ===================================================================
   SEMANTIC ELEMENT STYLES
   =================================================================== */
*{box-sizing:border-box}
.ds-type{ color:var(--text); font-family:var(--font-sans); }

.eyebrow{
  font:700 var(--fs-eyebrow)/1 var(--font-sans);
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--eyebrow-c);
}
.display{
  font:800 var(--fs-display)/var(--lh-tight) var(--font-display);
  letter-spacing:-0.03em; color:var(--display);
}
h1,.h1{ font:800 var(--fs-h1)/var(--lh-tight) var(--font-display); letter-spacing:var(--track-tight); color:var(--display); }
h2,.h2{ font:800 var(--fs-h2)/var(--lh-snug)  var(--font-display); letter-spacing:var(--track-tight); color:var(--display); }
h3,.h3{ font:700 var(--fs-h3)/1.22 var(--font-display); color:var(--display); }
h4,.h4{ font:700 var(--fs-h4)/1.3  var(--font-sans);    color:var(--text); }
.lead { font:400 var(--fs-lead)/var(--lh-body) var(--font-sans); color:var(--text-soft); }
p,.body{ font:400 var(--fs-body)/var(--lh-body) var(--font-sans); color:var(--text-soft); }
small,.small{ font:400 var(--fs-small)/1.5 var(--font-sans); color:var(--text-soft); }

/* a single word lifted in gold inside an otherwise plain headline */
.hl{ color:var(--gold-deep); }
.theme-dark .hl{ color:var(--gold-bright); }
/* navy kop (contact.html): gold-deep haalt daar hooguit 2,7:1, gold-bright minstens 6,1:1 */
.page-header .hl{ color:var(--gold-bright); }


/* ==================== FAQ-component (was /assets/dt-faq.css) ==================== */

/* =====================================================================
   DIVE & THRIVE — FAQ-BLOK VOOR DE ORIGINELE PAGINA'S
   ---------------------------------------------------------------------
   Bewust géén basisregels (geen html/body/.wrap/section): die zes pagina's
   hebben elk hun eigen inline stylesheet en dat mag hier niets van raken.
   Alleen de klassen van dit ene blok staan hierin.

   Uitschuifvragen met <details>/<summary>: native, dus geen JavaScript en
   geen ARIA-plumbing, en met het toetsenbord te bedienen. De antwoorden
   staan gewoon in de HTML — dichtgeklapt of niet, Google en AI-crawlers
   lezen ze even goed.
   ===================================================================== */

.dtfaq { padding: 84px 0; background: var(--surface-2); }
.dtfaq > .wrap { max-width: 1000px; }

.dtfaq__head { max-width: 62ch; margin: 0 0 30px; }
.dtfaq__head h2 {
  margin: 10px 0 0;
  font: 800 clamp(24px, 3vw, 34px)/1.14 var(--font-display);
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
.dtfaq__head .eyebrow { color: var(--gold-deep); }

.dtfaq__list { display: grid; gap: 0; }

.dtfaq__item { border-bottom: 1px solid var(--line); }
.dtfaq__item:first-child { border-top: 1px solid var(--line); }

.dtfaq__item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 19px 44px 19px 0;
  font: 700 17px/1.4 var(--font-display);
  color: var(--ink);
}
.dtfaq__item summary::-webkit-details-marker { display: none; }

/* Chevron: draait een kwartslag zodra het antwoord openstaat. */
.dtfaq__item summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--gold-deep);
  border-bottom: 2px solid var(--gold-deep);
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.dtfaq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }

.dtfaq__item summary:hover { color: var(--gold-deep); }
.dtfaq__item summary:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 3px;
}

.dtfaq__a {
  padding: 0 44px 22px 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.dtfaq a { color: var(--gold-deep); text-underline-offset: 2px; }
.dtfaq a:hover { color: var(--gold-deep); text-decoration-thickness: 2px; }
.dtfaq :where(a):focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Twee kolommen zodra er ruimte is. De tweede kolom krijgt zijn eigen bovenrand,
   anders mist de eerste rij daar een lijn. */
@media (min-width: 900px) {
  .dtfaq__list { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .dtfaq__item:nth-child(2) { border-top: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .dtfaq { padding: 60px 0; }
  .dtfaq__head { margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .dtfaq__item summary::after { transition: none; }
}


/* ==================== Motion: reveal, parallax, marquee, nav-voortgang (was /assets/v3pro/dt-motion.css; hoort bij dt-motion.js) ==================== */

/* =====================================================================
   DIVE & THRIVE — V3 PRO MOTION CSS
   ---------------------------------------------------------------------
   Motion tokens + behaviour layer. Pairs with dt-motion.js.
   Brand tokens live in the tokens section at the top of this file — never restyled here.

   GOLDEN RULE (progressive enhancement):
   When JS never runs OR prefers-reduced-motion is on, ALL reveal/split/
   count content is fully visible at full opacity with no transform.
   Animation is layered ON TOP via .dtm-on (JS sets it on <html>).
   ===================================================================== */

:root {
  /* -- Motion language (exact values from MOTION-CONTRACT.md) -- */
  --ease-cine:  cubic-bezier(.16,1,.3,1);   /* big cinematic reveals */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --dur-reveal: 620ms;
  --dur-micro:  200ms;
  --dur-exit:   150ms;
  --stagger:    70ms;

  --reveal-rise: 32px;   /* within 24–40px range */
}

/* =====================================================================
   1. REVEALS  —  hidden state applies ONLY when JS is on (.dtm-on) and
   motion is allowed (NOT .dtm-reduced). Otherwise content is visible.
   ===================================================================== */
html.dtm-on:not(.dtm-reduced) [data-reveal]{
  opacity:0;
  transform:translate3d(0, var(--reveal-rise), 0);
  transition:
    opacity   var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-cine);
  transition-delay:var(--reveal-delay, 0ms);
}
html.dtm-on:not(.dtm-reduced) [data-reveal="fade"]  { transform:none; }
html.dtm-on:not(.dtm-reduced) [data-reveal="scale"] { transform:scale(.94); }
html.dtm-on:not(.dtm-reduced) [data-reveal="left"]  { transform:translate3d(calc(-1 * var(--reveal-rise)),0,0); }
html.dtm-on:not(.dtm-reduced) [data-reveal="right"] { transform:translate3d(var(--reveal-rise),0,0); }
html.dtm-on:not(.dtm-reduced) [data-reveal="clip"]  {
  transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--dur-reveal) var(--ease-cine), opacity var(--dur-reveal) var(--ease-out);
  transition-delay:var(--reveal-delay, 0ms);
}

/* arrived state */
html.dtm-on:not(.dtm-reduced) [data-reveal].is-revealed{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 0 0);
}

/* =====================================================================
   2. SPLIT TEXT  —  per-unit reveal. Units sit hidden, rise in.
   ===================================================================== */
.dt-split__unit{ display:inline-block; will-change:transform,opacity; }
.dt-split__unit--space{ white-space:pre; } /* preserves spaces between words */

html.dtm-on:not(.dtm-reduced) [data-split] .dt-split__unit{
  opacity:0;
  transform:translate3d(0, var(--reveal-rise), 0);
  transition:
    opacity   var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-cine);
  transition-delay:var(--split-delay, 0ms);
}
html.dtm-on:not(.dtm-reduced) [data-split].is-revealed .dt-split__unit{
  opacity:1;
  transform:none;
}

/* =====================================================================
   3. TILT  —  3D card tilt. Vars driven by JS.
   ===================================================================== */
.dt-tilt{
  transform-style:preserve-3d;
  transform:perspective(900px)
            rotateX(var(--tilt-x, 0deg))
            rotateY(var(--tilt-y, 0deg));
  transition:transform var(--dur-micro) var(--ease-out);
  will-change:transform;
}
.dt-tilt__layer{
  transform:translate3d(0,0, var(--tilt-depth, 0px));
  transition:transform var(--dur-micro) var(--ease-out);
}

/* =====================================================================
   4. MAGNETIC  —  button eases toward cursor. Vars driven by JS.
   ===================================================================== */
.dt-magnetic{
  transform:translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
  transition:transform var(--dur-micro) var(--ease-out);
}

/* =====================================================================
   6. NAV CONDENSE  —  hook only; module owns the visual styling.
   ===================================================================== */
[data-nav]{ transition:background var(--dur-micro) var(--ease-out),
                       box-shadow var(--dur-micro) var(--ease-out),
                       backdrop-filter var(--dur-micro) var(--ease-out); }

/* =====================================================================
   7. SCROLL PROGRESS BAR
   ===================================================================== */
[data-scroll-progress]{
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
}

/* =====================================================================
   8. MARQUEE  —  continuous horizontal loop. JS clones a track.
   ===================================================================== */
[data-marquee]{ overflow:hidden; }
.dt-marquee__track{
  display:inline-flex;
  flex-wrap:nowrap;
  white-space:nowrap;
  will-change:transform;
  animation:dt-marquee var(--marquee-dur, 30s) linear infinite;
}
[data-marquee]:hover .dt-marquee__track,
[data-marquee]:focus-within .dt-marquee__track{ animation-play-state:paused; }
@keyframes dt-marquee{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
html.dtm-reduced .dt-marquee__track{ animation:none; }

/* =====================================================================
   9. SMOOTH ANCHORS  —  CSS half; JS handles sticky-nav offset.
   ===================================================================== */
html{ scroll-behavior:smooth; }

/* =====================================================================
   REDUCED MOTION  —  kill everything. Belt-and-braces alongside the
   .dtm-on gating above (covers the case where JS sets .dtm-reduced).
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
html.dtm-reduced [data-reveal],
html.dtm-reduced [data-split] .dt-split__unit,
html.dtm-reduced [data-split],
html.dtm-reduced [data-count-to]{
  opacity:1 !important;
  transform:none !important;
  clip-path:none !important;
  transition:none !important;
}
html.dtm-reduced .dt-tilt,
html.dtm-reduced .dt-magnetic{
  transform:none !important;
  transition:none !important;
}
