/* ==========================================================================
   Rijschool Damsko — CSS-entry
   Volgorde is dwingend: Tailwind eerst, dan de tokens (die zijn @theme),
   dan fonts en reset, dan de eigen basislaag.
   ========================================================================== */

@import "tailwindcss";
@import "../../design-tokens.css";
@import "./fonts.css";
@import "./reset.css" layer(base);
@import "./componenten.css";   /* in de base-laag, anders wint de reset van Tailwind-utilities */

/* dev/ is de fundamentpagina: alleen om te beoordelen, nooit in de build.
   Zonder deze regel scant Tailwind hem mee en groeit de productie-CSS. */
@source not "../../dev";

@layer base {
  :root {
    /* Layoutmaten die uit de tokens volgen — geen losse getallen.
       Mobiel: 48px CTA + 2×8px lucht = 64px. Logo mag max 40px hoog (§4.1). */
    --nav-h: calc(var(--tap-cta) + var(--space-2));
    /* De sticky balk onderaan mobiel; content moet erlangs kunnen scrollen. */
    --sticky-h: calc(var(--tap-cta) + var(--space-2));
    --sticky-total: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px));
  }

  @media (min-width: 64rem) {
    :root { --nav-h: calc(var(--tap-cta) + var(--space-4)); } /* 80px */
  }

  /* --- Typografische basis (BRIEFING §4.3) ------------------------------ */
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
  }
  h1 { font-size: var(--fs-hero); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }
  h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }

  /* Eén regel per kop mag in Instrument Serif italic — het accent uit §4.3.
     De serif loopt optisch kleiner, vandaar de correctie. */
  .accent {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    font-size: 1.08em;
  }

  /* Eyebrow / cijfers / tellers: mono, uppercase, 0.12em (§4.3). */
  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1.3;
    color: var(--color-text-muted);
  }
  .num {
    font-family: var(--font-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
}

@layer components {
  /* --- Layout ---------------------------------------------------------- */
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Minimaal 80px tussen secties (mobiele standaard §2); --section-y is
     clamp(80px, 10vw, 120px), dus de ondergrens is de norm. */
  .section { padding-block: var(--section-y); }

  /* `data-theme="light"` wisselt in design-tokens.css alleen de tokens om;
     hier wordt er ook mee geverfd. Componenten blijven ongewijzigd.
     Maximaal twee lichte secties per pagina (§4.2). */
  [data-theme] {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  /* Volle breedte binnen een container, zónder de padding kwijt te raken
     (checklist: "bleed-elementen zetten hun padding terug"). */
  .bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: var(--gutter);
  }

  /* --- Hulpmiddelen ---------------------------------------------------- */
  .visually-hidden:not(:focus):not(:active) {
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .skip-link {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    z-index: 100;
    padding: var(--space-1) var(--space-2);
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    background-color: var(--cta-bg);
    color: var(--cta-text);
    border-radius: var(--cta-radius);
    font-weight: 600;
    transform: translateY(calc(-100% - var(--space-2)));
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus-visible { transform: translateY(0); }
}

@layer utilities {
  /* Beweging: elk element dat GSAP onthult start hiermee. Zonder JS of met
     reduced-motion blijft de eindstaat leesbaar (mobiele standaard §8) —
     daarom zet .no-js / de reduced-motion-query hem terug. */
  .reveal { opacity: 1; }
  .motion-wacht .reveal { opacity: 0; }
  .reveal.is-in { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}