/* ============================================================
   WANDELROUTES.CSS — Brasserie Faim de Ligne
   ------------------------------------------------------------
   PAGINA-SPECIFIEKE OVERRIDES bovenop de gedeelde style.css.

   Deze pagina laadt eerst de gedeelde style.css (met o.a. de
   navigatie die nav.js injecteert) en daarna dit bestand.
   Hier staan dus ALLEEN de aanpassingen die enkel voor de
   wandelroutes-pagina gelden. style.css blijft onaangeroerd,
   zodat andere pagina's (zoals de homepage-hero) niet wijzigen.

   Laad dit bestand NA style.css in de <head>.
   ============================================================ */

/* ── Hero: minder hoog, in lijn met de page-hero van over.html ──
   De globale .hero (homepage met bulletin) blijft ongewijzigd. */
.hero {
  min-height: auto;
  padding-top: clamp(3rem, 8vw, 5.2rem);
  padding-bottom: clamp(2.4rem, 6vw, 4.2rem);
}

/* De homepage-mediaquery geeft .hero-content een 2-koloms grid met grote
   padding (incl. ruime padding-left voor de poster). Op deze pagina is er
   geen tweede kolom, dus terugbrengen naar één compacte kolom. */
@media (min-width: 901px) {
  .hero-content {
    display: block;
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
    padding-left: 0;
  }
}

/* Het amber <em> ("ontdek de streek") viel weg in het gele midden van de
   gradient. Crimson geeft sterk contrast en blijft in de huisstijl. */
.hero h1 em {
  color: var(--crimson);
}

/* Titelstijl gelijktrekken met de page-hero van over.html:
   volledig cursief, zelfde grootte, lijnhoogte en schaduw. */
.hero h1 {
  font-style: italic;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.1;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

/* ── Sectietitel "Kies uw wandeling / Scan & stap" ──
   De globale regel ".routes-main .section-title span { display:block }" zette
   álle spans (ook de verborgen taal-variant) op block, waardoor de Franse
   ondertitel in de NL-versie bleef staan. Hier sturen we het netjes:
   hoofdtitel-spans inline, enkel de bedoelde ondertitel als block, en de
   taalverberging blijft werken. */
.routes-main .section-title > span { display: inline; }
.routes-main .section-title .section-title-sub {
  display: block;
  font-style: italic;
  color: var(--flame);
}
body.fr .routes-main .section-title span[lang="nl"] { display: none; }
.routes-main .section-title span[lang="fr"] { display: none; }
body.fr .routes-main .section-title span[lang="fr"] { display: inline; }
body.fr .routes-main .section-title .section-title-sub[lang="fr"] { display: block; }

/* ── Taalspecifieke downloadknop per route ──
   Elke kaart heeft nu 2 losse <a class="btn-route"> (nl + fr) i.p.v. 1 link
   met 2 tekst-spans, zodat elke taal naar zijn eigen PDF kan verwijzen. De
   generieke a[lang="fr"] { display:inline } regel uit style.css zou de
   flex-layout van .btn-route breken, dus hier expliciet overschreven. */
.card-footer a.btn-route[lang="fr"] { display: none; }
body.fr .card-footer a.btn-route[lang="nl"] { display: none; }
body.fr .card-footer a.btn-route[lang="fr"] { display: flex; }

/* ── Uitlijning op alle schermbreedtes ──
   De tips-grid was op 900px begrensd; begrenzing weg zodat hij even breed
   kan zijn als de route-kaarten eronder. */
.uitleg-section .tips-grid { max-width: none; }

/* De routes-main eronder gebruikt: max-width 1400px, gecentreerd, met
   horizontale padding clamp(24px,6vw,80px). Op brede schermen schuift zijn
   inhoud dus naar binnen. We geven de balken/secties erboven exact dezelfde
   binnenkant, zodat alles links (en rechts) onder elkaar blijft staan.
   De gekleurde achtergronden van de balken blijven full-width. */
.startpoint-bar,
.stats-bar,
.uitleg-section {
  padding-left:  max(clamp(24px, 6vw, 80px), calc((100% - 1400px) / 2 + clamp(24px, 6vw, 80px)));
  padding-right: max(clamp(24px, 6vw, 80px), calc((100% - 1400px) / 2 + clamp(24px, 6vw, 80px)));
}
.startpoint-bar { justify-content: flex-start; }