/**
 * Vloeren Kameraad — Typography
 * Alle typografie-stijlen. Importeer na design-tokens.css.
 *
 * Lettertypen laden via WordPress wp_enqueue_style() of functions.php:
 * Google Fonts: Libre+Baskerville:wght@400;700&family=Nunito:wght@400;500;600;700
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * GOOGLE FONTS IMPORT (alternatief voor functions.php)
 * ─────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Nunito:wght@400;500;600;700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────────
 * BASIS RESET & BODY
 * ─────────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * KOPPEN — Libre Baskerville
 * ─────────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

h1 {
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-3xl);
}

h3 {
  font-size: var(--text-2xl);
}

h4 {
  font-size: var(--text-xl);
}

h5 {
  font-size: var(--text-lg);
}

h6 {
  font-size: var(--text-base);
}

/* Tablet (≥768px) */
@media (min-width: 768px) {
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
  h3 { font-size: var(--text-3xl); }
}

/* Desktop (≥1024px) */
@media (min-width: 1024px) {
  h1 { font-size: var(--text-6xl); }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * PARAGRAFEN & TEKST
 * ─────────────────────────────────────────────────────────────────────────── */

p {
  font-family: var(--font-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

p + p {
  margin-top: var(--space-4);
}

strong, b {
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

em, i {
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * LINKS
 * ─────────────────────────────────────────────────────────────────────────── */

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

a:hover {
  color: var(--color-gold-dark);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * LIJSTEN
 * ─────────────────────────────────────────────────────────────────────────── */

ul, ol {
  padding-left: var(--space-6);
}

li {
  font-family: var(--font-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* Unstyled lijst (voor nav, cards etc.) */
.list-none {
  list-style: none;
  padding-left: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * SPECIALE TEKST-KLASSEN
 * ─────────────────────────────────────────────────────────────────────────── */

/* Section label — kleine gouden uppercase tekst boven koppen */
.section-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--space-3);
}

/* Goud geaccentueerde kop-span */
.text-gold {
  color: var(--color-gold);
}

/* Tekst op donkere achtergrond */
.text-on-dark {
  color: var(--color-text-on-dark);
}

.text-on-dark-muted {
  color: var(--color-cream-dark);
}

/* Lead tekst (grotere intro-alinea) */
.text-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .text-lead {
    font-size: var(--text-xl);
  }
}

/* Kleine tekst */
.text-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.text-xs {
  font-size: var(--text-xs);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * PROSE — rijke tekstblokken (artikelen, kennisbank)
 * ─────────────────────────────────────────────────────────────────────────── */

.prose {
  max-width: 65ch;
}

.prose h2 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.prose h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose p {
  margin-bottom: var(--space-4);
}

.prose ul,
.prose ol {
  margin-bottom: var(--space-4);
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * BLOCKQUOTE — citaten
 * ─────────────────────────────────────────────────────────────────────────── */

blockquote {
  border-left: 3px solid var(--color-gold);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

blockquote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * BADGES & PILLS
 * ─────────────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.badge-gold {
  background-color: var(--color-gold);
  color: var(--color-charcoal);
}

.badge-dark {
  background-color: var(--color-charcoal);
  color: var(--color-gold);
}

.badge-green {
  background-color: var(--color-green-dark);
  color: var(--color-white);
}

.badge-blue {
  background-color: var(--color-blue-dark);
  color: var(--color-white);
}

.badge-outline {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-cream-dark);
}

/* Trust pill (kleine check + tekst) */
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-cream-dark);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * STATISTIEKEN NUMMERS
 * ─────────────────────────────────────────────────────────────────────────── */

.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: 1;
  color: var(--color-charcoal);
}

.stat-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: rgba(26, 26, 24, 0.6);
}