/* ============================================================
   brand.css — DE ENIGE BRON VAN WAARHEID VOOR HET MERK-DESIGN.

   Scouts Beernem. De kleuren zijn niet bedacht: ze zijn gemeten
   uit de bestaande social-media-posts in /_oude-site (de groene
   achtergrond en het gele accent die op elke post terugkomen).

   ZOWEL de frontend (via main.css) ALS de CMS-admin laden dit
   bestand. Eén plek wijzigen = frontend én CMS volgen.

   Wijzig je het lettertype? Pas dan ook de Google-Fonts <link>
   aan in de HTML-templates én in cms/public/*.html.

   Volledige uitleg + gebruiksregels: zie DESIGN-REGELS.md
   ============================================================ */

/* ── Het display-lettertype ──────────────────────────────────────────
   Berlin Sans FB Demi wordt MEEGELEVERD als webfont, zodat elke bezoeker
   hem krijgt en niet alleen wie hem lokaal heeft staan. Zonder dit bestand
   viel elke telefoon terug op een vervangend lettertype.

   Het font bestaat in maar EEN snede (demi/bold). Met font-weight: 100 900
   komt elk gevraagd gewicht op diezelfde snede uit, dus een regel die per
   ongeluk gewicht 400 vraagt levert nooit meer een andere letter op.

   LET OP, LICENTIE: Berlin Sans FB is van The Font Bureau en zit standaard
   bij Microsoft Office. Een Office- of desktoplicentie dekt GEEN webgebruik.
   Voor een publieke site is een webfont-licentie nodig. Zie DESIGN-REGELS.md
   hoofdstuk 3. */
@font-face {
    font-family: 'Scouts Display';
    src: url('../fonts/berlin-sans-fb-demi.woff2') format('woff2'),
         url('../fonts/berlin-sans-fb-demi.woff') format('woff'),
         local('Berlin Sans FB Demi Bold'), local('BerlinSansFBDemi-Bold');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Merkkleuren (gemeten uit de social posts) ── */
    --brand:       #536E41;   /* HUISGROEN. Achtergrond van elke post. */
    --brand-dark:  #3E5430;   /* dieper groen: hover, koppen op licht */
    --brand-deep:  #2B3A21;   /* donkerste groen: footer, dark bands */
    --brand-soft:  #7C9463;   /* zachter groen: illustratielijnen, rustige accenten */
    --brand-licht: #92AE91;   /* salie: tekst OP het huisgroen. LET OP: contrast 2,4:1,
                                 onder de WCAG-ondergrens van 3:1. Bewuste keuze van de
                                 klant. #ACCDAB is dezelfde kleurtoon en haalt wel 3,3:1. */

    --accent:      #F8C200;   /* HUISGEEL. Titels op groen, knoppen, highlights. */
    --accent-dark: #D9A800;   /* hover-variant van het geel */
    --accent-soft: #FFF0BC;   /* zacht geel: markeringen, badge-vullingen */

    /* ── Neutralen ── */
    --ink:     #232E1A;       /* koppen */
    --body:    #414D36;       /* lopende tekst */
    --muted:   #6E7A61;       /* secundaire tekst, labels */
    --line:    #DDE3D3;       /* omranding (ALTIJD rondom, nooit één kant) */
    --bg:      #FFFDF7;       /* hoofdachtergrond: warm wit, geen kil #fff */
    --bg-soft: #F2F0E4;       /* zachte sectie-achtergrond */
    --bg-dark: #2B3A21;       /* donkere blokken/footer */

    /* ── Takken ──
       TODO Scouts Beernem: deze zes tinten zijn afgeleid van het merk zodat
       het ontwerp nu al werkt. De écht vaste tak-kleuren staan als color
       styles (01 t/m 07, "kapoenen", "gold") in het Figma-bestand
       "Cold outreach". Neem ze daar over zodra ze bevestigd zijn. */
    --tak-kapoenen:   #F8C200;
    --tak-wouters:    #E07A28;
    --tak-woudlopers: #7C9463;
    --tak-jonggivers: #3E7A8C;
    --tak-givers:     #A8452F;
    --tak-jins:       #2B3A21;

    /* ── Vorm ──
       Alles is rond. Niets in deze huisstijl heeft een scherpe hoek. */
    --radius-sm:  10px;
    --radius:     18px;   /* standaard kaart/afbeelding */
    --radius-lg:  28px;   /* grote blokken, foto's */
    --radius-xl:  44px;   /* hero-panelen */
    --radius-pill: 999px; /* knoppen, badges, labels */

    /* Schaduw bestaat, maar is STATISCH. Nooit een schaduw die
       verschijnt of verandert bij hover (zie DESIGN-REGELS.md §2). */
    --shadow:    0 10px 30px rgba(43, 58, 33, .10);
    --shadow-sm: 0 4px 14px rgba(43, 58, 33, .08);

    /* ── Typografie ──
       Display = 'Berlin Sans FB Demi': het huislettertype van alle drukwerk
       en social posts. Dat font heeft GEEN webfont-licentie, dus het wordt
       alleen gebruikt bij wie het lokaal heeft. Voor alle andere bezoekers
       valt de site terug op Fredoka: dezelfde geometrische, brede, vriendelijke
       vorm. Zie DESIGN-REGELS.md §3 voor de keuze en de licentie-optie. */
    --font-display: 'Scouts Display', system-ui, -apple-system, sans-serif;
    /* components.css noemt het display-lettertype --font-head. Die naam had
       geen waarde, dus alles daar viel stil terug op sans-serif. Eén alias
       lost dat in één keer op voor alle acht plekken. */
    --font-head:    var(--font-display);

    /* Het agenda-icoontje als data-URI, zodat de knop "Zet in mijn agenda"
       het als mask kan gebruiken zonder dat de iconensprite nodig is. */
    --ico-agenda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='38' height='31' rx='3'/%3E%3Cpath d='M5 21h38M15 6v8M33 6v8'/%3E%3C/svg%3E");

    /* Een lokaal met een streep erdoor, in dezelfde getekende lijn als
       het agenda-icoon. Voor het label op de verhuurpagina: dat zegt in
       woorden dat de lokalen niet te huur zijn, en dit zegt het in beeld.
       Een tent stond er eerst, maar dat las als een waarschuwingsbord. */
    --ico-geen-lokaal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 42V21L24 8l15 13v21z'/%3E%3Cpath d='M6 45 L42 5'/%3E%3C/svg%3E");
    --font-body:    'Nunito', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-hand:    'Caveat', 'Bradley Hand', cursive;

    /* Typeschaal: vloeiend, zodat koppen op mobiel niet breken */
    --step--1: clamp(.94rem, .9rem + .2vw, 1.02rem);
    --step-0:  clamp(1rem, .96rem + .25vw, 1.13rem);
    --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
    --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --step-3:  clamp(1.9rem, 1.5rem + 2vw, 3rem);
    --step-4:  clamp(2.4rem, 1.7rem + 3.4vw, 4.5rem);

    /* ── Ritme ──
       Sectiehoogte wordt bepaald door lucht, niet door min-height.
       Zie DESIGN-REGELS.md §4. */
    --band-y:  clamp(4.5rem, 10vw, 10rem);   /* ruime sectiehoogte: rust komt van lucht */
    --gap:     clamp(1.2rem, 2.5vw, 2.2rem);
    --measure: 62ch;   /* max leesbreedte lopende tekst */
    --wrap:    1180px; /* max paginabreedte */
}

/* ── De zes takken ──────────────────────────────────────────────────
   Kleur en logo per tak. Staan hier en niet in een pagina-CSS, want de
   homepage, de tak-pagina's en het mega-menu gebruiken ze alle drie.
   Het logo is een mask, zodat het currentColor volgt: op het gele vlak
   van de kapoenen moet het donkergroen zijn, op de rest wit. */
/* Het tak-logo: de echte logo's, als mask zodat ze currentColor volgen.

   LET OP bij hergebruik: een relatieve url() in een custom property wordt
   opgelost vanuit het bestand dat de variabele GEBRUIKT. Gebruik je
   var(--tak-logo) vanuit assets/css/pages/, dan zoekt de browser in
   assets/css/images/ en laadt er niets. Zet het pad daar dan zelf opnieuw
   (zie leiding.css en tak.css). */
.tak-logo {
    width: 2.8rem;
    height: 2.8rem;
    flex: none;
    background-color: transparent;
    -webkit-mask: var(--tak-logo) center / contain no-repeat;
    mask: var(--tak-logo) center / contain no-repeat;
}

@supports (mask: url(#m)) or (-webkit-mask: url(#m)) {
    .tak-logo { background-color: currentColor; }
}

.tak--kapoenen   { --tak-kleur: var(--tak-kapoenen);   --tak-logo: url('../images/static/takken/kapoenen.png'); }
.tak--wouters    { --tak-kleur: var(--tak-wouters);    --tak-logo: url('../images/static/takken/wouters.png'); }
.tak--woudlopers { --tak-kleur: var(--tak-woudlopers); --tak-logo: url('../images/static/takken/woudlopers.png'); }
.tak--jonggivers { --tak-kleur: var(--tak-jonggivers); --tak-logo: url('../images/static/takken/jonggivers.png'); }
.tak--givers     { --tak-kleur: var(--tak-givers);     --tak-logo: url('../images/static/takken/givers.png'); }
.tak--jins       { --tak-kleur: var(--tak-jins);       --tak-logo: url('../images/static/takken/jins.png'); }

/* ── Basis-typografie (gedeeld door frontend + CMS) ── */
body {
    font-family: var(--font-body);
    color: var(--body);
    font-size: var(--step-0);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -.01em;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

a { color: var(--brand-dark); }

/* ── Knoppen (gedeeld door frontend + CMS) ──
   Altijd een pil. Hover verandert alleen kleur en positie:
   nooit een border of schaduw erbij (DESIGN-REGELS.md §2). */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .01em;
    text-decoration: none;
    padding: .85rem 1.75rem;
    border-radius: var(--radius-pill);
    border: 0;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }

/* Het geel is de opvallendste knop. Zwarte tekst, want geel + wit leest niet. */
.btn-accent { background: var(--accent); color: var(--brand-deep); }
.btn-accent:hover { background: var(--accent-dark); color: var(--brand-deep); }

.btn-light { background: #fff; color: var(--brand-dark); }
.btn-light:hover { background: var(--accent-soft); color: var(--brand-deep); }

/* "Outline" = border rondom alle vier de kanten.
   De randkleur staat VAST, niet op currentColor. Met currentColor
   verandert de rand mee met de tekstkleur zodra je hovert, en dat is een
   verkapte borderwissel: er verschijnt dan een ring om de knop die op een
   schaduw lijkt. Zie DESIGN-REGELS.md §5.2. */
.btn-outline {
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--ink);
}

.btn-outline:hover { background: var(--ink); color: var(--bg); }

/* Witte rand die NIET meebeweegt met de tekstkleur. Bij hover wordt de
   vulling wit, en omdat de rand ook wit is verdwijnt hij vanzelf: een
   schone witte pil zonder ring. Deze knop blijft ook stilstaan, geen lift. */
.btn-outline-light {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.btn-outline-light:hover {
    background: #fff;
    color: var(--brand-dark);
    transform: none;
}

/* ── Formulieren ── */
input, textarea, select {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: .8rem 1rem;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--body);
    width: 100%;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--brand);
}

/* ── Toegankelijkheid ── */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}