/* ==========================================================================
   Onder de Brug - Wandeltocht
   Visuele identiteit 1-op-1 afgestemd op onderdebrug.be:
   - donkerbruine secties die afwisselen met crème
   - grote koppen, koppen-in-kapitaal met strakke tracking
   - eyebrows/kickers in kapitaal met bullets
   - zandkleurige knoppen met donkere tekst
   - strak en hoekig, geen afgeronde hoeken
   - grote foto's met een gescheurde (rafel) rand
   Mobile-first. Geen build-stap, geen externe afhankelijkheden.
   ========================================================================== */

/* --- Lettertype ----------------------------------------------------------
   MonaSansVF is het huislettertype van onderdebrug.be. Plaats het woff2-bestand
   in assets/fonts/ (zie README) om de site 1-op-1 gelijk te laten ogen. Zolang
   het ontbreekt valt de site netjes terug op een systeem-fontstack, zonder
   render-blocking en zonder Google-afhankelijkheid. */
@font-face {
  font-family: "MonaSansVF";
  /* TODO: kopieer MonaSansVF.woff2 van het hoofddomein naar assets/fonts/ */
  src: url("../fonts/MonaSansVF.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  /* Kleuren (afgeleid van de live site onderdebrug.be) */
  --kleur-donker:      #2C211C; /* donkerbruin, hoofdsecties + tekst */
  --kleur-donker-2:    #241a15; /* nog dieper bruin (statusbalk) */
  --kleur-bruin:       #5E4A3C; /* middenbruin, secundaire panelen */
  --kleur-tekst:       #2C211C;
  --kleur-tekst-zacht: #5E4A3C;
  --kleur-muted:       #8A8172; /* gedempt taupe, bijschriften */
  --kleur-bg:          #FAF7F0; /* warm crème, paginabg */
  --kleur-paneel:      #F2EBDB; /* licht beige, kaarten/panelen */
  --kleur-paneel-rand: #E4DAC4;
  --kleur-accent:      #B69F7E; /* warm zand, merkaccent (knoppen) */
  --kleur-accent-diep: #94764A; /* dieper zand, tekst-op-crème (contrast) */
  --kleur-goud:        #FFDB67; /* helder goud, spaarzame highlight */
  --kleur-creme:       #F2EBDB; /* tekst op donker */
  --creme-zacht:       rgba(242, 235, 219, 0.72);

  /* Typografie */
  --font-heading: "MonaSansVF", "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "MonaSansVF", "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Vorm: het hoofddomein is strak en hoekig. Alles staat op 0, ook de knoppen. */
  --radius:      0;
  --radius-lg:   0;
  --radius-foto: 0;
  --schaduw:     0 10px 34px rgba(44, 33, 28, 0.14);
  --schaduw-zacht: 0 3px 14px rgba(44, 33, 28, 0.08);
  --maxbreedte:  640px;

  --map-hoogte-mobiel: 34vh;

  /* Gescheurde (rafel) rand als SVG-mask, homage aan de foto-randen op de site */
  --rafel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='24' preserveAspectRatio='none' viewBox='0 0 1200 24'%3E%3Cpath d='M0 24V10l24 5 22-9 26 7 24-8 22 9 25-6 27 8 23-9 24 7 25-7 24 8 22-8 26 6 24-7 23 8 25-6 26 7 23-8 24 8 25-7 24 6 23-8 26 8 24-6 22 7 26-8 24 8 24-7 23 6 25-8 24 8 22-6 26 7 24-8 24 8 23-6 25 7 26-8 23 7 24-6 25 8 24-7 22 6 26 8 24-8 23 7 25-6 24 8V24z' fill='%23000'/%3E%3C/svg%3E");
}

/* --- Reset / basis ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--kleur-tekst);
  background: var(--kleur-bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
}
p { margin: 0 0 1em; }
a { color: var(--kleur-accent-diep); }
img, svg { max-width: 100%; height: auto; display: block; }

/* Eyebrow / kicker: kapitaal, gespatieerd, met bullets tussen woorden */
.kicker {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--kleur-accent-diep);
  margin: 0 0 14px;
}

/* Kop-in-kapitaal, zoals de merknaam op de site (strakke negatieve tracking) */
.kaptitel { text-transform: uppercase; letter-spacing: -0.02em; font-weight: 600; }

/* Toegankelijk focus-kader (zichtbaar bij toetsenbordnavigatie) */
:focus-visible {
  outline: 3px solid var(--kleur-accent-diep);
  outline-offset: 2px;
  border-radius: 0;
}
.op-donker :focus-visible, .site-kop :focus-visible { outline-color: var(--kleur-accent); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: var(--kleur-accent); color: var(--kleur-donker);
  padding: 10px 16px; border-radius: 0; text-decoration: none; font-weight: 700;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--maxbreedte); margin: 0 auto; padding: 0 20px; }

/* --- Merklogo (het echte "ONDER DE BRUG"-logo van het hoofddomein) --------
   Als CSS-mask geladen, zodat het de kleur van de ondergrond volgt
   (crème op de donkere balk en in de footer). */
.wordmerk {
  display: inline-flex; align-items: center;
  text-decoration: none; color: inherit; line-height: 1;
}
.wordmerk__logo {
  display: block;
  width: 148px; height: 56px;
  background-color: currentColor;
  -webkit-mask: url("../img/logo-onderdebrug.svg") left center / contain no-repeat;
          mask: url("../img/logo-onderdebrug.svg") left center / contain no-repeat;
}
.site-footer .wordmerk__logo { -webkit-mask-position: center; mask-position: center; }

/* --- Sitekop (donkere balk met logo) ------------------------------------ */
.site-kop {
  background: var(--kleur-donker); color: var(--kleur-creme);
}
.site-kop__inner {
  max-width: var(--maxbreedte); margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.site-kop__link {
  color: var(--creme-zacht); text-decoration: none; font-size: 0.82rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.site-kop__link:hover { color: var(--kleur-creme); }

/* --- Knoppen (zandkleurig, kapitaal, hoekig) ---------------------------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 15px 26px; border-radius: 0; border: 2px solid var(--kleur-accent);
  background: var(--kleur-accent); color: var(--kleur-donker);
  text-decoration: none; cursor: pointer; transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
  min-height: 50px;
}
.knop:hover { background: #c4ad8b; border-color: #c4ad8b; }
.knop:active { transform: translateY(1px); }
/* Secundair: omlijnd, past zich aan de ondergrond aan */
.knop--secundair {
  background: transparent; color: var(--kleur-donker); border-color: var(--kleur-donker);
}
.knop--secundair:hover { background: rgba(44, 33, 28, 0.06); border-color: var(--kleur-donker); }
.op-donker .knop--secundair, .knop--op-donker {
  color: var(--kleur-creme); border-color: rgba(242, 235, 219, 0.5); background: transparent;
}
.op-donker .knop--secundair:hover, .knop--op-donker:hover { background: rgba(242, 235, 219, 0.1); }
.knop[disabled] { opacity: 0.4; cursor: not-allowed; }
.knop--klein { padding: 11px 18px; font-size: 0.74rem; min-height: 44px; }

/* --- Foto met gescheurde onderrand (rafel) ------------------------------ */
.rafel-onder {
  -webkit-mask: linear-gradient(#000 0 0) top/100% calc(100% - 14px) no-repeat,
                var(--rafel) bottom/100% 16px no-repeat;
          mask: linear-gradient(#000 0 0) top/100% calc(100% - 14px) no-repeat,
                var(--rafel) bottom/100% 16px no-repeat;
}

/* ==========================================================================
   STARTPAGINA (index.html)
   ========================================================================== */
.hero {
  background: var(--kleur-donker); color: var(--kleur-creme);
  padding: 44px 0 52px; text-align: left;
}
.hero .kicker { color: var(--kleur-accent); }
.hero h1 {
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  text-transform: uppercase; letter-spacing: -0.025em; margin-bottom: 0.28em;
  color: var(--kleur-creme);
}
.hero__intro { color: var(--creme-zacht); font-size: 1.08rem; max-width: 34ch; margin-bottom: 22px; }
.hero__start {
  margin-top: 4px; font-size: 0.9rem; color: var(--kleur-accent);
}
.hero__start strong { color: var(--kleur-creme); font-weight: 600; }

/* Introblok boven de routes (crème) */
.routes-kop { padding: 40px 0 4px; }
.routes-kop h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
.routes-kop p { color: var(--kleur-tekst-zacht); }

.routes-lijst { display: grid; gap: 20px; padding: 12px 0 48px; }

.route-kaart {
  display: block; text-decoration: none; color: inherit;
  background: var(--kleur-wit, #fff); border: 1px solid var(--kleur-paneel-rand);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--schaduw-zacht); transition: transform 0.14s ease, box-shadow 0.18s ease;
}
.route-kaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw); }
.route-kaart__balk { height: 10px; }
.route-kaart__body { padding: 22px 22px 24px; }
.route-kaart__nr {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--kleur-accent-diep); margin-bottom: 8px;
}
.route-kaart__titel { font-size: 1.5rem; margin-bottom: 4px; }
.route-kaart__onder { color: var(--kleur-tekst-zacht); margin-bottom: 16px; }
.route-kaart__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--kleur-paneel); border: 1px solid var(--kleur-paneel-rand);
  color: var(--kleur-tekst-zacht); font-size: 0.82rem; font-weight: 600;
  padding: 6px 13px; border-radius: 0;
}
.route-kaart__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 13px 22px; border-radius: 0;
  background: var(--kleur-accent); color: var(--kleur-donker);
  transition: gap 0.15s ease, background 0.15s ease;
}
.route-kaart:hover .route-kaart__cta { gap: 0.85em; background: #c4ad8b; }

.site-footer {
  background: var(--kleur-donker); color: var(--creme-zacht);
  padding: 34px 0 42px; text-align: center; font-size: 0.9rem;
}
.site-footer a { color: var(--kleur-accent); }
.site-footer .wordmerk { align-items: center; margin: 0 auto 14px; color: var(--kleur-creme); }

/* ==========================================================================
   ROUTEPAGINA (route.html)
   ========================================================================== */

/* Donkere bovenbalk met terug-link + routenaam */
.tocht-top {
  position: sticky; top: 0; z-index: 30;
  background: var(--kleur-donker); color: var(--kleur-creme);
}
.tocht-top__inner {
  max-width: var(--maxbreedte); margin: 0 auto; padding: 11px 16px;
  display: flex; align-items: center; gap: 12px;
}
.terug-link {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; color: var(--creme-zacht); font-weight: 700; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
.terug-link:hover { color: var(--kleur-creme); }
.tocht-top__naam {
  font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--kleur-creme);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Layout-wrappers. Op mobiel zijn ze "transparant" (display: contents), zodat
   de kaart, de voortgang en de inhoud gewoon onder elkaar stromen zoals voorheen
   en de sticky kaart tegen de paginascroll blijft plakken. Op desktop worden ze
   twee kolommen (zie de media query onderaan). */
.tocht-kaart, .tocht-inhoud { display: contents; }

/* Mini-kaart: sticky, altijd zichtbaar tijdens het scrollen */
.mini-kaart-houder {
  position: sticky; top: 47px; z-index: 20;
  background: var(--kleur-bruin);
  border-bottom: 3px solid var(--kleur-donker);
}
.mini-kaart-inner { max-width: var(--maxbreedte); margin: 0 auto; position: relative; }
#kaart { height: var(--map-hoogte-mobiel); width: 100%; background: var(--kleur-bruin); }
.kaart-laadt {
  height: var(--map-hoogte-mobiel);
  display: flex; align-items: center; justify-content: center;
  color: var(--creme-zacht); font-size: 0.9rem; text-align: center; padding: 0 20px;
}
.kaart-notitie {
  position: absolute; left: 8px; bottom: 8px; z-index: 500;
  background: rgba(44, 33, 28, 0.9); color: var(--kleur-creme);
  font-size: 0.72rem; font-weight: 600; padding: 5px 10px; border-radius: 0;
  max-width: 72%;
}
.kaart-notitie[hidden] { display: none; }

/* Voortgangsbalk (tekst + balk, niet enkel kleur) */
.voortgang {
  max-width: var(--maxbreedte); margin: 0 auto; padding: 12px 16px 4px;
  display: flex; align-items: center; gap: 12px;
}
.voortgang__tekst {
  font-size: 0.72rem; font-weight: 700; color: var(--kleur-accent-diep);
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
}
.voortgang__spoor { flex: 1; height: 6px; background: var(--kleur-paneel); border-radius: 0; overflow: hidden; }
.voortgang__vul { height: 100%; width: 0; background: var(--kleur-accent-diep); border-radius: 0; transition: width 0.25s ease; }

/* Route-intro bovenaan de stappen */
.route-intro { padding: 22px 0 6px; }
.route-intro h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
.route-intro__onder { color: var(--kleur-accent-diep); font-weight: 700; margin-top: -0.1em; }
.route-intro__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.route-intro__tekst { color: var(--kleur-tekst-zacht); }
.route-intro__acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* De stappen (informatiepunten) */
.stappen { padding: 10px 0 20px; }

.stap {
  scroll-margin-top: calc(47px + var(--map-hoogte-mobiel) + 48px);
  background: #fff; border: 1px solid var(--kleur-paneel-rand);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 22px;
  box-shadow: var(--schaduw-zacht);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.stap.is-actief { border-color: var(--kleur-accent-diep); box-shadow: var(--schaduw); }
.stap.is-actief .stap__badge { transform: scale(1.06); }

.stap__figuur { margin: 0; position: relative; background: #fff; }
.stap__figuur img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
}
.stap__badge {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--kleur-donker); color: var(--kleur-creme);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 7px 13px; border-radius: 0;
  transition: transform 0.2s ease;
}
.stap__lichaam { padding: 20px 22px 22px; }
.stap__type {
  display: inline-flex; align-items: center; gap: 7px;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; font-weight: 700;
  color: var(--kleur-accent-diep); margin-bottom: 8px;
}
.stap__titel { font-size: 1.45rem; margin-bottom: 8px; }
.stap__tekst { color: var(--kleur-tekst-zacht); margin-bottom: 0; }

/* Bezienswaardigheid: duidelijk gemarkeerd, met middenbruin accent + meer diepgang */
.stap--bezienswaardigheid { border-color: var(--kleur-bruin); border-width: 2px; }
.stap--bezienswaardigheid .stap__badge { background: var(--kleur-bruin); }
.weetje {
  margin-top: 16px; background: var(--kleur-paneel); border-left: 4px solid var(--kleur-bruin);
  padding: 13px 15px; border-radius: 0; font-size: 0.95rem; color: var(--kleur-tekst);
}
.weetje strong {
  display: inline-flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; color: var(--kleur-bruin);
}
.weetje strong + br { display: none; }

/* Start/eind: zand-accent */
.stap--start .stap__badge, .stap--eind .stap__badge { background: var(--kleur-accent-diep); }

/* Stap-navigatie (desktop; op mobiel neemt de zwevende nav het over) */
.stap__nav {
  display: none; justify-content: space-between; gap: 10px;
  padding: 0 22px 20px;
}

/* Zwevende "volgende punt" nav (mobiel).
   Dichte achtergrond met een strakke bovenrand, zodat de kaarttekst er niet
   doorheen schemert. */
.zweef-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--kleur-bg);
  border-top: 3px solid var(--kleur-donker);
  box-shadow: 0 -6px 18px rgba(44, 33, 28, 0.10);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center;
}
.zweef-nav .wrap-nav { width: 100%; max-width: var(--maxbreedte); display: flex; gap: 10px; }
.zweef-nav .knop { flex: 1; }

/* Slot-CTA: donkerbruine sectie met zand-pill, zoals de site */
.slot-cta {
  background: var(--kleur-donker); color: var(--kleur-creme);
  border-radius: var(--radius-lg); padding: 34px 26px; text-align: center;
  margin: 10px 0 100px;
}
.slot-cta .kicker { color: var(--kleur-accent); }
.slot-cta h2 { color: var(--kleur-creme); font-size: 1.7rem; }
.slot-cta p { color: var(--creme-zacht); max-width: 40ch; margin-left: auto; margin-right: auto; }
.slot-cta .knop { margin-top: 10px; }
.slot-cta__adres {
  margin-top: 18px; font-size: 0.84rem; color: var(--kleur-accent);
  display: inline-flex; align-items: center; gap: 6px;
}

.laad-fout {
  margin: 40px auto; max-width: var(--maxbreedte); padding: 24px;
  background: var(--kleur-paneel); border-radius: var(--radius); text-align: center;
}

/* --- Desktop-verfijningen (mobile-first: dit komt erbovenop) ------------- */
@media (min-width: 780px) {
  :root { --map-hoogte-mobiel: 300px; }
  body { font-size: 18px; }
  .mini-kaart-houder { top: 51px; }
  .stap.is-actief { transform: none; }
  .zweef-nav { display: none; }
  .stap__nav { display: flex; }
  .stap__nav .knop { flex: 1; }
  .slot-cta { margin-bottom: 44px; }
  .stap { scroll-margin-top: calc(51px + 300px + 48px); }
  .hero { padding: 64px 0 72px; }
  .hero__intro { font-size: 1.15rem; }
}

/* --- Ruime desktop: inhoud links, kaart rechts (twee kolommen) ----------- */
@media (min-width: 1000px) {
  .tocht-top__inner { max-width: none; padding: 12px 28px; }

  /* Volle breedte: geen max-width, van rand tot rand */
  .tocht-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(420px, 44vw, 720px);
  }
  /* Wrappers worden nu echte kolommen */
  .tocht-kaart, .tocht-inhoud { display: block; }
  .tocht-inhoud { order: 1; min-width: 0; padding: 0 clamp(24px, 5vw, 72px); }  /* links */
  .tocht-kaart  { order: 2; }                                                    /* rechts */

  /* Kaart: sticky en over de volle hoogte naast de inhoud */
  .mini-kaart-houder {
    top: 51px;
    height: calc(100vh - 51px);
    border-bottom: none;
    border-left: 3px solid var(--kleur-donker);
  }
  .mini-kaart-inner { max-width: none; height: 100%; }
  #kaart, .kaart-laadt { height: 100%; }

  /* Leesbare tekstbreedte, links uitgelijnd in de brede kolom */
  .tocht-inhoud .wrap { max-width: 700px; margin: 0; padding-left: 0; padding-right: 0; }
  .voortgang { max-width: 700px; margin: 0; padding-left: 0; padding-right: 0; }

  /* De kaart staat er nu naast, niet meer boven: stappen hoeven enkel
     de bovenbalk vrij te houden. */
  .stap { scroll-margin-top: 70px; }
  .route-intro { padding-top: 26px; }
}

/* MapTiler/MapLibre in de huisstijl trekken */
.maplibregl-map { font-family: var(--font-body); background: var(--kleur-bruin); }
.maplibregl-popup-content {
  font-family: var(--font-body); color: var(--kleur-tekst);
  border-radius: 0; padding: 10px 14px; box-shadow: var(--schaduw-zacht);
}
.maplibregl-ctrl-attrib { font-size: 11px; }

/* Genummerde route-markers op de kaart */
.kaart-marker {
  width: 26px; height: 26px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  color: var(--kleur-donker); border: 2px solid var(--kleur-bg);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}