/*
Theme Name:   Sportfondsen
Theme URI:    https://guifi.nl
Description:  Generiek child theme voor klantsites. Vaste header, footer en menu's; de Content Builder is de standaard voor pagina's, Elementor alleen voor de content van campagnepagina's.
Author:       GuifiLab
Template:     hello-elementor
Version:      0.1.0
Text Domain:  sportfondsen
*/

:root {
  --gb-container: 1200px;
  --gb-gutter: 24px;
  --gb-tekst: #1a1a1a;
  --gb-achtergrond: #ffffff;
  --gb-rand: #e5e7eb;
  --gb-accent: #111111;
}

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

body { margin: 0; color: var(--gb-tekst); background: var(--gb-achtergrond); }

.gb-container {
  max-width: calc(var(--gb-container) + 2 * var(--gb-gutter));
  margin-inline: auto;
  padding-inline: var(--gb-gutter);
}

/* --- Header ------------------------------------------------------------- */

.gb-header { border-bottom: 1px solid var(--gb-rand); background: var(--gb-achtergrond); }
/* Ligt de header in het ontwerp over een hero-beeld, dan is hij dáár doorzichtig met lichte tekst
   en elders dicht met donkere: de kleur volgt de context, nooit één waarde site-breed. Per pagina
   gezet in header.php (_guifi_header_variant). chrome.css vult de gemeten kleuren hierover aan. */
.gb-header--op-beeld { background: transparent; border-bottom: 0; color: #fff; }
.gb-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px;
}
.gb-header__logo { font-weight: 700; font-size: 20px; color: inherit; text-decoration: none; }
.gb-header__logo img { display: block; max-height: 44px; width: auto; }

.gb-header__rechts { display: flex; align-items: center; gap: var(--gb-menu-gap, 28px); }
.gb-nav__menu { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.gb-nav__menu a { color: inherit; text-decoration: none; font-size: 16px; }
.gb-nav__menu .current-menu-item > a { text-decoration: underline; text-underline-offset: 6px; }

.gb-header__cta {
  display: inline-block; padding: 12px 22px; border-radius: 6px;
  background: var(--gb-accent); color: #fff; text-decoration: none; font-size: 16px; white-space: nowrap;
}

.gb-menu-toggle {
  display: none; background: none; border: 1px solid var(--gb-rand); border-radius: 6px;
  padding: 10px; cursor: pointer; line-height: 0;
}
.gb-menu-toggle__balk { display: block; width: 20px; height: 2px; background: currentColor; margin: 4px 0; }

/* Zichtbare focus: de header is op elke pagina het eerste wat je met het toetsenbord bereikt. */
.gb-header a:focus-visible, .gb-menu-toggle:focus-visible, .gb-footer a:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px;
}

@media (max-width: 767px) {
  .gb-menu-toggle { display: block; }
  .gb-nav { display: none; width: 100%; }
  .gb-nav.is-open { display: block; }
  .gb-header__inner { flex-wrap: wrap; }
  .gb-header__rechts { width: 100%; flex-direction: column; align-items: flex-start; gap: 0; }
  .gb-nav__menu { flex-direction: column; gap: 0; padding: 8px 0 16px; }
  .gb-nav__menu a { display: block; padding: 12px 0; }
  .gb-header__cta { display: none; }
  .gb-nav.is-open + .gb-header__cta { display: inline-block; margin-bottom: 16px; }
}

/* --- Footer ------------------------------------------------------------- */

.gb-footer { border-top: 1px solid var(--gb-rand); margin-top: 64px; padding-block: 48px; font-size: 16px; }
.gb-footer__logo { font-weight: 700; font-size: 20px; color: inherit; text-decoration: none; }
.gb-footer__logo img { display: block; max-width: 100%; height: auto; }
.gb-footer__links, .gb-footer__juridisch { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.gb-footer__links a, .gb-footer__juridisch a { color: inherit; text-decoration: none; }
.gb-footer__inner { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }
.gb-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gb-footer__menu a { color: inherit; text-decoration: none; }
.gb-footer__tekst { margin: 0; max-width: 48ch; line-height: 1.6; }
.gb-footer__onder {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--gb-rand);
  font-size: 14px; opacity: 0.75;
}

@media (max-width: 767px) {
  .gb-footer__inner { grid-template-columns: 1fr; }
}

/* --- Campagnepagina: Elementor vult de content, niet de hele site ------- */
.gb-campagne { min-height: 40vh; }

/* --- Knoppen op mobiel --------------------------------------------------- */
/* Onder 767px zet de Content Builder de knoppen op volle breedte
   (.guifi-rij__knoppen: column + stretch). De knop zelf is een flexbox
   (design.css: display:inline-flex), dus de text-align:center van de plugin
   raakt de tekst niet: die blijft als flex-item links staan. Centreren gaat
   daarom via justify-content. Geen enkel ander bestand zet die eigenschap op
   de knop, dus deze regel wint ondanks dat style.css eerder laadt. */
@media (max-width: 767px) {
  .guifi-knop,
  .guifi-knop--primair,
  .guifi-knop--secundair,
  .gb-header__cta {
    justify-content: center;
    text-align: center;
  }
}

/* --- Detailpagina: ruimte boven de openingsafbeelding op mobiel ---------- */
/* design.css zet de eerste rij op mobiel op padding-top: 0
   (.guifi-stijl-ruimte-a377a3.guifi-rij), waardoor de afbeelding tegen de
   header aan plakt. 24px lucht ertussen. De homepage valt erbuiten: die opent
   met een full-bleed hero die juist tegen de header hoort te liggen.
   Selector-zwaarte (0,4,1) verslaat die van design.css (0,2,0) — een media
   query verhoogt specificity niet, dus dat moet uit de selector zelf komen. */
@media (max-width: 767px) {
  body:not(.home) .guifi-rijen > .guifi-rij--media-content:first-child {
    padding-top: 24px;
  }
}

/* --- Paneel: afgeronde hoeken op desktop -------------------------------- */
/* Bij breedte-paneel schildert niet de sectie maar .guifi-rij__inner het
   gekleurde vlak (contentbuilder.css: de sectie krijgt background: none).
   Onder 767px heeft dat vlak al 9px via design.css
   (.guifi-stijl-indeling-544af7); vanaf 768px stond er niets, waardoor het
   paneel daar scherpe hoeken hield. Niets anders zet border-radius op dit
   element, dus deze regel heeft geen extra gewicht nodig. */
@media (min-width: 768px) {
  .guifi-rij--breedte-paneel .guifi-rij__inner {
    border-radius: 9px;
  }
}

/* --- Kaart: ruimte tussen titel en actielink op desktop ----------------- */
/* Vanaf 1025px zet design.css de row-gap van deze kaarten op 0
   ([data-figma="1:1640"] .guifi-kaart:nth-child(n)) en vangt de ruimte onder
   het beeld op met een margin op .guifi-kaart__beeld. Daardoor valt de
   actielink strak tegen de titel. Mobiel lost design.css dit al zo op met
   margin-top op .guifi-kaart__actie; hier hetzelfde, maar op de tekstwrapper,
   want die is de flex-sibling van de titel.
   Alleen kaarten mét tekst worden geraakt — de kaart-links-varianten
   (detailpagina's) bevatten enkel een titel, dus die blijven ongemoeid. */
@media (min-width: 1025px) {
  .guifi-rij--kaarten .guifi-kaart__titel + .guifi-kaart__tekst {
    margin-top: 16px;
  }
}

/* --- "Direct inschrijven" in het uitklapmenu ---------------------------- */
/* header.php zet de knop twee keer neer: één keer in de <nav> (met
   .gb-nav__cta) en één keer in de headerregel. Hieronder is er altijd precies
   één zichtbaar. Twee kopieën omdat het mobiele paneel absoluut gepositioneerd
   is (design.css) — een knop náást de nav valt er dan per definitie buiten. */
.gb-header__cta.gb-nav__cta { display: none; }

@media (max-width: 1399px) {
  /* Zodra de hamburger verschijnt hoort de knop in het paneel. Deze selector
     (0,4,1) moet zwaarder zijn dan chrome.css' `.gb-nav.is-open +
     .gb-header__cta` (0,3,0), die hem hier juist weer aanzette. */
  body .gb-header .gb-nav.is-open + .gb-header__cta { display: none; }
  /* inline-flex: op tablet houdt de knop zijn eigen breedte, net als in de headerregel op
     desktop. Alleen in het smalle paneel hieronder rekt hij op tot de volle breedte. */
  .gb-nav .gb-header__cta.gb-nav__cta {
    display: inline-flex;
    justify-content: center;
    margin-bottom: 16px;
  }
}

@media (max-width: 767px) {
  /* Het paneel heeft 24px ruimte boven en onder, de menulinks hun 24px links en
     rechts (design.css). De knop volgt diezelfde rooilijn en vult de rest. */
  .gb-nav.is-open .gb-nav__cta {
    display: flex;
    margin: 23px 24px 0;
    justify-content: center;
  }
  /* Afsluitende lijn onder het laatste menu-item, in hetzelfde ritme als de
     lijnen ertussen (design.css: 23px ruimte + 2px wit). */
  body .gb-header .gb-nav.is-open .gb-nav__menu {
    padding-bottom: 23px;
    border-bottom: 2px solid #ffffff;
  }
}

/* Het blok waar die knop naartoe springt (id uit functions.php): een beetje
   lucht boven de landing, zodat het paneel niet tegen de header aan eindigt. */
#zwembaden { scroll-margin-top: 24px; }

/* --- Paneel: altijd inspringen en altijd over het beeld heen ------------ */
/* De overlap zat alleen vanaf 1025px (contentbuilder.css) en onder 767px
   (design.css, met een eigen -200px). De inspringing kwam van
   `max-width: 1440px; margin-inline: auto` en deed dus pas iets op schermen
   bréder dan 1440px — daartussenin liep het vlak rand tot rand. Hieronder
   gelden beide vanaf 768px in één keer.
   Onder 767px blijft design.css aan zet: daar staat een eigen -200px en een
   eigen margin-inline van 24px, allebei uit het mobiele ontwerp. */
@media (min-width: 768px) {
  /* Drie classes: .guifi-rij--mt-geen zet margin-top op 0 en zou een lichtere
     selector verslaan — een media query telt niet mee in specificity. Alleen
     het paneel, niet elke --overlap-band: het hero-beeld draagt die class ook,
     met een eigen overlap van 48px, en hoort te blijven waar het staat. */
  .guifi-rij.guifi-rij--breedte-paneel.guifi-rij--overlap {
    margin-top: calc(-1 * var(--guifi-overlap, 0px));
    position: relative;
    z-index: 1;
  }
  /* min(): op smalle schermen wint `100% - 48px` en houdt het vlak links en
     rechts 24px vrij; op brede schermen wint de paneelbreedte uit tokens.css
     en blijft het vlak gecentreerd, zoals het ontwerp het bedoelt. */
  .guifi-rij--breedte-paneel .guifi-rij__inner {
    max-width: min(var(--guifi-container-paneel, 1440px), calc(100% - 48px));
    margin-inline: auto;
  }
}

/* --- Hero-beeld: rij net zo hoog als de foto ---------------------------- */
/* design.css zet vanaf 1025px `min-height: 800px` op .guifi-rij--media-single.
   Die 800px klopt precies bij een scherm van 1920 (de foto is 2560x1067, dus
   1920 * 1067/2560 = 800). Wordt het scherm smaller, dan krimpt de foto mee
   maar blijft de rij 800px hoog: bij 1200px is het beeld nog 500px en staat er
   300px wit onder. De -184px overlap van het paneel eronder wordt daar dus
   eerst opgesoupeerd door die witte strook, en het blok zakt zichtbaar weg.
   Zonder die ondergrens is de rij precies zo hoog als de foto en valt het
   paneel op elke breedte over het beeld.
   Drie classes (0,3,0) omdat design.css ná style.css laadt; het blijft beperkt
   tot de full-bleed beeldband, want daar is de hoogte puur die van de foto. */
.guifi-rij.guifi-rij--media-single.guifi-rij--breedte-vol {
  min-height: 0;
}

/* --- Hamburger: op mobiel dezelfde knop als op tablet -------------------- */
/* design.css strijkt de knop onder 767px vlak: `body .gb-menu-toggle
   { border: 0; padding: 0; border-radius: 0 }`, en maakt de streepjes 24px in
   plaats van 20px. Boven die grens geldt de basisstijl hierboven en heeft de
   knop wél zijn omlijning. Hieronder zetten we die basisstijl terug, zodat de
   knop op elke breedte dezelfde is. Het staat vijf keer in design.css (één per
   paginavariant), telkens als `body .gb-menu-toggle` (0,1,1) — met .gb-header
   erbij komt deze op (0,2,1) en wint hij van alle vijf. */
@media (max-width: 767px) {
  body .gb-header .gb-menu-toggle {
    border: 1px solid var(--gb-rand);
    border-radius: 6px;
    padding: 10px;
  }
  body .gb-header .gb-menu-toggle__balk {
    width: 20px;
    height: 2px;
    margin: 4px 0;
    background: currentColor;
  }
}