/* hubs/assets/hub.css — gedeelde stijl voor de Uit-aggregator-hubs (Uittafelen/UitSpelen/
   Uitgaan). Vertrekpunt = de bewezen uittocht.com hub-chrome
   (~/projecten/uittocht/hub/assets/hub.css): zelfde premium-redactionele lijn — Fraunces
   (koppen) + Hanken Grotesk (tekst), warm-donker plum-palet, flat i.p.v. neon-gradients.

   Verschil met uittocht: daar is de accentkleur een vast --amber-token (één merk). Hier
   delen drie hubs dit bestand, dus komt de merk-identiteit uit twee CSS-vars die de build
   per hub op :root zet (zie template.html __BRANDCSS__): --seal (donkere lakzegel-kleur —
   identity: dot/kicker/h1-accent/badges/plus-icoon) en --accent (lichtere variant —
   interactie: hover/focus-states). De neutrale ink/muted/line-tokens, de fonts en de
   atmosferische achtergrond-wash blijven ongewijzigd systeem-breed (niet merk-specifiek),
   dus bewust NIET naar --seal/--accent omgezet — dat zou het zachte glow-effect breken
   (die tokens zijn rgba-tints, geen solide hex zoals --seal/--accent). */

/* Task 8b-QA-fix: de atmosferische achtergrond stond op body met `fixed`-attachment — een
   bekende mobiele WebKit-bug laat de achtergrond dan na ~1 viewporthoogte niet meer meeschalen
   met de paginalengte, waardoor de rest van de pagina terugvalt op het browser-default WIT
   terwijl --ink (#F7ECF2, bijna wit) voor een donkere achtergrond ontworpen is — onleesbaar.
   Fix: de gradient staat nu op html (dekt altijd de volle documentlengte, geen viewport-cap) met
   gewone (scroll-)attachment i.p.v. fixed; body erft alleen nog kleur/typografie. */
html{
	background:
		radial-gradient(950px 600px at 86% -12%, rgba(228,165,72,.14), transparent 60%),
		radial-gradient(720px 520px at 4% 106%, rgba(255,61,138,.14), transparent 62%),
		linear-gradient(180deg, #160a12, #241019);
	background-repeat:no-repeat;
	min-height:100%;
}
body.uithub-body{
	--bg:#160a12; --bg2:#241019; --surface:rgba(255,255,255,.045); --ink:#F7ECF2; --muted:#AE97A1;
	--line:rgba(247,236,242,.14);
	--amber-soft:rgba(228,165,72,.14);
	--neon-soft:rgba(255,61,138,.14);
	--font-display:'Fraunces',Georgia,serif; --font-text:'Hanken Grotesk',system-ui,-apple-system,Helvetica,Arial,sans-serif;
	--fs-caption:12px; --fs-label:13px; --fs-body:15px; --fs-lead:18px; --fs-venue:24px; --fs-title:34px;
	--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
	--r-chip:4px; --r-card:10px; --r-full:999px; --r-frame:24px;

	margin:0;
	font-family:var(--font-text);
	font-size:var(--fs-body);
	color:var(--ink);
	background:transparent;
}
body.uithub-body *{box-sizing:border-box}
body.uithub-body h1,body.uithub-body h2,body.uithub-body h3{font-family:var(--font-display)}

/* ---- header ---- */
.hub-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:var(--s5)}
.hub-brand{display:flex;align-items:center;gap:var(--s3);font-weight:700;letter-spacing:.5px;color:var(--ink);text-decoration:none;font-size:var(--fs-venue);font-family:var(--font-display)}
.hub-brand-dot{width:10px;height:10px;border-radius:var(--r-full);background:var(--seal)}
.hub-nav{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.hub-nav-label{font-size:var(--fs-label);color:var(--muted)}

/* ---- stad-keuzemenu (stadspagina's → andere steden; details/summary, geen JS) ---- */
.hub-stadmenu{position:relative}
.hub-stadmenu summary{
	cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
	min-height:44px;
	font-size:var(--fs-label);font-weight:700;color:var(--ink);
	background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);
	padding:7px 14px;transition:.15s;user-select:none;
}
.hub-stadmenu summary::-webkit-details-marker{display:none}
.hub-stadmenu summary::marker{content:""}
.hub-stadmenu summary:hover,.hub-stadmenu summary:focus-visible{border-color:var(--accent);color:var(--accent)}
.hub-stadmenu[open] summary{border-color:var(--accent);color:var(--accent)}
.hub-stadmenu-grid{
	position:absolute;top:calc(100% + var(--s2));right:0;z-index:20;
	display:grid;grid-template-columns:repeat(2,minmax(112px,1fr));gap:var(--s1);
	width:min(400px,calc(100vw - 2*var(--s5)));max-height:60vh;overflow-y:auto;
	padding:var(--s3);background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-card);
	box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.hub-stadmenu-item{display:flex;align-items:center;min-height:44px;padding:6px 10px;border-radius:var(--r-chip);font-size:var(--fs-label);text-decoration:none;color:var(--ink)}
a.hub-stadmenu-item:hover,a.hub-stadmenu-item:focus-visible{background:var(--amber-soft);color:var(--accent)}
.hub-stadmenu-item.is-current{color:var(--muted);font-weight:700}
@media(min-width:600px){ .hub-stadmenu-grid{grid-template-columns:repeat(3,minmax(104px,1fr))} }

.hub-main{max-width:1180px;margin:0 auto;padding:0 var(--s5) var(--s7)}

/* ---- kiezer (homepage + stadkop) ---- */
.hub-kiezer{padding:var(--s6) 0 var(--s7);text-align:center}
.hub-kiezer-kicker{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-caption);letter-spacing:3px;text-transform:uppercase;color:var(--seal);font-weight:700;margin-bottom:var(--s4)}
.hub-kiezer-kicker::before{content:"";width:26px;height:2px;background:var(--seal)}
.hub-kiezer-h1{font-family:var(--font-display);font-size:clamp(32px,6vw,56px);line-height:1.05;font-weight:700;color:var(--ink);margin:0 0 var(--s4)}
.hub-kiezer-h1 span{color:var(--seal)}
.hub-kiezer-lead{color:var(--muted);font-size:var(--fs-lead);line-height:1.6;max-width:640px;margin:0 auto var(--s6)}

.hub-stad-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);text-align:left}
.hub-stad{
	display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
	border:1px solid var(--line);background:var(--surface);border-radius:var(--r-card);
	padding:var(--s4);color:var(--ink);text-decoration:none;font-weight:700;font-size:var(--fs-body);
	transition:.15s;
}
.hub-stad:hover,.hub-stad:focus-visible{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

@media(min-width:600px){ .hub-stad-grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:900px){ .hub-stad-grid{grid-template-columns:repeat(4,1fr)} }

/* ---- FAQ (homepage + stadspagina; .uithub-faq i.p.v. uittocht's .uittocht-faq) ---- */
.hub-faq{margin-top:var(--s7);border-top:1px solid var(--line);padding-top:var(--s6);text-align:left}
.hub-faq h2{font-size:28px;font-weight:700;color:var(--ink);margin:0 0 var(--s4)}
.hub-faq .uithub-faq{max-width:760px;margin:0 auto}
.hub-faq .uithub-faq details{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);margin-bottom:var(--s3);overflow:hidden}
.hub-faq .uithub-faq summary{cursor:pointer;padding:var(--s4);font-weight:700;font-size:var(--fs-body);color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.hub-faq .uithub-faq summary::-webkit-details-marker{display:none}
.hub-faq .uithub-faq summary::after{content:"+";color:var(--seal);font-size:22px;font-weight:400;line-height:1}
.hub-faq .uithub-faq details[open] summary::after{content:"\2013"}
.hub-faq .uithub-faq details[open] summary{border-bottom:1px solid var(--line)}
.hub-faq .uithub-faq details p{color:var(--muted);font-size:var(--fs-label);line-height:1.55;margin:0;padding:var(--s4)}

/* ---- terugblok (stadspagina → stadssite-detailpagina) ---- */
.hub-terugblok{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.hub-terugblok p{margin:0 0 var(--s4);color:var(--muted);font-size:var(--fs-label)}
.hub-terugblok p a{color:var(--ink);font-weight:700;text-decoration:none}
.hub-terugblok p a:hover,.hub-terugblok p a:focus-visible{color:var(--accent)}

/* ---- footer ---- */
.hub-footer{max-width:1180px;margin:0 auto;padding:var(--s5);text-align:center;color:var(--muted);font-size:var(--fs-caption)}

@media(max-width:480px){
	.hub-header{padding:var(--s4)}
	.hub-stad-grid{grid-template-columns:1fr}
}

/* =========================================================================
   Fase 3 — nieuwe blokken (kaart, stad-zoekfilter, uitgelicht-lijst, kaart-popup).
   Merk-kleuren komen per hub uit de build via :root{--seal:…;--accent:…} (template
   __BRANDCSS__). .hub-brand-dot/.hub-kiezer-h1 span staan al hierboven in het
   gekopieerde blok — hier niet dubbel gedeclareerd (review-fix 2026-08-11).
   .hub-kaart-noot/.hub-lijst-noot/.hub-kaart-fout zitten NIET op een wit kaartje maar
   direct op de donkere .uithub-body-achtergrond → var(--muted)/#e88 i.p.v. de
   oorspronkelijke #6b6257/#a33 (die haalden daar maar ~3,0:1 en ~2,8:1 contrast,
   onder de WCAG-AA-norm van 4,5:1; zie fix-rapport in task-5-report.md voor de
   berekende ratio's — nu resp. ~6,7:1 en ~7,3:1). */
.hub-kaartblok{max-width:1100px;margin:0 auto;padding:0 20px}
#hub-kaart{height:min(72vh,640px);border-radius:14px;border:1px solid rgba(0,0,0,.08)}
.hub-kaart-noot,.hub-lijst-noot{font-size:13.5px;color:var(--muted);margin:10px 2px 34px}
.hub-kaart-fout{color:#e88;font-weight:600;margin:10px 2px}
.hub-stad-zoek{display:block;width:min(420px,100%);margin:0 0 18px;padding:10px 14px;border:1px solid rgba(0,0,0,.15);border-radius:10px;font:inherit}
.hub-lijst{max-width:1100px;margin:0 auto;padding:0 20px}
.hub-lijst-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
/* Task 8b-QA-fix: .hub-kaartje/.hub-popup zitten op een WITTE kaart/Leaflet-popup, binnen
   body.uithub-body waar --ink een bijna-wit lichttoken is (voor de donkere pagina-achtergrond
   elders). Zonder eigen tekstkleur erven kaartje (`color:inherit`) en popup-<strong> die lichte
   --ink op wit → ~1,15:1 contrast, onleesbaar. Fix: expliciete donkere kleur (#241019, dezelfde
   ink-tint als het lichte-kaartje-blok verderop in dit bestand) op beide containers; de badges
   gebruiken --seal-op-wit i.p.v. --seal (zie hieronder, finding 3) en de meta/type-regel houdt
   zijn bestaande grijs (#6b6257, voldoet al ruim aan 4,5:1 op wit). */
.hub-kaartje{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid rgba(0,0,0,.08);border-radius:12px;text-decoration:none;color:#241019;background:#fff}
.hub-kaartje:hover{border-color:var(--accent)}
.hub-kaartje img{width:100%;height:140px;object-fit:cover;border-radius:8px;background:#eee}
.hub-kaartje b{font-size:15.5px}
.hub-kaartje .hub-kaartje-meta{font-size:13px;color:#6b6257}
/* Badge op wit: --seal zelf (bv. #1E8E9E/#3E9B52) haalt maar ~3,5-3,9:1 op wit, onder de
   WCAG-AA-norm van 4,5:1 voor normale tekst. --seal-op-wit is een per-hub-berekende donkerdere
   variant die dat wél haalt (zie hubs/configs/*.mjs voor de exacte ratio's per hub); --seal blijft
   ongewijzigd voor gebruik op de donkere pagina-achtergrond (dot/kicker/h1-accent/plus-icoon),
   waar het bestaande contrast al voldoet. */
.hub-kaartje .hub-kaartje-badge{color:var(--seal-op-wit,var(--seal));font-weight:700;font-size:13px}
.hub-popup{display:flex;flex-direction:column;gap:4px;min-width:200px;color:#241019}
.hub-popup img{border-radius:6px;margin-bottom:6px;display:block;object-fit:cover}
.hub-popup-badge{color:var(--seal-op-wit,var(--seal));font-weight:700;font-size:12.5px}
.hub-popup-type{font-size:12px;color:#6b6257}

/* .hub-stad-zoek en .hub-kaartje/.hub-popup zijn hierboven verbatim uit de brief
   overgenomen — die zijn voor een LICHT kaartje op de donkere hub-chrome (bewust:
   kaartjes/popups tonen foto's en werken beter op wit dan op de plum-achtergrond).
   Zonder eigen achtergrond/tekstkleur zou het zoekveld standaard wit worden met
   geërfde --ink (lichte) tekstkleur erin — onleesbaar. Expliciet gefixt, niet in de
   brief-code zelf gewijzigd: */
.hub-stad-zoek{background:#fff;color:#241019}
.hub-stad-zoek::placeholder{color:#8a8074}

/* =========================================================================
   Task 8b — mobiel-audit-fixes (390x844, dpr3; zie task-8b-report.md).
   1) Leaflet-zoomknoppen: Leaflet zet zelf de klasse .leaflet-touch op de kaart-container
      zodra het touch detecteert (desktop blijft dus ongemoeid) — de default 30x30px-knoppen
      zijn op mobiel onder de 44px-tapdoel-richtlijn.
   2) Kaart-hoogte: op kleine schermen kaapte 72vh (~608px op een 844px-scherm) bijna de hele
      eerste viewport voordat je bij "Kies je stad"/de lijst kwam; 60vh laat meer van de pagina
      zien zonder de kaart onbruikbaar klein te maken. Leaflet-touch-drag op de kaart blijft
      gewoon werken (standaardgedrag), scrollWheelZoom staat al uit (kaart.js) dus paginascroll
      blijft mogelijk zodra je van de kaart af scrollt. */
.leaflet-touch .leaflet-bar a{width:44px;height:44px;line-height:44px}

@media(max-width:680px){
	#hub-kaart{height:60vh}
}

/* =========================================================================
   Task 8b — Design-QA-fix 4: prefers-reduced-motion.
   .hub-stadmenu summary (transition:.15s) en .hub-stad (transition:.15s + transform:translateY()
   op hover/focus) zijn de twee elementen met een geanimeerde hover/focus-interactie. Voor
   bezoekers die reduced motion aanvragen (macOS/iOS "Verminder beweging", Windows "Animaties
   weergeven" uit) schakelen we de transitie/transform uit — de eindstaat (kleur/border/positie)
   verandert nog gewoon bij hover/focus, alleen niet geanimeerd. */
@media(prefers-reduced-motion:reduce){
	.hub-stadmenu summary,.hub-stad{transition:none}
	.hub-stad:hover,.hub-stad:focus-visible{transform:none}
}