/* reisadvies.css — REISADVIES-20260916
 *
 * De opmaak van /reisadvies/. Bewust een eigen bestand en niet een aanvulling op styles.css:
 * dat bestand is van de hele site en wordt door meerdere handen bewerkt. Alle klassen hier
 * beginnen met `adv-`, zodat ze niets anders op de pagina kunnen raken.
 *
 * Kleuren, lettertypes en afstanden komen uit de variabelen van de site (--goud, --paneel,
 * --lijn …), met een terugvalwaarde erachter voor het geval styles.css nog niet geladen is.
 * Zo ziet dit deel er hetzelfde uit als /tarieven/ en /werkgebied/ — ook als de huisstijl
 * later verandert.
 */

/* ZEVENDE-MENU-ITEM-20260916
 *
 * Met 'Reisadvies' erbij telt de bovenbalk op deze pagina's zeven items in plaats van zes, en
 * dan schuift het menu bij 1440 px over de merknaam heen — GEMETEN, niet vermoed: op
 * /reisadvies/ viel 'Diensten' over 'Amstelveen', terwijl /tarieven/ met zes items ruim past.
 * Precies dezelfde val staat al beschreven in inc-taalparen.php, waar 'Home' daarom bewust uit
 * het Engelse menu is gelaten.
 *
 * De ruimte tussen de links is hier dus iets kleiner. Alleen op deze pagina's: dit bestand
 * wordt nergens anders geladen, dus de rest van de site houdt zijn eigen maatvoering.
 * 🪤 Alleen bóven 820 px. Daaronder is .navlinks een uitklapmenu met gap:0 en zou deze regel
 *    er losse ruimte tussen de regels in zetten.
 */
@media (min-width:1151px){
  header .navlinks{gap:1rem;font-size:.86rem}
}

/* Tussen 821 en 1150 px past de balk sowieso niet — ook niet met zes items. GEMETEN op
 * 16-09: /tarieven/ (zes items, geen Reisadvies) laat bij 1100 px 'Diensten' óók over
 * 'Amstelveen' vallen. Dat is dus geen gevolg van dit deel van de site, maar het treft deze
 * pagina's wel. Daarom klapt het menu hier al vanaf 1150 px in de hamburger die de site zelf
 * onder 820 px gebruikt — dezelfde regels, alleen eerder.
 * 🪤 Dit is opzettelijk ALLEEN voor /reisadvies/: styles.css is van de hele site en een
 *    breekpunt daar verschuiven raakt twintig pagina's van andere handen. De echte oplossing
 *    hoort in styles.css thuis; die staat als bevinding in het rapport.
 * De hamburger zelf werkt op elke breedte: glans.js zet alleen de klasse `open`, zonder naar
 * de schermbreedte te kijken. */
@media (min-width:821px) and (max-width:1150px){
  header .menu-toggle{display:flex;align-items:center}
  header nav.wrap{position:relative}
  header .navlinks{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    gap:0;background:var(--paneel,#14141B);border-bottom:1px solid var(--lijn,#26262F);
    box-shadow:0 12px 24px -12px rgba(0,0,0,.5);padding:.2rem clamp(1.1rem,4vw,2.5rem) .6rem;z-index:5}
  header .navlinks.open{display:flex}
  header .navlinks a{padding:.8rem 0;border-bottom:1px solid var(--lijn,#26262F)}
  header .navlinks a:last-child{border-bottom:none}
}

/* De overslaan-link. .skip-link staat niet in styles.css (dezelfde reden als op de
   tarievenpagina, waar hij daarom in de pagina zelf stond). */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000}
.skip-link:focus{left:.75rem;top:.75rem;padding:.6rem 1rem;background:var(--goud,#D9B565);
  color:#111;border-radius:6px;font-weight:700;text-decoration:none}

/* Publicatiedatum onder de paginakop. Klein en rustig: het is een hulpmiddel, geen nieuws. */
.adv-datum{margin:.9rem 0 0;font-size:.82rem;color:var(--grijs2,#908D85)}

/* ── Het overzicht en 'lees ook': kaarten ──────────────────────────────────────────────── */
.adv-lijst{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.adv-kaart{display:flex;flex-direction:column;background:var(--paneel,#14141B);
  border:1px solid var(--lijn,#26262F);border-radius:14px;padding:1.5rem;text-decoration:none;
  box-shadow:0 10px 26px -16px rgba(0,0,0,.6);transition:transform .3s ease,border-color .3s ease}
.adv-kaart:hover,.adv-kaart:focus-visible{border-color:var(--goud-dim,#8C6F3A);transform:translateY(-2px)}
.adv-kaart h3{font-size:1.05rem;line-height:1.35;color:var(--wit,#F7F6F2);margin:0 0 .5rem}
.adv-kaart-vraag{margin:0 0 1.1rem;font-size:.88rem;line-height:1.5;color:var(--grijs,#BAB6AC);font-style:italic}
.adv-meer{margin-top:auto;display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;
  font-weight:600;color:var(--goud,#D9B565)}
.adv-alles{margin:1.6rem 0 0}
.adv-alles a{color:var(--goud,#D9B565);font-weight:600;text-decoration:none}
.adv-alles a:hover{text-decoration:underline}

/* ── De tekst van een artikel ──────────────────────────────────────────────────────────── */
.adv-tekst{max-width:44rem}
.adv-tekst h2{font-size:1.35rem;margin:2.2rem 0 .8rem;color:var(--wit,#F7F6F2)}
.adv-tekst h2:first-child{margin-top:0}
.adv-tekst h3{font-size:1.02rem;margin:1.6rem 0 .5rem;color:var(--wit,#F7F6F2)}
.adv-tekst p{color:var(--grijs,#BAB6AC);margin:0 0 1rem}
.adv-tekst a{color:var(--goud,#D9B565);font-weight:600;text-decoration:none}
.adv-tekst a:hover{text-decoration:underline}
.adv-tekst ul{margin:0 0 1.2rem;padding-left:1.2rem;color:var(--grijs,#BAB6AC)}
.adv-tekst li{margin:0 0 .45rem}
.adv-tekst li b,.adv-tekst p b{color:var(--wit,#F7F6F2)}

/* Het korte antwoord, meteen onder de kop: wie doorklikt uit Google wil de uitkomst zien
   zonder eerst drie alinea's te lezen. */
.adv-kort{background:var(--paneel,#14141B);border:1px solid var(--lijn,#26262F);
  border-left:3px solid var(--goud,#D9B565);border-radius:0 12px 12px 0;padding:1.2rem 1.4rem;
  margin:0 0 1.8rem;max-width:44rem}
.adv-kort .adv-kort-kop{font-family:var(--f-body,inherit);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--goud,#D9B565);font-weight:700;margin-bottom:.4rem}
.adv-kort p{margin:0;color:var(--wit,#F7F6F2);font-size:1rem;line-height:1.6}
.adv-kort p + p{margin-top:.6rem;color:var(--grijs,#BAB6AC);font-size:.92rem}

/* Tabellen (ophaaltijden, koffers, prijzen). De basisopmaak van <table> komt uit styles.css;
   hier alleen de randen en de nadruk op het getal waar het om gaat. */
.adv-tabel{margin:1.2rem 0 1.4rem}
.adv-tabel table{width:100%}
.adv-tabel td{padding:.6rem .7rem;border-bottom:1px solid var(--lijn,#26262F);
  color:var(--grijs,#BAB6AC);vertical-align:top}
.adv-tabel tbody tr:last-child td{border-bottom:0}
.adv-tabel td:first-child{color:var(--wit,#F7F6F2);font-weight:600;white-space:nowrap}
.adv-tabel .adv-nadruk{color:var(--goud,#D9B565);font-weight:700;white-space:nowrap}
.adv-tabel caption{caption-side:bottom;text-align:left;font-size:.82rem;color:var(--grijs2,#908D85);
  padding-top:.7rem}

/* De volgende stap onderaan elk artikel. */
.adv-stap{display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.adv-stap h2{font-size:1.4rem;margin:.5rem 0 0;color:var(--wit,#F7F6F2)}
.adv-stap p{color:var(--grijs,#BAB6AC);margin:.6rem 0 0;max-width:42ch}
.adv-stap-knoppen{display:flex;gap:.7rem;flex-wrap:wrap}

/* De vragen onder een artikel. */
.adv-vraag{font-size:1rem;margin:1.6rem 0 .4rem;color:var(--wit,#F7F6F2)}

@media (max-width:640px){
  .adv-kaart{padding:1.25rem}
  .adv-kort{padding:1rem 1.1rem}
  .adv-stap{gap:1.4rem}
  .adv-stap-knoppen .btn{flex:1 1 auto;justify-content:center}
}