/*# =========================
    © 2025 Zuidbroek@ThePark. Alle rechten voorbehouden. Het gebruik of delen van deze code, 
    geheel of gedeeltelijk, is niet toegestaan zonder schriftelijke toestemming van Zuidbroek@ThePark. 

    Deze code vertegenwoordigt een zorgvuldig ontwikkelde intellectuele inspanning van Zuidbroek@ThePark, 
    en het behoud van exclusieve rechten is belangrijk om de integriteit van ons werk te waarborgen. 
    Het ongeoorloofd kopiëren, aanpassen of verspreiden van deze code kan leiden tot inbreuk op onze auteursrechten.
    
    We moedigen samenwerking en het delen van kennis aan. 
    Mocht u interesse hebben in het gebruik van deze code of delen ervan, 
    neem dan alstublieft contact met ons op via info@zuidbroekatthepark.nl. 
    We staan open voor overleg en samenwerking, 
    en kunnen passende toestemming verlenen indien dit wederzijds overeengekomen is.
    
    Bedankt voor uw begrip en respect voor ons creatieve werk.
# ========================= */


/* =========================
   DESIGN TOKENS (VARS & PALETTE)
========================= */
:root{
  /* Core brand */
  --primary: #8ec152;               /* hoofdgroen */
  --primary-rgb: 142, 193, 82;
  --brand: #0b7d36;                 /* festivalgroen */
  --brand-rgb: 11, 125, 54;

  /* Text & surfaces */
  --text: #0e2a25;                  /* antraciet (body tekst) */
  --muted: #6b6b6b;                 /* secundaire tekst */
  --paper: #ffffff;
  --bg: #f7f7fb;

  /* Headings */
  --heading: #0e2a25;               /* expliciet voor h1,h2 */

  /* Festival accenten */
  --orange: #d67934;
  --pink: var(--brand);
  --yellow: #eac324;
  --aqua: #ff4d8a;                  /* energiek roze */
  --violet: #7b61ff;
  --red: #741530;

  /* Kids */
  --kids-geel: #fcbd52;
  --kids-paars: #8684bf;
  --kids-groen: #5ebb6b;
  --kids-aqua: #27b9a4;
  --kids-wit: #f3f9fb;

  /* Halloween */
  --hallo-orange: #d67934;
  --hallo-paars: #46284f;
  --hallo-groen: #637955;
  --hallo-grijs: #616870;
  --hallo-wit: #eae9e2;

  /* Kerst */
  --kerst-groen: #145948;
  --kerst-rood: #741530;
  --kerst-wit: #deecea;
  --kerst-bruin: #5ebb6b;
  --kerst-zand: #af8c4e;

  /* Color blocks */
  --cb-light-blue: var(--primary);
  --cb-light-kids: #fcbd52;
  --cb-dark-kids: #5ebb6b;
  --cb-dark-blue: #0e2a25;
  --cb-brand: var(--brand);
  --cb-kerst: #1d4f41;
  --cb-red: #5f1d2c;
  --cb-purple: #38243e;
  --cb-white: #ffffff;
  --cb-bruin: var(--kerst-bruin);
  --cb-zand: #af8c4e;

  /* Overlays & shadows */
  --overlay-primary: rgba(var(--primary-rgb), .65);
  --overlay-dark: rgba(0,0,0,.45);
  --shadow: 0 10px 24px rgba(0,0,0,.08);

  /* Radius */
  --radius: 18px;

  /* Typografie */
  --fs-base: 1.1rem;
  --lh-base: 1.7;

  /* Menu */
  --menu-color: #fff;
  --menu-accent: var(--brand);
  --menu-gap: 8px;
  --menu-fs: 1.8rem;
  --menu-fs-lg: 2rem;
}



/* =========================
   FONTS
========================= */
@font-face {
  font-family: 'SocialGothic';
  src: url('../fonts/social-gothic-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SocialGothic';
  src: url('../fonts/social-gothic-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =========================
   RESET & BASE
========================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
}

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
}

/* Headings = SocialGothic Bold */
h1, h2, h3, h4, h5, h6 {
  font-family: 'SocialGothic', sans-serif;
  font-weight: 700;
}
h1, h2 { color: var(--heading); }
h3, h4, h5, h6 { color: var(--primary); }

/* Globale typografie (behalve .news) */
body :where(:not(.news) *) :where(
  p, li, a, small, label, input, textarea, select, button,
  blockquote, figcaption, address, dd, dt
){
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
}

/* SocialGothic helpers */
.sg-inline,
.sg-bold {
  font-family: 'SocialGothic', sans-serif !important;
  font-weight: 700;
  letter-spacing: .02em;
}
.sg-label,
.sg-domain { color: inherit; }

/* Footer override: altijd wit */
footer .sg-inline,
footer .sg-label,
footer .sg-domain,
#site-footer .sg-inline,
#site-footer .sg-label,
#site-footer .sg-domain {
  color: #fff !important;
}

/* Partners override (alleen @ThePark in partners-blok) */
.partners .sg-domain,
#partners .sg-domain { color: var(--primary) !important; }


/* =========================
   HEADER — FIXED
========================= */
.site-header{
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 90px;
  background-color: var(--paper);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.back-button{
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  text-decoration: none; color: var(--text);
  font-size: .85rem;
  display: flex; align-items: center; gap: 5px;
}
.back-button i{ font-size: 1.2em; }

.logo-img{ max-height: 75px; height: auto; width: auto; cursor: pointer; }


/* =========================
   MENU (overlay)
========================= */
.hamburger{
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; z-index: 2000;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.hamburger span{
  display: block; height: 3px; width: 100%; background-color: var(--text);
  border-radius: 3px; transition: transform .3s ease, opacity .3s ease, background-color .3s ease;
}
.hamburger.open span:nth-child(1){ transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2){ opacity: 0; }
.hamburger.open span:nth-child(3){ transform: rotate(-45deg) translate(6px, -6px); }
.hamburger:focus-visible{ outline: 2px solid var(--menu-accent); outline-offset: 4px; border-radius: 6px; }

.menu-overlay{
  position: fixed; inset: 0;
  display: none; justify-content: center; align-items: center;
  background-color: var(--overlay-primary);
  z-index: 1500;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.menu-overlay.active{ display: flex; }

.menu-content{
  display: flex; flex-direction: column; text-align: center;
  font-family: 'SocialGothic', sans-serif; font-weight: 700; letter-spacing: .02em;
  position: relative; z-index: 1550;
}
.menu-content a{
  color: var(--menu-color); font-size: var(--menu-fs-lg); text-decoration: none; margin: 15px 0;
  transition: color .25s ease, opacity .25s ease;
}
.menu-content a:hover{ color: var(--menu-accent); }
.menu-content a:focus-visible{
  outline: 2px solid var(--menu-accent); outline-offset: 3px; border-radius: 6px;
}
.menu-content a.active{ color: var(--menu-accent); }

.menu-close{
  position: fixed;
  top: 14px; right: 14px;
  z-index: 2200;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.28);
  color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-close:hover{ background: rgba(0,0,0,.4); }
.menu-close:focus-visible{ outline: 2px solid var(--menu-accent); outline-offset: 2px; }
.menu-close svg, .menu-close i{ pointer-events: none; }

.menu-item{ display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.menu-row{ display: flex; align-items: center; gap: var(--menu-gap); }

.menu-link{
  flex: 1; color: var(--menu-color); font-size: var(--menu-fs); text-decoration: none; padding: 10px 0;
  transition: color .25s ease; font-family: 'SocialGothic', sans-serif; font-weight: 700; letter-spacing: .02em;
}
.menu-link:hover{ color: var(--menu-accent); }
.menu-link:focus-visible{ outline: 2px solid var(--menu-accent); outline-offset: 3px; border-radius: 6px; }

.menu-item.has-children .submenu-toggle{
  background: transparent; border: 0; width: 36px; height: 36px;
  display: grid; place-items: center; cursor: pointer; border-radius: 8px;
}
.menu-item.has-children .submenu-toggle:focus-visible{
  outline: 2px solid var(--menu-accent); outline-offset: 2px;
}
.menu-item.has-children .caret{
  display: inline-block; width: 10px; height: 10px;
  border-right: 2px solid var(--menu-color); border-bottom: 2px solid var(--menu-color);
  transform: rotate(45deg); transition: transform .25s ease, border-color .25s ease;
}
.menu-item.open .caret{ transform: rotate(-135deg); border-color: var(--menu-accent); }

.submenu{ display: none; flex-direction: column; gap: 4px; padding: 6px 0 8px; margin-left: 0; border-left: none; }
.submenu.open{ display: flex; }
.submenu-link{
  color: var(--menu-color); font-size: 1rem; text-decoration: none; padding: 6px 0;
  transition: color .25s ease; font-family: 'SocialGothic', sans-serif; font-weight: 700; letter-spacing: .02em;
}
.submenu-link:hover, .submenu-link.active{ color: var(--menu-accent); }
.submenu-link:focus-visible{ outline: 2px solid var(--menu-accent); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce){
  .hamburger span,
  .menu-content a,
  .menu-link,
  .menu-item.has-children .caret,
  .submenu-link{ transition: none; }
}


/* =========================
   MAIN & GENERIC LAYOUT
========================= */
main{
  margin-top: 90px;
  flex: 1; width: 100%;
}
.message{
  font-size: 2em;
  margin-top: 20px; padding: 0 1rem; color: var(--text); text-align: center;
}

/* Page banner */
.page-banner.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.page-banner img {
  display: block;
  width: 100%;
  height: clamp(320px, 48vh, 520px);
  object-fit: cover;
}
@media (max-width: 420px){
  .page-banner img { height: 200px; }
}

/* Sections / Color blocks */
.color-block{ width: 100%; padding: 60px 20px; text-align: center; }
.color-block.light-blue{ background-color: var(--cb-light-blue); color: #fff; }
.color-block.dark-blue{ background-color: var(--cb-dark-blue); color: #fff; position: relative; }
.color-block.light-kids{ background-color: var(--cb-light-kids); color: #fff; }
.color-block.dark-kids{ background-color: var(--cb-dark-kids); color: #fff; position: relative; }
.color-block.green{ background-color: var(--cb-brand); color: #fff; }
.color-block.kids{ background-color: var(--kids-paars); color: #fff; }
.color-block.kerst{ background-color: var(--kerst-rood); color: #fff; }
.color-block.bruin{ background-color: var(--cb-kerst-bruin); color: #fff; }
.color-block.zand{ background-color: var(--cb-zand); color: #fff; }
.color-block.halloween{ background-color: var(--cb-purple); color: #fff; }
.color-block.white-white{ background-color: var(--cb-white); }

.color-block.dark-blue *:not(a):not(button):not(.outline-btn *):not(.outline-btn):not(.outline-btn--halloween *):not(.outline-btn--halloween){ color:#fff !important; }
.color-block.green *:not(.outline-btn):not(.outline-btn *):not(.outline-btnblue):not(.outline-btnblue *),
.color-block.red *:not(.outline-btn):not(.outline-btn *):not(.outline-btnblue):not(.outline-btnblue *),
.color-block.orange *:not(.outline-btn):not(.outline-btn *):not(.outline-btnblue):not(.outline-btnblue *){ color:#fff !important; }

.color-block.white,
.color-block.background,
.layout-block.white{ background-color: var(--bg); color: var(--text); }

.wave-top{ position: absolute; top: -1px; left: 0; width: 100%; height: auto; }

/* Two-column */
.two-column{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px;
}
.two-column .left,
.two-column .middle,
.two-column .right,
.two-column .right-home,
.two-column .left-home{ flex: 1 1 400px; max-width: 500px; }

.two-column .left{ text-align: left; }
.two-column .right-home,
.two-column .left-home{ text-align: left; padding: 20px; }

.two-column .right-home h2{ margin-bottom: 15px; font-size: 2rem; font-weight: bold; color: var(--heading); }
.two-column .right-home p{ margin-bottom: 20px; text-align: left; color: var(--text); }

.two-column > .left-home,
.two-column > .right-home{ display: flex; flex-direction: column; justify-content: space-between; }
.two-column > .left-home p,
.two-column > .right-home p{ flex-grow: 1; }

/* Images */
.home-img{
  width: 100%; max-width: 800px; height: 100%; max-height: 850px;
  border-radius: 20px; display: block; margin: 0 auto; object-fit: cover;
}
.layout-img{
  width: 100%; height: auto; display: block; margin: 0; object-fit: cover;
  max-width: none; max-height: none;
}
.flyer-img{
  width: 120%; max-width: 400px; border-radius: 20px; display: block; margin: 0 auto;
}

/* Iframe */
.iframe-wrapper{
  border-radius: 20px; overflow: hidden; display: inline-block;
  width: 400px; height: 549px;
}
.iframe-wrapper iframe{
  width: 100%; height: 100%; border: none; display: block;
}

/* Main text */
.main-text{
  max-width: 800px; margin: 0 auto; padding: 2rem 1rem; text-align: left;
}
.main-text h1, .main-text h2, .main-text h3{ color: var(--heading); margin-bottom: 1rem; }
.main-text p{ margin-bottom: 1.2rem; color: var(--text); }
.main-header{
  text-align: left; margin: 0 auto 40px; max-width: 900px; padding: 0 20px;
}
.main-header h1{ font-size: 2.5rem; color: var(--heading); margin-bottom: 15px; font-weight: 700; }
.main-header h2{ font-size: 2rem; color: var(--heading); margin-bottom: 10px; }
.main-header p{ margin: 0; color: var(--text); }

/* Lists in main-text */
.main-text ul{ list-style: disc inside; margin: 0 0 1.2rem 1.5rem; padding-left: 1rem; }
.main-text li{ margin-bottom: 0.6rem; line-height: 1.6; color: var(--text); }
.main-text ol{ margin-left: 1.5rem; padding-left: 1rem; list-style-type: decimal; }


/* =========================
   NEWS
========================= */
.news-hero{
  padding: 48px 20px 28px; text-align: center;
  background: linear-gradient(180deg, rgba(53,43,96,.06), rgba(53,43,96,0));
}
.news-hero h1{ font-size: 2.2rem; margin: 0 0 8px; color: var(--heading); }
.news-hero p{ color: var(--muted); margin: 0; }

.news-controls{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  padding: 16px 20px 0;
}
.news-search{
  flex: 1 1 260px; max-width: 520px; display: flex; align-items: center; gap: 8px;
  border: 1px solid #e6e6f0; border-radius: 14px; padding: 10px 14px; background: var(--paper);
}
.news-search input{ flex: 1; border: 0; outline: 0; font-size: 1rem; color: var(--text); }
.chipbar{ display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip{
  border: 1px solid #e6e6f0; border-radius: 999px; padding: 8px 12px; cursor: pointer;
  background: var(--paper); font-size: .9rem; color: var(--text);
}
.chip.active{ background: var(--brand); color: #fff; border-color: var(--brand); }

.news-wrap{ max-width: 1100px; margin: 0 auto; padding: 10px 18px 36px; }

.news-card{
  display: flex; flex-direction: column; background: var(--paper);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  min-height: 520px; /* consistente basis */
}
.news-card .cover{ display: block; line-height: 0; background: #000; }
.news-card .cover img{
  width: 100%; height: 260px; object-fit: cover; display: block; transition: transform .35s ease;
}
.news-card .cover:hover img{ transform: scale(1.02); }

.news-card .body{ padding: 16px; flex: 1; }

.news-card .badge{
  display: inline-block; color: #fff; font-size: .8rem; padding: 6px 10px; border-radius: 999px;
  margin-bottom: 10px; background: var(--primary);
}

.news-card h2, .news-card h3{ margin: 0 0 8px; color: var(--heading); line-height: 1.25; }
.news-card h2 a, .news-card h3 a{ color: inherit; text-decoration: none; }
.news-card h2 a:hover, .news-card h3 a:hover{ text-decoration: underline; }

.news-card p{ margin: 0 0 12px; color: var(--text); line-height: 1.55; }

.news-card .meta{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.news-card time{ color: var(--muted); font-size: .7rem; white-space: nowrap; }

.news-card .card-footer{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid #eee; background: #fafafa;
}
.news-card .card-footer time{ font-size: .75rem; color: var(--muted); }
.news-card .card-footer .read-more{
  color: var(--brand); text-decoration: none !important; font-weight: 700; font-size: .85rem !important;
}
.news-card .card-footer .read-more:hover{ text-decoration: underline; }
.news-card .card-footer .share-btn{
  border: 0; background: #f2f6ff; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .85rem; color: var(--text);
  transition: background .25s ease, transform .2s ease;
}
.news-card .card-footer .share-btn svg{ width: 18px; height: 18px; fill: var(--text); transition: transform .2s ease; }
.news-card .card-footer .share-btn:hover{ background: #e1e8ff; transform: translateY(-2px); }
.news-card .card-footer .share-btn:hover svg{ transform: scale(1.2); }

.news-card.featured .cover img{ height: 360px; }

.news-grid{
  margin-top: 22px; display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0,1fr));
}

@keyframes pulse-highlight{
  0%{ box-shadow: 0 0 0 0 rgba(53, 43, 96, 0.6); }
  50%{ box-shadow: 0 0 0 5px rgba(0, 206, 125, 0.4); }
  100%{ box-shadow: 0 0 0 10px rgba(0, 206, 125, 0); }
}
.highlight-article{ animation: pulse-highlight 4s ease-out; }


/* =========================
   EVENTS
========================= */
.events-hero{
  padding: 42px 18px 10px;
  text-align: left;
  max-width: 1100px;
  margin: 0 auto;
}
.events-hero h1{ font-size: 2.4rem; margin: 0 0 6px; color: var(--heading); }
.events-hero p{ color: var(--text); margin: 0; }

.events-wrap{
  max-width: 1100px; margin: 16px auto 26px; padding: 0 18px;
  display: grid; gap: 18px;
}

.event-card{
  position: relative;
  display: grid;
  grid-template-columns: auto 96px 1fr auto;
  align-items: center; gap: 18px;
  background: var(--paper);
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  color: var(--text);
}
.event-card:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.event-card.featured{ background: var(--primary); color: #fff; }
.event-card.featured .event-price{ color: var(--brand); }
.event-card.featured .event-title{ color: #fff; }
.event-card.featured .tag{ background: rgba(255,255,255,.12); color: #fff; }
.event-card.featured .tag svg{ fill: #fff; }
.event-card.featured .event-cta{ background: var(--brand); color: var(--primary); }

/* Datumtegel (groot) */
.event-date{
  width: 76px; height: 76px;
  border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #f0f0f4;
  color: var(--brand);
  font-weight: 800; line-height: 1;
  font-family: 'SocialGothic', sans-serif; letter-spacing: .02em;
}
.event-card.featured .event-date{ background: rgba(255,255,255,.08); color: #fff; }
.event-date .month{ font-size: .8rem; letter-spacing: .5px; opacity: .9; }
.event-date .day{ font-size: 2rem; }

/* Logo */
.event-logo{
  width: 96px; height: 96px;
  object-fit: cover; border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* Body */
.event-body{ display: flex; flex-direction: column; gap: 6px; }
.event-price{ font-size: .9rem; font-weight: 700; color: var(--text); }
.event-title{ font-size: 1.6rem; margin: 0; color: var(--heading); }

/* Tags */
.event-tags{
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px;
}
.tag{
  display: inline-flex; align-items: center; gap: 8px;
  background: #f0f0f4; color: var(--text);
  padding: 8px 12px; border-radius: 999px;
  font-weight: 600; font-size: .95rem; text-decoration: none;
}
.tag svg{ width: 18px; height: 18px; fill: var(--text); }
.tag:hover{ background: #dceaff; }

/* CTA */
.event-cta{
  display: inline-grid; place-items: center;
  padding: 14px 22px; border-radius: 20px;
  background: var(--brand); color: #fff; text-decoration: none;
  font-weight: 800; white-space: nowrap;
  font-family: 'SocialGothic', sans-serif; letter-spacing: .02em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.event-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(11,125,54,.35);
}

/* Responsief events */
@media (max-width: 900px){
  .event-card{
    grid-template-columns: 72px 72px 1fr;
    grid-template-areas:
      "date logo cta"
      "date logo title"
      "date logo tags";
    row-gap: 10px; padding-right: 16px;
  }
  .event-date{ grid-area: date; width: 72px; height: 72px; }
  .event-logo{ grid-area: logo; width: 72px; height: 72px; }
  .event-body{ grid-area: title; }
  .event-cta{ grid-area: cta; justify-self: end; }
}
@media (max-width: 640px){
  .event-card{
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "date title"
      "logo title"
      "logo tags"
      "logo cta";
    align-items: start;
  }
  .event-logo{ width: 64px; height: 64px; }
  .event-cta{ justify-self: start; margin-top: 8px; }
  .event-title{ font-size: 1.35rem; }
}

/* Events teaser */
.events-teaser{ max-width: 1100px; margin: 28px auto; padding: 0 18px; }
.events-teaser h2{ text-align: center; margin-bottom: 14px; color: var(--heading); }
.events-teaser-grid{
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Event mini-cards */
.event-mini{
  display: flex; align-items: center; gap: 14px;
  padding: 14px; background: var(--paper); border: 1px solid #eee;
  border-radius: 16px; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  min-width: 0; color: var(--text);
}
.event-mini:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}
.event-mini .date{
  flex: 0 0 72px; width: 72px; aspect-ratio: 1/1;
  border-radius: 14px; background: var(--primary); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'SocialGothic', sans-serif; font-weight: 700; letter-spacing: .02em;
}
.event-mini .date span{ font-size: .8rem; opacity: .9; }
.event-mini .date strong{ font-size: 1.6rem; line-height: 1; }
.event-mini .info{ min-width: 0; overflow-wrap: anywhere; }
.event-mini .info h3{ margin: 0 0 4px; color: var(--heading); font-size: 1.1rem; }
.event-mini .info p{ margin: 0; color: var(--text); font-size: .95rem; }
.event-mini .mini-cta{
  display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
  background: var(--brand); color: #fff; text-decoration: none; padding: 8px 12px;
  border-radius: 12px; font-weight: 700; flex: 0 0 auto;
  font-family: 'SocialGothic', sans-serif; letter-spacing: .02em;
}
.event-mini .mini-cta:hover{ filter: brightness(.95); }
.center{ text-align: center; margin-top: 12px; }
@media (max-width: 420px){ .event-mini .date{ flex-basis: 64px; width: 64px; } }

.events-teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 kolommen */
  gap: 1.5rem;
}


/* =========================
   ADD-TO-CALENDAR MODAL
========================= */
.addcal-modal {
  position: fixed; inset: 0; display: none; place-items: center;
  background: var(--overlay-dark); z-index: 3000;
}
.addcal-modal.open { display: grid; }

.addcal-dialog {
  width: min(420px, 92vw);
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 20px 44px rgba(0,0,0,.25);
  padding: 28px 24px 26px;
  position: relative; text-align: center; animation: fadeIn .25s ease;
  color: var(--text);
}
.addcal-dialog h3 {
  margin: 0 0 10px; color: var(--heading);
  font-size: 1.5rem; font-weight: 700;
}
.addcal-eventtitle {
  font-size: 1.1rem; color: var(--text);
  margin-bottom: 22px; font-weight: 600;
}
.addcal-actions { display: flex; flex-direction: column; gap: 14px; }
.addcal-dialog .addcal-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 16px; border-radius: 18px;
  font-weight: 600; background: #f7f7fb; color: var(--text);
  text-decoration: none; transition: background .2s ease, transform .2s ease;
}
.addcal-dialog .addcal-btn svg { width: 20px; height: 20px; fill: var(--text); }
.addcal-dialog .addcal-btn:hover { background: #e9ecff; transform: translateY(-2px); }
.addcal-close {
  position: absolute; top: 10px; right: 14px;
  border: 0; background: transparent;
  font-size: 34px; line-height: 1; color: var(--text); cursor: pointer;
  transition: transform .2s ease, color .2s ease;
}
.addcal-close:hover { color: var(--brand); transform: scale(1.15); }

@keyframes fadeIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }


/* =========================
   PHOTO STRIP + LIGHTBOX
========================= */
.photo-strip{
  --gap: 14px; --radius: 20px; --item-min: 280px; --item-max: 380px;
  max-width: 1280px; margin: 40px auto; padding: 0 18px;
}
.photo-strip h2{ text-align: center; margin-bottom: 14px; color: var(--heading); }
.photo-strip .strip{
  display: flex; gap: var(--gap); overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 8px; scroll-padding: 1rem;
}
.photo-strip .item{ flex: 0 0 clamp(var(--item-min), 33vw, var(--item-max)); scroll-snap-align: start; }
.photo-strip img{
  display: block; width: 100%;
  height: clamp(160px, 22vw, 220px); object-fit: cover; border-radius: var(--radius);
}
.photo-strip .controls{ display: flex; justify-content: space-between; margin-top: 8px; gap: 8px; }
.photo-strip .btn{
  border: 1px solid rgba(0,0,0,.12); background: var(--paper);
  border-radius: 999px; padding: 8px 12px; cursor: pointer; line-height: 1;
}
.photo-strip .btn:disabled{ opacity:.4; cursor: default; }
.photo-strip .strip::-webkit-scrollbar{ height: 8px; }
.photo-strip .strip::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.2); border-radius: 999px; }
.photo-strip .strip{ scrollbar-color: rgba(0,0,0,.2) transparent; scrollbar-width: thin; }

@media (max-width: 1024px){
  .photo-strip{ max-width: 1000px; }
  .photo-strip .item{ flex-basis: clamp(240px, 46vw, 320px); }
}
@media (max-width: 680px){
  .photo-strip .item{ flex-basis: 80vw; }
  .photo-strip img{ height: clamp(160px, 38vw, 200px); }
}
@media (prefers-reduced-motion: reduce){
  .photo-strip .strip{ scroll-behavior: auto; }
}

/* Lightbox */
.lb-overlay{
  position: fixed; inset: 0; z-index: 9999;
  background: var(--overlay-primary); display: none; align-items: center; justify-content: center;
}
.lb-overlay.open{ display: flex; }
.lb-img-wrap{ position: relative; max-width: 92vw; max-height: 92vh; }
.lb-img{ display: block; max-width: 100%; max-height: 92vh; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lb-close,
.lb-prev,
.lb-next{
  position: absolute; z-index: 2;
  width: 48px; height: 48px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.lb-close{ top: 16px; right: 16px; }
.lb-prev, .lb-next{ top: 50%; transform: translateY(-50%); }
.lb-prev{ left: clamp(8px, 3vw, 28px); }
.lb-next{ right: clamp(8px, 3vw, 28px); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
}
@media (max-width: 980px){
  .lb-prev, .lb-next, .lb-close{ width:44px; height:44px; }
}
body.lb-lock{ overflow: hidden; }



/* =========================
   ARTIKEL
========================= */
.news-article{
  max-width: 700px; margin: 2rem auto; padding: 2rem; box-sizing: border-box;
  line-height: 1.6; margin-bottom: 1.5rem; color: var(--text);
}
.news-article h2{ font-size: 1.5rem; margin-top: 1rem; color: var(--heading); }
.news-full-image{
  width: 85%; max-width: 800px; height: 100%; max-height: 850px;
  border-radius: 20px; display: block; margin: 20px auto 0; object-fit: cover;
}
.article-date{ display: block; margin-top: 2rem; font-style: italic; color: var(--muted); }
.auteur{ font-size: 0.65rem; color: #666; margin-top: 5px; display: block; font-weight: normal; }
.news-article .share-btn{ background: none; border: none; cursor: pointer; padding: 0; }

/* CTA tiles */
.cta-tiles{
  max-width: 1100px; margin: 28px auto; padding: 0 18px;
  display: grid; gap: 16px; grid-template-columns: repeat(2,1fr);
}
.tile{
  background: var(--primary); color: #fff; text-decoration: none; padding: 20px; border-radius: 18px;
  box-shadow: 0 12px 24px rgba(0,0,0,.12); transition: transform .2s ease, box-shadow .2s ease;
}
.tile:hover{ transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.16); }
.tile h3{ margin: 0 0 6px; }
.tile p{ margin: 0; opacity: .9; }
@media (max-width:860px){ .cta-tiles{ grid-template-columns: 1fr; } }


/* =========================
   BUTTONS — Zuidbroek@ThePark
========================= */
a.btn-home,
a.cta-button,
a.outline-btn,
a.outline-btnblue,
a.outline-btn--halloween,
a.outline-btn--kerst,
a.outline-btn--zand,
a.outline-btn--kids,
a.outline-btn--light-kids,
a.outline-btn--kids2,
a.outline-orange,
button.btn-home,
button.cta-button,
button.outline-btn,
button.outline-btnblue,
button.outline-btn--halloween,
button.outline-btn--kerst,
button.outline-btn--zand,
button.outline-btn--kids,
button.outline-btn--light-kids,
button.outline-btn--kids2,
button.outline-orange {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; vertical-align: middle; white-space: normal; line-height: 1.3;
  text-decoration: none; user-select: none; cursor: pointer;
  font-family: 'SocialGothic', sans-serif; font-weight: 700; letter-spacing: 0.02em;
  font-size: 1.1rem; border-radius: 20px; padding: 12px 28px;
  transition: all 0.3s ease;
}

/* Home Button */
.btn-home { background-color: var(--aqua); color: #fff; border: none; }
.btn-home:hover { background-color: var(--primary); }

/* Call-to-Action */
.cta-button{
  background-color: var(--paper); color: var(--brand);
  border: none; margin-top: 20px; border-radius: 8px;
}
.cta-button:hover{ background-color: rgba(255, 255, 255, 0.85); }

/* Outline varianten */
.outline-btn,
.outline-btnblue{
  border: 2px solid var(--primary); color: var(--primary); background-color: transparent;
}
.outline-btn:hover,
.outline-btnblue:hover{ background-color: var(--primary); color: #fff; }

.outline-btn--halloween{
  border: 2px solid var(--hallo-orange); color: var(--hallo-orange); background: transparent;
}
.outline-btn--halloween:hover{ background: var(--hallo-orange); color: #fff; }

.outline-btn--kerst{
  border: 2px solid var(--kerst-rood); color: var(--kerst-rood); background: transparent;
}
.outline-btn--kerst:hover{ background: var(--kerst-rood); color: #fff; }

.outline-btn--zand{
  border: 2px solid var(--kerst-zand); color: var(--kerst-zand); background: transparent;
}
.outline-btn--zand:hover{ background: var(--kerst-zand); color: #fff; }

.outline-btn--kids,
.outline-btn--light-kids{
  border: 2px solid var(--kids-paars); color: var(--kids-paars); background: transparent;
}
.outline-btn--kids:hover,
.outline-btn--light-kids:hover{ background: var(--kids-paars); color: #fff; }

.outline-btn--kids2{
  border: 2px solid var(--kids-geel); color: var(--kids-geel); background: transparent;
}
.outline-btn--kids2:hover{ background: var(--kids-geel); color: #fff; }

.outline-orange{
  border: 2px solid var(--orange); color: var(--orange); background: transparent;
}
.outline-orange:hover{ background: var(--orange); color: #fff; }

/* Extra consistentie + toegankelijkheid */
a[class*="outline-btn"]:hover,
button[class*="outline-btn"]:hover{ text-decoration: none; transform: translateY(-1px); }
a[class*="outline-btn"] + a[class*="outline-btn"],
button[class*="outline-btn"] + button[class*="outline-btn"]{ margin-left: 10px; }
a[class*="outline-btn"]:focus-visible,
button[class*="outline-btn"]:focus-visible{
  outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 8px;
}


/* =========================
   FAQ
========================= */
.faq{ margin: 2rem auto; max-width: 800px; padding: 0 1rem; }
.faq h2{ text-align: left; font-size: 1.5rem; margin-bottom: 1.25rem; color: var(--heading); font-weight: 700; }
.faq h3{ text-align: left; font-size: 1.2rem; margin-bottom: 1.25rem; color: var(--primary); font-weight: 700; }

.faq-item{
  padding: 1rem 0; border-bottom: 1px solid #e6e6e6; cursor: pointer; position: relative; padding-left: 1rem;
  transition: background-color .25s ease;
}
.faq-item:last-child{ border-bottom: none; }
.faq-item.active{
  border-left: 4px solid var(--brand); padding-left: .8rem; background: rgba(var(--brand-rgb),0.08);
}
.faq-question{ display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 700; color: var(--text); }
.faq-icon{ width: 20px; height: 20px; position: relative; flex-shrink: 0; color: var(--text); }
.faq-icon::before,
.faq-icon::after{
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%);
}
.faq-icon::after{ transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.active .faq-icon{ color: var(--brand); transform: rotate(45deg); }
.faq-answer{ display: none; margin-top: .5rem; font-size: .95rem; line-height: 1.6; color: var(--muted); }
.faq-item.active .faq-answer{ display: block; }


/* =========================
   FOOTER
========================= */
footer{
  text-align: center; background-color: var(--cb-dark-blue);
  padding: 30px 20px; width: 100%; color: #fff;
}
footer .social-icons{ margin-bottom: 20px; }
footer .social-icons a{
  color: #fff; margin: 0 15px; font-size: 2em; text-decoration: none; transition: transform 0.3s ease;
}
footer .social-icons a:hover{ color: var(--primary); transform: scale(1.2); }

.footer-links{
  display: flex; justify-content: center; gap: 15px; margin-bottom: 10px; flex-wrap: wrap;
}
.footer-links a{
  font-size: 14px; color: #fff; text-decoration: none; transition: color 0.3s ease;
}
.footer-links a:hover{ color: var(--brand); }
.footer-links .dot{ margin: 0 8px; color: #fff; font-weight: bold; }

.footer-text p{ font-size: 12px; color: #fff; margin-top: 5px; }


/* =========================
   PARTNER LOGOS / SPONSOR CARDS
========================= */
.partner-logos{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 20px;
}
.partner-logos img{ max-height: 80px; object-fit: contain; }

.sponsor-cards{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 30px;
}
.sponsor-card{
  background: var(--paper); color: var(--text); border-radius: 20px; padding: 25px; width: 300px; text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sponsor-card:hover{ transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.sponsor-card h3{ font-size: 1.5rem; margin-bottom: 10px; color: var(--heading); }
.sponsor-card .price{ font-size: 1.3rem; font-weight: bold; color: var(--brand); margin: 10px 0 20px; }
.sponsor-card ul{ list-style: none; padding: 0; margin-bottom: 20px; text-align: left; }
.sponsor-card ul li{ margin: 8px 0; padding-left: 20px; position: relative; }
.sponsor-card ul li::before{
  content: "✔"; position: absolute; left: 0; color: var(--brand); font-weight: bold;
}
.sponsor-card .outline-btnblue{ display: inline-block; margin-top: auto; }


/* =========================
   SPONSOREN (GRIDS & CTA)
========================= */
.sponsor-tiers{ margin: 0 auto; padding: 20px 18px 40px; }
.sponsor-tier + .sponsor-tier{ margin-top: 26px; border-top: 1px solid #eaeaf4; padding-top: 26px; }

.tier-head h2{ color: #fff; margin: 0 0 6px; font-size: 1.6rem; }
.tier-head p{ color: #fff; margin: 0 0 14px; }

.sponsor-grid{ display: grid; gap: 18px; align-items: center; }
.sponsor-grid.one-up{ grid-template-columns: repeat(1, minmax(0,1fr)); }
.sponsor-grid.three-up{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.sponsor-grid.four-up{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.sponsor-grid.five-up{ grid-template-columns: repeat(5, minmax(0,1fr)); }

.sponsor-logo{
  background: var(--paper); border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,.06);
  padding: 18px 22px; display: grid; place-items: center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  border: 1px solid #eef0fa;
}
.sponsor-logo:hover{
  transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.09); background: #ffffff;
}
.sponsor-logo img{ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.sponsor-grid.one-up .sponsor-logo img{ max-height: 90px; }

/* CTA blok onderaan + binnen dark-blue centreren */
.sponsor-cta p{ max-width: 900px; margin: 0 auto 10px; color: #fff; }
.sponsor-cta .btn-ghost{
  display: inline-block; margin-top: 16px; padding: 12px 28px; border: 2px solid #fff; color: #fff;
  text-decoration: none; font-weight: 700; border-radius: 999px; transition: background .2s ease, transform .2s ease;
}
.sponsor-cta .btn-ghost:hover{ background: #fff; color: var(--primary); transform: translateY(-1px); }
.color-block.dark-blue .inner{ max-width: 1100px; margin: 0 auto; padding: 40px 20px; }

.sponsor-tier{ margin-bottom: 40px; }
.sponsor-tier .tier-head h2{ color: #fff; margin-bottom: 6px; }
.sponsor-tier .tier-head p{ color: #e0e0f0; margin-bottom: 20px; }


/* =========================
   APP PAGE
========================= */
body.app-page { background: var(--bg); color: var(--text); }

/* Hero */
.app-page .hero-wrap{
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
  max-width: 1100px; margin: 0 auto; padding: 0 20px;
}
@media (max-width: 980px){ .app-page .hero-wrap{ grid-template-columns: 1fr; gap: 24px; } }
.app-page .hero-copy{ text-align: left; }
.app-page .hero-copy h1{ margin: 0 0 10px; }
.app-page .hero-copy p{ line-height: 1.6; }
.app-page .hero-actions{ display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.app-page .appstore-badge img{ height: 44px; width: auto; display: block; }
.app-page .hero-shot{ display: grid; place-items: center; }
.app-page .hero-shot img{
  width: 80%; max-width: 320px; height: auto; object-fit: contain;
  border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Screenshots: swipe strip */
.app-page .app-shots{ --gap: 20px; max-width: 1280px; margin: 36px auto 20px; padding: 0 18px; }
.app-page .app-shots .strip{
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}
.app-page .app-shots .item{ flex: 0 0 clamp(320px, 34vw, 440px); scroll-snap-align: start; }
.app-page .app-shots img{
  display: block; width: 100%; height: auto !important; max-height: 800px; object-fit: contain;
  border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.12); transition: transform .25s ease;
}
.app-page .app-shots img:hover{ transform: scale(1.03); }
@media (max-width: 680px){
  .app-page .app-shots .item{ flex-basis: 84vw; }
  .app-page .app-shots img{ max-height: 520px; }
}

/* Kop-typografie align */
.app-page .pwa-steps h2,
.app-page .right-home h2{
  font-size: 2rem; margin: 0 0 15px; line-height: inherit;
}

/* PWA-lijst */
.app-page .pwa-steps ol{ margin: .6rem 0 0 1.25rem; }
.app-page .pwa-steps li{ margin: .35rem 0; line-height: 1.6; }

/* Screens grid (3 naast elkaar) */
.app-page .app-screens{
  max-width: 1100px; margin: 60px auto; padding: 0 20px; text-align: center;
}
.app-page .app-screens h2{
  font-family: 'SocialGothic', sans-serif; font-weight: 700; font-size: 2rem; margin-bottom: 28px; color: var(--heading);
}
.app-page .screens-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; justify-items: center; align-items: start;
}
.app-page .screens-grid img{
  width: 100%; max-width: 320px; height: auto; object-fit: contain;
  border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.12); transition: transform .25s ease;
}
.app-page .screens-grid img:hover{ transform: scale(1.03); }
@media (max-width: 860px){ .app-page .screens-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 580px){ .app-page .screens-grid{ grid-template-columns: 1fr; } }


/* =========================
   ADS / PROMO CARDS
========================= */
/* Maak ad-slot doorzichtig zodat de kaart zelf grid-item is */
.news-grid .ad-slot { display: contents; }

/* Promo-cards (gelijk aan news-card, met groene accentstijl) */
.promo-card{
  position: relative;
  background: #f7fff9;
  border: 2px solid var(--brand);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.promo-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11,125,54,.15);
}
.promo-card .cover img{
  width: 100%; height: 260px; object-fit: cover; display: block;
  border-radius: var(--radius) var(--radius) 0 0; transition: transform .35s ease;
}
.promo-card .cover:hover img{ transform: scale(1.02); }
.promo-card .badge{ background: var(--brand) !important; color: #fff; }
.promo-card .body{ padding: 16px; flex: 1; }
.promo-card .body h2 a{ color: var(--brand); text-decoration: none; }
.promo-card .body h2 a:hover{ text-decoration: underline; }
.promo-card .card-footer{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid #e6e6e6; background: #fafafa;
}

/* Legacy promo equalizers (no border, same bg) — niet nodig i.v.m. bovenstaande
   maar als fallback te behouden:
.promo-card { border: none; background: var(--paper); }
.promo-card .badge { background: var(--brand) !important; }
.promo-card .body h2 a { color: var(--heading); }
*/


/* =========================
   COOKIEYES
========================= */
html.no-cookieyes #cookieyes,
html.no-cookieyes .cky-consent-container,
html.no-cookieyes .cky-consent-bar,
html.no-cookieyes [id^="cookieyes-"],
html.no-cookieyes #cky-consent{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* =========================
   PRIVACY POLICY PAGE
========================= */
.privacy-policy{
  padding: 20px; max-width: 800px; margin: 20px auto; background-color: var(--paper);
  border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); text-align: left; color: var(--text);
}
.privacy-policy h1,
.privacy-policy h2{ color: var(--heading); }
.privacy-policy h1{ font-size: 2.5rem; margin-bottom: 10px; }
.privacy-policy h2{ font-size: 2rem; margin-top: 20px; }
.privacy-policy ul{ margin: 10px 0 20px 20px; list-style: disc; }


/* =========================
   BEELDEN (GALLERY)
========================= */
.beelden-header{
  text-align: left; margin: 0 auto 20px; max-width: 800px; padding: 0 20px;
}
.beelden-header h2{ font-size: 2rem; color: var(--heading); margin-bottom: 10px; }
.beelden-header p{ color: var(--text); line-height: 1.6; }

.beelden-gallery{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px;
}
.beelden-gallery img{
  width: 100%; height: auto; border-radius: 20px; display: block; object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer;
}
.beelden-gallery img:hover,
.beelden-gallery img:active{
  transform: scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.foto-card{
  position: relative; display: inline-block; border-radius: 15px; overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); max-width: 400px;
}
.foto-card img{ width: 100%; display: block; transition: transform 0.3s; }
.foto-card:hover img{ transform: scale(1.05); }
.foto-card .overlay{
  position: absolute; bottom: 0; width: 100%;
  background: rgba(11, 125, 54, 0.8); color: #fff; text-align: center;
  padding: 15px; font-size: 1.2rem; font-weight: 700;
  font-family: 'SocialGothic', sans-serif; letter-spacing: .02em; line-height: 1.2;
}
/* =========================
   HERO
========================= */
/* HERO A — v2: Split & Layered */
.hero-immersive.hero-split{
  position: relative; isolation: isolate;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  min-height: clamp(560px, 78vh, 860px); color: #fff; overflow: hidden;
  display: grid; place-items: center;
}
.hero-immersive.hero-split .hero-media img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 58%; transform: scale(1.03);
}

/* gesplitste overlay: links merk-groen glas, rechts subtiel donker */
.hero-immersive.hero-split .hero-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,125,54,.55) 0%, rgba(11,125,54,.38) 32%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.40) 100%),
    radial-gradient(70% 60% at 20% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
  mix-blend-mode: normal;
}

/* lay-out: content links uitgelijnd */
.hero-immersive.hero-split .hero-inner{
  position: relative; z-index: 2; width: 100%; max-width: 1200px; padding: 0 24px;
  display: grid; grid-template-columns: 1fr; justify-items: start;
}

/* glass card */
.hero-immersive.hero-split .hero-card{
  max-width: 640px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  border-radius: 22px;
  padding: clamp(18px, 3.2vw, 28px) clamp(18px, 3.2vw, 28px) clamp(16px, 3vw, 24px);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  animation: heroRise .6s ease both .06s;
}

/* ribbon tag */
.hero-immersive .hero-ribbon{
  display: inline-block; margin-bottom: 8px;
  background: #fff; color: var(--brand);
  font-weight: 800; font-family: 'SocialGothic', sans-serif; letter-spacing: .02em;
  border-radius: 999px; padding: 6px 12px; font-size: .9rem;
}

/* typografie */
.hero-immersive .hero-title{
  font-family: 'SocialGothic', sans-serif; font-weight: 700; letter-spacing: .01em;
  font-size: clamp(2.4rem, 6.2vw, 4.8rem); line-height: .95; margin: 2px 0 8px;
  color: var(--primary);
}
.hero-immersive .hero-title .brand{
  color: var(--brand);
  filter: drop-shadow(0 6px 20px rgba(142,193,82,.45));
}

.hero-immersive .hero-sub{
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: #f4f7f5; opacity: .95; margin: 0 0 16px;
}

.hero-immersive .hero-ctas{ display: flex; gap: 12px; flex-wrap: wrap; }
.hero-immersive .hero-facts{
  list-style: none; padding: 0; margin: 14px 0 0;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.hero-immersive .hero-facts li{
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: .92rem;
}
.hero-immersive .hero-facts strong{
  font-family: 'SocialGothic', sans-serif; letter-spacing: .02em;
}

/* wave divider onderaan */
.hero-immersive .hero-wave{
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
  line-height: 0;
}
.hero-immersive .hero-wave svg{ display: block; width: 100%; height: 110px; }

/* animatie */
@keyframes heroRise{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* responsief tweaks */
@media (max-width: 900px){
  .hero-immersive.hero-split{ min-height: clamp(520px, 78vh, 760px); }
  .hero-immersive .hero-card{ max-width: 680px; }
}
@media (max-width: 640px){
  .hero-immersive .hero-card{ padding: 16px 16px 14px; border-radius: 18px; }
  .hero-immersive .hero-facts{ gap: 8px; }
}

/* === HERO PATCH: titel wrap + consistente CTA's === */

/* 1) Geef de browser een onzichtbaar breekpunt tussen 'Zuidbroek' en '@' */
@media (min-width: 1024px){
  .hero-immersive .hero-title .brand::after{
    content: "\200B"; /* zero-width space: mag breken, géén visuele spatie */
  }

  /* forceer nette afbreking als het toch krap wordt */
  .hero-immersive .hero-title{
    overflow-wrap: anywhere;   /* moderne, vriendelijke break */
    word-break: normal;        /* geen agressief break-all */
    text-wrap: balance;        /* mooiere regelverdeling waar ondersteund */
  }

  /* iets ruimere card op breed desktop zodat lange namen passen */
  .hero-immersive.hero-split .hero-card{
    max-width: clamp(680px, 56vw, 860px);
    overflow: hidden;      /* tekst die toch uitsteekt, wordt niet zichtbaar */
  }

  /* tikje lagere titel-cap om overshoot te voorkomen */
  .hero-immersive .hero-title{
    font-size: clamp(2.4rem, 5.6vw, 4.2rem); /* was 4.8rem */
  }
}

/* 2) CTA-knoppen uniform (zelfde hoogte/typografie in de hero) */
.hero-immersive .hero-ctas .outline-btn,
.hero-immersive .hero-ctas .cta-button{
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.2;
  padding: clamp(10px, 1.3vw, 12px) clamp(20px, 2.2vw, 28px);
  border-radius: 16px;           /* gelijk in de hero */
  min-height: 44px;              /* taphoogte */
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* optioneel: gelijke optische breedte bij heel verschillende labels */
.hero-immersive .hero-ctas .outline-btn,
.hero-immersive .hero-ctas .cta-button{
  letter-spacing: .02em;
  font-weight: 700;
}

/* spacing fix wanneer knoppen op twee regels lopen */
.hero-immersive .hero-ctas{
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================
   PAGE HERO — UNIVERSAL (light + glass)
========================= */

.page-hero{
  --overlay: linear-gradient(180deg, rgba(11,125,54,.30) 0%, rgba(0,0,0,.25) 100%);
  position: relative; isolation: isolate; color: #fff; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  height: clamp(300px, 42vh, 420px);
  display: grid; place-items: center;
}

/* Achtergrondafbeelding als layer */
.page-hero .ph-media{
  position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover; background-position: center center;
  transform: scale(1.02);
}

/* Overlay (variabel per pagina via --overlay) */
.page-hero .ph-overlay{
  position: absolute; inset: 0;
  background: var(--overlay);
  backdrop-filter: none;
}

.page-hero .ph-media {
  display: block;
}

/* Inhoud */
.page-hero .ph-inner{
  position: relative; z-index: 2;
  width: 100%; max-width: 1100px; padding: 0 20px;
  display: grid; place-items: center;
  text-align: center;
}

/* Card container (voor glass-variant); bij light blijft vrijwel transparant */
.page-hero .ph-card{
  max-width: 820px;
  padding: clamp(14px, 2.6vw, 24px) clamp(16px, 3vw, 28px);
  border-radius: 22px;
  transition: box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

/* Titels en subtitel */
.page-hero .ph-title{
  font-family: 'SocialGothic', sans-serif; font-weight: 700; letter-spacing: .01em;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.05; margin: 0 0 8px; color: #fff;
  text-wrap: balance;
}
.page-hero .ph-sub{
  font-size: clamp(1rem, 2vw, 1.2rem);
  margin: 0 0 14px; color: #f4f7f5; opacity: .95;
  text-wrap: pretty;
}

/* CTA’s consistent met je bestaande knoppen */
.page-hero .ph-ctas{
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.page-hero .ph-ctas .outline-btn,
.page-hero .ph-ctas .cta-button{
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.2;
  padding: clamp(10px, 1.2vw, 12px) clamp(20px, 2.2vw, 28px);
  border-radius: 16px;
  min-height: 44px;
  display: inline-flex; align-items: center; gap: .4rem;
}

/* Wave divider onderaan (optioneel) */
.page-hero .ph-wave{ position: absolute; left:0; right:0; bottom:-1px; z-index:1; line-height:0; }
.page-hero .ph-wave svg{ display:block; width:100%; height:90px; }

/* ---------- Variants ---------- */

/* LIGHT: luchtig, zonder sterke glaslook */
.page-hero.is-light .ph-card{
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* GLASS: glaslook card voor extra leesbaarheid */
.page-hero.is-glass .ph-card{
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 38px rgba(0,0,0,.22);
}

/* Compacte variant (bijv. detailpagina’s) */
.page-hero.small{ height: clamp(220px, 30vh, 320px); }
.page-hero.small .ph-sub{ display:none; } /* strakker voor detail */
.page-hero.small .ph-ctas{ margin-top: 6px; }

/* Micro-parallax on hover (respecteer reduced motion) */
@media (prefers-reduced-motion: no-preference){
  .page-hero:hover .ph-media{ transform: scale(1.05); transition: transform .6s ease; }
}

/* Smal scherm */
@media (max-width: 640px){
  .page-hero{ height: 300px; }
  .page-hero .ph-card{ padding: 14px 16px; border-radius: 18px; }
}

/* =========================
   PROGRAMMA / TIJDLIJN — KERST@THEPARK (SOCIAL BOLD FIX)
   ========================= */

#programma {
  padding-top: 40px;
  padding-bottom: 40px;
}

#programma > p {
  max-width: 900px;
  margin: 0 auto 18px;
  color: #0e2a25;
}

/* Timeline container */
#programma .timeline {
  display: grid;
  gap: 28px;
  justify-content: center;
}

/* Dagenblokken */
#programma .timeline .day {
  background: #deecea;
  border: 1px solid rgba(20,89,72,0.15);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 22px 24px 26px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

#programma .timeline .day h3 {
  margin: 0 0 12px 0;
  color: #0e2a25;
  font-family: 'SocialGothic', sans-serif;
  font-weight: 400; /* niet vet */
  letter-spacing: .02em;
  text-align: left;
}

/* Lijst */
#programma .timeline .timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

/* Items */
#programma .timeline .timeline-list li {
  display: grid;
  gap: 8px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(20,89,72,0.1);
  position: relative;
  color: #0e2a25;
}

/* Groen randje links */
#programma .timeline .timeline-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 4px;
  background: #145948;
  opacity: .6;
}

/* Desktop layout */
@media (min-width: 900px) {
  #programma .timeline {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1200px;
    margin: 0 auto;
  }

  #programma .timeline .day {
    flex: 1 1 50%;
    max-width: 560px;
  }

  #programma .timeline .timeline-list li {
    grid-template-columns: 120px 1fr;
    align-items: start;
  }

  #programma .timeline .timeline-list li > .time {
    grid-column: 1;
    text-align: right;
  }

  #programma .timeline .timeline-list li > .badge,
  #programma .timeline .timeline-list li > p {
    grid-column: 2;
  }
}

/* Mobiel layout */
@media (max-width: 899.98px) {
  #programma .timeline .timeline-list li {
    grid-template-columns: 1fr;
  }

  #programma .timeline .timeline-list li > .time {
    text-align: left;
  }
}

/* Tijd (SocialGothic, vet) */
#programma .timeline .time {
  color: #0e2a25;
  font-family: 'SocialGothic', sans-serif;
  font-weight: 700;  /* vet */
  letter-spacing: .02em;
  display: block;
  font-size: 1.05rem;
}

/* ✅ Badge (SocialGothic, vet, groter, rood met witte tekst) */
#programma .timeline .badge {
  display: inline-block;
  font-size: 1.15rem;     /* groter */
  line-height: 1.1;
  font-family: 'SocialGothic', sans-serif;
  font-weight: 700;       /* vet */
  background: #741530;    /* kerstrood */
  color: #fff;
  padding: .35rem .8rem;
  border-radius: 999px;
  margin: 2px 0 4px 0;
  letter-spacing: .03em;
}

/* Tekst */
#programma .timeline p {
  margin: 0;
  color: #0e2a25;
  line-height: 1.55;
  font-weight: 400;
}

/* Extra spacing bij meerdere tijden */
#programma .timeline .timeline-list li .time + p {
  margin-bottom: 4px;
}

#programma .timeline .timeline-list li .time + p + .time {
  margin-top: 6px;
}

.news-article ul {
  padding-left: 1.4rem;     /* inspringing */
  margin-left: 0;           /* voorkomt dubbele inspringing */
  list-style: disc;         /* standaard bullets */
}

.news-article ul li {
  margin-bottom: .4rem;     /* mooie spacing tussen regels */
}

.gallery-day {
  width: 100%;
  margin: 50px 0 20px;
  padding: 14px 18px;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 14px;
  background: rgba(255,255,255,0.6);
}


/* =========================
   RESPONSIVE (GLOBAL)
========================= */
@media (max-width: 1200px){
  .sponsor-grid.five-up{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1024px){
  .site-header{ height: 85px; }
  .logo-img{ max-height: 70px; }
  main{ margin-top: 85px; }
}
@media (max-width: 980px){
  .sponsor-grid.four-up,
  .sponsor-grid.five-up{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .news-grid{ grid-template-columns: 1fr; }
  .news-card .cover img{ height: 220px; }
  .news-card.featured .cover img{ height: 240px; }
}
@media (max-width: 860px){
  .events-teaser-grid{ grid-template-columns: 1fr; }
  .photo-strip .strip{ grid-auto-columns: 70%; }
}
@media (max-width: 768px){
  .site-header{ height: 80px; }
  .logo-img{ max-height: 65px; }
  main{ margin-top: 80px; }
  .message{ font-size: 1.6em; }
  .beelden-gallery{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .event-logo{ width: 64px; height: 64px; }
  .event-cta{ justify-self: start; margin-top: 8px; }
  .event-title{ font-size: 1.35rem; }
}
@media (max-width: 480px){
  .site-header{ height: 75px; }
  .logo-img{ max-height: 60px; }
  main{ margin-top: 75px; }
  .message{ font-size: 1.4em; }
  .back-button{ font-size: 0.95em; }
  footer{ padding: 25px 15px; }
  footer .social-icons a{ font-size: 1.6em; margin: 0 10px; }
}
@media (max-width: 760px){
  .sponsor-grid.three-up,
  .sponsor-grid.four-up,
  .sponsor-grid.five-up{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px){
  .sponsor-grid.one-up,
  .sponsor-grid.three-up,
  .sponsor-grid.four-up,
  .sponsor-grid.five-up{
    grid-template-columns: 1fr; justify-items: stretch;
  }
  .sponsor-logo{ width: 100%; }
}

/* === Patch: color-block fixes & mobile news-cards === */

/* 1) Correctie bruin variabele */
.color-block.bruin{ background-color: var(--cb-bruin); color: #fff; }

/* 2) Ontbrekende varianten die elders al impliciet gebruikt worden */
.color-block.red{ background-color: var(--cb-red); color: #fff; }
.color-block.orange{ background-color: var(--orange); color: #fff; }

/* 3) Nieuwskaarten minder hoog op mobiel */
@media (max-width: 900px){
  .news-card{ min-height: unset; }
}