/*
 * Typography — Wietzadenshop
 * ----------------------------------------
 * Archivo voor koppen (strakke letter-spacing, veelal uppercase),
 * Inter voor tekst en UI. Bron: prototype regel 20-24.
 */

/* ----------------------------------------
 * BASIS
 * ---------------------------------------- */

body {
  background-color:        var(--color-bg);
  color:                   var(--color-text);
  font-family:             var(--font-body);
  font-size:               var(--text-base);
  font-weight:             var(--font-regular);
  line-height:             var(--leading-normal);
  -webkit-font-smoothing:  antialiased;
  overflow-x:              hidden;
}

/* Geen scroll achter de leeftijdscheck of het mobiele menu. */
body.has-age-gate,
body.has-nav-open {
  overflow: hidden;
}

/* ----------------------------------------
 * KOPPEN
 * ---------------------------------------- */

/*
 * Bewust geen globale line-height: het prototype zet die ook niet, waardoor
 * koppen 1.5 van de body erven. Koppen die strakker moeten staan (hero,
 * sectietitels, productkaart) zetten hem zelf. Zet je hier 1.2 neer, dan
 * verspringt alles wat geen eigen waarde heeft — zoals de USP-strip.
 */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-heading);
  color:          inherit;
  letter-spacing: var(--tracking-tight);

  /*
   * Nederlandse samenstellingen als "Herroepingsformulier" passen op een
   * telefoon niet in één regel. Zonder dit duwen ze de hele pagina breed.
   */
  overflow-wrap:  break-word;
}

h1 { font-size: var(--text-5xl); font-weight: var(--font-black); }
h2 { font-size: var(--text-3xl); font-weight: var(--font-extrabold); }
h3 { font-size: var(--text-xl);  font-weight: var(--font-bold); }
h4 { font-size: var(--text-lg);  font-weight: var(--font-bold); }

/* ----------------------------------------
 * BODYTEKST
 * ---------------------------------------- */

p {
  font-size:   var(--text-base);
  line-height: var(--leading-normal);
}

/* ----------------------------------------
 * LINKS
 *
 * Standaard erven links hun kleur van de context — de site is grotendeels
 * donker met lichte secties, dus een vaste linkkleur werkt hier niet.
 * Gebruik .link waar een link wél als link moet opvallen.
 * ---------------------------------------- */

a {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.link {
  color:           var(--color-primary);
  text-decoration: underline;
}

.link:hover {
  color: var(--color-primary-hover);
}

.lite .link:hover {
  color: var(--color-primary-dark);
}