/* ============================================================================
   FLINE festival pages — shared styles. Tokens 1:1 met de app (fline-app).
   Gebruikt door /festivals/ (overzicht) en /festivals/<slug>.html (detail).
   ============================================================================ */
:root {
  --bg:#111111; --surface:#1c1c1c; --border:#2a2a2a;
  --text:#f0f0f0; --muted:#888888; --accent:#4cde7a; --on-accent:#141414;
  --card-top:#202020; --card-bottom:#1a1a1a;
  --live-text:#4cde7a; --live-glow:rgba(76,222,122,.13);
  --rain:#6db6ff;
  --maxw:960px;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-display:'Archivo Black', 'Inter', system-ui, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#f4f3ef; --surface:#ffffff; --border:#e4e2db;
    --text:#1a1a1a; --muted:#7c7a73; --accent:#4cde7a; --on-accent:#141414;
    --card-top:#ffffff; --card-bottom:#f7f6f2;
    --live-text:#1f9d4d; --live-glow:rgba(30,170,85,.32);
    --rain:#2f7fd6;
  }
}
:root[data-theme="light"] {
  --bg:#f4f3ef; --surface:#ffffff; --border:#e4e2db;
  --text:#1a1a1a; --muted:#7c7a73; --accent:#4cde7a; --on-accent:#141414;
  --card-top:#ffffff; --card-bottom:#f7f6f2;
  --live-text:#1f9d4d; --live-glow:rgba(30,170,85,.32);
  --rain:#2f7fd6;
}
:root[data-theme="dark"] {
  --bg:#111111; --surface:#1c1c1c; --border:#2a2a2a;
  --text:#f0f0f0; --muted:#888888; --accent:#4cde7a; --on-accent:#141414;
  --card-top:#202020; --card-bottom:#1a1a1a;
  --live-text:#4cde7a; --live-glow:rgba(76,222,122,.13);
  --rain:#6db6ff;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none!important; transition:none!important;} }
body { background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img, svg, iframe { display:block; max-width:100%; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 20px; }

@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.2;} }
@keyframes ripple { 0%{transform:scale(.4); opacity:.7;} 100%{transform:scale(1.8); opacity:0;} }

/* ── Top bar ─────────────────────────────────────────────────── */
.topbar { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 82%,transparent); -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--border); }
.topbar-in { display:flex; align-items:center; gap:14px; height:58px; }
.back .mdi { font-size:20px; line-height:1; }
.btn-app .mdi { font-size:16px; line-height:1; }
.brand { font-family:var(--font-display); font-size:19px; letter-spacing:.02em; text-decoration:none; }
.brand .dot { color:var(--accent); }
.back { display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:500; }
.back:hover { color:var(--text); }
.spacer { flex:1; }
.btn-app { display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:var(--on-accent); text-decoration:none; font-weight:600; font-size:14px; padding:9px 15px; border-radius:12px; border:1px solid transparent; transition:filter .15s ease; }
.btn-app:hover { filter:brightness(1.06); }

/* ── Breadcrumb ──────────────────────────────────────────────── */
.crumbs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.crumbs a { text-decoration:none; color:var(--muted); }
.crumbs a:hover { color:var(--text); }
.crumbs .sep { opacity:.45; }
.crumbs [aria-current] { color:var(--text); font-weight:600; }

/* ── Hero / page header ──────────────────────────────────────── */
.hero, .page-head { position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.hero::before, .page-head::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 120% at 10% -12%, color-mix(in srgb,var(--accent) 18%,transparent), transparent 60%),
            radial-gradient(46% 100% at 100% 0%, color-mix(in srgb,var(--rain) 12%,transparent), transparent 55%); }
/* same top padding as .page-head-in so the breadcrumb doesn't jump between pages */
.hero-in { position:relative; z-index:1; padding-top:clamp(30px,5vw,46px); padding-bottom:clamp(28px,4vw,38px); }
.page-head-in { position:relative; z-index:1; padding-top:clamp(30px,5vw,46px); padding-bottom:clamp(24px,4vw,34px); }
.ade-line { display:inline-flex; align-items:center; gap:9px; margin-top:16px; color:var(--muted); font-size:13px; font-weight:600; letter-spacing:.02em; }
.ade-line .ade-logo { width:22px; height:22px; object-fit:contain; flex:none; }
.cd-pill { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; letter-spacing:.03em; color:var(--on-accent); background:var(--accent); border-radius:8px; padding:5px 11px; }
h1.title { font-family:var(--font-display); font-weight:400; font-size:clamp(36px,7.5vw,68px); line-height:1; letter-spacing:.005em; text-wrap:balance; margin:16px 0 14px; }
.page-head h1.title { font-size:clamp(34px,7vw,60px); margin:14px 0 12px; }
.facts { display:flex; flex-wrap:wrap; gap:9px 22px; color:var(--muted); font-size:15px; font-weight:500; }
.facts .f { display:inline-flex; align-items:center; gap:8px; }
.facts .f .mdi { font-size:18px; line-height:1; color:var(--accent); flex:none; }
.facts .f b { color:var(--text); font-weight:600; }
.lead { color:var(--muted); font-size:16px; line-height:1.75; }

/* ── Section scaffold ────────────────────────────────────────── */
section.block { padding:clamp(30px,5vw,46px) 0; border-bottom:1px solid var(--border); }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
h2 { font-size:22px; font-weight:700; letter-spacing:-.01em; margin-bottom:4px; }
.block > .lead { margin:2px 0 22px; }

/* ── Line-up ─────────────────────────────────────────────────── */
.daytabs { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 18px; }
.daytab { font-family:inherit; cursor:pointer; font-weight:600; font-size:14px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:9px 15px; display:flex; flex-direction:column; align-items:flex-start; gap:1px; transition:border-color .15s ease, background .15s ease; }
.daytab .d2 { font-weight:500; font-size:12px; color:var(--muted); }
.daytab[aria-selected="true"] { background:var(--accent); color:var(--on-accent); border-color:transparent; }
.daytab[aria-selected="true"] .d2 { color:color-mix(in srgb,var(--on-accent) 72%,transparent); }
.daytab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.stage { border:1px solid var(--border); border-radius:16px; background:linear-gradient(155deg, var(--card-top) 0%, var(--card-bottom) 100%); margin-bottom:12px; overflow:hidden; }
.stage-h { display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--border); }
.stage-h .sname { font-weight:700; font-size:15px; }
.stage-h .scount { margin-left:auto; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.stage-h .swatch { width:9px; height:9px; border-radius:3px; background:var(--accent); flex:none; }
.acts { display:flex; flex-wrap:wrap; gap:8px; padding:14px 18px; }
.act { font-size:14px; font-weight:500; color:var(--text); background:color-mix(in srgb,var(--text) 5%,transparent); border:1px solid var(--border); border-radius:8px; padding:7px 11px; }
.panel[hidden] { display:none; }
.disclaimer { color:var(--muted); font-size:13px; margin-top:16px; }
/* Line-up "to be announced" states */
.tba { display:flex; gap:16px; align-items:flex-start; margin-top:8px; border:1px solid var(--border); border-radius:16px; background:linear-gradient(155deg, var(--card-top) 0%, var(--card-bottom) 100%); padding:24px 22px; }
.tba > .mdi { font-size:28px; line-height:1; color:var(--accent); flex:none; margin-top:2px; }
.tba h3 { font-size:17px; font-weight:700; margin-bottom:4px; }
.tba p { color:var(--muted); font-size:14.5px; }
.tba-day { color:var(--muted); font-size:14px; padding:14px 2px; }
.tba-inline { color:var(--muted); font-size:14px; font-style:italic; }

/* ── Location / map (live OpenStreetMap embed) ───────────────── */
.mapframe { position:relative; border:1px solid var(--border); border-radius:16px; overflow:hidden; min-height:340px; background:var(--card-bottom); margin-top:18px; }
/* Leaflet map (CARTO dark/light tiles, set per theme in festival.js) */
#festmap { position:absolute; inset:0; }
.leaflet-container { background:var(--card-bottom); font:inherit; }
/* Smaller, subtler attribution */
.leaflet-control-attribution { font-size:10px !important; line-height:1.3; padding:1px 6px; background:color-mix(in srgb,var(--surface) 66%, transparent) !important; color:var(--muted) !important; opacity:.7; }
.leaflet-control-attribution a { color:var(--muted) !important; text-decoration:none; }
/* Zoom controls in theme colours */
.leaflet-bar a { background:var(--surface) !important; color:var(--text) !important; border-bottom-color:var(--border) !important; }
.leaflet-bar a:hover { background:var(--card-top) !important; }
.leaflet-bar { border-color:var(--border) !important; box-shadow:none !important; }
/* Marker label (festival name + city) */
.leaflet-tooltip.fest-tip { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:10px; box-shadow:0 6px 20px -8px rgba(0,0,0,.5); padding:7px 11px; font:inherit; font-size:13px; line-height:1.25; white-space:nowrap; }
.leaflet-tooltip.fest-tip b { font-weight:700; }
.leaflet-tooltip.fest-tip .tt-loc { display:block; color:var(--muted); font-size:11px; font-weight:500; margin-top:1px; }
.leaflet-tooltip.fest-tip.leaflet-tooltip-top::before { border-top-color:var(--border); }
/* Map-app links: same button look as the tickets buttons (see .tk), two per row. */
.map-links { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:12px; }
.map-link { display:flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; font-weight:700; font-size:15.5px; color:var(--text); border:1px solid var(--border); border-radius:14px; padding:14px 16px; background:linear-gradient(155deg, var(--card-top) 0%, var(--card-bottom) 100%); transition:border-color .15s ease; }
.map-link:hover { border-color:var(--accent); }
.map-link .mdi { font-size:20px; line-height:1; color:var(--accent); }
/* ── Tickets & lockers ───────────────────────────────────────── */
/* Tickets section: intro text left, action button(s) aligned beside it on the right. */
.tk-row { display:grid; grid-template-columns:1fr auto; gap:clamp(20px,4vw,40px); align-items:center; }
.tk-intro .lead { margin-top:6px; }
.tk-actions { display:grid; gap:12px; width:260px; }
.tk-actions .tk { width:100%; }
@media (max-width:640px){ .tk-row { grid-template-columns:1fr; } .tk-actions { width:100%; margin-top:18px; } }
.tk { display:flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; border:1px solid var(--border); border-radius:14px; padding:14px 16px; background:linear-gradient(155deg, var(--card-top) 0%, var(--card-bottom) 100%); color:var(--text); min-width:0; transition:border-color .15s ease; }
.tk:hover { border-color:var(--accent); }
.tk .ic { flex:none; color:var(--accent); }
.tk .ic .mdi { font-size:20px; line-height:1; }
.tk b { font-weight:700; font-size:15.5px; }
.tk .arw { flex:none; color:var(--muted); }
.tk .arw .mdi { font-size:16px; line-height:1; }
.tk.primary { background:var(--accent); border-color:transparent; }
.tk.primary b, .tk.primary .arw, .tk.primary .ic { color:var(--on-accent); }

/* ── Auto FAQ (native details/summary accordion) ─────────────── */
.faq { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.faq-item { border:1px solid var(--border); border-radius:14px; background:linear-gradient(155deg, var(--card-top) 0%, var(--card-bottom) 100%); overflow:hidden; transition:border-color .15s ease; }
.faq-item:hover { border-color:color-mix(in srgb,var(--accent) 40%, var(--border)); }
.faq-item[open] { border-color:color-mix(in srgb,var(--accent) 55%, var(--border)); }
.faq-item > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; font-weight:600; font-size:15.5px; color:var(--text); }
.faq-item > summary::-webkit-details-marker { display:none; }
.faq-item > summary::marker { content:""; }
.faq-item > summary:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:14px; }
.faq-q { min-width:0; }
.faq-item > summary .chev { flex:none; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:color-mix(in srgb,var(--text) 6%, transparent); color:var(--muted); transition:transform .2s ease, background .15s ease, color .15s ease; }
.faq-item > summary .chev .mdi { font-size:19px; line-height:1; }
.faq-item[open] > summary .chev { transform:rotate(180deg); background:var(--accent); color:var(--on-accent); }
.faq-item .faq-a { padding:0 18px 17px; margin-top:-2px; }
.faq-item .faq-a p { color:var(--muted); font-size:14.5px; line-height:1.7; margin:0; }

/* ── Festival card (1:1 met de app-picker) ───────────────────── */
.festival-card { position:relative; overflow:hidden; display:block; text-decoration:none; background:linear-gradient(155deg, var(--card-top) 0%, var(--card-bottom) 100%); border:1px solid var(--border); border-radius:16px; padding:22px 20px 18px; text-align:left; width:100%; transition:border-color .15s, background .15s; }
.festival-card:hover { border-color:var(--accent); }
.card-ade-logo { position:absolute; top:0; left:0; width:26px; height:26px; object-fit:contain; }
.festival-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.festival-card.is-live { border-color:var(--live-text); background:linear-gradient(155deg, var(--live-glow) 0%, transparent 62%), linear-gradient(155deg, var(--card-top) 0%, var(--card-bottom) 100%); box-shadow:0 0 22px -8px color-mix(in srgb,var(--live-text) 55%,transparent); }
.card-top { display:flex; align-items:flex-start; gap:14px; }
.card-info { min-width:0; flex:1; }
.card-toprow { display:flex; align-items:center; gap:8px; margin-bottom:8px; min-height:22px; }
.card-name { font-size:19px; font-weight:700; color:var(--text); margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-meta { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:12px; min-width:0; overflow:hidden; }
.card-meta .meta-item { display:flex; align-items:center; gap:5px; min-width:0; font-variant-numeric:tabular-nums; }
.card-meta .meta-item > .mdi { font-size:14px; line-height:1; color:var(--muted); flex-shrink:0; }
.card-meta .meta-item:first-child { flex-shrink:0; }
.card-meta .meta-loc-clip { flex:1; min-width:0; overflow:hidden; display:flex; align-items:center; }
.card-meta .meta-loc-text { display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Location marquee on overflow — copied from the app (fitLocation in festival.js). */
.card-meta .meta-loc.scrolling .meta-loc-clip { -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 12px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 12px),transparent 100%); }
.card-meta .meta-loc.scrolling .meta-loc-text { max-width:none; overflow:visible; text-overflow:clip; animation:loc-marquee var(--loc-dur,10s) ease-in-out infinite alternate; }
@keyframes loc-marquee { 0%,14%{transform:translateX(0);} 86%,100%{transform:translateX(var(--loc-shift,0));} }
@media (prefers-reduced-motion: reduce){ .card-meta .meta-loc.scrolling .meta-loc-text{ animation:none; } }
.card-countdown { font-size:11px; font-weight:600; color:var(--on-accent); background:var(--accent); border-radius:6px; padding:2px 8px; white-space:nowrap; }
.live-badge { color:var(--live-text); font-weight:600; font-size:12px; letter-spacing:.05em; display:inline-flex; align-items:center; gap:6px; }
.live-badge .live-dot { flex-shrink:0; width:7px; height:7px; border-radius:50%; background:var(--live-text); animation:pulse 1.4s ease-in-out infinite; }

/* ── Overview grid (per maand, responsive) ───────────────────── */
/* Grid in date order (left-to-right). Names are clamped to one line (below) so
   every card is the same height — rows align, no stretching, no empty space. */
.picker-list { margin:clamp(24px,4vw,36px) 0 clamp(40px,7vw,64px); display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:stretch; }
@media (max-width:860px){ .picker-list{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .picker-list{ grid-template-columns:1fr; } }
.picker-month { grid-column:1 / -1; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:12px 4px 0; }
.picker-month:first-child { margin-top:0; }
.empty-note { color:var(--muted); font-size:15px; padding:24px 0; }

/* ── Detail-page slider (interne links naar andere festivals) ── */
.slider-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.slider-nav { display:flex; gap:8px; }
.snav { width:38px; height:38px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .15s ease, opacity .15s ease; }
.snav:hover { border-color:var(--accent); }
.snav:disabled { opacity:.35; cursor:default; border-color:var(--border); }
.snav:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.snav .mdi { font-size:20px; line-height:1; }
.track { display:grid; grid-auto-flow:column; grid-auto-columns:270px; gap:16px; align-items:stretch; overflow-x:auto; scroll-snap-type:x mandatory; margin-top:18px; padding-bottom:8px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.track::-webkit-scrollbar { height:8px; }
.track::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px; }
.track > .festival-card { scroll-snap-align:start; }
@media (max-width:520px){ .track{ grid-auto-columns:82%; } }

/* ── Cookie-consent popup (opt-in Google Analytics) — blokkerende blur-overlay ── */
#cookieBanner { position:fixed; inset:0; z-index:360; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); overscroll-behavior:contain; touch-action:none; }
html.consent-lock, body.consent-lock { overflow:hidden !important; }
#cookieBanner .cb-card { width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 24px 60px -20px rgba(0,0,0,.6); padding:16px 18px; display:flex; flex-direction:column; gap:14px; text-align:left; animation:cb-in .22s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce){ #cookieBanner .cb-card { animation:none; } }
@keyframes cb-in { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:none; } }
#cookieBanner .cb-text { font-size:13px; line-height:1.5; color:var(--text); }
#cookieBanner .cb-text a { color:var(--accent); }
#cookieBanner .cb-actions { display:flex; gap:10px; }
#cookieBanner .cb-btn { flex:1 1 0; padding:10px 14px; border-radius:10px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text); }
#cookieBanner .cb-btn:hover { border-color:var(--muted); }
#cookieBanner .cb-accept { flex-grow:2.4; padding:13px 14px; font-size:15.5px; background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
#cookieBanner .cb-btn#cbDecline { flex-grow:1; padding:9px 12px; font-size:13px; color:var(--muted); }

/* ── Footer ──────────────────────────────────────────────────── */
footer.wrap { padding:28px 20px 56px; border-top:1px solid var(--border); }
.foot { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; color:var(--muted); font-size:14px; }
.foot a { color:var(--muted); text-decoration:none; }
.foot a:hover { color:var(--text); }
.foot .brand-sm { font-family:var(--font-display); color:var(--text); font-size:16px; }
.foot .sp { flex:1; }