/* ============================================================
   UIT GRONINGEN — "BOUTIQUE ZINE" CONCEPT
   Fixed system: cream/forest/gold palette, Archivo + Archivo Narrow +
   Cormorant Garamond italic + DM Sans buttons (see project brief).
   All color pairings below were checked against WCAG AA:
   body copy uses #46524b/#5a5345 (>=6.6:1 on cream/white), never the
   muted tokens #9a917e/#8a8170 as text (those fail ~2.7:1 on cream —
   used only for hairline borders/decoration here). Gold (#E0A53A) is
   only ever a fill (with ink text), a decorative rule/stamp outline,
   or large bold display text on the dark green surfaces (verified
   6.5:1+) — never small text on cream/white.
   ============================================================ */

/* :root city-tokens staan in tokens-city.css (per stad het enige wisselbestand) */

/* Phosphor Duotone icon font — @phosphor-icons/web ships a two-weight icon
   font (:before = 20%-opacity tint, :after = full-opacity glyph), not a web
   component, so colour comes from the normal CSS `color` property, not a
   custom prop. Identical across every uit...-site per the implementation
   plan; only --color-primary varies. */
.ph-duotone{ color: var(--color-primary); }
.uit-icon{ display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; flex-shrink:0; }
.uit-icon--xs{ font-size:16px; }
.uit-icon--sm{ font-size:24px; }
.uit-icon--md{ font-size:32px; }
.uit-icon--lg{ font-size:48px; }
.uit-icon--muted{ color: var(--muted-2); }
.uit-icon--white{ color: var(--white); }
.uit-icon--dark{ color: var(--ink); }
.uit-icon--gold{ color: var(--gold); }
.uit-icon--ondark{ color: var(--on-dark); }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--body);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;color:var(--ink);font-family:'Archivo',sans-serif;}
p{margin:0;}
.container{max-width:var(--container);margin:0 auto;padding:0 32px;}
section{position:relative;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ---------- pull-type: oversized italic Cormorant, reused as a
   graphic/divider element across many sections, not just the hero ---------- */
.pull-type{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-weight:600;
  color:var(--ink);
  line-height:0.98;
  margin:0;
}
.pull-type--xl{ font-size:clamp(2.6rem,7vw,5.4rem); }
.pull-type--lg{ font-size:clamp(2rem,5vw,3.6rem); }
.pull-type--gold{ color:var(--gold); }
.pull-type--onlight{ color:var(--on-dark); }
.pull-type--rule{
  display:inline-block;
  border-bottom:4px solid var(--gold);
  padding-bottom:.15em;
}

/* ---------- crop / registration marks: recurring print motif ----------
   Real print crop marks sit clear of the trim edge, never straddling it.
   The mark is a fixed-size L bracket standing off the corner by a fixed
   gap, so it reads the same on a small card and a full-width photo. */
.crop{position:relative;}
.crop::before,.crop::after{
  content:"";
  position:absolute;
  width:12px;height:12px;
  border-top:1.5px solid var(--green-900);
  border-left:1.5px solid var(--green-900);
  opacity:.6;
}
.crop::before{ top:-17px; left:-17px; }
.crop::after{ bottom:-17px; right:-17px; transform:rotate(180deg); }
.crop--gold::before,.crop--gold::after{ border-color:var(--gold); }
.crop--light::before,.crop--light::after{ border-color:var(--on-dark); }

/* ---------- buttons: ONE system, DM Sans 500 ---------- */
.btn{
  font-family:'DM Sans',system-ui,sans-serif;
  font-weight:500;
  font-size:15px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  border-radius:40px;
  border:1.5px solid transparent;
  outline:2px solid transparent;
  outline-offset:3px;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, outline-color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--gold); color:var(--ink); }
.btn-primary:hover{ background:var(--gold-hover); outline-color:var(--gold); }
.btn-secondary{ background:var(--green-700); color:var(--on-primary); }
.btn-secondary:hover{ background:var(--green-700-hover); outline-color:var(--primary-text); }
.btn-ghost{ background:transparent; color:var(--primary-text); border-color:var(--green-700); }
.btn-ghost:hover{ background:var(--green-900); border-color:var(--green-900); color:var(--on-dark); outline-color:rgba(0,0,0,.18); }
.btn-ghost--onlight{ color:var(--on-dark); border-color:rgba(253,249,239,.6); }
.btn-ghost--onlight:hover{ background:var(--on-dark); color:var(--green-900); border-color:var(--on-dark); outline-color:rgba(255,255,255,.35); }
.btn-pill-nav{ border-radius:800px; }
.btn-sm{ padding:9px 18px; font-size:13.5px; }

/* ---------- ticket-stub / rubber-stamp badge motif ----------
   A rounded rectangle with a true half-moon bite cut into the left and
   right edges. CSS alone can't do this cleanly: `border` only ever draws
   along a box's real (straight/rounded) edges, and `clip-path` just hides
   pixels — neither actually paints a stroke that follows a cut edge, so
   every pure-CSS attempt (border+clip-path, or a layered background trick)
   left a seam. The shape is instead a single SVG <path> per stamp,
   inserted by shapeStamps() below, with a real stroke that follows the
   bite exactly. shapeStamps() sizes it in real pixels per instance (each
   label is a different width) so the bites stay circular, never stretched
   into ellipses, and reads --stamp-fill/--stamp-border/--punch off the
   element so the gold/dark colour variants still work. It runs once after
   layout and again on resize (label widths don't change, but this stays
   correct if that ever changes). */
.stamp{
  --stamp-fill: var(--cream-alt);
  --stamp-border: var(--green-900);
  --punch: var(--cream);
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:8px 15px 9px;
  font-family:'DM Sans',sans-serif;
  font-weight:500;
  font-size:12px;
  line-height:1.2;
  letter-spacing:.02em;
  color:var(--ink);
  white-space:nowrap;
}
.stamp-shape{ position:absolute; inset:0; z-index:-1; overflow:visible; pointer-events:none; }
.stamp--gold{ color:var(--ink); font-weight:700; }
.stamp--gold, .stamp--gold .stamp-shape{ --stamp-fill:var(--gold); --stamp-border:var(--ink); }
.stamp--dark{ color:var(--on-dark); }
.stamp--dark, .stamp--dark .stamp-shape{ --stamp-fill:var(--green-900); --stamp-border:var(--on-dark); }
.stamp--oncard{ --punch:var(--white); }
.stamp--tilt-l{ transform:rotate(-3deg); }
.stamp--tilt-r{ transform:rotate(2.5deg); }

/* ================= HEADER ================= */
/* Header identity: deep-green bar, not the generic white nav every network
   site currently defaults to. Only --green-900/--gold below are city-specific;
   swap those two tokens per city and the whole header carries over. */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--cream);
  border-bottom:1px solid var(--cream-alt-border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 32px; gap:20px; }
.logo{ display:flex; align-items:baseline; gap:5px; font-weight:800; font-size:20px; color:var(--on-dark); }
.logo em{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; font-size:27px; color:var(--gold); }
.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav a{ font-size:14.5px; font-weight:600; color:var(--ink); padding:9px 12px; border-radius:9px; display:inline-flex; align-items:center; gap:5px; }
.main-nav a:hover{ color:var(--ink); background:var(--cream-alt); }
.main-nav a.is-active{ color:var(--primary-text); background:color-mix(in srgb, var(--color-primary) 10%, transparent); font-weight:700; }
.nav-group{ position:relative; }
.nav-group>a .uit-icon{ transition:transform .15s ease; }
.nav-group:hover>a .uit-icon,.nav-group:focus-within>a .uit-icon{ transform:rotate(180deg); }
.nav-dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:210px;
  background:var(--white); border:1px solid var(--card-border); border-radius:14px;
  box-shadow:0 16px 32px rgba(12,38,22,.22); padding:8px;
  display:flex; flex-direction:column; gap:1px;
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.nav-group:hover .nav-dropdown,.nav-group:focus-within .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown a{ color:var(--ink); font-size:14px; font-weight:500; padding:10px 12px; border-radius:9px; white-space:nowrap; }
.nav-dropdown a:hover{ background:var(--cream-alt); color:var(--green-900); }
.nav-lang{ display:flex; align-items:center; gap:2px; padding:0 6px; border-right:1px solid var(--cream-alt-border); margin-right:8px; }
.nav-lang a{ font-family:'DM Sans',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.05em; color:var(--muted-2); padding:4px 6px; border-radius:6px; }
.nav-lang a.is-active{ color:var(--primary-text); font-weight:700; }
.nav-lang--mobile{ display:none; }
.header-actions{ display:flex; align-items:center; gap:8px; }
.burger{ display:none; background:none; border:1.5px solid rgba(0,0,0,.18); color:var(--ink); border-radius:10px; width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer; }

/* ================= HERO ================= */
.hero{ padding:56px 0 90px; overflow:hidden; }
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:20px;
  align-items:start;
  position:relative;
}
.hero-copy{ position:relative; z-index:3; padding-top:10px; }
.hero-copy .pull-type{ margin-bottom:8px; }
.hero-copy .sub{ max-width:52ch; font-size:17px; color:var(--body); margin-top:18px; }
.hero-media{
  position:relative;
  z-index:1;
}
.hero-media img{
  width:100%; height:340px; object-fit:cover;
  border:1.5px solid var(--green-900);
}
.hero-tile-2{
  position:absolute;
  width:46%;
  right:6%;
  bottom:-56px;
  z-index:2;
  transform:rotate(-4deg);
  box-shadow:0 18px 0 -6px var(--cream), 0 0 0 6px var(--cream);
}
.hero-tile-2 img{ height:200px; border:1.5px solid var(--ink); }
.hero-stamp-float{
  position:absolute;
  top:18px; left:-14px;
  z-index:4;
  transform:rotate(-8deg);
}
.hero-corner-word{
  position:absolute;
  right:0; top:-6px;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:600;
  font-size:15vw;
  line-height:1;
  color:var(--green-900);
  opacity:.06;
  z-index:0;
  pointer-events:none;
  white-space:nowrap;
}

/* search / filter ticket panel */
.search-panel{
  margin-top:38px;
  background:var(--card);
  border:1.5px solid var(--green-900);
  border-radius:18px;
  padding:22px 22px 20px;
  position:relative;
}
.search-panel::before{
  content:"";
  position:absolute; inset:8px;
  border:1px dashed var(--cream-alt-border);
  border-radius:12px;
  pointer-events:none;
}
.search-row{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr auto; gap:0; }
.search-field{
  padding:10px 16px;
  border-right:1.5px dashed var(--card-border);
  display:flex; flex-direction:column; gap:4px;
}
.search-field:last-of-type{ border-right:none; }
.search-field label{
  font-family:'Archivo Narrow',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--body-2);
}
.search-field input,.search-field select{
  border:none; background:none; font-family:'Archivo',sans-serif;
  font-size:15px; font-weight:600; color:var(--ink); padding:2px 0;
  width:100%;
}
.search-field select{ appearance:none; cursor:pointer; }
.search-field input::placeholder{ color:var(--muted-2); font-weight:500; }
.search-go{ display:flex; align-items:center; padding-left:14px; }
.search-go .btn{ padding:15px 22px; }
.quick-pills{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
.quick-pill{
  font-family:'DM Sans',sans-serif; font-weight:500; font-size:13.5px;
  padding:8px 16px; border-radius:800px; border:1.5px solid var(--green-700);
  color:var(--primary-text); background:transparent;
}
.quick-pill:hover{ background:var(--green-700); color:var(--on-primary); }
.quick-pill.is-active{ background:var(--green-700); color:var(--on-primary); }

/* ================= TRUST STRIP ================= */
.trust-strip{ background:var(--green-900); padding:18px 0; }
.trust-list{ display:flex; flex-wrap:wrap; gap:10px 34px; justify-content:center; }
.trust-list li{
  font-size:13.5px; font-weight:600; color:var(--on-dark-2); display:flex; align-items:center; gap:8px;
}

/* ================= WEATHER STRIP + ORIENTATIE-TEASER ================= */
.weather{ background:var(--cream-alt); border-top:1.5px solid var(--cream-alt-border); border-bottom:1.5px solid var(--cream-alt-border); padding:26px 0; }
.weather-inner{ display:grid; grid-template-columns:1.7fr 1fr; gap:26px; align-items:stretch; }
.weather-main{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:space-between; }
.weather-left{ display:flex; align-items:center; gap:18px; }
.weather-icon{ font-size:52px; color:var(--primary-text); flex:none; }
.weather-temp{ font-size:34px; font-weight:800; color:var(--ink); line-height:1; }
.weather-desc{ font-size:14px; color:var(--body-2); font-weight:600; }
.weather-advice{ max-width:44ch; font-size:15px; color:var(--body); }
.weather-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.weather-tab{
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500;
  padding:8px 14px; border-radius:800px; border:1.5px solid var(--cream-alt-border);
  background:var(--input-bg-soft); color:var(--body-2); cursor:pointer;
}
.weather-tab.is-active{ background:var(--green-700); color:var(--on-primary); border-color:var(--green-700); }
.weather-info{
  background:var(--card); border:1.5px solid var(--card-border); border-radius:14px;
  padding:16px 20px; display:flex; flex-direction:column; gap:10px; justify-content:center;
}
.weather-info-top{ display:flex; align-items:center; gap:16px; }
.weather-info-badge{
  flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:10px; background:var(--safety-red); color:var(--white);
  font-family:'Archivo',sans-serif; font-weight:800; font-size:19px; line-height:1;
}
.weather-info-badge span{ font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:9px; letter-spacing:.06em; text-transform:uppercase; margin-top:2px; }
.weather-info-list{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.weather-info-list li{ display:flex; gap:6px; font-size:12.5px; line-height:1.4; flex-wrap:wrap; }
.weather-info-lbl{ color:var(--muted-2); flex:none; }
.weather-info-list li a,.weather-info-list li span:last-child{ color:var(--ink); font-weight:600; }
.weather-info-list li a:hover{ color:var(--primary-text); }
.weather-info-link{ font-size:12.5px; font-weight:700; color:var(--primary-text); display:inline-flex; align-items:center; gap:6px; align-self:flex-start; border-top:1px dashed var(--card-border); padding-top:10px; width:100%; }
.weather-info-link:hover{ color:var(--primary-text-hover); }

/* ================= SECTION HEADS ================= */
.section{ padding:76px 0; }
.section--alt{ background:var(--cream-alt); border-top:1.5px solid var(--cream-alt-border); border-bottom:1.5px solid var(--cream-alt-border); }
.section-head{ max-width:760px; margin-bottom:40px; position:relative; }
.section-head h2{ font-size:clamp(1.9rem,4vw,2.8rem); font-weight:800; line-height:1.1; }
.section-head .pull-type{ display:block; }
.section-head p{ margin-top:16px; font-size:16px; color:var(--body); max-width:62ch; }
.section-tools{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:34px; }

/* filter pill groups (WANNEER / MET WIE) */
.filter-group{ display:flex; flex-direction:column; gap:8px; }
.filter-group-label{ font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--body-2); }
.filter-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.filter-pill{
  font-family:'DM Sans',sans-serif; font-size:13.5px; font-weight:500;
  padding:8px 16px; border-radius:800px; border:1.5px solid var(--green-700);
  color:var(--primary-text); background:transparent; cursor:pointer;
  outline:2px solid transparent; outline-offset:3px;
  transition:background-color .15s ease, color .15s ease, outline-color .15s ease;
}
.filter-pill.is-active{ background:var(--green-700); color:var(--on-primary); }
.filter-pill:hover:not(.is-active){ background:var(--pill-hover-bg); outline-color:rgba(0,0,0,.18); }

/* ================= EVENT COLLAGE GRID ================= */
.event-collage{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px 22px;
}
.event-card{
  background:var(--card);
  border:1.5px solid var(--card-border);
  border-radius:16px;
  overflow:visible;
  padding-bottom:16px;
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.event-card:hover{ transform:translateY(-6px); box-shadow:0 16px 30px rgba(16,48,31,.16); }
.event-card:nth-child(3n+1){ transform:rotate(-1.1deg); }
.event-card:nth-child(3n+2){ transform:rotate(0.8deg); }
.event-card:nth-child(3n+1):hover,.event-card:nth-child(3n+2):hover{ transform:translateY(-6px) rotate(0deg); }
.event-card.span-2{ grid-column:span 2; }
.event-card-media{ position:relative; }
.event-card-media-crop{ border-radius:16px 16px 0 0; overflow:hidden; }
.event-card-media-crop img{ width:100%; height:170px; object-fit:cover; display:block; }
.event-card.span-2 .event-card-media-crop img{ height:230px; }
.event-card-stamp{ position:absolute; top:12px; left:-10px; z-index:2; }
.event-card-body{ padding:16px 18px 0; }
.event-card-body h3{ font-size:17px; font-weight:700; line-height:1.3; margin-bottom:8px; }
.event-card-meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.event-tag{
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.06em;
  padding:4px 11px; border-radius:800px; background:var(--cream-alt); color:var(--body-2); border:1px solid var(--cream-alt-border);
}
.event-card-loc{ font-size:13px; color:var(--body-2); display:flex; align-items:center; gap:6px; }
.picks-cta-row{ margin-top:44px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

/* favorites toggle (hook for existing live-site favorites system) */
.uitfav-btn{
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(253,249,239,.92); border:1.5px solid var(--green-900);
  cursor:pointer; transition:transform .15s ease, background-color .15s ease;
}
.uitfav-btn .uit-icon{ color:var(--green-900); }
.uitfav-btn:hover{ transform:scale(1.08); }
.uitfav-btn[aria-pressed="true"] .uit-icon{ color:var(--fav-active); }
/* day-cards already claim the top-right corner for their category icon
   (.day-card-icon) — move the favorite toggle to the free top-left corner
   instead of stacking on top of it. */
.day-card .uitfav-btn{ left:10px; right:auto; }

/* category chips */
.discover-panel{ background:var(--white); border:1px solid var(--card-border); border-radius:22px; padding:34px 36px; }
.discover-cluster{ padding:18px 0; border-top:1px dashed var(--card-border); }
.discover-cluster:first-child{ border-top:none; padding-top:0; }
.discover-cluster-label{ display:block; font-family:'Archivo Narrow',sans-serif; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:12px; }
.discover-divider{ display:flex; align-items:center; gap:18px; margin:34px 0; }
.discover-divider::before,.discover-divider::after{ content:""; flex:1; height:1px; background:var(--card-border); }
.discover-divider span{ font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-family:'DM Sans',sans-serif; font-weight:500; font-size:14px;
  padding:9px 18px; border-radius:800px; border:1.5px solid var(--green-900);
  color:var(--green-900); background:var(--cream);
  outline:2px solid transparent; outline-offset:3px;
  transition:background-color .15s ease, color .15s ease, outline-color .15s ease;
}
.chip:hover{ background:var(--green-900); color:var(--on-dark); outline-color:rgba(0,0,0,.18); }
.chip.is-active{ background:var(--green-900); color:var(--on-dark); }

/* help mij kiezen */
.quiz-band{
  background:var(--green-900);
  border-radius:20px;
  padding:44px 40px;
  display:grid; grid-template-columns:1.3fr 0.7fr; gap:30px; align-items:center;
  position:relative; overflow:hidden;
}
.quiz-band .pull-type{ font-size:clamp(1.8rem,4vw,2.6rem); }
.quiz-copy p{ color:var(--on-dark-3); margin-top:14px; font-size:15.5px; max-width:44ch; }
.quiz-visual{ display:flex; justify-content:center; }
.quiz-icon-wrap{
  width:150px; height:150px; border-radius:50%;
  border:2px dashed var(--gold);
  display:flex; align-items:center; justify-content:center;
}

/* uittip van de week */
.uittip{ position:relative; }
.uittip-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:0; align-items:center; }
.uittip-media{ position:relative; }
.uittip-media img{ width:100%; height:380px; object-fit:cover; border:1.5px solid var(--green-900); }
.uittip-copy{ background:var(--card); border:1.5px solid var(--green-900); padding:44px 46px; margin-left:-70px; position:relative; z-index:2; }
.uittip-copy .stamp{ margin-bottom:16px; }
.uittip-copy .pull-type{ font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:16px; }
.uittip-copy p{ font-size:16px; color:var(--body); max-width:56ch; }
.uittip-copy .credit{ margin-top:18px; font-size:13px; color:var(--body-2); font-style:italic; }
.uittip-copy .btn{ margin-top:22px; }

/* gidsen van uit — asymmetric offset tiles */
.guides-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
.guide-tile{
  position:relative;
  border:1.5px solid var(--green-900);
  border-radius:16px;
  overflow:hidden;
  min-height:280px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.guide-tile:nth-child(2){ margin-top:34px; }
.guide-tile:nth-child(4){ margin-top:-18px; }
.guide-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.guide-tile::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(16,48,31,0) 30%,rgba(12,38,22,.92) 100%);
}
.guide-tile-body{ position:relative; z-index:2; padding:22px 18px; }
.guide-tile-body h3{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; font-size:24px; color:var(--on-dark); }
.guide-tile-body p{ margin-top:8px; font-size:13.5px; color:var(--on-dark-2); line-height:1.5; }

/* overdag uitgaan */
.daynight-toggle{ display:inline-flex; background:var(--cream-alt); border:1px solid var(--card-border); border-radius:800px; padding:4px; gap:2px; }
.daynight-btn{ font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; padding:9px 20px; border-radius:800px; background:transparent; color:var(--body-2); cursor:pointer; border:none; outline:2px solid transparent; outline-offset:3px; transition:background-color .15s ease,color .15s ease,outline-color .15s ease; }
.daynight-btn:hover{ outline-color:rgba(0,0,0,.18); }
.daynight-btn.is-active{ background:var(--green-900); color:var(--on-dark); }
.daynight-intro{ margin:22px 0 26px; font-size:15.5px; color:var(--body); max-width:62ch; }
.daynight-panel[hidden]{ display:none; }

.day-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.day-card{ background:var(--card); border:1.5px solid var(--card-border); border-radius:16px; overflow:hidden; position:relative; }
.day-card .event-card-media-crop img{ height:96px; }
.day-card-icon{ position:absolute; top:10px; right:10px; z-index:2; width:30px; height:30px; border-radius:50%; background:var(--white); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(12,38,22,.18); }
.day-card .stamp{ position:absolute; top:82px; left:16px; z-index:2; }
.day-card-body{ padding:24px 18px 20px; }
.day-card .name{ font-size:20px; font-weight:800; color:var(--ink); }
.day-card .rating{ margin-top:8px; display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--body-2); }
.day-card-blurb{ margin-top:8px; font-size:12.5px; line-height:1.5; color:var(--body-2); }

/* kids block */
.kids-band{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
}
.kids-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:26px; }
.kids-stat{ background:var(--card); border:1.5px solid var(--card-border); border-radius:14px; padding:16px 14px; text-align:center; }
.kids-stat .num{ font-size:26px; font-weight:800; color:var(--primary-text); }
.kids-stat .lbl{ font-size:12.5px; color:var(--body-2); margin-top:4px; }
.kids-media{ position:relative; }
.kids-media img{ width:100%; height:320px; object-fit:cover; border:1.5px solid var(--green-900); transform:rotate(1.5deg); }

/* uit eten */
.eten-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.eten-card{ background:var(--card); border:1.5px solid var(--card-border); border-radius:16px; }
.eten-card-media{ position:relative; }
.eten-card-media-crop{ border-radius:16px 16px 0 0; overflow:hidden; }
.eten-card-media-crop img{ width:100%; height:150px; object-fit:cover; display:block; }
.eten-card-media .stamp{ position:absolute; bottom:-14px; right:14px; }
.eten-card-body{ padding:22px 18px 18px; }
.eten-card-body h3{ font-size:18px; font-weight:800; }
.eten-meta-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.eten-card-body .rating{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--body-2); }
.eten-card-body .loc{ font-size:13px; color:var(--body-2); margin-top:8px; display:flex; align-items:center; gap:6px; }

/* ad slot */
.ad-slot{
  border:1.5px dashed var(--gold);
  border-radius:18px;
  background:var(--cream-alt);
  padding:32px;
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:26px; align-items:center;
}
.ad-slot img{ width:100%; height:180px; object-fit:cover; border-radius:12px; border:1.5px solid var(--green-900); }
.ad-label{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); background:var(--gold); border-radius:800px; padding:4px 12px; margin-bottom:12px;
}
.ad-copy h3{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; font-size:28px; }
.ad-copy p{ margin-top:10px; font-size:15px; color:var(--body); max-width:52ch; }
.ad-copy .btn{ margin-top:18px; }

/* newsletter */
.newsletter-band{
  background:var(--green-900); border-radius:20px; padding:48px 46px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:30px; align-items:center;
}
.newsletter-copy p{ color:var(--on-dark-3); margin-top:12px; font-size:15px; max-width:46ch; }
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-form input{
  flex:1; min-width:220px; padding:14px 18px; border-radius:800px; border:1.5px solid rgba(253,249,239,.35);
  background:rgba(253,249,239,.08); color:var(--on-dark); font-family:'Archivo',sans-serif; font-size:15px;
}
.newsletter-form input::placeholder{ color:var(--input-placeholder-on-dark); }
.social-row{ margin-top:20px; display:flex; gap:16px; }
.social-row a{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--on-dark-2); }

/* closing cta */
.closing-cta{
  text-align:center; padding:70px 0; position:relative;
}
.closing-cta .pull-type{ font-size:clamp(2.4rem,6vw,4.4rem); }
.closing-cta p{ max-width:56ch; margin:22px auto 0; font-size:16px; color:var(--body); }
.closing-cta .btn{ margin-top:28px; }

/* faq */
.faq-list{ display:flex; flex-direction:column; gap:14px; max-width:800px; }
.faq-item{ background:var(--card); border:1.5px solid var(--card-border); border-radius:14px; padding:18px 22px; }
.faq-item summary{ font-weight:700; font-size:16px; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .uit-icon{ transition:transform .2s ease; }
.faq-item[open] summary .uit-icon{ transform:rotate(45deg); }
.faq-item p{ margin-top:12px; font-size:15px; color:var(--body); max-width:70ch; }
.faq-foot{ margin-top:26px; }

/* seo paragraph */
.seo-block{ max-width:820px; }
.seo-block h2{ font-size:1.5rem; }
.seo-block p{ margin-top:14px; font-size:15.5px; color:var(--body); line-height:1.7; }
.seo-block .btn{ margin-top:18px; }

/* footer */
.site-footer{ background:var(--green-950); color:var(--on-dark-3); padding:64px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:36px; padding-bottom:44px; border-bottom:1px solid rgba(253,249,239,.12); }
.footer-brand .logo em{ color:var(--gold); }
.footer-brand .logo{ color:var(--on-dark); }
.footer-brand p{ margin-top:14px; font-size:14px; color:var(--on-dark-4); max-width:32ch; }
.footer-social{ margin-top:18px; display:flex; align-items:center; gap:12px; }
.footer-social a{ display:flex; }
.footer-social span{ color:rgba(253,249,239,.3); font-size:13px; }
.footer-col h4,.footer-news h4{ font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-2); margin-bottom:14px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:14.5px; color:var(--on-dark-4); }
.footer-col a:hover{ color:var(--on-dark); }
.footer-news p{ font-size:14px; line-height:1.55; color:var(--on-dark-4); margin-bottom:14px; max-width:30ch; }
.footer-news-form{ display:flex; gap:8px; }
.footer-news-form input{
  flex:1; min-width:0; padding:11px 14px; border-radius:10px; border:1.5px solid rgba(253,249,239,.25);
  background:rgba(253,249,239,.06); color:var(--on-dark); font-family:'Archivo',sans-serif; font-size:13.5px;
}
.footer-news-form input::placeholder{ color:var(--input-placeholder-on-dark); }
.footer-news-form .btn{ padding:11px 16px; border-radius:10px; font-size:13.5px; white-space:nowrap; }
.footer-cats{ padding:28px 0; display:flex; flex-wrap:wrap; gap:10px 22px; border-bottom:1px solid rgba(253,249,239,.12); }
.footer-cats a{ font-size:13.5px; color:var(--on-dark-4); }
.footer-cats a:hover{ color:var(--gold); }
.footer-credit{ border-bottom:1px solid rgba(253,249,239,.12); padding:22px 0; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.footer-credit-logo{
  background:var(--on-dark); color:var(--green-950); border-radius:12px; padding:9px 16px;
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  display:flex; align-items:center; flex:none;
}
.footer-credit-text{ font-size:13.5px; color:var(--on-dark-4); line-height:1.6; }
.footer-credit-title{ font-weight:700; color:var(--on-dark); margin-bottom:2px; }
.footer-credit-meta{ display:flex; gap:8px 14px; flex-wrap:wrap; align-items:center; }
.footer-credit-meta a{ color:var(--on-dark-3); }
.footer-credit-meta a:hover{ color:var(--gold); }
.footer-credit-meta .dot{ color:rgba(253,249,239,.3); }
.footer-bottom{ padding:22px 0 30px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom .slogan{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; font-size:15px; color:var(--gold); }
.footer-bottom .copy{ font-size:13px; color:var(--on-dark-5); }

/* ================= RESPONSIVE ================= */
@media (max-width:1080px){
  .event-collage{ grid-template-columns:repeat(2,1fr); }
  .event-card.span-2{ grid-column:span 2; }
  .guides-grid{ grid-template-columns:repeat(2,1fr); }
  .guide-tile:nth-child(2),.guide-tile:nth-child(4){ margin-top:0; }
  .day-grid{ grid-template-columns:repeat(2,1fr); }
  .eten-grid{ grid-template-columns:repeat(2,1fr); }
  .kids-stats{ grid-template-columns:repeat(2,1fr); }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ display:none; }
  .uittip-grid{ grid-template-columns:1fr; }
  .uittip-copy{ margin-left:0; margin-top:-40px; margin-right:24px; }
  .quiz-band{ grid-template-columns:1fr; text-align:left; }
  .quiz-visual{ display:none; }
  .kids-band{ grid-template-columns:1fr; }
  .ad-slot{ grid-template-columns:1fr; }
  .newsletter-band{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-credit{ padding:20px 0; }
  .weather-inner{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:860px){
  .main-nav{ display:none; }
  .burger{ display:flex; }
  .search-row{ grid-template-columns:1fr; }
  .search-field{ border-right:none; border-bottom:1.5px dashed var(--card-border); padding:12px 4px; }
  .search-go{ padding-left:4px; padding-top:8px; }
  .search-go .btn{ width:100%; justify-content:center; }
  .header-actions .btn-pill-nav{ display:none; }
  .header-actions .nav-lang{ display:none; }
  .site-header.nav-open .main-nav{
    display:flex; position:absolute; top:100%; left:0; right:0;
    background:var(--cream); flex-direction:column; padding:12px 20px 24px; gap:2px;
    border-bottom:1.5px solid var(--green-900); max-height:calc(100vh - 64px); overflow-y:auto;
  }
  .site-header.nav-open .main-nav a{ color:var(--ink); padding:12px 8px; border-radius:0; border-bottom:1px solid var(--card-border); }
  .site-header.nav-open .main-nav a:hover{ background:var(--cream-alt); }
  .site-header.nav-open .nav-group{ display:flex; flex-direction:column; }
  .site-header.nav-open .nav-group>a .uit-icon{ display:none; }
  .site-header.nav-open .nav-dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; border-radius:0; padding:0 0 0 16px; background:transparent;
  }
  .site-header.nav-open .nav-dropdown a{ border-bottom:1px dashed var(--card-border); color:var(--body-2); font-size:13.5px; }
  .site-header.nav-open .nav-lang--mobile{ display:flex; border:none; margin:14px 0 0; padding:0; gap:10px; }
  .site-header.nav-open .nav-lang--mobile a{ color:var(--muted-2); padding:6px 8px; border-bottom:none; }
  .site-header.nav-open .nav-lang--mobile a.is-active{ color:var(--green-900); }
}
@media (max-width:640px){
  .container{ padding:0 20px; }
  .section{ padding:56px 0; }
  .header-inner{ padding:14px 20px; }
  .hero{ padding:36px 0 60px; }
  .event-collage{ grid-template-columns:1fr; }
  .event-card.span-2{ grid-column:span 1; }
  .guides-grid{ grid-template-columns:1fr; }
  .day-grid{ grid-template-columns:1fr; }
  .eten-grid{ grid-template-columns:1fr; }
  .weather-main{ flex-direction:column; align-items:flex-start; }
  .uittip-copy{ padding:30px 24px; margin-right:0; }
  .quiz-band{ padding:32px 24px; }
  .ad-slot{ padding:22px; }
  .newsletter-band{ padding:32px 24px; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ================= PAGINA-SPECIFIEK: agenda.html ================= */
/* ============================================================
   AGENDA OVERZICHT (agenda.html) — page-specific additions on
   top of the shared "Boutique Zine" system above (unchanged).
   Every new rule below reuses the same tokens (--green-900,
   --gold, --card, --card-border, --body/--body-2, etc.) and the
   shared .btn/.chip/.event-card/.crop/.section component
   language — no new hex values, no second radius or type scale.
   ============================================================ */

/* ---------- compact dark page-header band ----------
   Same tone as the homepage hero (--green-900), simplified: no
   asymmetric photo collage, just the pull-type + one context
   line + the search panel, since here the search IS the page. */
.page-header-band{
  background:var(--green-900);
  padding:48px 0 60px;
}
.page-header-band .context-line{ font-size:16.5px; color:var(--on-dark-3); margin-top:14px; max-width:62ch; }
.page-header-band .search-panel{ margin-top:34px; }

/* ---------- sidebar + results layout ---------- */
.agenda-main{ padding:60px 0 84px; }
.agenda-layout{ display:grid; grid-template-columns:272px 1fr; gap:40px; align-items:start; }

.agenda-sidebar{
  background:var(--card);
  border:1.5px solid var(--card-border);
  border-radius:18px;
  padding:26px 24px 28px;
  position:sticky;
  top:92px;
}
.sidebar-group{ padding:20px 0; border-top:1px dashed var(--card-border); }
.sidebar-group:first-child{ padding-top:0; border-top:none; }
.sidebar-group-label{
  display:block; font-family:'Archivo Narrow',sans-serif; font-weight:800; font-size:11.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--body-2); margin-bottom:14px;
}

/* WANNEER — clickable list, not a dropdown */
.sidebar-when-list{ display:flex; flex-direction:column; gap:2px; }
.sidebar-when-item{
  font-family:'DM Sans',sans-serif; font-size:14.5px; font-weight:500;
  color:var(--body); background:none; border:none; text-align:left; width:100%;
  padding:10px 10px; border-radius:9px; cursor:pointer;
  outline:2px solid transparent; outline-offset:3px;
  transition:background-color .15s ease,color .15s ease,outline-color .15s ease;
}
.sidebar-when-item:hover{ background:var(--cream-alt); outline-color:rgba(0,0,0,.18); }
.sidebar-when-item.is-active{ background:var(--green-900); color:var(--on-dark); font-weight:700; }

/* WAAR — reuses the exact Overdag/'s Avonds segmented-toggle
   component (.daynight-toggle/.daynight-btn), just with a third
   option, so the same "pill switch" reads consistently sitewide. */
.sidebar-group .daynight-toggle{ width:100%; }
.sidebar-group .daynight-btn{ flex:1; text-align:center; padding:9px 8px; font-size:13.5px; }

/* CATEGORIE — checklist grouped into the same 4 clusters as the
   homepage's "Waar heb je zin in?" panel, native checkboxes
   (not chip buttons) since multiple can apply at once here. */
.sidebar-cluster{ margin-bottom:18px; }
.sidebar-cluster:last-child{ margin-bottom:0; }
.sidebar-cluster-label{
  display:block; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--body-2); margin-bottom:10px;
}
.sidebar-check-row{ display:flex; flex-direction:column; gap:10px; }
.sidebar-check{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--body); cursor:pointer; }
.sidebar-check input[type="checkbox"]{ width:17px; height:17px; accent-color:var(--primary-text); cursor:pointer; flex:none; }

.sidebar-reset{
  display:inline-flex; align-items:center; gap:6px; margin-top:22px;
  font-family:'DM Sans',sans-serif; font-size:13.5px; font-weight:600; color:var(--primary-text);
  background:none; border:none; cursor:pointer; padding:5px 3px;
  outline:2px solid transparent; outline-offset:3px; border-radius:6px;
  transition:color .15s ease, outline-color .15s ease;
}
.sidebar-reset:hover{ color:var(--primary-text-hover); outline-color:rgba(0,0,0,.18); text-decoration:underline; }

.filters-toggle-btn{ display:none; width:100%; justify-content:center; margin-bottom:20px; }

/* ---------- results toolbar + grid ---------- */
.results-toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:28px; }
.results-count{ font-size:15.5px; color:var(--body-2); }
.results-count strong{ color:var(--ink); font-weight:800; }
.sort-control{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sort-control-label{ font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--body-2); }
.sort-pills{ display:flex; gap:8px; }

/* results grid: same .event-card component, own column count
   tuned for sitting next to a 272px sidebar rather than the
   homepage's full-width 4-up collage. */
.agenda-results-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 22px; }
@media (max-width:1080px){ .agenda-results-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .agenda-results-grid{ grid-template-columns:1fr; } }

/* ---------- pagination — reuses .chip exactly ---------- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:56px; flex-wrap:wrap; }
.pagination .chip[disabled]{ opacity:.4; cursor:default; pointer-events:none; }

/* ---------- empty state — same card language as everything else ---------- */
.empty-state{
  background:var(--card); border:1.5px solid var(--card-border); border-radius:18px;
  padding:56px 32px; text-align:center; max-width:560px; margin:0 auto;
}
.empty-state p{ font-size:16px; color:var(--body); margin-bottom:22px; }
.empty-state .btn{ margin:0 auto; }

@media (max-width:1080px){
  .agenda-layout{ grid-template-columns:1fr; }
  .agenda-sidebar{ position:static; }
}
@media (max-width:860px){
  .filters-toggle-btn{ display:inline-flex; }
  .agenda-sidebar{ display:none; margin-bottom:28px; }
  .agenda-sidebar.is-open{ display:block; }
}

/* ================= PAGINA-SPECIFIEK: uiteten.html ================= */
/* ============================================================
   PAGE: UIT ETEN OVERZICHT (uiteten.html)
   Additional CSS for this page only — appended after the shared
   system above, nothing above this comment is modified.
   ============================================================ */

/* nav-dropdown active state — subtle, matches the existing
   .nav-dropdown a:hover treatment (same bg/color pairing), just
   persistent instead of hover-only, to mark "Uit eten" as current. */
.nav-dropdown a.is-active{ background:var(--cream-alt); color:var(--green-900); font-weight:700; }
.site-header.nav-open .nav-dropdown a.is-active{ background:transparent; color:var(--green-900); }

/* interior page header band — reuses the dark-green/pull-type/crop
   language from the homepage hero, sized down for a one-line intro
   instead of a full hero collage. */
.page-header{ background:var(--green-900); padding:60px 0 52px; position:relative; overflow:hidden; }
.page-header-corner-word{
  position:absolute; right:0; top:-8px;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600;
  font-size:15vw; line-height:1; color:var(--on-dark); opacity:.05; z-index:0;
  pointer-events:none; white-space:nowrap;
}
.page-header-inner{ position:relative; z-index:1; max-width:640px; }
.page-header-crumb{ font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; color:var(--on-dark-4); margin-bottom:14px; display:inline-flex; align-items:center; gap:6px; }
.page-header-crumb a{ color:var(--on-dark-3); }
.page-header-crumb a:hover{ color:var(--gold); }
.page-header .pull-type{ margin-bottom:14px; }
.page-header p{ font-size:16px; color:var(--on-dark-3); max-width:56ch; }

/* toolbar: filters + sort, reuses .filter-group/.chip/.daynight-toggle */
.eten-toolbar{ background:var(--white); border:1px solid var(--card-border); border-radius:22px; padding:28px 30px; margin-bottom:38px; display:flex; flex-direction:column; gap:24px; }
.eten-toolbar-filters{ display:flex; gap:32px; flex-wrap:wrap; justify-content:space-between; }
.eten-toolbar-groups{ display:flex; gap:32px; flex-wrap:wrap; }
.eten-toolbar-sort{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.eten-open-toggle.chip{ display:inline-flex; align-items:center; gap:8px; }
.eten-open-toggle .dot{ width:8px; height:8px; border-radius:50%; background:var(--muted-2); flex:none; }
.eten-open-toggle.is-active .dot{ background:var(--on-dark); }
.eten-results-count{ font-size:14px; color:var(--body-2); }

/* pagination */
.pagination{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:48px; flex-wrap:wrap; }
.pagination-item{
  min-width:40px; height:40px; padding:0 6px; border-radius:800px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:'DM Sans',sans-serif; font-weight:500; font-size:14px;
  color:var(--primary-text); background:var(--white); border:1.5px solid var(--card-border);
  outline:2px solid transparent; outline-offset:3px; cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, outline-color .15s ease;
}
.pagination-item:hover:not(.is-active){ background:var(--pill-hover-bg); outline-color:rgba(0,0,0,.18); }
.pagination-item.is-active{ background:var(--green-900); border-color:var(--green-900); color:var(--on-dark); cursor:default; }
.pagination-item .uit-icon{ font-size:15px; }
.pagination-ellipsis{ color:var(--muted-2); font-size:14px; padding:0 2px; }

@media (max-width:860px){
  .eten-toolbar-filters{ flex-direction:column; }
  .eten-toolbar-sort{ align-items:flex-start; }
}
@media (max-width:640px){
  .page-header{ padding:44px 0 36px; }
  .eten-toolbar{ padding:22px 20px; }
  .eten-toolbar-groups{ gap:22px; }
}

/* ================= PAGINA-SPECIFIEK: restaurant-detail.html ================= */
/* ============================================================
   RESTAURANT DETAIL PAGE — additions specific to this template.
   Everything below is new (not present in concept-4-zine.html).
   Every value reads an existing var(--...) token from :root above —
   no new hex colors are introduced anywhere in this block.
   ============================================================ */

/* breadcrumb */
.breadcrumb-bar{ background:var(--cream); padding:16px 0; border-bottom:1.5px solid var(--cream-alt-border); }
.breadcrumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; font-weight:500; color:var(--body-2); }
.breadcrumb a{ color:var(--body-2); }
.breadcrumb a:hover{ color:var(--green-900); }
.breadcrumb .sep{ color:var(--muted-2); }
.breadcrumb .current{ color:var(--ink); font-weight:700; }

/* header block: name + type chip / rating / status badge / location */
.rdetail-head{ padding:40px 0 34px; }
.rdetail-meta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:18px; }
.rdetail-meta-row .rating{ display:flex; align-items:center; gap:6px; font-size:15px; font-weight:700; color:var(--body-2); }
.rdetail-meta-row .rating .uit-icon{ font-size:16px; color:var(--gold); }

/* open/closed status pill — no equivalent pattern existed elsewhere to reuse */
.status-badge{ font-family:'DM Sans',sans-serif; font-weight:600; font-size:12.5px; padding:6px 15px; border-radius:800px; display:inline-flex; align-items:center; gap:7px; }
.status-badge::before{ content:""; width:7px; height:7px; border-radius:50%; flex:none; }
.status-badge--open{ background:var(--green-700); color:var(--on-primary); }
.status-badge--open::before{ background:var(--white); }
.status-badge--closed{ background:var(--cream-alt); color:var(--body-2); border:1px solid var(--cream-alt-border); }
.status-badge--closed::before{ background:var(--muted-2); }

/* large hero photo + gallery strip */
.rdetail-hero-media{ position:relative; }
.rdetail-hero-media img{ width:100%; height:460px; object-fit:cover; border:1.5px solid var(--green-900); border-radius:18px; }
.rdetail-hero-stamp{ position:absolute; top:22px; left:-10px; z-index:2; }
.rdetail-gallery{ margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rdetail-gallery img{ width:100%; height:150px; object-fit:cover; border-radius:14px; border:1.5px solid var(--card-border); }

/* two-column body: content + sticky info sidebar */
.rdetail-layout{ display:grid; grid-template-columns:1.6fr 0.9fr; gap:48px; align-items:start; }
.rdetail-content .lede{ font-size:16.5px; color:var(--body); max-width:66ch; }
.rdetail-content h2{ font-size:1.5rem; margin-bottom:16px; }
.rdetail-section + .rdetail-section{ margin-top:38px; }

.rdetail-sidebar{ position:sticky; top:96px; background:var(--card); border:1.5px solid var(--card-border); border-radius:20px; padding:28px 26px; }
.rdetail-sidebar h3{ font-size:15px; font-weight:800; margin-bottom:14px; }
.rdetail-sidebar .divider{ border:none; border-top:1px solid var(--card-border); margin:22px 0; }
.hours-list{ display:flex; flex-direction:column; gap:0; }
.hours-list li{ display:flex; justify-content:space-between; gap:10px; font-size:14px; color:var(--body-2); padding:8px 0; border-bottom:1px dashed var(--card-border); }
.hours-list li:last-child{ border-bottom:none; padding-bottom:0; }
.hours-list li span:first-child{ font-weight:700; color:var(--ink); }
.contact-list{ display:flex; flex-direction:column; gap:14px; }
.contact-item{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--body-2); }
.contact-icon{ width:36px; height:36px; border-radius:50%; background:var(--cream-alt); display:flex; align-items:center; justify-content:center; flex:none; }
.contact-icon .uit-icon{ font-size:16px; color:var(--primary-text); }
.rdetail-sidebar .btn{ width:100%; justify-content:center; margin-top:22px; }

/* related restaurants — own 3-col grid wrapper around the reused .eten-card */
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

@media (max-width:1080px){
  .rdetail-layout{ grid-template-columns:1fr; gap:36px; }
  .rdetail-sidebar{ position:static; }
}
@media (max-width:860px){
  .rdetail-gallery{ grid-template-columns:repeat(2,1fr); }
  .related-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .rdetail-head{ padding:32px 0 26px; }
  .rdetail-hero-media img{ height:280px; }
  .rdetail-gallery{ grid-template-columns:1fr; }
  .related-grid{ grid-template-columns:1fr; }
  .rdetail-sidebar{ padding:24px 20px; }
}

/* ================= PAGINA-SPECIFIEK: faq.html ================= */
/* ============================================================
   FAQ PAGE — additional CSS (new, only used on this page)
   Everything above this line is the shared system, copied wholesale.
   This page reuses .section/.section--alt, .section-head, .pull-type,
   .chip/.chip-row, the .faq-list/.faq-item accordion and .closing-cta
   as-is. The two rules below are the only new additions: spacing for
   the jump-nav pill row, and a scroll offset so the sticky header
   doesn't cover a section's heading when you jump to it via anchor.
   ============================================================ */
.jump-nav{ margin-top:28px; }
#faq-groep-agenda, #faq-groep-praktisch, #faq-groep-over, #faq{ scroll-margin-top:90px; }

/* ================= PAGINA-SPECIFIEK: over.html, adverteren.html ================= */
/* honest "pricing not available yet" placeholder — reuses the dashed-gold
   TBD motif already established by .ad-slot, instead of inventing prices */
.pricing-placeholder{ border:1.5px dashed var(--gold); border-radius:18px; background:var(--cream-alt); padding:44px 40px; text-align:center; }
.pricing-placeholder .ad-label{ margin-bottom:14px; }
.pricing-placeholder h3{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; font-size:26px; }
.pricing-placeholder p{ margin:12px auto 0; font-size:15px; color:var(--body); max-width:48ch; }
.pricing-placeholder .btn{ margin-top:22px; }

@media (max-width:1080px){
  .info-card-grid,.info-card-grid--3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .info-card-grid,.info-card-grid--3{ grid-template-columns:1fr; }
  .pricing-placeholder{ padding:32px 24px; }
}

/* ============================================================
   WP-INTEGRATIE / COMPAT — niet uit het concept, wél nodig voor
   functioneel behoud (skip-link, echte logo-SVG, button-nav-toggle,
   sticky mobiele CTA, DW Media-creditrij). Alles via tokens.
   ============================================================ */

/* Skip-link (a11y, incumbent-functionaliteit) */
.ug-skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--green-900);padding:10px 16px;border-radius:8px;font-weight:700;z-index:200;}
.ug-skip:focus{left:12px;top:12px;}

/* Echte logo-SVG i.p.v. het tekstlogo uit het concept. De "donker"-variant
   heeft een eigen donker vlak in de SVG — afronden zodat het als badge leest. */
.logo-svg{height:40px;width:auto;display:block;}
.footer-brand .logo-svg{height:56px;border-radius:8px;}

/* Nav-groep-toggle is een <button> (a11y/parity met live) — look van .main-nav a */
.main-nav .nav-group-toggle{font-family:'Archivo',system-ui,sans-serif;background:none;border:none;cursor:pointer;font-size:14.5px;font-weight:600;color:var(--ink);padding:9px 12px;border-radius:9px;display:inline-flex;align-items:center;gap:5px;}
.main-nav .nav-group-toggle:hover{color:var(--ink);background:var(--cream-alt);}
.main-nav .nav-group-toggle.is-active{color:var(--primary-text);background:color-mix(in srgb, var(--color-primary) 10%, transparent);font-weight:700;}
.nav-group>button .uit-icon{transition:transform .15s ease;}
.nav-group:hover>button .uit-icon,.nav-group:focus-within>button .uit-icon{transform:rotate(180deg);}
.nav-dropdown a.is-active{background:var(--cream-alt);color:var(--green-900);}

/* Mobiel menu: de button-variant doet mee in het nav-open-paneel */
@media (max-width:860px){
  .site-header.nav-open .main-nav .nav-group-toggle{color:var(--ink);padding:12px 8px;border-radius:0;border-bottom:1px solid var(--card-border);width:100%;text-align:left;justify-content:flex-start;}
  .site-header.nav-open .nav-group>button .uit-icon{display:none;}
}

/* Sticky mobiele agenda-CTA (incumbent-functionaliteit, tokens-versie) */
.ug-mobile-cta{display:none;}
@media (max-width:639px){
  .ug-mobile-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--green-950);box-shadow:0 -4px 16px rgba(0,0,0,.25);}
  body{padding-bottom:72px;}
  .ug-mobile-cta .btn{display:flex;justify-content:center;text-align:center;width:100%;}
}

/* Footer-creditrij met het echte DW Media-logo (concept had tekst-placeholder) */
.footer-credit-logo--img{background:var(--white);padding:6px;}
.footer-credit-logo--img img{display:block;height:48px;width:auto;border-radius:8px;}

/* ============================================================
   HOMEPAGE-COMPAT — nieuwe markup + bestaande functionaliteit.
   ============================================================ */

/* Kaarten zijn klikbaar via een overlay-link (concept-3-patroon, ook hier
   toegepast omdat een <button> in een <a> ongeldig is en uit-favorites zelf
   knoppen injecteert). */
.event-card-link{position:absolute;inset:0;z-index:1;border-radius:16px;}
.event-card .event-card-media,.event-card .event-card-body{pointer-events:none;}
.event-card .event-card-body a,.event-card .uitfav-btn{pointer-events:auto;}
.event-card[hidden]{display:none;}
.event-card-noimg{display:block;height:170px;}
.event-card.span-2 .event-card-noimg{height:230px;}
.event-card-blurb{font-size:14px;color:var(--body);margin-bottom:10px;max-width:60ch;}
.event-tag--feat{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.event-tag,.chip{display:inline-flex;align-items:center;gap:7px;}
.chip-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;}
.picks-empty{margin-top:24px;color:var(--body-2);font-style:italic;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}

/* Keuzehulp op het donkere quiz-band-vlak — bestaande .ug-quiz-functionaliteit
   (theme.js) in de zine-huisstijl. */
.quiz-band--quiz{display:block;padding:44px 40px;}
.quiz-band--quiz .ug-quiz__head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:24px;}
.quiz-band--quiz .quiz-sub{color:var(--on-dark-3);font-size:15.5px;flex-basis:100%;max-width:52ch;}
.quiz-band--quiz .ug-quiz__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.quiz-band--quiz .ug-quiz__label{font-family:'Archivo Narrow',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3);margin-bottom:10px;}
.quiz-band--quiz .ug-quiz__opts{display:flex;flex-wrap:wrap;gap:8px;}
.quiz-band--quiz .ug-quiz__opts button{font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:500;padding:8px 16px;border-radius:800px;border:1.5px solid rgba(253,249,239,.4);color:var(--on-dark-2);background:transparent;cursor:pointer;outline:2px solid transparent;outline-offset:3px;transition:background-color .15s ease,color .15s ease,outline-color .15s ease;}
.quiz-band--quiz .ug-quiz__opts button:hover{outline-color:rgba(255,255,255,.25);}
.quiz-band--quiz .ug-quiz__opts button.sel{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.quiz-band--quiz .ug-quiz__actions{margin-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.quiz-band--quiz .ug-quiz__by{color:var(--on-dark-4);font-size:13px;}
.quiz-band--quiz .ug-quiz__results{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.ug-quiz__toggle{margin-left:auto;border:1.5px solid var(--gold);background:transparent;color:var(--gold);border-radius:800px;padding:10px 22px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;outline:2px solid transparent;outline-offset:3px;transition:background-color .15s ease,color .15s ease,outline-color .15s ease;}
.ug-quiz__toggle:hover{background:var(--gold);color:var(--ink);outline-color:var(--gold);}
.ug-quiz__toggle:focus-visible{outline-color:var(--gold);}
.ug-quiz.is-collapsed .ug-quiz__cols,
.ug-quiz.is-collapsed .ug-quiz__actions,
.ug-quiz.is-collapsed .ug-quiz__results{display:none;}
.ug-quiz.is-collapsed .ug-quiz__head{margin-bottom:0;}
/* Resultaatkaarten van de keuzehulp (markup uit theme.js, ongewijzigd) */
.ug-tip{display:flex;flex-direction:column;background:var(--card);border:1.5px solid var(--card-border);border-radius:14px;overflow:hidden;color:inherit;}
.ug-tip:hover{box-shadow:0 12px 26px rgba(16,48,31,.14);transform:translateY(-3px);transition:all .2s ease;}
.ug-tip__media{position:relative;aspect-ratio:16/10;background:var(--cream-alt);overflow:hidden;}
.ug-tip__media img{width:100%;height:100%;object-fit:cover;}
.ug-tip__date{position:absolute;top:10px;left:10px;background:var(--green-700);color:var(--on-primary);font-weight:800;font-size:.78rem;padding:4px 9px;border-radius:6px;}
.ug-tip__body{padding:14px 16px;}
.ug-tip__why{color:var(--primary-text);font-size:.85rem;font-weight:600;margin:0 0 8px;background:var(--cream-alt);border-radius:6px;padding:6px 10px;}
.ug-tip__title{margin:0 0 6px;font-size:1.05rem;color:var(--ink);font-family:'Archivo',sans-serif;}
.ug-tip__meta{color:var(--body-2);font-size:.85rem;margin:0;}
.ug-tip__cta{display:block;background:var(--green-700);color:var(--on-primary);font-family:'DM Sans',sans-serif;font-weight:500;text-align:center;padding:10px 14px;border-radius:40px;margin:12px 16px 14px;}
.ug-tip__cta:hover{background:var(--green-700-hover);}
.ug-tip__none{grid-column:1/-1;background:var(--input-bg-soft);border:1.5px solid var(--card-border);border-radius:10px;padding:16px 18px;color:var(--ink);}
.ug-tip__none a{color:var(--primary-text);font-weight:700;}
@media (max-width:860px){
  .quiz-band--quiz .ug-quiz__cols{grid-template-columns:1fr;}
  .quiz-band--quiz .ug-quiz__results{grid-template-columns:1fr;}
  .ug-quiz__toggle{margin-left:0;width:100%;}
}

/* Kids-statistieken zijn échte links naar de termpagina's */
.kids-intro{margin-top:18px;font-size:16px;color:var(--body);max-width:46ch;}
.kids-cta{margin-top:26px;}
.kids-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
a.kids-stat{transition:border-color .15s ease,transform .15s ease;}
a.kids-stat:hover{border-color:var(--green-700);transform:translateY(-3px);}

/* Uit eten-kaarten zijn links */
a.eten-card{display:block;color:inherit;transition:transform .2s ease,box-shadow .2s ease;}
a.eten-card:hover{transform:translateY(-6px);box-shadow:0 16px 30px rgba(16,48,31,.16);}

/* Billboard zonder beeld (house-ad) */
.ad-slot--noimg{grid-template-columns:1fr;}

/* Nieuwsbrief-band titelgrootte (concept had dit inline) */
.newsletter-title{font-size:clamp(1.7rem,3.4vw,2.4rem);}

/* FAQ met h3 in de summary (SEO-parity met live) */
.faq-item summary h3{display:inline;font-size:16px;font-weight:700;font-family:'Archivo',sans-serif;color:var(--ink);margin:0;}
.faq-item-link{display:inline-block;margin-top:10px;font-weight:700;color:var(--primary-text);font-size:14px;}
.faq-item-link:hover{color:var(--primary-text-hover);}

/* SEO-blok inklap (functionaliteit uit live; tekst blijft in de bron) */
.ug-prose__rest.is-collapsed{display:none;}
.ug-prose__toggle{background:none;border:0;padding:0;margin-top:14px;cursor:pointer;font-family:'Archivo',sans-serif;font-size:15px;font-weight:700;color:var(--primary-text);}
.ug-prose__toggle:hover{color:var(--primary-text-hover);}
.seo-block a{color:var(--primary-text);font-weight:600;}
.seo-block a:hover{color:var(--primary-text-hover);}

/* hidden-attribuut moet altijd winnen van display-regels */
.picks-empty[hidden]{display:none;}

/* ============================================================
   MU-PLUGIN-RESTYLING — blokken die mu-plugins injecteren (eigen inline
   <style> ná deze stylesheet, vandaar !important). Alleen kleur/typografie
   naar het zine-systeem; layout en gedrag blijven van de plugin.
   Bewust NIET aangepakt: .uithubs-band (eigen recent ontwerp hubs-sessie).
   ============================================================ */

/* Uittip van de week (uit-dagtip) */
.udt-feature{background:var(--cream-alt)!important;border-top:1.5px solid var(--cream-alt-border);border-bottom:1.5px solid var(--cream-alt-border)!important;padding:56px 16px!important;}
.udt-feature__inner{border:1.5px solid var(--green-900)!important;border-radius:18px!important;box-shadow:none!important;}
.udt-feature__inner:hover{box-shadow:0 16px 30px rgba(16,48,31,.16)!important;}
.udt-feature__kicker{color:var(--primary-text)!important;font-family:'Archivo Narrow',sans-serif!important;letter-spacing:.09em!important;}
.udt-feature__title{font-family:'Cormorant Garamond',Georgia,serif!important;font-style:italic;font-weight:600!important;font-size:clamp(1.6rem,3vw,2.1rem)!important;line-height:1.05!important;color:var(--ink)!important;}
.udt-feature__excerpt{color:var(--body)!important;}
.udt-feature__btn{background:var(--gold)!important;color:var(--ink)!important;border-radius:40px!important;font-family:'DM Sans',system-ui,sans-serif!important;font-weight:500!important;padding:11px 22px!important;}

/* Uitgaan-banner ("Apart onderdeel") — paars/oranje → zine-groen met goud */
.uitgaan-banner__inner{background:linear-gradient(110deg,var(--green-950),var(--green-700) 75%)!important;color:var(--on-dark)!important;}
.uitgaan-banner__icon{color:var(--gold)!important;}
.uitgaan-banner__kicker{color:var(--on-dark-4)!important;}
.uitgaan-banner__sub{color:var(--on-dark-3)!important;}
.uitgaan-banner__cta{background:var(--gold)!important;color:var(--ink)!important;font-family:'DM Sans',system-ui,sans-serif!important;font-weight:500!important;}

/* Uitgaan-slot (uit-home-slots): kop zonder Playfair (verboden 2e serif),
   sectie en kaarten op zine-tokens */
.uit-uitgaan{background:var(--cream-alt)!important;border-top:1.5px solid var(--cream-alt-border);border-bottom:1.5px solid var(--cream-alt-border);padding:56px 0!important;}
.uit-uitgaan__title{font-family:'Cormorant Garamond',Georgia,serif!important;font-style:italic;font-weight:600!important;font-size:clamp(1.6rem,3vw,2.1rem)!important;color:var(--ink)!important;}
.uit-uitgaan__tab{font-family:'DM Sans',system-ui,sans-serif!important;font-weight:500!important;border:1.5px solid var(--green-700)!important;color:var(--primary-text)!important;background:transparent!important;}
.uit-uitgaan__tab.is-active{background:var(--green-900)!important;color:var(--on-dark)!important;border-color:var(--green-900)!important;}
.daytime-week{background:transparent!important;border-bottom:none!important;color:var(--body)!important;}
.daytime-week__kicker{color:var(--body-2)!important;font-family:'Archivo Narrow',sans-serif!important;}
.daytime-week__sub{color:var(--body-2)!important;}
.daytime-week__card{border:1.5px solid var(--card-border)!important;border-radius:16px!important;background:var(--card)!important;}
.daytime-week__card:hover{border-color:var(--green-700)!important;box-shadow:0 16px 30px rgba(16,48,31,.16);}
.daytime-week__rank{background:var(--gold)!important;color:var(--ink)!important;}
.daytime-week__name{color:var(--ink)!important;}
.daytime-week__type{color:var(--body-2)!important;}
.daytime-week__stars{color:var(--gold)!important;}
.daytime-week__stars b{color:var(--ink)!important;}

/* Agenda-sidebar: kleinere chips + reset-link als <a> */
.chip--sm{padding:6px 13px;font-size:12.5px;}
a.sidebar-reset{display:inline-flex;align-items:center;gap:8px;text-decoration:none;}
a.sidebar-when-item{text-decoration:none;display:block;}
.daynight-toggle a.daynight-btn{text-decoration:none;display:inline-flex;align-items:center;}

/* ================= EXTRA STYLE-BLOK (evenement-detail.html) ================= */
/* ============================================================
   EVENEMENT-DETAIL — page-specific additions on top of the
   shared "Boutique Zine" system above (unchanged). Every new
   rule below reuses the same tokens (--green-900, --gold,
   --card, --card-border, --body-2, etc.) — no new hex values.
   ============================================================ */

/* ---------- breadcrumb ----------
   Deliberately NOT styled like a kicker/eyebrow (no uppercase,
   no letter-spacing, no small tracked label sitting above the
   h1) — it's a wayfinding trail, sentence case, using the same
   --body-2 text color already proven >=6.6:1 on cream. */
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13.5px; color:var(--body-2); margin-bottom:22px; }
.breadcrumb a{ color:var(--body-2); }
.breadcrumb a:hover{ color:var(--primary-text); text-decoration:underline; }
.breadcrumb .sep{ color:var(--muted-2); }
.breadcrumb .current{ color:var(--ink); font-weight:700; }

/* ---------- detail header ---------- */
.event-detail-head{ padding:44px 0 8px; }
.event-detail-head h1{ max-width:20ch; }
.event-detail-meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px; }
.event-detail-meta .event-card-loc{ font-size:15px; }
.event-detail-meta .event-card-loc .uit-icon{ font-size:15px; }

/* ---------- media + gallery ---------- */
.event-detail-media{ margin-top:38px; }
.event-detail-media img{ width:100%; height:460px; object-fit:cover; border:1.5px solid var(--green-900); border-radius:4px; }
.detail-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
.detail-gallery img{ width:100%; height:130px; object-fit:cover; border-radius:12px; border:1.5px solid var(--card-border); }

/* ---------- layout: main content + sticky sidebar ---------- */
.detail-grid{ display:grid; grid-template-columns:1.55fr 0.85fr; gap:48px; align-items:start; }
.detail-main .event-detail-desc{ margin-top:34px; }
.detail-main .event-detail-desc p{ font-size:16px; color:var(--body); max-width:64ch; }
.detail-main .event-detail-desc p + p{ margin-top:16px; }

.detail-sidebar-wrap{ position:sticky; top:96px; }
.detail-sidebar{ background:var(--card); border:1.5px solid var(--card-border); border-radius:20px; padding:30px 28px; }
.detail-sidebar h2{ font-size:18px; font-weight:800; }
.info-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 0; border-top:1px dashed var(--card-border); }
.info-row:first-of-type{ border-top:none; padding-top:0; }
.info-row .info-label{ font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--body-2); }
.info-row .info-value{ font-family:'Archivo',sans-serif; font-weight:700; font-size:15px; color:var(--ink); text-align:right; }
.detail-sidebar .btn{ width:100%; justify-content:center; margin-top:10px; }
.detail-sidebar .btn-primary{ margin-top:22px; }

/* ---------- map placeholder ----------
   Adapted from the incumbent site's dashed placeholder-map
   pattern (reference/incumbent/theme.css .ug-map: diagonal
   stripe background + centered caption) but re-expressed with
   this system's own tokens and label typography (Archivo
   Narrow tracked caps, the same face already used for
   .filter-group-label / .discover-cluster-label) instead of
   inventing a new mono-font treatment. */
.detail-map-wrap{ margin-top:34px; }
.detail-map{
  position:relative; height:220px; border-radius:16px; overflow:hidden;
  border:1.5px solid var(--green-900);
  background:repeating-linear-gradient(135deg,var(--cream-alt) 0 16px,var(--cream) 16px 32px);
  display:flex; align-items:center; justify-content:center;
}
.detail-map-label{
  font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--body-2); background:var(--card); border:1px solid var(--card-border); border-radius:800px; padding:7px 16px;
}

/* ---------- related events ---------- */
.related-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px 22px; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .detail-grid{ grid-template-columns:1fr; }
  .detail-sidebar-wrap{ position:static; top:auto; margin-top:8px; }
  .related-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .event-detail-media img{ height:260px; }
  .detail-gallery{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .detail-gallery img{ height:76px; }
  .related-grid{ grid-template-columns:1fr; }
  .detail-sidebar{ padding:24px 20px; }
}

/* Evenement-detail: kleine WP-varianten op het concept */
.section--detail{padding-top:0;}
.event-detail-media img{width:100%;height:auto;max-height:500px;object-fit:cover;display:block;border:1.5px solid var(--green-900);}
.event-detail-noimg{display:block;height:340px;border:1.5px solid var(--green-900);}
.related-grid--3{grid-template-columns:repeat(3,1fr);}
@media (max-width:1080px){.related-grid--3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.related-grid--3{grid-template-columns:1fr;}}
a.detail-map{display:block;text-decoration:none;}

/* ============================================================
   LEGACY-COMPAT: restaurant-CPT (archief + JS-gerenderde kaarten via
   restaurants.js — markup-contract .ug-resto blijft) + generieke .ug-btn
   die her en der door mu-plugins geprint wordt. Alles op tokens.
   ============================================================ */
.ug-btn{display:inline-flex;align-items:center;gap:8px;font-family:'DM Sans',system-ui,sans-serif;font-weight:500;font-size:15px;padding:13px 26px;border-radius:40px;border:1.5px solid transparent;background:var(--green-700);color:var(--on-primary);cursor:pointer;text-decoration:none;}
.ug-btn:hover{background:var(--green-700-hover);}
.ug-btn--outline{background:transparent;color:var(--primary-text);border-color:var(--green-700);}
.ug-btn--outline:hover{background:var(--green-900);border-color:var(--green-900);color:var(--on-dark);}
.ug-btn--green{background:var(--green-700);color:var(--on-primary);}

.ug-card__photolabel{position:absolute;bottom:10px;right:12px;font-family:'Archivo Narrow',sans-serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--body-2);background:rgba(255,255,255,.8);padding:2px 8px;border-radius:6px;}

/* Restaurant-kaart (.ug-resto) in zine-look */
.ug-resto{position:relative;background:var(--card);border:1.5px solid var(--card-border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;}
.ug-resto:hover{transform:translateY(-6px);box-shadow:0 16px 30px rgba(16,48,31,.16);}
.ug-resto__link{position:absolute;inset:0;z-index:1;}
.ug-resto__media{position:relative;height:170px;background-size:cover;background-position:center;}
.ug-resto__media img{width:100%;height:100%;object-fit:cover;display:block;}
.ug-resto__cuisine{position:absolute;top:12px;left:12px;font-family:'Archivo Narrow',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--white);padding:4px 11px;border-radius:800px;}
.ug-resto__open{position:absolute;bottom:10px;left:12px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:800px;background:rgba(255,255,255,.92);}
.ug-resto__open--yes{color:var(--primary-text);}
.ug-resto__open--no{color:var(--safety-red);}
.ug-resto__pricetag{position:absolute;bottom:10px;right:12px;font-size:12px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.92);padding:3px 10px;border-radius:800px;}
.ug-resto__body{padding:16px 18px 16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.ug-resto__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.ug-resto__title{font-size:17px;font-weight:800;color:var(--ink);margin:0;font-family:'Archivo',sans-serif;}
.ug-resto__rating{font-weight:700;font-size:14px;color:var(--body-2);white-space:nowrap;}
.ug-resto__blurb{font-size:13.5px;line-height:1.5;color:var(--body);margin:0;}
.ug-resto__chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;}
.ug-resto__chips li{font-family:'Archivo Narrow',sans-serif;font-weight:700;font-size:11px;letter-spacing:.05em;padding:3px 9px;border-radius:800px;background:var(--cream-alt);color:var(--body-2);border:1px solid var(--cream-alt-border);}
.ug-resto__loc{font-size:13px;color:var(--body-2);}
.ug-resto__actions{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px dashed var(--card-border);padding-top:10px;}
.ug-resto__detail{font-size:13.5px;font-weight:700;color:var(--primary-text);}
.ug-resto__contact{display:flex;align-items:center;gap:8px;position:relative;z-index:2;}
.ug-resto__ico{font-size:16px;color:var(--primary-text);text-decoration:none;}
.ug-resto__reserve{font-family:'DM Sans',system-ui,sans-serif;font-weight:500;font-size:13px;background:var(--gold);color:var(--ink);padding:7px 14px;border-radius:800px;text-decoration:none;}
.ug-resto__reserve:hover{background:var(--gold-hover);}

/* Eten-archief: grid + sidebar-formulierelementen */
.eten-grid--archief{grid-template-columns:repeat(3,1fr);}
@media (max-width:1080px){.eten-grid--archief{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.eten-grid--archief{grid-template-columns:1fr;}}
.ug-eten-filters{display:flex;flex-direction:column;gap:10px;}
.ug-eten-filters .sidebar-group-label{margin-top:8px;}
.ug-filters__search,.ug-eten-sel{width:100%;padding:11px 14px;border:1.5px solid var(--card-border);border-radius:10px;background:var(--white);font-family:'Archivo',sans-serif;font-size:14px;color:var(--ink);}
.ug-eten-more{align-self:center;margin-top:22px;}

/* Restaurant-detail extra's */
.detail-chips{margin-bottom:14px;}
.event-tag--open{background:var(--green-700);color:var(--on-primary);border-color:var(--green-700);}
.event-tag--closed{background:var(--cream-alt);color:var(--safety-red);}
.info-hours{padding:14px 0;border-top:1px dashed var(--card-border);}
.info-hours ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;}
.info-hours li{font-size:13.5px;color:var(--body);}
.detail-sidebar .btn{width:100%;justify-content:center;margin-top:10px;}

/* ============================================================
   ONTBREKENDE BASISREGELS uit de referentie (over/adverteren waren nooit
   in-browser geverifieerd — HANDOFF-gap): info-cards + prose-block,
   system-conform geauthord. Plus kleine WP-varianten.
   ============================================================ */
.prose-block{max-width:72ch;font-size:16px;color:var(--body);line-height:1.7;}
.prose-block p{margin:0 0 16px;}
.prose-block h2{font-size:1.5rem;margin:28px 0 12px;}
.prose-block h3{font-size:1.15rem;margin:22px 0 10px;}
.prose-block a{color:var(--primary-text);font-weight:600;}
.prose-block a:hover{color:var(--primary-text-hover);}
.prose-block ul,.prose-block ol{margin:0 0 16px;padding-left:22px;list-style:disc;}
.prose-block ol{list-style:decimal;}
.prose-block li{margin-bottom:6px;}
.prose-block--mb{margin-bottom:34px;}
.info-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px;}
.info-card-grid--3{grid-template-columns:repeat(3,1fr);}
.info-card{background:var(--card);border:1.5px solid var(--card-border);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.info-card p{font-size:15px;color:var(--body);margin:0;}
.info-card-icon{width:42px;height:42px;border-radius:50%;background:var(--cream-alt);border:1px solid var(--cream-alt-border);display:flex;align-items:center;justify-content:center;}
.info-card .btn{margin-top:auto;}

/* Overige WP-varianten */
.section-head--tight{margin-bottom:28px;}
.section--faqgroup{padding:56px 0;}
.chip-dot--lg{width:16px;height:16px;display:inline-block;border-radius:50%;margin-right:14px;vertical-align:middle;}
.cat-other{margin-top:48px;display:flex;flex-direction:column;gap:14px;}
.listing-fallback{margin:0 0 18px;color:var(--body-2);}
.results-count{font-size:14.5px;color:var(--body-2);margin:0 0 22px;}
.results-count strong{color:var(--ink);font-size:16px;}
.empty-state{background:var(--card);border:1.5px solid var(--card-border);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.detail-sidebar-note{font-size:14px;color:var(--body);}
/* WP core pagination in de zine-look */
.pagination .nav-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;}
.pagination .page-numbers{min-width:40px;height:40px;padding:0 10px;border-radius:800px;display:inline-flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-weight:500;font-size:14px;color:var(--primary-text);background:var(--white);border:1.5px solid var(--card-border);text-decoration:none;}
.pagination .page-numbers.current{background:var(--green-900);border-color:var(--green-900);color:var(--on-dark);}

/* ============================================================
   VIDEO-HERO IN DE COLLAGE-TEGEL (besluit Shiva 18-08: video blijft).
   De mu-plugin (uit-hero-video.php) rendert .uit-herobg absoluut binnen
   .hero-media; hoge specificiteit omdat de plugin zijn CSS ná deze
   stylesheet in wp_head print.
   ============================================================ */
.hero .hero-media--video .uit-herobg{border:1.5px solid var(--green-900);background-color:var(--green-950);}
/* Lichte vignette i.p.v. de zware leesbaarheids-scrim (tekst staat hier niet op de video) */
.hero .hero-media--video .uit-herobg__scrim{background:linear-gradient(180deg,rgba(16,48,31,0) 55%,rgba(12,38,22,.35) 100%);}
/* Overlappende foto-tegel + stempel boven de video houden */
.hero .hero-media--video .hero-tile-2{z-index:2;}
.hero .hero-media--video .hero-stamp-float{z-index:4;}
/* Mobiel/tablet: media-tegel niet meer verbergen — het (bewegende) stadsbeeld
   blijft zichtbaar, gestapeld onder de tekst; de overlap-tegel is daar te krap. */
@media (max-width:1080px){
  .hero-grid .hero-media--video{display:block;margin-top:30px;}
  .hero-media--video img{height:230px;}
  .hero-media--video .hero-tile-2{display:none;}
}

/* Icoon-demo (template-icon-demo.php — gereedschap, privépagina) */
.icon-demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;margin-bottom:44px;}
.icon-demo-cel{background:var(--card);border:1.5px solid var(--card-border);border-radius:14px;padding:18px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
.icon-demo-cel small{font-size:11.5px;color:var(--body-2);word-break:break-all;}
.icon-demo-cel--dark{background:var(--green-900);border-color:var(--green-950);}
.icon-demo-cel--dark small{color:var(--on-dark-3);}

/* ============================================================
   DS v4 witte header (besluit Shiva/Cas 18-08, mechaniek 1-op-1 van
   uittilburg.com): CTA in de balk = primaire kleur-pill, hover donkerder
   + outline in primair (netwerk-knopstandaard). Iconen in de balk zijn
   inkt i.p.v. on-dark.
   ============================================================ */
.site-header .btn-pill-nav{background:var(--color-primary);color:var(--on-primary);}
.site-header .btn-pill-nav:hover{background:var(--color-primary-dark);outline-color:var(--color-primary);}
.site-header .nav-group-toggle .uit-icon,
.site-header .main-nav a .uit-icon{color:inherit;}
.site-header .burger .uit-icon{color:var(--ink);}

/* Fotoproxy-404-vangnet: kapotte eten-foto's verdwijnen, crop toont neutrale tint */
.eten-card-media-crop{background:var(--cream-alt);min-height:150px;}

/* ============================================================
   STADS-SPECIFIEK (uitams-architectuur): aliassen voor de behouden ua-*-restaurant-
   templates (blauwdruk) + logo op donkere footer.
   ============================================================ */
.ua-resto{position:relative;background:var(--card);border:1.5px solid var(--card-border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;}
.ua-resto:hover{transform:translateY(-6px);box-shadow:0 16px 30px rgba(16,48,31,.16);}
.ua-resto__media{position:relative;height:170px;background-size:cover;background-position:center;}
.ua-resto__media img{width:100%;height:100%;object-fit:cover;display:block;}
.ua-resto__cuisine{position:absolute;top:12px;left:12px;font-family:'Archivo Narrow',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-primary);padding:4px 11px;border-radius:800px;background:var(--green-700);}
.ua-resto__price{position:absolute;bottom:10px;right:12px;font-size:12px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.92);padding:3px 10px;border-radius:800px;}
.ua-resto__body{padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.ua-resto__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.ua-resto__title{font-size:17px;font-weight:800;color:var(--ink);margin:0;font-family:'Archivo',sans-serif;}
.ua-resto__rating{font-weight:700;font-size:14px;color:var(--body-2);white-space:nowrap;}
.ua-resto__blurb{font-size:13.5px;line-height:1.5;color:var(--body);margin:0;}
.ua-card__meta{font-size:13px;color:var(--body-2);}
.ua-section{padding:56px 0;}
.ua-container{max-width:var(--container);margin:0 auto;padding:0 32px;}
.ua-pagehead{background:var(--green-900);padding:60px 0 52px;color:var(--on-dark);}
.ua-pagehead__h1{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:clamp(2rem,5vw,3.4rem);color:var(--on-dark);margin:0;}
.ua-pagehead__intro{color:var(--on-dark-3);max-width:56ch;margin-top:12px;}
.ua-kicker{font-family:'Archivo Narrow',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--body-2);}
.ua-pagehead .ua-kicker{color:var(--on-dark-4);}
.ua-btn{display:inline-flex;align-items:center;gap:8px;font-family:'DM Sans',system-ui,sans-serif;font-weight:500;font-size:15px;padding:13px 26px;border-radius:40px;border:1.5px solid transparent;background:var(--green-700);color:var(--on-primary);cursor:pointer;text-decoration:none;}
.ua-btn:hover{background:var(--green-700-hover);}
.ua-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:1080px){.ua-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.ua-grid{grid-template-columns:1fr;}}
.logo-svg--footer{background:var(--on-dark);border-radius:12px;padding:8px 14px;box-sizing:content-box;height:44px;}

/* logo-cap: lange stadsnamen mogen de viewport niet overschrijden */
@media (max-width:700px){
  .logo-svg--footer{max-width:calc(100vw - 72px);height:auto;}
  .footer-brand .logo-svg{max-width:calc(100vw - 72px);height:auto;}
}

/* ============================================================
   CONTRASTCORRECTIES (20-08) — gemeten met verificatie/contrast.mjs
   Kleine labels en iconen zaten onder WCAG AA. Waarden zijn berekend, niet
   geschat: elke kleur haalt >=4.5:1 op crème (#F4EFE3), crème-alt (#ECE6D6)
   en wit; iconen >=3:1 (SC 1.4.11). Staat in zine.css, dus alleen onder het
   zine-thema — het oude thema blijft ongemoeid.
   ============================================================ */
:root{
  --muted:#6D6759;      /* was #9A917E — 2,51:1 */
  --muted-2:#6D6658;    /* was #8A8170 — 3,09:1 */
}
/* De plugin-regels staan als inline <style> ná deze stylesheet en winnen bij gelijke
   specificiteit op bronvolgorde. Daarom bewust één niveau hoger — géén !important,
   want juist dat veroorzaakte de DS-v4-botsing. */
body .uitads-label,body .uitads-pauze__tekst{color:#6D6D6D;}      /* was #999 — 2,48:1 */
body .weather-info-lbl,body .discover-cluster-label{color:#6D6658;} /* was 3,85:1 */
body .uitveil-bar__lbl{color:#637378;}                             /* was 4,03:1 */
.uitsterren-star.uitsterren-star--full,
.uitsterren-star.uitsterren-star--half{color:#B68E31;}             /* was 2,17:1, eis 3:1 */
.uitsterren-star.uitsterren-star--half::before{color:#B68E31;}
.uitsterren-star.uitsterren-star--empty{color:#A99F86;}            /* was 1,61:1 */
body .footer-bottom .copy,body .ua-footer__bottom .copy{color:#B5AC95;} /* was 4,19:1 */
body .uit-uitgaan__tab{color:var(--green-900);}                    /* was 4,3:1 */