/* Footer — Scouts Beernem.
   Donkergroen vlak met het doodle-patroon. Geen scheidingslijnen:
   de blokken worden gescheiden door lucht, niet door een border. */

footer {
    position: relative;
    background: var(--bg-dark);
    color: rgba(255, 255, 255, .82);
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/static/doodle-patroon.svg') repeat;
    background-size: 420px;
    opacity: .45;
    pointer-events: none;
}

.footer-container {
    position: relative;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    padding: clamp(2.5rem, 5vw, 4rem) 0 2.5rem;
}

.footer-section h3,
.footer-section h4 {
    font-family: var(--font-display);
    color: var(--accent);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.footer-section p {
    color: rgba(255, 255, 255, .8);
    line-height: 1.65;
    margin-bottom: .5rem;
}

.footer-section ul { list-style: none; padding: 0; }

.footer-section li { margin-bottom: .45rem; }

.footer-section a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    transition: color .18s ease;
}

.footer-section a:hover { color: var(--accent); text-decoration: underline; }

/* Mail je tak: een envelopje voor elke naam.
   inline-flex, want met een gewone inline-svg zakt een lange takna(a)m onder
   het envelopje door in plaats van ernaast te blijven staan.
   De onderstreping bij hover hoort onder de NAAM, niet onder het envelopje:
   een streep onder een pictogram leest als een fout. Vandaar de <span>. */
.footer-section--takken a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.footer-section--takken .ico {
    width: 1.05em;
    height: 1.05em;
    opacity: .65;
    transition: opacity .18s ease;
}

.footer-section--takken a:hover { text-decoration: none; }
.footer-section--takken a:hover span { text-decoration: underline; }
.footer-section--takken a:hover .ico { opacity: 1; }

/* Onderbalk: eigen, iets lichtere ondergrond in plaats van een lijn erboven. */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.2rem 1.5rem;
    background: rgba(255, 255, 255, .06);
    border-radius: var(--radius);
    font-size: .92rem;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-legal p { color: rgba(255, 255, 255, .7); margin: 0; }

.legal-links {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.legal-links a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    transition: color .18s ease;
}

.legal-links a:hover { color: var(--accent); }

.separator,
.creator-separator { color: rgba(255, 255, 255, .35); }

.footer-creator {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: rgba(255, 255, 255, .7);
}

.footer-creator a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
}

.footer-creator a:hover { text-decoration: underline; }

.cms-lock-link {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .1);
    color: var(--accent);
    transition: background-color .18s ease;
}

.cms-lock-link:hover { background: rgba(248, 194, 0, .25); }

.cms-lock-link svg { width: 14px; height: 14px; }

@media (max-width: 768px) {
    /* Twee kolommen in plaats van alles onder elkaar. De twee linklijstjes zijn
       smal genoeg om naast elkaar te staan; de twee tekstblokken niet, die
       nemen de volle breedte. Scheelt een half scherm scrollen. */
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1.5rem;
        text-align: center;
    }

    .footer-section--over,
    .footer-section--contact { grid-column: 1 / -1; }

    .footer-section ul { display: inline-block; text-align: left; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-legal { flex-direction: column; gap: .5rem; }
    .legal-links, .footer-creator { justify-content: center; }
}

/* ============================================================
   SPONSORBAND — op elke pagina, net boven de footer.

   Stond eerst als sectie op de homepagina. Maar een sponsor betaalt niet
   voor één pagina: hij hoort overal onderaan, zoals in het boekje op elke
   bladzijde het logo terugkomt. Daarom verhuisde deze opmaak van home.css
   naar hier — dit bestand laadt elke pagina.

   Niet position: fixed. Een balk die over de inhoud blijft plakken kost op
   een telefoon een kwart van het scherm en staat in de weg bij het lezen.
   Vast onderaan elke pagina doet wat het moet doen: iedereen ziet ze,
   niemand wordt erdoor gehinderd.
   ============================================================ */
.sponsorband {
    padding: 2.5rem 1.25rem 0.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Staat er niets in de collectie, dan blijft de band leeg en hoort er ook
   geen witruimte te staan. */
.sponsorband:not(:has(.cms-logo)) { display: none; }
/* ============================================================
   SPONSORS
   Twee niveaus die duidelijk verschillen in waarde: hoofdsponsors
   groter en op wit, de rest kleiner en op de zachte tint.

   Elke tegel heeft een VASTE hoogte en het logo staat er met
   object-fit: contain in. Daardoor staan logo's van elke verhouding
   (breed, vierkant, hoog) toch netjes op één lijn.
   ============================================================ */
.sponsors__kop {
    text-align: center;
    font-size: var(--step-2);
    margin-bottom: .4rem;
}

.sponsors__laag {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    margin: 2rem 0 1rem;
}

/* Flexbox, geen grid: een grid lijnt een niet-volle laatste rij links uit
   en dat is hier niet te centreren. Met flex-wrap + justify-content staat
   elke rij gecentreerd, ook de laatste met minder tegels. */
.sponsorlogos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
}

/* Vaste tegelbreedte: geen groeien, geen krimpen. Anders wordt de ene
   tegel breder dan de andere en oogt de rij rommelig. De klasse .cms-logo
   is die van de renderer, .sponsorlogo die van handmatige HTML. */
.sponsorlogos .sponsorlogo,
.sponsorlogos .cms-logo {
    flex: 0 0 148px;
}

.sponsorlogos--hoofd { gap: 1rem; }

.sponsorlogos--hoofd .sponsorlogo,
.sponsorlogos--hoofd .cms-logo {
    flex: 0 0 210px;
}

/* Op een smal scherm mogen ze wel krimpen, anders lopen ze eruit. */
@media (max-width: 560px) {
    .sponsorlogos .sponsorlogo,
    .sponsorlogos .cms-logo { flex: 0 1 132px; }
    .sponsorlogos--hoofd .sponsorlogo,
    .sponsorlogos--hoofd .cms-logo { flex: 0 1 160px; }
}

/* De sponsors worden gerenderd door cms-collections.js en krijgen daar de
   generieke klasse .cms-logo. De tegel-stijl hangt dus aan beide selectors:
   dezelfde tegel, of de logo's nu uit de CMS komen of (tijdelijk) met de hand
   in de HTML staan. */
.sponsorlogo,
.sponsorlogos .cms-logo {
    display: grid;
    place-items: center;
    overflow: hidden;
    height: 78px;
    padding: .8rem 1rem;
    background: var(--bg);
    border-radius: var(--radius);
    transition: transform .18s ease, background-color .18s ease;
}

.sponsorlogo--hoofd,
.sponsorlogos--hoofd .cms-logo {
    height: 116px;
    padding: 1.1rem 1.4rem;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Elke sponsor krijgt EXACT dezelfde tegel. Geen uitzonderingen per logo:
   de sponsors wisselen jaarlijks en worden vanuit de CMS beheerd, dus een
   afwijkende achtergrond per logo is niet vol te houden. Levert een sponsor
   een logo dat op wit wegvalt, dan vragen we een bruikbaar bestand op. */
a.sponsorlogo:hover,
.sponsorlogos a.cms-logo:hover { transform: translateY(-3px); background: #fff; }

/* Het logo vult de tegel en wordt door object-fit: contain naar binnen
   geschaald. min-width/min-height op 0 is nodig: een grid-item krijgt van
   zichzelf min-height: auto en zou anders buiten de tegel groeien. */
/* Elk logo krijgt binnen zijn niveau EXACT hetzelfde kader: dezelfde
   maximale breedte en hoogte. Zo kan geen enkele sponsor groter uitpakken
   dan een andere die evenveel betaalt, en blijft een gewone sponsor altijd
   kleiner dan een hoofdsponsor. object-fit: contain schaalt elk logo in dat
   kader, ongeacht zijn eigen verhouding. */
.sponsorlogo img,
.sponsorlogos .cms-logo img {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 44px;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    /* Veel logo's hebben een eigen ingebakken achtergrondvlak. Die ronding
       zorgt dat zo'n vlak niet vierkant tegen de ronde tegel botst. */
    border-radius: 6px;
}

.sponsorlogo--hoofd img,
.sponsorlogos--hoofd .cms-logo img {
    max-width: 152px;
    max-height: 72px;
}

/* Sponsor zonder logo: de naam in de tegel. Beter een leesbare naam dan een
   leeg vak waarvan niemand ziet dat er iets hoort te staan. */
.sponsorlogos .cms-logo__naam {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.25;
    text-align: center;
    color: var(--ink);
}