/* GSM-FOOTER (gedeeld, 2026-11-02): dezelfde footer als op Club Ommetoer, voor elke pagina.
   Bron: het footerstuk uit /pagina-systeem.css (goedgekeurd op Club). Pagina's met pagina-systeem.css hebben dit al;
   alle andere pagina's laden dit bestand. Vereist de haakjes in de footer-HTML (foot__bv, foot__adr, foot__btw, foot__br, foot__komma, foot__dot). */
@media (max-width:767px){
  /* footer: bovenaan de slogan links en "© Ommetoer BV" rechts; dan socials links en de pagina's rechts; een strook
     Instagram-foto's; het woordmerk over de volle breedte; onderaan klein btw-nummer, voorwaarden en privacy op één rij.
     Alles in dezelfde kleine caps, zonder lijnen of kaders. (De haakjes in de footer-HTML zet page() in het buildscript.) */
  .foot .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"soc soc menu" "ig ig ig" "logo logo logo" "slog slog bv" "lijn lijn lijn" "btw av pc";column-gap:3vw;align-items:start}
  .foot .foot__grid,.foot .foot__brand,.foot .foot__ig,.foot .foot__brand p,.foot .foot__legal,.foot .foot__legal > span:not(.caps){display:contents !important}
  .foot .foot__brand > a{grid-area:logo;display:block;margin:10vw 0 6vw}
  .foot .foot__brand img{display:block;width:100%;height:auto;margin:0}
  .foot .foot__soc{grid-area:soc;display:flex;flex-direction:column;align-items:flex-start;gap:1.4vw}
  .foot .foot__soc a{display:inline-flex;align-items:center;gap:2.2vw}
  .foot .foot__soc a::after{content:attr(aria-label)}
  .foot .foot__soc svg{height:3.4vw;width:auto;flex:none}
  .foot .foot__menu{grid-area:menu;display:flex;flex-direction:column;align-items:flex-end;gap:1.4vw;margin:0;padding:0;border:0;text-align:right}
  .foot .foot__menu li{border:0;margin:0;display:flex}
  .foot .foot__menu li:has(a[href*="meet-the-team"]){display:none}
  .foot .foot__tiles{grid-area:ig;display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:2vw;width:100%;margin:9vw 0}
  .foot .foot__tiles img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
  html:not(#a) body:not(#z) .foot :is(.foot__menu a,.foot__soc a,.foot__brand p,.foot__brand p *,.foot__legal,.foot__legal *){font-family:var(--f-caps) !important;font-size:var(--t-eyebrow) !important;font-weight:400 !important;text-transform:uppercase !important;letter-spacing:-.02em !important;line-height:1.45 !important}
  html:not(#a) body:not(#z) .foot .foot__menu a{display:inline-block;padding:0;border:0}
  .foot .foot__brand p br{display:none}
  .foot .foot__legal .caps{grid-area:slog;display:block;white-space:nowrap}
  .foot .foot__legal .caps .foot__br{display:none}
  .foot .foot__bv{grid-area:bv;justify-self:end;text-align:right;white-space:nowrap}
  .foot .wrap::after{content:"";grid-area:lijn;display:block;border-top:1px solid var(--p-lijn-donker);margin:5vw 0 4vw}
  .foot .foot__adr{display:none}
  .foot .foot__btw{grid-area:btw;justify-self:start}
  html:not(#a) body:not(#z) .foot :is(.foot__btw,.foot__legal a){font-size:2.6vw !important;white-space:nowrap}
  .foot .foot__br{display:block}
  .foot .foot__komma{display:none}
  .foot .foot__legal a{white-space:nowrap}
  .foot .foot__legal a[href*="voorwaarden"]{grid-area:av;justify-self:center}
  .foot .foot__legal a[href*="privacy"]{grid-area:pc;justify-self:end}
  .foot .foot__dot{display:none !important}
}

/* GSM-OPT-IN (gedeeld, 2026-11-02, Laura: "moet allemaal veel kleiner en mooier"): kleinere titel, rustige invulregel,
   'no spam' als kleine caps; meer lucht boven en onder */
@media (max-width:767px){
  html body:not(#z) .optinband .optin{padding:13vw 0 12vw !important}
  html body:not(#z) .optin .tt--optin{font-size:5.6vw !important;line-height:1.2 !important;letter-spacing:-.015em}
  html body:not(#z) .optin .tt--optin .tt__1,html body .optin .tt--optin .tt__2{display:block}
  html body:not(#z) .optin{row-gap:0 !important}
  html body:not(#z) .optin small .g-d{display:none}
  html body:not(#z) .optin .optin__f{margin-top:6vw;width:100%;max-width:none}
  html body:not(#z) .optin form{padding-bottom:2.4vw !important;gap:3vw}
  html body:not(#z) .optin input{font-size:3.73vw !important;padding:1vw 0 !important}
  html body:not(#z) .optin button svg{width:5.4vw;height:auto}
  html:not(#a) body:not(#z) .optin small{display:block;margin-top:3.4vw !important;font-family:var(--f-caps) !important;text-transform:uppercase;font-size:2.75vw !important;letter-spacing:-.02em;line-height:1.45 !important}
}

/* OPT-IN NA EEN BRUIN BLOK (2026-11-05): de blokken plakken als vellen over elkaar, maar bruin op bruin heeft geen zichtbare rand:
   de tekst van het vorige blok leek weggesneden. Dat ene blok scrolt daarom gewoon mee. Geldt op elk scherm. */
html.js body main > section[data-navtheme="bruin-blauw"]:has(+ .optinband){position:relative !important;top:auto !important}

/* gsm: geen haarlijn rond "Add a little spice". Afgeronde blokhoogtes lieten op sommige schermbreedtes 1 pixel open, waar het gele blok erachter doorheen scheen (2026-11-06). Verandert de layout niet. */
@media (max-width:767px){
  html body .optinband{box-shadow:0 -2px 0 0 #1D0908,0 2px 0 0 #1D0908}
}