/* =========================================================
   Typography — Autogloss Detailing

   Schaal overgenomen uit het concept (concept.leadsprint.nl/autogloss).
   Enriqueta (serif) draagt de koppen, Onest (sans) de tekst.

   Twee schalen naast elkaar, en dat is bewust:
   - TEKST staat vast in px. Body-tekst hoort niet mee te schalen
     met de viewport; 17px leest op elk scherm hetzelfde.
   - KOPPEN zijn fluid via clamp(). Daar is het formaat een
     compositie-keuze, geen leesbaarheidskwestie.

   Enriqueta gaat tot weight 700 — gebruik nooit 800 op een kop.
========================================================= */

/* Lettertypes staan in de theme (assets/fonts), niet bij Google Fonts:
   dan gaat er bij een bezoek geen IP-adres naar Google, en valt er
   een externe verbinding weg. Alleen latin + latin-ext; Onest is
   variabel, dus één bestand dekt 300–600. Licentie: SIL OFL. */
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/enriqueta-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/enriqueta-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/enriqueta-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/enriqueta-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/enriqueta-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/enriqueta-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/enriqueta-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Enriqueta';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/enriqueta-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/onest-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/onest-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

  /* ======================================================
     FAMILIES
  ====================================================== */

  --font-body:    'Onest', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-heading: 'Enriqueta', Georgia, 'Times New Roman', serif;


  /* ======================================================
     TEKSTSCHAAL — vast, in px

     3xs  labels in kapitalen (eyebrow, stap-label)
     2xs  bijschriften, meta, tags
     xs   badges, compacte knoppen
     sm   navigatie, kaart-tekst, footer
     base knoppen, formuliervelden, lijsten
     md   body default
     lg   sectie-intro
     xl   lead onder een titel
  ====================================================== */

  --fs-3xs:  12px;
  --fs-2xs:  13px;
  --fs-xs:   14px;
  --fs-sm:   15px;
  --fs-base: 16px;
  --fs-md:   17px;
  --fs-lg:   18px;
  --fs-xl:   19px;


  /* ======================================================
     KOPSCHAAL — fluid

     display  hero h1, één per pagina
     h1       paginatitel
     h2       sectietitel
     h2-sm    sectietitel in een tweekoloms blok
     h3       accordeon, subsectie
     h4 … h6  kaarttitels en kleinere koppen (vast)

     De schaal loopt strikt aflopend: de kleinste h3 (24px) is
     groter dan h4 (22px). Anders keert de hiërarchie om op een
     smal scherm, waar de clamp op zijn minimum staat.
  ====================================================== */

  /* De displaytitel schaalt met de breedte én de hoogte. Alleen op vw
     schalen (zoals het concept doet) maakt de kop op een laag scherm zo
     hoog dat de hero-inhoud tegen de navigatie aan schuift. De vh-grens
     grijpt alleen in op lage vensters; op een normaal scherm wint 10.5vw
     en is het formaat identiek aan het concept. */
  --fs-display: clamp(52px, min(10.5vw, 15vh), 160px);
  --fs-h1:      clamp(46px, 8.5vw, 116px);
  --fs-h2:      clamp(40px, 5.2vw, 72px);
  --fs-h2-sm:   clamp(36px, 4.6vw, 60px);
  --fs-h3:      clamp(24px, 2.4vw, 30px);
  --fs-h4:      22px;
  --fs-h5:      20px;
  --fs-h6:      18px;


  /* ======================================================
     GEWICHTEN
  ====================================================== */

  --fw-light:   300;  /* body */
  --fw-regular: 400;
  --fw-medium:  500;  /* nadruk, knoppen, labels */
  --fw-semi:    600;
  --fw-bold:    700;  /* koppen */


  /* ======================================================
     REGELHOOGTE & LETTERSPATIE
  ====================================================== */

  --lh-tight:   1;     /* koppen */
  --lh-snug:    1.25;  /* kleine koppen */
  --lh-base:    1.6;   /* body */
  --lh-relaxed: 1.7;   /* lange lappen tekst */

  --tracking-tight:   -.02em;   /* koppen */
  --tracking-tighter: -.025em;  /* h1 en display */
  --tracking-caps:    .14em;    /* kapitalen-labels */

}


/* =========================================================
   Body
========================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-light);
  line-height: var(--lh-base);
  color: var(--color-text);
}

strong,
b {
  font-weight: var(--fw-medium);
}


/* =========================================================
   Headings
========================================================= */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

h1, .h1 {
  font-size: var(--fs-h1);
  letter-spacing: var(--tracking-tighter);
}

/* Hero-titel: het grootste formaat, één per pagina */
.display {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
}

h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }

h4, .h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

h5, .h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
}

h6, .h6 {
  font-size: var(--fs-h6);
  line-height: var(--lh-snug);
}

/* Sectietitel in een tweekoloms blok — iets terughoudender */
.h2--sm {
  font-size: var(--fs-h2-sm);
}

/* Accentwoord in een kop */
.ls-accent-word {
  font-style: normal;
  color: var(--color-accent);
}


/* =========================================================
   Body copy
========================================================= */

p {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

/* Lead onder een titel. Max-width houdt de regellengte leesbaar. */
.lead {
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-base);
  max-width: 46ch;
}

.intro {
  font-size: var(--fs-lg);
  max-width: 48ch;
}

.small {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.meta {
  font-size: var(--fs-2xs);
  color: var(--color-muted);
}


/* =========================================================
   Kicker / eyebrow — kapitalen boven een kop
========================================================= */

.kicker {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-muted);
}

.kicker--accent  { color: var(--color-accent); }

/* Op het gedempte goudvlak moet de kicker donkerder dan je zou
   denken: kapitalen op 12px halen bij .6 opacity maar 3.4:1.
   Op .8 is het 5.3:1 en dus AA. */
.kicker--on-gold { color: rgba(14, 14, 14, .8); }

.kicker--on-bone { color: var(--color-inverted-muted); }