/* ================================================================
   Buiten Buddies — Design System
   Pixel-verified from logo, flyer & infographics (Merkstijlgids v2.0)
   ----------------------------------------------------------------
   Slogan: "Log uit, beleef echt."
   Domein: www.buitenbuddies.org
   ================================================================ */

/* --- Fonts ---------------------------------------------------- */
/* All four families are self-hosted from /fonts. */
@font-face {
  font-family: 'Fredoka One';
  src: url('fonts/Fredoka_One_Regular.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gochi Hand';
  src: url('fonts/Gochi_Hand_Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/Nunito_Sans_Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/Nunito_Sans_Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/Nunito_Sans_SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/Nunito_Sans_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat_Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLORS — Primary palette (pixel-verified)
     ============================================================ */

  /* Logo greens */
  --bb-green-dark:      #064530; /* Logo wordmark, gras/grond. Bodytekst-headings. */
  --bb-green-forest:    #135637; /* Primary CTA, koppen, accentbalken. */
  --bb-green-logo:      #8DBB4E; /* Big circle behind illustration. */
  --bb-green-light:     #94B143; /* Cirkelborders rond foto's, focus-ring. */
  --bb-green-olijf:     #5E7A22; /* Verdiept logogroen. Leesbaar als tekst op wit. */
  --bb-green-grass:     #AFC600; /* Heldere geelgroen, illustratie-accent. */
  --bb-green-mid:       #6FB561; /* Bomen & gras details in illustraties. */

  /* Backgrounds */
  --bb-cream:           #FDFDF5; /* Gebroken wit, page background (27% v/d flyer). */
  --bb-mint:            #E8F4EC; /* Afwisselende sectie-achtergrond. */
  --bb-white:           #FFFFFF;
  --bb-gray-light:      #DBE5D9; /* Kaart-achtergrond, subtiele blokken. */

  /* Accents (sparingly) */
  --bb-yellow:          #FAD728; /* Decoratief: sterretjes, uitroep. */
  --bb-orange:          #FA9B23; /* Typografie-accent (alleen tekst). */

  /* Neutrals & text */
  --bb-ink:             #060707; /* Bodytekst, contour, donkere iconen. */
  --bb-ink-soft:        #2A3530; /* Iets zachter dan ink, voor lange tekst. */
  --bb-muted:           #626E67; /* Captions, meta info. */

  /* Semantic */
  --bb-success:         #135637;
  --bb-error:           #B71C1C;
  --bb-focus:           #94B143;

  /* ============================================================
     SEMANTIC ROLES (foreground / background / surface)
     ============================================================ */
  --fg-1:               var(--bb-ink);
  --fg-2:               var(--bb-ink-soft);
  --fg-muted:           var(--bb-muted);
  --fg-on-green:        var(--bb-white);

  --bg-page:            var(--bb-cream);
  --bg-alt:             var(--bb-mint);
  --bg-surface:         var(--bb-white);
  --bg-surface-soft:    var(--bb-gray-light);
  --bg-band:            var(--bb-green-dark); /* dark footer/banner */

  --border-card:        rgba(6, 69, 48, 0.08);
  --border-photo:       var(--bb-green-light); /* signature 4px circle border */

  /* ============================================================
     TYPOGRAPHY — families
     ============================================================ */
  --font-display:   'Fredoka One', 'Fredoka', 'Nunito Sans', system-ui, sans-serif; /* H1/H2/H3, buttons */
  --font-body:      'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;             /* paragraph */
  --font-hand:      'Gochi Hand', 'Bradley Hand', cursive;                          /* citaten, accentkop */
  --font-logo:      'Montserrat', 'Nunito Sans', sans-serif;                        /* exact logo lockup */

  /* Type scale — desktop (mobile via @media below) */
  --fs-h1:          48px;
  --fs-h2:          32px;
  --fs-h3:          24px;
  --fs-lead:        20px;
  --fs-body:        17px;
  --fs-small:       15px;
  --fs-caption:     14px;
  --fs-button:      16px;

  --lh-tight:       1.15;
  --lh-snug:        1.3;
  --lh-body:        1.55;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        20px;
  --space-6:        24px;
  --space-8:        32px;
  --space-10:       40px;
  --space-12:       48px;
  --space-16:       64px;
  --space-20:       80px;
  --space-24:       96px;

  --content-max:    1200px;     /* max inhoudsbreedte */

  /* ============================================================
     RADII & ELEVATION
     ============================================================ */
  --radius-sm:      8px;
  --radius-md:      12px;       /* kleine kaarten, foto's rechthoekig */
  --radius-lg:      16px;       /* kaarten */
  --radius-xl:      24px;       /* speels grote panels */
  --radius-pill:    28px;       /* primaire knoppen */
  --radius-circle:  9999px;

  --shadow-card:    0 2px 8px rgba(6, 7, 7, 0.08);
  --shadow-card-h:  0 6px 18px rgba(6, 7, 7, 0.12);
  --shadow-sticky:  0 2px 12px rgba(6, 7, 7, 0.06); /* header */
  /* Focusring in twee lagen: donkergroen op lichte vlakken, cream op donkere vlakken.
     Zo haalt de ring altijd minimaal 3:1 met de achtergrond (WCAG 1.4.11). */
  --shadow-focus:   0 0 0 3px #064530, 0 0 0 6px #FDFDF5;
  --shadow-focus-op-donker: 0 0 0 3px #FDFDF5, 0 0 0 6px #064530;

  /* Photo signature: 4px solid green border + perfect circle */
  --photo-ring:     4px solid var(--border-photo);

  /* Motion */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:         140ms;
  --t-base:         220ms;
  --t-slow:         420ms;
}

/* Mobiele typeschaal ------------------------------------------
   Op een telefoon is de lopende tekst 18 pixels en de inleiding 20, dus ruim boven
   de ondergrens die WCAG 2.2 en de Europese toegankelijkheidsrichtlijn vragen. De
   koppen gaan in dezelfde verhouding mee omhoog, zodat de opbouw van de pagina
   hetzelfde aanvoelt als op de desktop. Onder de 18 pixels komt alleen tekst die
   geen leestekst is: een label, een pil, een tag of een bijschrift. */
@media (max-width: 720px) {
  :root {
    --fs-h1:    36px;
    --fs-h2:    27px;
    --fs-h3:    22px;
    --fs-lead:  20px;
    --fs-body:  18px;
    --fs-small: 16.5px;
    --fs-caption:16px;
    --fs-button:16px;
  }
}

/* ================================================================
   BASE RESET & SEMANTIC ELEMENTS
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--bb-green-dark);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }

p { margin: 0 0 1em; }
p.lead { font-size: var(--fs-lead); color: var(--fg-2); }

a {
  color: var(--bb-green-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--bb-green-dark); }

blockquote, .testimonial {
  font-family: var(--font-hand);
  font-size: var(--fs-lead);
  color: var(--bb-green-dark);
  line-height: 1.4;
  margin: 0;
}

::selection { background: var(--bb-yellow); color: var(--bb-ink); }

/* Focus ring (accessibility) */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}
/* Op donkergroene vlakken de lagen omdraaien, zodat de ring zichtbaar blijft. */
.bb-section--dark :focus-visible,
.bb-footer :focus-visible,
.bb-chapter--dark :focus-visible,
.bb-award-banner :focus-visible,
.bb-legal__contact :focus-visible,
.bb-faq__cta :focus-visible,
.bb-wa__ctacard :focus-visible,
.bb-md__perscard :focus-visible {
  box-shadow: var(--shadow-focus-op-donker);
}
/* Windows-hoogcontrastmodus: systeemkleur als ring. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; }
}

/* ================================================================
   UTILITY CLASSES (light, opt-in)
   ================================================================ */
.bb-container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); }
.bb-photo-circle {
  border-radius: var(--radius-circle);
  border: var(--photo-ring);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}