/*
 * Olwidu Website Style System
 * File: olwidu.css
 * Version: 1.13.0
 * Created: 2026-05-11 UTC
 * Last updated: 2026-09-23
 * Source: olwidu-brand-guidelines.pdf v2.0
 *
 * Single source of truth for all Olwidu websites:
 *   - olwidu.com (home)
 *   - about.olwidu.com
 *   - privacy.olwidu.com
 *   - new.olwidu.com (quick start)
 *   - releases.olwidu.com
 *
 * Production location:
 *   https://olwidu.com/assets/olwidu.css
 *
 * Loaded by every subdomain via:
 *   <link rel="stylesheet" href="https://olwidu.com/assets/olwidu.css">
 *
 * Changelog:
 *   v1.13.0 (2026-09-23): SEO — app-schermen en het hero-sfeerbeeld staan nu als échte <img> in de
 *                         pagina (met alt-tekst) in plaats van als achtergrondplaatje. Een achtergrond
 *                         bestaat niet voor Google: die schermen konden dus nooit in de
 *                         afbeeldingsresultaten komen en waren onzichtbaar voor een schermlezer.
 *                         Nieuwe regels: .olw-phone__screen krijgt overflow:hidden + een img-regel,
 *                         en .olw-hero__scene > img vult de kaart zoals de achtergrond dat deed.
 *   v1.12.0 (2026-09-18): Afstandsmaten --space-5 (20px) en --space-10 (40px) toegevoegd. De pagina's
 *                         gebruikten ze al (homepage 14×, howto 13×, accommodaties 5×, horeca 1×), maar
 *                         ze bestonden niet — en dan vervalt de héle margin-regel. Zichtbaar gevolg: de
 *                         kop-blokken boven "Zo ziet Olwidu eruit" en "Dekking" stonden links in plaats
 *                         van gecentreerd, en op howto plakten de telefoon-screenshots tegen de tekst.
 *   v1.11.0 (2026-08-08): Bovenkopjes (.olw-label) leesbaarder — 0.75rem/0.1em → 0.82rem/0.08em.
 *                         Een reviewer noemde ze "tamelijk onopvallend" en stelde vet voor; ze stonden
 *                         al op 700, dus het zat in de kleine letter + wijde spatiëring. Werkt door op
 *                         álle subdomeinen (gedeelde CSS).
 *   v1.10.2 (2026-07-31): Smartphone — QR/store-teaser-kaart in de hero verborgen
 *                        (.olw-hero__qr-card display:none !important op <=768px, USER).
 *   v1.10.1 (2026-07-31): Mobiele 'Start de app'-knop groter + vetter (USER):
 *                        font-size 1.15rem -> 1.5rem, font-weight 900, hogere padding.
 *   v1.10.0 (2026-07-31): MOBIELE hero-optimalisatie (homepage, USER):
 *                        - .olw-hero top-padding op <=768px van space-24 (96px) naar
 *                          space-6 (24px) — grote witruimte boven de hero weg op smartphone.
 *                        - .olw-hero__lede verborgen op <=768px; .olw-hero__app-cta
 *                          (nieuwe dikke, volle-breedte 'Start de app'-knop) alleen zichtbaar
 *                          op <=768px, verborgen op desktop. Homepage-specifieke classes.
 *   v1.9.0 (2026-07-18): .olw-form-reveal — uitklapbaar embedded Google-formulier
 *                        achter een knop (details/summary, iframe in app-kaart-stijl,
 *                        laadt pas bij openen). Eerst gebruikt op accommodaties-CTA.
 *   v1.8.0 (2026-07-18): Hero-visual (M1): .olw-hero__grid/__visual/__scene —
 *                        sfeerbeeld-kaart (3:4, zachte schaduw) met half overlappend
 *                        telefoon-frame. Desktop ≥900px; mobiel verborgen (showcase
 *                        volgt direct onder de hero). Placeholder = green-subtle.
 *   v1.7.0 (2026-07-18): Iconografie geprofessionaliseerd — .olw-card__icon svg-regels
 *                        voor de lucide lijn-iconen (34px, merkgroen; green-light op donker).
 *                        Emoji's sitebreed vervangen door de app-iconenset (designbeslissing:
 *                        platform-consistentie + merk-match met de app + B2B-geloofwaardigheid).
 *   v1.6.0 (2026-07-18): Telefoon-frame voor app-screenshots (.olw-phones/.olw-phone/
 *                        .olw-phone__screen). Leeg sky-subtle scherm als placeholder
 *                        tot assets/shot-*.png bestaat.
 *   v1.5.0 (2026-07-18): Witte kaarten opgetild met een zachte grijs-getinte
 *                        schaduw op .olw-card — echoot de witte lijstkaarten van de
 *                        app (wit + grijze haarlijn #D1D5DB waren er al). USER: app-look.
 *   v1.4.0 (2026-07-18): Sky-accentkleur toegevoegd (#0284C7 — matcht de app-PWA
 *                        "Startpunt"-balk). Nieuwe tokens --olw-sky/-dark/-subtle +
 *                        knopvariant .olw-btn--sky. Gebruikt op het Host/QR-blok
 *                        (semantische link: "waar begin je" = startpunt).
 *   v1.3.0 (2026-07-17): Merkgroen gelijkgetrokken met de app (USER-keuze route B):
 *                        --olw-green #46A44E → #2D8A4E (app theme-color/iconen-SSOT),
 *                        --olw-green-dark #3A8F42 → #256E3F. Light/subtle-tinten
 *                        ongewijzigd. Werkt door op alle subdomeinen.
 *   v1.2.0 (2026-05-11): PNG logo (single green variant for all contexts)
 *                        Removed currentColor-based SVG handling
 *   v1.1.0 (2026-05-11): Inline SVG logo support (size/color via CSS)
 *                        Updated .olw-header__logo and .olw-footer__logo rules
 *   v1.0.0 (2026-05-11): Initial release based on Brand Guidelines v2.0
 *                        Web-safe fonts (Georgia/Trebuchet MS), no Google Fonts
 *                        4px spacing scale, full color palette
 */

/* =============================================================
 * Design Tokens
 * ============================================================= */
:root {
  /* Colors — Primary (green, nature & discovery).
     v1.3.0: gelijkgetrokken met het app-groen (#2d8a4e — theme-color/app-iconen
     SSOT in de Olwidu-app), zodat site en app één merkgroen delen. */
  --olw-green:           #2D8A4E;
  --olw-green-dark:      #256E3F;
  --olw-green-light:     #A8D5AB;
  --olw-green-subtle:    #E6F4E7;

  /* Colors — Sky (startpunt / "waar begin je" — matcht de app-PWA-balk #0284C7). */
  --olw-sky:             #0284C7;
  --olw-sky-dark:        #036AA1;
  --olw-sky-subtle:      #E0F2FE;

  /* Colors — Secondary (amber, sun & warmth) */
  --olw-amber:           #F59E0B;
  --olw-amber-light:     #FDE68A;
  --olw-sand:            #F5ECD7;
  --olw-terracotta:      #C2543A;

  /* Colors — Neutrals */
  --olw-gray-dark:       #374151;
  --olw-gray-light:      #D1D5DB;
  --olw-white:           #FFFFFF;

  /* Text colors */
  --olw-text:            #374151;
  --olw-text-muted:      #6B7280;
  --olw-text-on-dark:    #FFFFFF;
  --olw-text-on-dark-muted: rgba(255, 255, 255, 0.7);

  /* Background colors */
  --olw-bg:              #F5ECD7;
  --olw-bg-card:         #FFFFFF;
  --olw-bg-dark:         #374151;

  /* Spacing scale (4px base unit) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;   /* v1.12.0 — werd al gebruikt in de HTML maar bestond niet */
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;   /* v1.12.0 — idem */
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Typography */
  --olw-font-heading: 'Trebuchet MS', 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
  --olw-font-body:    Georgia, 'Times New Roman', Times, serif;
  --olw-font-mono:    Consolas, Monaco, 'Courier New', monospace;

  /* Borders & radius */
  --olw-border:        1px solid #D1D5DB;
  --olw-radius-sm:     6px;
  --olw-radius:        12px;
  --olw-radius-lg:     20px;
  --olw-radius-pill:   999px;

  /* Layout */
  --olw-container-max: 1200px;
  --olw-content-max:   720px;
  --olw-header-height: 60px;
}

/* =============================================================
 * Reset & Base
 * ============================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--olw-header-height) + var(--space-4));
}

body {
  font-family: var(--olw-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--olw-text);
  background: var(--olw-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--olw-green-light);
  color: var(--olw-gray-dark);
}

/* =============================================================
 * Typography
 * ============================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--olw-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--olw-gray-dark);
  margin-bottom: var(--space-4);
}

h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); margin-top: var(--space-12); }
h3 { font-size: 1.375rem; margin-top: var(--space-8); }
h4 { font-size: 1.125rem; margin-top: var(--space-6); }

p { margin-bottom: var(--space-4); }

a {
  color: var(--olw-green-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
a:hover { color: var(--olw-green); }

strong, b { font-weight: 700; }
em, i { font-style: italic; }

ul, ol { margin-bottom: var(--space-4); padding-left: var(--space-6); }
li { margin-bottom: var(--space-2); }

code {
  font-family: var(--olw-font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.3em;
  background: var(--olw-green-subtle);
  border-radius: var(--olw-radius-sm);
}

hr {
  border: none;
  border-top: var(--olw-border);
  margin: var(--space-12) 0;
}

/* Label / eyebrow — Trebuchet MS CAPS (per brand guidelines).
   v1.11.0 (2026-08-08, reviewer): 0.75rem/0.1em → 0.82rem/0.08em. Het label stond al op vet (700),
   maar viel weg door de kleine letter én de wijde spatiëring — een reviewer noemde de bovenkopjes
   "tamelijk onopvallend". Iets groter en iets dichter op elkaar leest rustiger zonder de CAPS-stijl
   uit de huisstijl los te laten. */
.olw-label {
  font-family: var(--olw-font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olw-green-dark);
  margin-bottom: var(--space-3);
  display: inline-block;
}

.olw-tagline {
  font-family: var(--olw-font-body);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--olw-text-muted);
  margin-bottom: var(--space-6);
}

/* =============================================================
 * Layout
 * ============================================================= */
.olw-container {
  max-width: var(--olw-container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.olw-content {
  max-width: var(--olw-content-max);
  margin: 0 auto;
}

.olw-section { padding: var(--space-24) 0; }
.olw-section--compact { padding: var(--space-16) 0; }

.olw-section--sand   { background: var(--olw-sand); }
.olw-section--white  { background: var(--olw-white); }
.olw-section--green  { background: var(--olw-green-subtle); }
.olw-section--dark   { background: var(--olw-gray-dark); color: var(--olw-text-on-dark); }

.olw-section--dark h1,
.olw-section--dark h2,
.olw-section--dark h3,
.olw-section--dark h4 {
  color: var(--olw-text-on-dark);
}

.olw-section--dark .olw-label { color: var(--olw-amber); }
.olw-section--dark a { color: var(--olw-green-light); }
.olw-section--dark a:hover { color: var(--olw-white); }

/* =============================================================
 * Buttons
 * ============================================================= */
.olw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--olw-font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--olw-radius-pill);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.olw-btn--primary { background: var(--olw-green); color: var(--olw-white); }
.olw-btn--primary:hover { background: var(--olw-green-dark); color: var(--olw-white); }

.olw-btn--secondary { background: transparent; color: var(--olw-green-dark); border-color: var(--olw-green); }
.olw-btn--secondary:hover { background: var(--olw-green-subtle); color: var(--olw-green-dark); }
.olw-btn--sky { background: var(--olw-sky); color: var(--olw-white); }
.olw-btn--sky:hover { background: var(--olw-sky-dark); color: var(--olw-white); }

.olw-btn--warm { background: var(--olw-amber); color: var(--olw-gray-dark); }
.olw-btn--warm:hover { background: #D97706; color: var(--olw-gray-dark); }

.olw-btn--dark { background: var(--olw-gray-dark); color: var(--olw-white); }
.olw-btn--dark:hover { background: #1F2937; color: var(--olw-white); }

.olw-btn--ghost {
  background: transparent;
  color: var(--olw-green-dark);
  text-decoration: underline;
  padding: var(--space-3) var(--space-4);
}
.olw-btn--ghost:hover { color: var(--olw-green); background: transparent; }

/* =============================================================
 * Badges
 * ============================================================= */
.olw-badge {
  display: inline-block;
  font-family: var(--olw-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--olw-radius-pill);
}

.olw-badge--recommended { background: var(--olw-green-subtle); color: var(--olw-green-dark); }
.olw-badge--new         { background: var(--olw-amber-light); color: #92400E; }
.olw-badge--event       { background: var(--olw-sand); color: var(--olw-gray-dark); border: 1px solid var(--olw-gray-light); }
.olw-badge--opendata    { background: var(--olw-gray-dark); color: var(--olw-white); }
.olw-badge--rating      { background: var(--olw-amber-light); color: #92400E; }
.olw-badge--free        { background: var(--olw-green); color: var(--olw-white); }

/* =============================================================
 * Cards
 * ============================================================= */
.olw-card {
  background: var(--olw-bg-card);
  border-radius: var(--olw-radius-lg);
  padding: var(--space-8);
  border: var(--olw-border);
  /* v1.5.0: zachte grijs-getinte schaduw — matcht de opgetilde witte lijstkaarten in de app. */
  box-shadow: 0 1px 2px rgba(55, 65, 81, 0.06), 0 6px 16px rgba(55, 65, 81, 0.05);
}

.olw-card--green { background: var(--olw-green-subtle); border: none; }
.olw-card--sand  { background: var(--olw-sand); border: none; }
.olw-card--dark  { background: var(--olw-gray-dark); color: var(--olw-text-on-dark); border: none; }

.olw-card__title { font-size: 1.25rem; margin-top: 0; margin-bottom: var(--space-3); }
.olw-card__icon  { font-size: 2rem; line-height: 1; margin-bottom: var(--space-4); display: block; }
/* v1.7.0: lucide lijn-iconen (inline SVG, zelfde set als de app) i.p.v. emoji —
   platform-onafhankelijk scherp, kleur via merkgroen. */
.olw-card__icon svg { width: 34px; height: 34px; color: var(--olw-green); display: block; }
.olw-card--dark .olw-card__icon svg,
.olw-section--dark .olw-card__icon svg { color: var(--olw-green-light); }

/* Telefoon-frame voor app-screenshots (v1.6.0). Scherm = 9:19.5 (375x812).
   Placeholder = leeg sky-subtle scherm zolang de PNG ontbreekt; zodra
   assets/shot-*.png bestaat vult die de achtergrond. */
.olw-phones { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: center; }
.olw-phone {
  width: 210px; max-width: 44vw;
  background: #1f2937;
  border-radius: 30px;
  padding: 9px;
  box-shadow: 0 10px 34px rgba(55, 65, 81, 0.20);
}
.olw-phone__screen {
  aspect-ratio: 375 / 812;
  border-radius: 22px;
  background-color: var(--olw-sky-subtle);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;            /* v1.13.0 — houdt de echte <img> binnen de afgeronde hoeken */
}
/* v1.13.0 (SEO): de Franse praktijkschermen staan nu als échte <img> in het frame, mét alt-tekst —
   een achtergrondplaatje bestaat niet voor Google en kan geen beschrijving dragen. De howto houdt
   bewust zijn achtergronden: daar staat elk scherm vier keer (één per taal) en dat zouden vier
   identieke afbeeldingen in de index worden. Beide vormen werken met deze regels naast elkaar. */
.olw-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* v1.8.0: hero-visual — sfeerbeeld-kaart met overlappend telefoon-frame (M1).
   Foto's: assets/hero-groningen.jpg (NL/DE) + assets/hero-france.jpg (FR/EN).
   Tot die bestaan toont de kaart de green-subtle merk-tint — bewust, geen gat. */
.olw-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-10); align-items: center; }
.olw-hero__visual { display: none; }
@media (max-width: 899px) { .olw-hero__grid { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .olw-hero__visual { display: block; } }
.olw-hero__scene {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 440px;
  margin-left: auto;
  border-radius: 24px;
  background: var(--olw-green-subtle) center / cover no-repeat;
  box-shadow: 0 2px 4px rgba(55, 65, 81, 0.08), 0 16px 40px rgba(55, 65, 81, 0.14);
}
/* v1.13.0 (SEO): het sfeerbeeld is nu een echte <img> in plaats van een achtergrond, zodat het in
   Google's afbeeldingen komt en een alt-tekst kan dragen. Hij vult de kaart precies zoals de
   achtergrond dat deed. */
.olw-hero__scene > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.olw-hero__scene .olw-phone { position: absolute; left: -28px; bottom: -24px; width: 150px; max-width: none; }

/* v1.9.0: uitklapbaar embedded formulier (Google Form) achter een knop.
   <details class="olw-form-reveal"><summary class="olw-btn ...">…</summary>
   <div class="olw-form-reveal__frame"><iframe …></div></details> */
.olw-form-reveal { display: block; }
.olw-form-reveal summary { list-style: none; cursor: pointer; display: inline-flex; }
.olw-form-reveal summary::-webkit-details-marker { display: none; }
.olw-form-reveal__frame { margin-top: var(--space-6); }
.olw-form-reveal__frame iframe {
  width: 100%;
  max-width: 640px;
  height: 780px;
  border: 0;
  border-radius: 16px;
  background: var(--olw-white);
  box-shadow: 0 1px 2px rgba(55, 65, 81, 0.06), 0 6px 16px rgba(55, 65, 81, 0.08);
}

/* Grid for cards */
.olw-grid { display: grid; gap: var(--space-6); }
.olw-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.olw-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.olw-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* =============================================================
 * Hero
 * ============================================================= */
.olw-hero {
  background: var(--olw-sand);
  padding: var(--space-24) 0 var(--space-16);
  position: relative;
  overflow: hidden;
}

.olw-hero__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.olw-hero__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
  color: var(--olw-gray-dark);
}

.olw-hero__title em {
  color: var(--olw-green-dark);
  font-style: italic;
  font-weight: 700;
}

.olw-hero__lede {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--olw-text);
  margin-bottom: var(--space-8);
  max-width: 620px;
}

.olw-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Mobiel-only 'Start de app'-knop (v1.10.0): op desktop verborgen,
   op <=768px zichtbaar (zie media query onderaan de hero-sectie). */
.olw-hero__app-cta { display: none; }

.olw-hero__compass {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 360px;
  height: 360px;
  opacity: 0.06;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 768px) {
  .olw-hero__compass { display: none; }

  /* v1.10.0 — smartphone: grote witruimte boven de hero weg */
  .olw-hero { padding-top: var(--space-6); }

  /* v1.10.0 — smartphone: lede-zin verbergen, dikke volle-breedte
     'Start de app'-knop tonen direct onder de titel */
  .olw-hero__lede { display: none; }

  .olw-hero__app-cta {
    display: flex;
    width: 100%;
    font-size: 1.5rem;
    font-weight: 900;
    padding: 1.25rem var(--space-6);
    margin: 0 0 var(--space-6);
  }

  /* v1.10.2 — smartphone: QR/store-teaser-kaart verbergen (QR heeft geen zin op
     het toestel zelf). !important want het blok heeft een inline display-stijl. */
  .olw-hero__qr-card { display: none !important; }
}

/* =============================================================
 * Header — fixed, dark
 * ============================================================= */
.olw-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--olw-header-height);
  background: var(--olw-gray-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.olw-header__inner {
  max-width: var(--olw-container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.olw-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.olw-header__logo {
  height: 32px;
  display: flex;
  align-items: center;
}
.olw-header__logo img {
  height: 100%;
  width: auto;
  display: block;
}

.olw-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.olw-header__nav a {
  display: inline-block;
  font-family: var(--olw-font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--olw-radius-sm);
  text-decoration: none;
  transition: all 0.15s ease;
}

.olw-header__nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--olw-white);
}

.olw-header__nav a[aria-current="page"] {
  background: var(--olw-green);
  color: var(--olw-white);
}

.olw-header__toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--olw-white);
  font-size: 1.5rem;
  cursor: pointer;
  padding: var(--space-2);
  line-height: 1;
}

@media (max-width: 840px) {
  .olw-header__nav {
    display: none;
    position: absolute;
    top: var(--olw-header-height);
    left: 0;
    right: 0;
    background: var(--olw-gray-dark);
    flex-direction: column;
    padding: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    gap: 0;
  }
  .olw-header__nav.is-open { display: flex; }
  .olw-header__nav a {
    width: 100%;
    padding: var(--space-3) var(--space-4);
  }
  .olw-header__toggle { display: block; }
}

/* =============================================================
 * Language switcher
 * ============================================================= */
.olw-lang {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--olw-radius-pill);
  padding: 3px;
  flex-shrink: 0;
}

.olw-lang__btn {
  font-family: var(--olw-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px 10px;
  border-radius: var(--olw-radius-pill);
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.olw-lang__btn:hover { color: rgba(255, 255, 255, 0.85); }
.olw-lang__btn.is-active { background: var(--olw-green); color: var(--olw-white); }

/* Page wrapper accounts for fixed header */
.olw-page { padding-top: var(--olw-header-height); }

/* =============================================================
 * Footer
 * ============================================================= */
.olw-footer {
  background: var(--olw-gray-dark);
  color: var(--olw-text-on-dark);
  padding: var(--space-16) 0 var(--space-8);
}

.olw-footer a {
  color: var(--olw-green-light);
  text-decoration: none;
}

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

.olw-footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

@media (max-width: 768px) {
  .olw-footer__top { grid-template-columns: 1fr; gap: var(--space-6); }
}

.olw-footer__col h4 {
  font-family: var(--olw-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olw-amber);
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.olw-footer__col ul { list-style: none; padding: 0; margin: 0; }
.olw-footer__col li { margin-bottom: var(--space-2); font-size: 0.95rem; }

.olw-footer__logo {
  height: 28px;
  width: auto;
  display: block;
  margin-bottom: var(--space-4);
}
.olw-footer__logo img {
  height: 100%;
  width: auto;
  display: block;
}

.olw-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-6);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.olw-footer__bottom p { margin-bottom: var(--space-2); }

/* =============================================================
 * 4-language content system
 * ============================================================= */
[data-lang] { display: none; }

html[lang="fr"] [data-lang="fr"],
html[lang="nl"] [data-lang="nl"],
html[lang="en"] [data-lang="en"],
html[lang="de"] [data-lang="de"] {
  display: inline;
}

div[data-lang],
p[data-lang],
section[data-lang],
article[data-lang],
li[data-lang] {
  display: none;
}

html[lang="fr"] div[data-lang="fr"],
html[lang="fr"] p[data-lang="fr"],
html[lang="fr"] section[data-lang="fr"],
html[lang="fr"] article[data-lang="fr"],
html[lang="fr"] li[data-lang="fr"],
html[lang="nl"] div[data-lang="nl"],
html[lang="nl"] p[data-lang="nl"],
html[lang="nl"] section[data-lang="nl"],
html[lang="nl"] article[data-lang="nl"],
html[lang="nl"] li[data-lang="nl"],
html[lang="en"] div[data-lang="en"],
html[lang="en"] p[data-lang="en"],
html[lang="en"] section[data-lang="en"],
html[lang="en"] article[data-lang="en"],
html[lang="en"] li[data-lang="en"],
html[lang="de"] div[data-lang="de"],
html[lang="de"] p[data-lang="de"],
html[lang="de"] section[data-lang="de"],
html[lang="de"] article[data-lang="de"],
html[lang="de"] li[data-lang="de"] {
  display: block;
}

html[lang="fr"] li[data-lang="fr"],
html[lang="nl"] li[data-lang="nl"],
html[lang="en"] li[data-lang="en"],
html[lang="de"] li[data-lang="de"] {
  display: list-item;
}

/* =============================================================
 * Utility classes
 * ============================================================= */
.olw-text-center  { text-align: center; }
.olw-text-muted   { color: var(--olw-text-muted); }
.olw-text-large   { font-size: 1.125rem; }

.olw-mt-0  { margin-top: 0; }
.olw-mt-4  { margin-top: var(--space-4); }
.olw-mt-8  { margin-top: var(--space-8); }
.olw-mb-0  { margin-bottom: 0; }
.olw-mb-4  { margin-bottom: var(--space-4); }
.olw-mb-8  { margin-bottom: var(--space-8); }

/* Divider with small ornament */
.olw-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-12) 0;
  color: var(--olw-amber);
}

.olw-divider::before,
.olw-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--olw-gray-light);
}

.olw-divider__icon { padding: 0 var(--space-4); font-size: 1rem; }

/* Print */
@media print {
  .olw-header, .olw-footer, .olw-hero__compass { display: none; }
  .olw-page { padding-top: 0; }
  body { background: white; color: black; }
}