/* css_v3.optimized.css — refined, composited-friendly, readable nav hover */
/* -------------------------------------------------------------
  Key changes vs previous:
  - Consolidated theme variables and removed duplicate overrides
  - Ensured nav hover text contrast in all themes
  - Kept hover effects composited (opacity/transform only)
  - Added small a11y tweaks (focus-visible, prefers-reduced-motion)
  - Minor CLS mitigation via content-visibility already present
-------------------------------------------------------------- */

/* ========= Variables / Themes ========= */
:root{
  --bg:#0f172a; --card:#111827; --text:#e5e7eb; --muted:#9ca3af;
  --ok:#16a34a; --warn:#f59e0b; --bad:#ef4444; --chip:#1f2a4a; --link:#60a5fa;
  --header-h:64px;
}
@media (max-width:768px){ :root{ --header-h:112px; } }


/* DARK */
html.theme-dark, body.theme-dark{
  --bg:#0f172a; --card:#111827; --text:#e5e7eb; --muted:#9ca3af;
  --ok:#16a34a; --warn:#f59e0b; --bad:#ef4444; --chip:#1f2a4a; --link:#60a5fa;
}

/* DIM */
html.theme-dim, body.theme-dim{
  --bg:#1a2335; --card:#1f2d42; --text:#f1f3f7; --muted:#b0b8c2;
  --chip:#27385c; --link:#7cb8ff;
}

/* LIGHT */
html.theme-light, body.theme-light{
  --bg:#e9eef6; --card:#ffffff; --text:#0f172a; --muted:#475569;
  --chip:#e6eefc; --link:#2563eb; --ok:#15803d; --warn:#b45309; --bad:#b91c1c;
}
/* Respect OS light preference unless theme is explicitly set */
@media (prefers-color-scheme: light){
  body:not(.theme-dim):not(.theme-dark):not(.theme-light){
    --bg:#e9eef6; --card:#ffffff; --text:#0f172a; --muted:#475569;
    --chip:#e6eefc; --link:#2563eb; --ok:#15803d; --warn:#b45309; --bad:#b91c1c;
  }
}

/* ========= Base ========= */
html{ scroll-behavior:smooth; }
*{ box-sizing:border-box; }
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg); color:var(--text); -webkit-text-size-adjust:100%;
}

/* Links */
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
a,button{ -webkit-tap-highlight-color:transparent; }
.u-link{ text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1.6px; }
.u-link:hover{ text-decoration-thickness:2px; }
a:focus-visible,.u-link:focus-visible{ outline:3px solid var(--link); outline-offset:2px; border-radius:4px; }

/* White-ish links for dark/dim content areas for contrast */
body.theme-dark a{ color:#f3f4f6; text-decoration-color:rgba(255,255,255,.6); }
body.theme-dark a:hover{ color:#fff; text-decoration-color:#fff; }
body.theme-dim a{ color:#e2e8f0; text-decoration-color:rgba(226,232,240,.6); }

/* ========= Header ========= */
.ch-header{ position:sticky; top:0; z-index:50; background:#0b1224cc; border-bottom:1px solid #18213b; backdrop-filter:blur(6px); }
body.theme-light .ch-header{ background:#ffffffcc; border-bottom:1px solid #d6dde8; }
body.theme-dim   .ch-header{ background:#141e33cc; border-bottom:1px solid #223154; }
.ch-header .wrap{ max-width:1200px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px; }
.ch-header .brand{ font-weight:700; font-size:18px; color:var(--text); margin-right:auto; }

/* Header nav — composited hover w/ readable text */
.ch-header nav a{
  position:relative; display:inline-block; padding:6px 10px; border-radius:8px; text-decoration:none;
  color:var(--text); --hover-bg:#111a33;
}
.ch-header nav a::before{
  content:""; position:absolute; inset:0; background:var(--hover-bg); opacity:0; border-radius:inherit; pointer-events:none;
  transition:opacity .18s ease;
}
.ch-header nav a:hover::before{ opacity:1; }
.ch-header nav a:hover{ color:#fff; }
.ch-header nav a.active{ background:#1f2a4a; color:#fff; }
body.theme-light .ch-header nav a{ color:#1e293b; --hover-bg:#eef2f7; }
body.theme-light .ch-header nav a:hover{ color:#0f172a; }
@media (max-width:768px){
  .ch-header .wrap{ flex-wrap:wrap; justify-content:space-between; padding:12px; }
  .ch-header .brand{ font-size:16px; margin-bottom:8px; }
  .ch-header nav{ display:flex; flex-wrap:wrap; gap:6px; }
  .ch-header nav a{ flex:1 1 calc(50% - 8px); text-align:center; font-size:13px; padding:8px 4px; }
}

/* ========= Page layout ========= */
.wrap{ max-width:1100px; margin:20px auto; padding:0 16px; }
.grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.grid>.full{ grid-column:1 / -1; }
@media (max-width:880px){ .grid{ grid-template-columns:1fr; } }

/* ========= Cards & UI ========= */
.card{ background:var(--card); border:1px solid #1f2937; border-radius:14px; padding:16px; }
body.theme-light .card{ border-color:#d6dde8; }
.title{ font-size:28px; font-weight:700; margin:0 0 6px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0; }

/* Chip — overlay hover */
.chip{
  position:relative; background:var(--chip); color:#e5e7eb; border-radius:999px; padding:4px 10px; font-size:12px; display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; transform:translateZ(0);
}
.chip::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(255,255,255,.06); opacity:0; transition:opacity .18s ease; }
.chip:hover::before{ opacity:1; }
.chip:active{ transform:scale(.98); }
body.theme-light .chip{ background:#e6eefc; color:#0f172a; border-color:#c9dafb; }
body.theme-dim   .chip{ background:#2a3a5d; color:#f1f3f7; border-color:#3a4a6d; }

.muted{ color:var(--muted); }
.status{ display:inline-flex; gap:8px; align-items:center; font-weight:600; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.ok{ background:var(--ok); } .bad{ background:var(--bad); } .warn{ background:var(--warn); }
table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:8px 6px; border-bottom:1px solid #1f2937; }
th{ color:var(--muted); font-weight:600; }
body.theme-light th, body.theme-light td{ border-bottom-color:#d6dde8; }
.logo{ max-width:220px; max-height:120px; object-fit:contain; }
.subhead{ font-weight:700; margin-top:14px; margin-bottom:6px; }
.subhead i{ color:var(--muted); margin-right:6px; font-size:.9em; opacity:.9; }

/* Badge — overlay hover */
.badge{
  position:relative; display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; background:#1f2937; font-size:12px; border:1px solid transparent;
}
.badge::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(255,255,255,.08); opacity:0; transition:opacity .18s ease; }
.badge:hover::before{ opacity:1; }
.badge:active{ transform:scale(.98); }
body.theme-light .badge{ background:#eef2f7; color:#0f172a; border-color:#d8dee7; }
body.theme-dim   .badge{ background:#24334f; color:#f1f3f7; border-color:#324162; }

/* Break long URLs */
.row a, .row div{ word-break:break-word; overflow-wrap:anywhere; }

/* Mobile tweaks */
@media (max-width:768px){
  .grid{ gap:12px; }
  .card{ padding:12px; border-radius:10px; }
  .title{ font-size:22px; }
  .chips{ gap:6px; }
  .chip{ font-size:11px; padding:3px 8px; }
  table th, table td{ padding:6px 4px; font-size:13px; }
  .subhead{ font-size:15px; margin-top:10px; }
  .badge{ font-size:11px; padding:2px 6px; }
  .logo{ display:block; margin:10px auto; }
  .wrap{ margin-bottom:40px; }
}

/* ========= Anchor offset for sticky header ========= */
.subhead[id], [id="pauzes"], [id="feestdagen"]{ scroll-margin-top: calc(var(--header-h) + 16px); }
.subhead[id]::before, #pauzes::before, #feestdagen::before{
  content:""; display:block; height: calc(var(--header-h) + 16px);
  margin-top: calc(-1 * (var(--header-h) + 16px)); visibility:hidden;
}

/* ========= Print ========= */
@media print{
  .ch-header, .chips{ display:none !important; }
  body{ background:#fff; color:#000; }
  .card{ border:1px solid #000; }
  a{ color:#000; text-decoration:underline; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .chip::before, .badge::before, .cc-card::after{ transition:none !important; }
}

/* ========= Feestdagen / tables ========= */
.grid-feestdagen{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:880px){ .grid-feestdagen{ grid-template-columns:1fr; gap:12px; } }
#nl table, #be table{ table-layout:fixed; }
#nl th:first-child, #nl td:first-child, #be th:first-child, #be td:first-child{ width:60%; }
#nl th:last-child,  #nl td:last-child,  #be th:last-child,  #be td:last-child{ width:40%; }

/* ========= Flags ========= */
.flag-img{
  height: 12px;
  width: auto;
  border-radius: 2px;
  vertical-align: middle;
}

/* groter in de pill-knoppen – ZET DIT LAGER IN DE CSS */
.link-pills .btn2{
  display: inline-flex;           /* netter centreren */
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.link-pills .btn2 .flag-img{
  height: 20px !important;        /* testfix: forceren; later !important weghalen */
  width: auto !important;
  margin: 0;
  border-radius: 3px;
}
.flag{ display:inline-block; width:18px; height:12px; background-size:cover; background-position:center; margin-left:4px; vertical-align:middle; border-radius:2px; box-shadow:0 0 1px rgba(0,0,0,.4); }
.flag.nl{ background-image:url("/css/icon/nl_36x24.png"); }
.flag.be{ background-image:url("/css/icon/be_36x24.png"); }
.flag.de{ background-image:url("/css/icon/de_36x24.png"); }

/* ========= Start page – cc-cards ========= */
.cc-wrap{ max-width:1100px; margin:16px auto 64px; padding:0 16px; }
.cc-cols{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:860px){ .cc-cols{ grid-template-columns:1fr 1fr; } }
.cc-stack{ display:grid; gap:12px; }
.cc-group{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; opacity:.75; margin:18px 2px 6px; }

.cc-card{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:14px 16px; border-radius:16px; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid #1f2937;
  box-shadow:0 8px 18px rgba(17,24,39,.28);
  transition:transform .08s ease, box-shadow .15s ease;
  position:relative; overflow:hidden;
}
.cc-card::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.03); opacity:0; transition:opacity .18s ease; }
.cc-card:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(17,24,39,.36); }
.cc-card:hover::after{ opacity:1; }
.cc-card .cc-ico{ width:36px; height:36px; border-radius:12px; display:inline-grid; place-items:center; background:#eef3ff; color:#2f5ea8; }
.cc-card .cc-title{ font-weight:600; font-size:15px; margin-bottom:2px; }
.cc-card .cc-desc{ font-size:13px; color:var(--muted); }
.cc-card .cc-chevron{ font-size:18px; color:var(--muted); opacity:.9; }
.cc-meta{ font-size:11px; color:var(--muted); margin-top:2px; }
.cc-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; opacity:.9; }
.cc-card.brand::before{ background:#2f5ea8; } .cc-card.green::before{ background:#2e7d32; }
.cc-card.orange::before{ background:#e65100; } .cc-card.purple::before{ background:#5e35b1; } .cc-card.slate::before{ background:#475569; }
.cc-card:hover::before{ opacity:1; }

/* Light / Dim / Dark variations */
body.theme-light .cc-card{ border-color:#d6dde8; box-shadow:0 8px 18px rgba(2,6,23,.10); }
body.theme-light .cc-card:hover{ box-shadow:0 12px 26px rgba(2,6,23,.16); }
body.theme-dim   .cc-card{ border-color:#2a3a5d; box-shadow:0 10px 22px rgba(2,6,23,.45); }
body.theme-dim   .cc-card:hover{ box-shadow:0 14px 30px rgba(2,6,23,.55); }
body.theme-dim   .cc-card .cc-ico{ background:rgba(99,102,241,.15); color:#c7d2fe; }
body.theme-dark  .cc-card{ border-color:#1f2937; box-shadow:0 10px 24px rgba(0,0,0,.55); }
body.theme-dark  .cc-card:hover{ box-shadow:0 14px 30px rgba(0,0,0,.65); }
body.theme-dark  .cc-card .cc-ico{ background:rgba(59,130,246,.14); color:#93c5fd; }

.cc-icons-off .cc-ico{ visibility:hidden; }

/* ========= Drop-off table ========= */
.table-wrap{ overflow:visible; }
@media (max-width:880px){ .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } }

#dropoff-table{ table-layout:fixed; width:100%; }
#dropoff-table th, #dropoff-table td{ white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
#dropoff-table td a{ word-break:break-all; }
#dropoff-table code.drop-ref{ white-space:normal; word-break:break-all; padding:2px 4px; border-radius:4px; }
#dropoff-table th{ min-width:0; }

/* Mobile table cards */
@media (max-width:880px){
  .table-responsive thead{ display:none; }
  .table-responsive, .table-responsive tbody, .table-responsive tr, .table-responsive td{ display:block; width:100%; }
  .table-responsive tr{ background:var(--card); border:1px solid rgba(148,163,184,.15); border-radius:12px; margin-bottom:10px; overflow:hidden; }
  .table-responsive td{ display:grid; grid-template-columns:130px 1fr; gap:10px; padding:10px 12px; border:none; }
  .table-responsive td::before{ content:attr(data-label); color:var(--muted); font-weight:600; }
  @media (max-width:420px){ .table-responsive td{ grid-template-columns:110px 1fr; padding:8px 10px; } }
  .table-responsive code.drop-ref{ white-space:normal; word-break:break-all; }
  .table-responsive td a{ word-break:break-all; }
}

/* ========= CLS ========= */
.card{ content-visibility:auto; contain-intrinsic-size:220px 800px; }
.card.full{ contain-intrinsic-size:280px 1000px; }
@supports not (content-visibility:auto){ .card.full{ min-height:280px; } }

/* ========= Touch targets ========= */
.tap{
  display:inline-flex; align-items:center;
  padding:10px 12px; min-height:44px; min-width:44px;
  border-radius:10px; line-height:1.2; gap:6px;
}
.link-pills a{
  position:relative; display:inline-flex; align-items:center; padding:10px 12px; min-height:44px;
  border-radius:999px; margin:4px 6px 0 0; background:var(--card);
  border:1px solid rgba(148,163,184,.25); text-decoration:none;
  --hover-bg:rgba(148,163,184,.12);
}
.link-pills a::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--hover-bg); opacity:0; transition:opacity .18s ease; }
.link-pills a:hover::before{ opacity:1; }
body.theme-light .link-pills a{ border-color:#d6dde8; }

/* ===== NAV: hard per-thema kleuren (zet dit ONDERAAN het bestand) ===== */

/* 1) Neutraliseer oude generieke hoverkleur */
.ch-header nav a:hover,
.ch-header nav a:focus-visible{
  color: inherit !important; /* per-thema bepaalt het straks */
}

/* 2) LIGHT THEME — betere contrasten */
body.theme-light .ch-header nav a{
  /* basis-tekst en hover-overlay iets donkerder dan voorheen */
  color: #1e293b;               /* slate-800 */
  --hover-bg: rgba(2, 6, 23, .06); /* subtiel donkerder dan #eef2f7 = beter contrast */
}

body.theme-light .ch-header nav a:hover,
body.theme-light .ch-header nav a:focus-visible{
  color: #0f172a !important;    /* slate-900 */
}

body.theme-light .ch-header nav a.active{
  background: #dbe3f3;
  color: #0f172a !important;
}

/* 3) DARK THEME — houd hover altijd wit */
body.theme-dark .ch-header nav a{
  color:#e5e7eb; --hover-bg: rgba(255,255,255,.08);
}
body.theme-dark .ch-header nav a:hover,
body.theme-dark .ch-header nav a:focus-visible{
  color:#fff !important;
}
body.theme-dark .ch-header nav a.active{
  background:#1f2a4a; color:#fff !important;
}

/* 4) DIM THEME — idem als dark */
body.theme-dim .ch-header nav a{
  color:#e2e8f0; --hover-bg: rgba(255,255,255,.08);
}
body.theme-dim .ch-header nav a:hover,
body.theme-dim .ch-header nav a:focus-visible{
  color:#fff !important;
}
body.theme-dim .ch-header nav a.active{
  background:#24334f; color:#fff !important;
}

/* === WCAG-verbeterde statuskleuren per thema (zet onderaan) === */

/* DARK bg #0F172A
   - OK  #34D399  → contrast ~9.29:1
   - BAD #FF8A80  → contrast ~7.82:1
   - WARN blijft prima (#FBBF24 → ~10.7:1) */
html.theme-dark, body.theme-dark{
  --ok:  #34D399;
  --bad: #FF8A80;
  --warn:#FBBF24;
}

/* DIM bg #1A2335
   - OK  #34D399  → ~8.18:1
   - BAD #FF9AA2  → ~7.78:1
   - WARN #FBBF24 → ~9.42:1 */
html.theme-dim, body.theme-dim{
  --ok:  #34D399;
  --bad: #FF9AA2;
  --warn:#FBBF24;
}

/* LIGHT bg #E9EEF6 (hier moesten de kleuren juist donkerder)
   - OK  #14532D  → ~7.82:1
   - BAD #7F1D1D  → ~8.60:1
   - WARN #713F12 → ~7.44:1 */
/* ===== zachtere variant voor light thema ===== */
html.theme-light, body.theme-light{
  --ok:   #147D64; /* groen met tikje teal */
  --bad:  #BE3A34; /* warm rood */
  --warn: #A35A05; /* warm oranje */
}


/* Scope de achtergrondkleuren alleen naar de dotjes */
.dot.ok   { background: var(--ok); }
.dot.bad  { background: var(--bad); }
.dot.warn { background: var(--warn); }

/* Tekstkleur voor regels (géén achtergrond meer) */
.status.ok   { color: var(--ok);   background: transparent !important; }
.status.bad  { color: var(--bad);  background: transparent !important; }
.status.warn { color: var(--warn); background: transparent !important; }

/* Veiligheid: haal globale achtergrond-regels weg/overrule ze */
.ok, .bad, .warn { background: transparent; }  /* alleen als je ze elders niet nodig hebt */

/* Footer links: per thema voldoende contrast */
.site-footer { color: var(--muted); }
.site-footer .foot-link{
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.6px;
}
.site-footer .foot-link:focus-visible{
  outline: 3px solid var(--link);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Dark: lichte, contrastrijke linkkleur */
html.theme-dark .site-footer .foot-link,
body.theme-dark .site-footer .foot-link{ color:#93C5FD; }   /* ~#0F172A bg → AA/AAA ok */

/* Dim: idem iets warmer */
html.theme-dim .site-footer .foot-link,
body.theme-dim .site-footer .foot-link{ color:#C7D2FE; }    /* AA/AAA ok */

/* Light: donkerder blauw voor voldoende contrast op #E9EEF6 */
html.theme-light .site-footer .foot-link,
body.theme-light .site-footer .foot-link{ color:#1D4ED8; }  /* AA/AAA ok */

/* Icons netjes uitlijnen en niet “schuiven” met tekst */
.site-footer .tg-ico{ vertical-align: middle; margin-right: 8px; }

/* Eventuele oude inline/erfelijke kleuren neutraliseren */
.site-footer a[style]{ color: inherit !important; }

/* Forceer font-display voor Font Awesome (CDN) */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;                 /* solid */
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2")
       format("woff2");
}
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;                 /* regular */
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-regular-400.woff2")
       format("woff2");
}

.theme-dark a,
.theme-mid a,
.theme-light a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Feestdagen: maak terminal-links makkelijk aantikbaar */
.feestdagen td:first-child a,
#nl table td:first-child a,       /* werkt met jouw bestaande #nl/#be tabellen */
#be table td:first-child a{
  position: relative;
  display: inline-block;
  line-height: 1.2;
  border-radius: 8px;
  /* kleine visuele padding voor desktop/muis */
  padding: 6px 8px;
}

/* Op touch (of smal) de tap-area vergroten zonder de layout te duwen */
@media (pointer: coarse), (max-width: 880px){
  .feestdagen td:first-child a,
  #nl table td:first-child a,
  #be table td:first-child a{
    padding: 12px 10px;      /* vergroot klikvlak */
    margin: -12px -10px;     /* compenseer → visueel blijft de tekst op z’n plek */
    min-height: 44px;        /* WCAG-advies */
  }
}

/* Visuele feedback bij focus/hover (en Lighthouse ziet extra cue) */
.feestdagen td:first-child a:hover,
#nl table td:first-child a:hover,
#be table td:first-child a:hover,
.feestdagen td:first-child a:focus-visible,
#nl table td:first-child a:focus-visible,
#be table td:first-child a:focus-visible{
  background: rgba(148,163,184,.12); /* composited, geen jank */
  outline: none;
}
@media (max-width: 880px){
  .table-responsive td:first-child a{
    display:inline-block;
    padding:12px 10px;
    margin:-12px -10px;
    min-height:44px;
    border-radius:10px;
  }
}

.visually-hidden {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
/* Verbeter contrast van zoekveld-placeholder */
input::placeholder {
  color: var(--text);
  opacity: 1; /* voorkomt dat browsers hem automatisch fletser maken */
}

/* Reserveer vaste ruimte voor FA iconen */
i.fa-solid, i.fa-regular, i.fas, i.far{
  display:inline-block;
  width:1em;
  height:1em;         /* voorkomt hoogte-jump in lijsten/titels */
  line-height:1em;
  vertical-align: -0.125em; /* optisch gelijk aan text baseline */
}
/* Vergroot klikoppervlak voor link-lijsten (FAQ / Handige links / Apps) */
.card ul li a {
  display: inline-block;
  padding: 4px 0;           /* zorgt voor extra hoogte, nauwelijks zichtbaar */
  line-height: 1.3;         /* stabielere spacing */
  min-height: 44px;         /* Lighthouse safe zone */
}

.card ul {
  margin: 0;
  padding-left: 1.25rem;
}

.card ul li {
  margin-bottom: 2px;       /* subtiele extra ruimte tussen regels */
}

/* 1) Font Awesome / icon fonts: reserveer vaste ruimte → geen micro-jumps */
i.fa-solid, i.fa-regular, i.fas, i.far {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  vertical-align: -0.125em; /* optisch op baseline */
}

/* 2) Cards met content-visibility: iets royaler intrinsic size → minder ‘inpoppen’ */
.card{
  content-visibility: auto;
  contain-intrinsic-size: 320px 900px;   /* was krapper; maak ruimer en stabieler */
}
.card.full{
  contain-intrinsic-size: 360px 1100px;
}
@supports not (content-visibility:auto){
  .card{ min-height:320px; }
  .card.full{ min-height:360px; }
}

/* 3) Lijsten in cards: stabiele regelhoogte/spacing */
.card ul{
  margin: .5rem 0;
  padding-left: 1.25rem;
}
.card li{
  line-height: 1.35;         /* vaste line-height voorkomt ‘drukken’ */
  min-height: 1.25rem;       /* klein vangnet */
}

/* 4) Scrollbar niet laten ‘inblenden’ → geen horizontale jump op load */
:root{ scrollbar-gutter: stable both-edges; }

/* 5) (van eerder) betere tap targets in link-lijsten, subtiel gehouden */
.card ul li a{
  display: inline-block;
  padding: 4px 0;
  min-height: 40px;          /* meestal genoeg voor Lighthouse */
}
@media (pointer: coarse), (max-width:880px){
  .card ul li a{ padding: 8px 0; min-height: 44px; }
}

/* 6) (van eerder) placeholder-contrast fix */
input::placeholder{ color: var(--text); opacity: 1; }

/* Laat de body altijd het hele viewport vullen */
html, body { height: 100%; }                     /* fallback */
body { 
  min-height: 100svh;                            /* modern (stabieler op mobiel) */
  min-height: 100dvh;                            /* alternatief – nieuwe units */
  background: var(--bg);
}

/* Zorg dat html geen eigen achtergrond ‘achter’ de body laat zien */
html { background: transparent; }

/* (optioneel) ietsje meer zekerheid op pagina’s met weinig content */
main.wrap { min-height: 60vh; }                  /* zodat er altijd ‘body’ zichtbaar is */

/* zoekveld contrast fix */
#search,
input[type="search"] {
  background: #1f2430;        /* donkerder bg */
  color: #eaf2ff;              /* lichter tekst */
  border: 1px solid #5b6b86;   /* duidelijkere rand */
}

#search::placeholder {
  color: #aeb8cc;              /* voldoende contrast met bg */
  opacity: 1;
}
/* 1) Maak kleine tekstlinks op touch devices groot genoeg */
@media (pointer: coarse) {
  /* zet de anchor als blok met royale padding */
  a.link {
    display: block;              /* of inline-flex als je icon + text uitlijnt */
    padding: 12px 14px;          /* ~48px tappable hoogte */
    line-height: 1.25;
    border-radius: 10px;
  }

  /* 2) Zorg voor ruimte tussen targets (min ~8px) */
  .terminals a.link,
  .feestdagen a.link {
    margin: 6px 0;               /* val terug als parent geen gap heeft */
  }

  /* Als je lijsten of grids gebruikt: zet liever gap op de parent */
  .terminals .list,
  .feestdagen .list,
  .terminals ul,
  .feestdagen ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

/* (optioneel) icon + label mooi centreren */
a.link--inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
}

/* (optioneel) extra “hit slop” zonder layout te verschuiven */
@media (pointer: coarse) {
  a.link.hitpad { position: relative; }
  a.link.hitpad::after {
    content: "";
    position: absolute;
    inset: -6px;                 /* vergroot klikvlak 6px rondom */
  }
}
/* --- 1) Stabiliseer linklijsten (touch targets + geen reflow) --- */
/* maak elke link een blok met vaste padding en line-height */
.faq a.link,
.terminals a.link,
.feestdagen a.link {
  display: block;
  padding: 12px 14px;
  line-height: 1.25;           /* voorkomt dat font-swap de hoogte wijzigt */
  border-radius: 10px;
  margin: 6px 0;               /* ruimte tussen targets */
  text-decoration: none;
}

/* als je icon-font gebruikt (FA), reserveer plek links van de tekst */
.faq a.link .icon,
.terminals a.link .icon,
.feestdagen a.link .icon {
  display: inline-block;
  width: 1.25em;               /* vaste breedte => geen sprong als FA laadt */
  min-width: 1.25em;
  text-align: center;
  margin-right: .5em;
}

/* --- 2) Zet gap op de lijstcontainer i.p.v. marges stapelen --- */
.faq .list, .terminals .list, .feestdagen .list,
.faq ul, .terminals ul, .feestdagen ul {
  display: flex;
  flex-direction: column;
  gap: 8px;                     /* stabiele tussenruimte (geen margin-collapsing) */
  list-style: none;             /* als je FA/icoontjes gebruikt voor bullets */
  padding-left: 0;
}

/* --- 3) Reserveer intrinsieke maat voor kaarten/kolommen (boven vouw = klein, onder vouw = groter) --- */
.grid, .grid-flow-row {
  align-items: start;
}
.faq-card, .terminal-card, .content-card {
  min-height: 220px;            /* klein, zodat niets instort vóór font/icoon er is */
}
@supports (content-visibility: auto) {
  /* items lager op de pagina krijgen virtuele maat, geen layout shift */
  .faq-card, .terminal-card, .content-card {
    content-visibility: auto;
    contain-intrinsic-size: 600px; /* reserveer ~hoogte; pas evt. aan */
  }
}

/* --- 4) Font Awesome/webfonts: voorkom reflow bij swap --- */
/* alleen als je FA zelf host of class-namen hebt */
@font-face {
  font-family: "Font Awesome 6 Free";
  src: url("/webfonts/fa-solid-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;           /* geen FOIT => minder CLS */
}
/* tekst overal een vaste baseline */
html { line-height: 1.25; }
/* css_v3.css */
.status .muted .afwijkend {
  font-weight: 600;
  color: var(--accent-color, inherit);
}

.next-opening {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}
.next-opening .muted {
  color: var(--muted);
  margin-left: 2px;
}

/* Algemene app-buttonstijl */
.app-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  margin: 4px 6px 4px 0;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--btn-border);
  color: var(--btn-text);
  background-color: var(--btn-bg);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-btn, .btn-link {
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.app-btn:hover, .btn-link:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border: 1px solid var(--btn-border);
  background-color: var(--btn-bg);
  color: var(--btn-text);
}

/* === Uniforme knopstijl voor alle externe links === */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  margin: 4px 6px 4px 0;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--btn-border);
  color: var(--btn-text);
  background-color: var(--btn-bg);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.action-btn:hover {
  background-color: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-text);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

.action-btn i {
  font-size: 0.95em;
}
/* Thema's */
body.theme-light {
  --btn-bg: #f5f7fb;
  --btn-border: #cdd5e0;
  --btn-text: #1e3a8a;
  --btn-hover-bg: #e6edff;
  --btn-hover-border: #b8c4e0;
  --btn-hover-text: #12235a;
}

body.theme-dark,
body.theme-dim {
  --btn-bg: #283142;
  --btn-border: #3c465a;
  --btn-hover-bg: #34405a;
  --btn-hover-border: #5a6c91;
  --btn-text: #e4ebff;
}

/* één regel per knop */
.link-row {
  margin-bottom: 6px;
}

/* Android + iOS samen op één regel */
.apps-line {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  margin-bottom: 6px;
}

/* klein scherm → mogen breken */
@media (max-width: 420px) {
  .apps-line { flex-wrap: wrap; }
}

.tools-notes {
  margin-top: 6px;
  font-size: 0.95rem;
}

.faq-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between; /* badges links, knoppen rechts */
  gap: .5rem;
  padding: .2rem 0;
}

.faq-left-items, .faq-right-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}

.faq-left-items {
  flex: 1 1 auto;       /* badges nemen de breedte links */
}
.faq-right-items {
  flex: 0 0 auto;       /* knoppen blijven rechts */
}

/* optioneel: iets minder ruimte onder details */
.faq-details {
  margin-top: .3rem;
}
/* Contactregels – uniforme en veilige opmaak */
.row .muted {
  min-width: 10rem;
}

.obf a {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.obf a:hover {
  border-bottom-style: solid;
}

/* Coördinatenblok stijl */
.coord-block { display:flex; flex-direction:column; gap:.4rem; }
.coords-text { font-family:monospace; color:var(--text-muted); font-size:.9em; }

.coord-buttons { display:flex; gap:.4rem; flex-wrap:wrap; }

.btn-mini {
  display:inline-flex; align-items:center; gap:.35em;
  background:rgba(255,255,255,.07);
  border-radius:8px; padding:4px 8px; font-size:.85em;
  text-decoration:none; border:0; cursor:pointer;
  transition: background .2s ease;
}
.btn-mini:hover { background:rgba(255,255,255,.12); }
.btn-mini i { font-size:.9em; }
.btn-mini.alt { background:rgba(66,133,244,.15); }
.btn-mini.alt:hover { background:rgba(66,133,244,.25); }
.btn-mini.ghost { background:transparent; border:1px dashed rgba(255,255,255,.25); }
.btn-mini.ghost:hover { border-style:solid; }

/* optioneel: laat de placeholder-span eruit zien als disabled knop zolang JS nog niet liep */
.obf-btn.action-btn { opacity:.85; pointer-events:none; }

  .td-center { text-align:center; white-space:nowrap; }
  .btn-mini.app-icon { margin: 0 2px; }
  .sr-only { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  @media (max-width: 900px) {
    /* op smalle schermen iets meer ruimte geven aan de eerste twee kolommen */
    #slot-table th:nth-child(1){ width:40%; }
    #slot-table th:nth-child(3),
    #slot-table th:nth-child(4){ width:auto; }
  }
  
  @media (max-width:768px){
  .faq-line{
    display:flex;
    flex-wrap:wrap;         /* belangrijk */
    gap:8px;
    align-items:center;
  }
  .faq-left-items,
  .faq-right-items{
    min-width:0;            /* laat tekst/knoppen krimpen binnen de rij */
    flex:1 1 100%;          /* stapel links en rechts onder elkaar op mobiel */
  }
}
.btn-mini{ flex:0 1 auto; max-width:100%; }
@media (max-width:420px){
  .btn-mini .label{ display:none; }  /* op zeer smal: icon-only */
}
.app-icons{ display:flex; flex-wrap:wrap; gap:8px; }
.app-icons a{ flex:0 1 auto; max-width:100%; }
.tl-links{ display:flex; flex-wrap:wrap; gap:8px; }
.tl-links .btn2{ flex:0 1 auto; max-width:100%; }
@media (max-width:768px){
  table.faq-table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  td, th{ min-width:0; }
}