/* ============================================================
   WK Voetbal Kijken — shared design system (light, map-led)
   ============================================================ */
:root{
  /* team-driven (set by JS) */
  --accent:#FF6B00;
  --accent-2:#21468B;
  --accent-ink:#0a0a0a;
  --band:linear-gradient(90deg,#AE1C28 0 33.33%,#fff 33.33% 66.66%,#21468B 66.66% 100%);
  /* light shell */
  --bg:#f3f4f6;
  --panel:#ffffff;
  --panel-2:#eef0f3;
  --line:rgba(15,16,20,.12);
  --line-soft:rgba(15,16,20,.07);
  --ink:#14151a;
  --text:#14151a;
  --muted:rgba(20,21,26,.62);
  --muted-2:rgba(20,21,26,.42);
  --shadow:rgba(15,16,30,.12);
  --shadow-strong:rgba(15,16,30,.18);
  --glow:color-mix(in srgb, var(--accent) 38%, transparent);
  --glow-soft:color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-line:color-mix(in srgb, var(--accent) 50%, transparent);
  --display:'Bebas Neue', sans-serif;
  --cond:'Barlow Condensed', sans-serif;
  --body:'Barlow', sans-serif;
  --mono:'Space Grotesk', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{width:min(1280px,100% - 48px);margin-inline:auto;}
.display{font-family:var(--display);font-weight:400;line-height:.88;margin:0;letter-spacing:.01em;}
.ko{color:var(--accent);transition:color .35s ease;}
.label{font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;font-weight:600;}
.mono{font-family:var(--mono);}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:12px;transition:color .35s ease;}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--accent);transition:background .35s ease;}
[hidden]{display:none !important;}

/* ---------- flag header band (lives inside sticky .nav) ---------- */
.flagband{height:5px;width:100%;background:var(--band);transition:background .4s ease;flex:none;}

/* ---------- country flags (self-hosted SVG; emoji flags don't render on Windows) ----------
   Sized in em so each context's existing `.flag` font-size keeps the original proportions. */
img.flag-img{display:inline-block;width:auto;height:.82em;aspect-ratio:4/3;object-fit:cover;
  border-radius:2px;box-shadow:0 0 0 1px rgba(15,16,20,.14);vertical-align:-.1em;flex:0 0 auto;margin:0;}
.flag-tbd{display:inline-block;width:1.1em;height:.82em;border-radius:2px;background:var(--panel-2);
  box-shadow:0 0 0 1px rgba(15,16,20,.14);vertical-align:-.1em;flex:0 0 auto;}

/* ---------- share button + fallback menu ---------- */
.sharebtn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:1px solid var(--line);background:#fff;
  color:var(--ink);border-radius:999px;padding:8px 14px;font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:13px;line-height:1;transition:border-color .2s,color .2s,background .2s;}
.sharebtn:hover{border-color:var(--accent);color:var(--accent);}
.sharebtn svg{width:15px;height:15px;flex:none;}
.sharebtn.mini{padding:7px;border-radius:9px;}
.sharebtn.mini .sharebtn-l{display:none;}
.nav-share{padding:7px 13px;}
@media (max-width:680px){ .nav-share{padding:7px;} .nav-share .sharebtn-l{display:none;} }
.fx-actions,.tm-actions{display:inline-flex;align-items:center;gap:8px;justify-self:end;}
.share-menu{position:fixed;z-index:200;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px var(--shadow-strong);padding:6px;min-width:172px;display:flex;flex-direction:column;gap:2px;}
.share-menu[hidden]{display:none;}
.share-i{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:13px;color:var(--ink);
  padding:9px 11px;border-radius:8px;transition:background .15s,color .15s;}
.share-i:hover{background:rgba(15,16,20,.05);color:var(--accent);}
.share-i svg{flex:none;color:var(--muted);}
.share-i:hover svg{color:var(--accent);}

/* ---------- out-of-home CTA band ---------- */
.ohcta{background:var(--ink);color:#fff;}
.ohcta .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:40px 0;}
.ohcta-txt{max-width:640px;}
.ohcta .eyebrow{color:var(--accent);}
.ohcta h3{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(22px,2.6vw,32px);line-height:1.05;margin:10px 0 8px;color:#fff;}
.ohcta p{color:rgba(255,255,255,.72);font-size:15px;line-height:1.5;margin:0;}
.ohcta .btn-primary{flex:none;}
@media (max-width:680px){ .ohcta .wrap{flex-direction:column;align-items:flex-start;} }

/* ---------- top nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;}
.nav .wrap{display:flex;align-items:center;gap:20px;height:64px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;font-size:19px;line-height:1;color:var(--ink);}
.brand .mark{width:32px;height:32px;border-radius:9px;background:var(--accent);display:grid;place-items:center;
  flex:none;transition:background .35s ease;box-shadow:0 5px 14px var(--glow-soft);}
.brand .mark svg{width:19px;height:19px;}
.brand b{color:var(--accent);transition:color .35s ease;}
.nav-links{display:flex;align-items:center;gap:6px;margin-left:8px;}
.nav-links a{font-family:var(--cond);text-transform:uppercase;letter-spacing:.07em;font-weight:600;font-size:14px;
  color:var(--muted);padding:8px 13px;border-radius:9px;transition:color .2s,background .2s;}
.nav-links a:hover{color:var(--ink);background:rgba(15,16,20,.04);}
.nav-links a.active{color:var(--accent-ink);background:var(--accent);}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px;}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;}
.lang button{border:0;background:transparent;cursor:pointer;font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--muted);padding:7px 12px;transition:color .2s,background .2s;}
.lang button.on{background:var(--accent);color:var(--accent-ink);}

/* ---------- utility strip: countdown + weather ---------- */
.util{background:color-mix(in srgb, var(--accent) 7%, var(--bg));border-bottom:1px solid var(--line-soft);}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:46px;padding:8px 0;flex-wrap:wrap;}
.util-cd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.util-cd .lbl{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-size:12px;color:var(--accent);}
.util-cd .match{display:inline-flex;align-items:center;gap:8px;font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;font-size:15px;color:var(--ink);}
.util-cd .match .flag{font-size:17px;}
.util-cd .match .vs{color:var(--muted-2);font-size:12px;}
.util-cd .timer{display:inline-flex;gap:5px;}
.util-cd .timer b{font-family:var(--mono);font-weight:700;font-size:13px;background:var(--accent);color:var(--accent-ink);
  border-radius:6px;padding:3px 7px;transition:background .35s ease,color .35s ease;}
.weather{display:inline-flex;align-items:center;gap:11px;font-family:var(--cond);font-weight:600;font-size:13px;color:var(--muted);}
.weather .city{color:var(--ink);text-transform:uppercase;letter-spacing:.06em;}
.weather .temp{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--ink);}
.weather .ic{width:22px;height:22px;color:var(--accent);}
.weather .tag{color:var(--accent);}
.weather .fc{display:inline-flex;gap:10px;padding-left:11px;margin-left:4px;border-left:1px solid var(--line);}
.weather .fc span{display:inline-flex;flex-direction:column;align-items:center;gap:1px;font-size:11px;color:var(--muted-2);}
.weather .fc span b{font-family:var(--mono);font-size:12px;color:var(--ink);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:11px;cursor:pointer;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.07em;font-weight:700;font-size:15px;
  padding:0 22px;height:46px;transition:transform .12s ease,filter .2s ease,background .35s ease,color .35s ease;}
.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.04);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- search ---------- */
.searchbar{display:flex;align-items:center;background:#fff;border-radius:13px;padding:6px 6px 6px 18px;
  box-shadow:0 16px 40px var(--shadow);border:1px solid var(--line);}
.searchbar .si{flex:none;display:grid;place-items:center;}
.searchbar input{border:0;outline:0;font-family:var(--body);font-size:15px;color:#15151a;background:transparent;
  flex:1;padding:11px 12px;min-width:0;}
.searchbar input::placeholder{color:#9a9aa0;}
.searchbar .sbtn{flex:none;background:var(--accent);color:var(--accent-ink);border:0;border-radius:9px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.07em;font-weight:700;font-size:15px;
  padding:0 22px;height:42px;cursor:pointer;white-space:nowrap;transition:background .35s ease,color .35s ease;}

/* ---------- team toggle ---------- */
.support{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.support .lead{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:13px;color:var(--ink);}
.support .lead small{display:block;letter-spacing:.1em;font-size:10px;color:var(--muted-2);font-weight:600;}
.pills{display:flex;gap:8px;flex-wrap:wrap;}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(15,16,20,.04);border:1px solid var(--line);
  color:var(--ink);border-radius:999px;padding:8px 15px 8px 11px;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.05em;font-weight:600;font-size:14px;cursor:pointer;transition:border-color .2s,background .2s,transform .12s;}
.pill:hover{transform:translateY(-1px);border-color:rgba(15,16,20,.26);}
.pill .flag{font-size:18px;line-height:1;}
.pill[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}

/* ---------- draggable map ---------- */
.mapview{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;}
.mapview.grabbing{cursor:grabbing;}
.mapmove{position:absolute;inset:-110px;will-change:transform;}
.mapbase{width:100%;height:100%;display:block;}
.dlabel{position:absolute;font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:rgba(20,21,26,.32);}
.pin{position:absolute;transform:translate(-50%,-100%);filter:drop-shadow(0 5px 7px rgba(15,16,30,.3));}
.pin.glow{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 75%,transparent)) drop-shadow(0 5px 7px rgba(15,16,30,.3));}
.you{position:absolute;transform:translate(-50%,-50%);width:15px;height:15px;border-radius:50%;background:var(--accent);
  border:3px solid #fff;box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 24%,transparent);transition:background .35s ease;}
.maphint{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-family:var(--cond);
  text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--muted);box-shadow:0 8px 22px var(--shadow);}
.maphint svg{width:13px;height:13px;}
.vchip{position:absolute;background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 14px;
  box-shadow:0 18px 44px var(--shadow-strong);}
.vchip .t{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:var(--accent);transition:color .35s ease;}
.vchip .nm{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:18px;margin-top:1px;color:var(--ink);}
.vchip .mt{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:2px;}
.vchip .star{color:var(--accent);transition:color .35s ease;}

/* ---------- sections ---------- */
section.block{padding:78px 0;}
.sec-head{max-width:680px;margin-bottom:36px;}
.sec-eyebrow{margin-bottom:14px;}
.sec-title{font-size:clamp(36px,4.6vw,62px);}
.sec-sub{color:var(--muted);font-size:17px;line-height:1.5;margin-top:13px;max-width:560px;}

/* ---------- featured venues ---------- */
.venues{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.venue{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--panel);
  transition:transform .18s ease,border-color .2s ease,box-shadow .2s ease;cursor:pointer;}
.venue:hover{transform:translateY(-4px);border-color:var(--accent-line);box-shadow:0 18px 40px var(--shadow);}
.venue .ph{position:relative;height:158px;background:linear-gradient(135deg,#dfe2e8,#eceef1);overflow:hidden;}
.venue .ph .mini{position:absolute;inset:0;}
.venue .badge{position:absolute;top:13px;left:13px;display:inline-flex;align-items:center;gap:6px;background:var(--accent);
  color:var(--accent-ink);font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:12px;padding:6px 11px;border-radius:8px;transition:background .35s ease,color .35s ease;}
.venue .dist{position:absolute;bottom:13px;right:13px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  font-family:var(--mono);font-weight:700;font-size:13px;padding:6px 11px;border-radius:8px;border:1px solid var(--line);color:var(--ink);}
.venue .body{padding:17px 19px 19px;}
.venue .body h4{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:21px;margin:0 0 4px;color:var(--ink);}
.venue .body .meta{color:var(--muted);font-size:14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.venue .body .meta .star{color:var(--accent);font-weight:700;transition:color .35s ease;}
.venue .tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px;}
.venue .tags span{font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600;
  color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 8px;}
/* verified-for-own-country disclaimer (NL kroegen → Oranje, BE → Rode Duivels) */
.verified-note{font-size:13px;color:var(--muted-2);margin:14px 0 0;line-height:1.5;}
.sched-focus{margin-bottom:34px;}
.sched-focus .focus-h{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:19px;color:var(--accent);margin:0 0 14px;}

.venue[data-url]{cursor:pointer;}
.venue[data-url]:hover{transform:translateY(-4px);border-color:var(--accent-line);box-shadow:0 18px 40px var(--shadow);}
.venue .vlogo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;
  border-radius:16px;object-fit:cover;background:#fff;border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(0,0,0,.18);}
.venue .venue-share{position:absolute;top:11px;right:11px;}
.venue .venue-share .sharebtn{background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border:1px solid var(--line);
  border-radius:9px;padding:7px;cursor:pointer;color:var(--ink);display:inline-flex;}
.venue .venue-share .sharebtn:hover{color:var(--accent);border-color:var(--accent);}
.venue .dist{position:absolute;bottom:13px;right:13px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  border-radius:8px;padding:4px 9px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);}
.venue .addr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;display:inline-block;vertical-align:bottom;}

/* ---------- live map section ---------- */
.map-shell{border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 26px 70px var(--shadow);background:var(--panel);}
.map-shell .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:15px 18px;
  border-bottom:1px solid var(--line-soft);background:var(--panel-2);}
.map-shell .bar .chips{display:flex;gap:8px;flex-wrap:wrap;}
.mchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:transparent;cursor:default;}
.mchip .d{width:7px;height:7px;border-radius:50%;background:var(--accent);transition:background .35s ease;}
.mchip.act{cursor:pointer;}
.mchip.live-toggle[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.map-stage{position:relative;width:100%;height:clamp(460px,62vh,600px);}
.map-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#e6e8ec;}
.map-stage.live .map-mock{display:none;}
.map-stage:not(.live) iframe{display:none;}
.map-mock{position:absolute;inset:0;overflow:hidden;}

/* ---------- footer + powered ---------- */
footer{border-top:1px solid var(--line-soft);background:#eceef1;}
footer .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:40px 0 34px;}
.foot-left{max-width:430px;}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:18px;margin-bottom:11px;color:var(--ink);}
.foot-brand .mark{width:30px;height:30px;border-radius:8px;background:var(--accent);display:grid;place-items:center;flex:none;transition:background .35s ease;}
.foot-brand .mark svg{width:18px;height:18px;}
.foot-left p{color:var(--muted);font-size:14px;line-height:1.5;margin:0;}
.foot-nav{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;
  font-size:14px;color:var(--muted);margin-top:18px;}
.foot-nav a:hover{color:var(--accent);}
.powered{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right;}
.powered .lbl{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--muted-2);}
.powered img{height:26px;width:auto;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .venues{grid-template-columns:1fr 1fr;}
  .nav-links a{padding:8px 9px;font-size:13px;}
  .weather .fc{display:none;}
}
@media (max-width:680px){
  .wrap{width:min(1280px,100% - 32px);}
  .nav .wrap{height:58px;gap:10px;}
  .brand{font-size:16px;}
  .nav-links{display:none;}
  .nav-links.open{display:flex;position:absolute;top:58px;left:0;right:0;flex-direction:column;background:#fff;
    border-bottom:1px solid var(--line);padding:8px 24px 14px;gap:2px;}
  .nav-toggle{display:grid !important;}
  section.block{padding:54px 0;}
  .venues{grid-template-columns:1fr;}
  .util .wrap{justify-content:flex-start;}
  footer .wrap{flex-direction:column;align-items:flex-start;}
  .powered{align-items:flex-start;text-align:left;}
}
.nav-toggle{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:transparent;
  cursor:pointer;place-items:center;color:var(--ink);}
.nav-toggle svg{width:20px;height:20px;}