/* ==========================================================================
   Dorpsraad Sint Jansteen: stylesheet
   Design tokens en componenten, 1:1 overgenomen uit het definitieve ontwerp.
   Het prototype gebruikte inline styles; die zijn hier omgezet naar CSS-classes
   met custom properties (zoals de handoff voorschrijft).
   ========================================================================== */

/* ---------- Lettertype ----------
   Work Sans staat in assets/fonts en wordt van onze eigen server geladen.
   Bewust niet via Google Fonts: dan zou de browser van elke bezoeker contact
   maken met Google en daarbij zijn IP-adres afgeven. Nu verlaat er niets de
   site. Eén bestand per tekenset dekt alle diktes (variabele font, 400-800).
   Licentie: SIL Open Font License 1.1, zie assets/fonts/OFL.txt. */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/worksans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/worksans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Kleuren */
  --bg:            #f2f5f7;
  --surface:       #ffffff;
  --teal:          #2f6d82;
  --teal-dark:     #234f5f;
  --teal-darker:   #1a3a46;
  --tint:          #e2edf1;
  --amber:         #e0a24a;
  --amber-text:    #3a2708;
  --amber-dark:    #a9721c;
  --ink:           #1f2b31;
  --body:          #33414a;
  --muted:         #566169;
  --muted-2:       #7b858c;
  --border:        #e0e7ea;
  --border-strong: #dbe3e7;
  --photo:         #c3d6dd;
  --photo-icon:    #6f97a6;
  --footer-text:   #cfe0e6;
  --footer-accent: #f0c079;
  --footer-sub:    #7fa9b8;
  --focus:         #e0a24a;

  /* Vorm */
  --r-card:   14px;
  --r-band:   18px;
  --r-btn:    11px;
  --r-chip:   12px;
  --r-pill:   20px;

  --container: 1080px;
  --shadow-card: 0 14px 46px rgba(30,45,55,.16);

  /* Vaste header */
  --header-h: 84px;

  /* Zwevende contact-CTA */
  --cta-gap: 26px;
}

/* ---------- Reset / basis ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-padding-top: var(--header-h); }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg);
  font-family: 'Work Sans', sans-serif;
  color: var(--body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: var(--teal); }
a:hover { color: var(--teal-dark); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: rgba(47,109,130,.2); }

.container { max-width: var(--container); margin: 0 auto; }

/* Skip-link voor toegankelijkheid */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--teal); color: #fff; padding: 12px 20px;
  border-radius: 0 0 10px 0; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  transform: translateY(0);
  transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
/* Verborgen bij naar beneden scrollen; komt terug bij omhoog scrollen (zie site.js) */
.site-header--hidden { transform: translateY(-100%); }
.site-header__inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
}
/* Ruimte onder de vaste header zodat content er niet onder verdwijnt */
#main { padding-top: var(--header-h); flex: 1 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.brand__crest { height: 54px; width: auto; display: block; }
.brand__logo {
  width: 52px; height: 52px; border-radius: 14px; background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 19px;
}
.brand__name { display: block; font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.brand__sub  { display: block; font-size: 15px; color: var(--muted); font-weight: 600; }

.nav { display: flex; gap: 6px; align-items: center; }
.nav a {
  font-size: 17px; font-weight: 600; color: #33414a;
  text-decoration: none; padding: 11px 15px; border-radius: 9px;
}
.nav a:hover { color: var(--teal); }
.nav a[aria-current="page"],
.nav a.is-active {
  font-weight: 700; color: var(--teal); background: var(--tint);
}

/* Mobiele nav-toggle (op desktop is dit gewoon de container van de nav) */
.nav-toggle { display: flex; align-items: center; }
.nav-toggle input { display: none; }
.nav-toggle__btn {
  display: none;
  border: 2px solid var(--border-strong); background: #fff; color: var(--ink);
  font-size: 17px; font-weight: 700; border-radius: 10px;
  padding: 10px 16px; cursor: pointer; align-items: center; gap: 10px;
  min-height: 48px;
}

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; text-decoration: none; cursor: pointer;
  border-radius: var(--r-btn); border: none;
}
.btn--primary { background: var(--teal); color: #fff; font-size: 16px; padding: 13px 22px; min-height: 50px; }
.btn--primary:hover { background: var(--teal-dark); color: #fff; }
.btn--amber { background: var(--amber); color: var(--amber-text); font-size: 18px; padding: 16px 30px; min-height: 56px; }
.btn--amber:hover { background: #d0912f; color: var(--amber-text); }
.btn--white { background: #fff; color: var(--teal-dark); font-size: 18px; padding: 15px 28px; min-height: 54px; }
.btn--white:hover { color: var(--teal-dark); }
.btn--outline-white {
  background: rgba(255,255,255,.12); color: #fff; font-size: 18px;
  padding: 15px 26px; min-height: 54px; border: 2px solid rgba(255,255,255,.5);
}
.btn--outline-white:hover { color: #fff; background: rgba(255,255,255,.22); }
.btn--outline {
  background: transparent; color: var(--teal); font-size: 16px;
  padding: 11px 18px; border: 2px solid #bcd3dc;
}
.btn--outline:hover { color: var(--teal-dark); }

/* ---------- Badges & chips ---------- */
.badge-amber {
  display: inline-block; background: var(--amber); color: var(--amber-text);
  font-size: 14px; font-weight: 700; padding: 6px 14px; border-radius: var(--r-pill);
}
/* Als de badge naar het onderwerp linkt, blijft hij er hetzelfde uitzien. */
a.badge-amber { text-decoration: none; color: var(--amber-text); }
a.badge-amber:hover { background: var(--footer-accent); color: var(--amber-text); }
.chip {
  align-self: flex-start; background: var(--tint); color: var(--teal);
  font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 16px;
}

/* ---------- Fotoplaceholder ---------- */
.photo-ph {
  background: var(--photo);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--photo-icon); gap: 8px;
}
.photo-ph svg { opacity: .55; }
.photo-ph__label { font-size: 14px; font-weight: 600; padding: 0 8px; text-align: center; }

/* ---------- Secties ---------- */
.section { padding: 32px 40px; }
.section--tight { padding: 32px 40px 24px; }
.section--topics { padding: 36px 40px; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.section-head h2 { font-size: 26px; font-weight: 700; color: var(--ink); }
.section-title { font-size: 26px; font-weight: 700; color: var(--ink); margin-bottom: 18px; }
.link-more { font-size: 17px; font-weight: 700; color: var(--teal); text-decoration: none; white-space: nowrap; }

/* ---------- Hero (uitgelicht) ---------- */
.hero-wrap { padding: 32px 40px 8px; }
.hero {
  max-width: var(--container); margin: 0 auto; position: relative;
  border-radius: var(--r-band); overflow: hidden; min-height: 460px;
  background: var(--photo); display: flex; align-items: flex-end;
}
.hero__photo { position: absolute; inset: 0; }
.hero__overlay {
  position: absolute; inset: 0;
  /* Drie lagen, zodat de witte tekst leesbaar blijft op élke foto: een lichte
     sluier over het geheel, een sterk verloop onderaan waar de tekst staat en
     een verloop naar rechts, omdat de tekst links uitgelijnd is. Zonder deze
     lagen viel de titel weg tegen een lucht of een lichte gevel. */
  background:
    linear-gradient(to right, rgba(15,32,40,.45) 0%, rgba(15,32,40,.12) 60%, rgba(15,32,40,0) 100%),
    linear-gradient(to top, rgba(15,32,40,.90) 0%, rgba(15,32,40,.72) 38%, rgba(15,32,40,.42) 65%, rgba(15,32,40,.14) 90%),
    rgba(15,32,40,.22);
}
.hero__content { position: relative; z-index: 2; padding: 44px 48px; max-width: 760px; }
/* Bijschrift/rechten van de foto, klein rechtsonder in de hero. */
.hero__credit {
  position: absolute; right: 16px; bottom: 12px; z-index: 2;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.72);
}
.hero__content .badge-amber { margin-bottom: 16px; }
.hero__title { font-size: 38px; line-height: 1.05; font-weight: 700; color: #fff; }
.hero__intro { font-size: 19px; line-height: 1.55; color: #dfeaef; margin: 16px 0 24px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Recente berichten (post cards) ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card {
  text-decoration: none; color: inherit; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden;
  display: flex; flex-direction: column;
}
.post-card:hover { color: inherit; }
.post-card__thumb { height: 150px; }
.post-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-card__title { font-size: 20px; line-height: 1.2; font-weight: 700; color: var(--ink); margin-top: 12px; }
.post-card__date { font-size: 14px; color: var(--muted-2); font-weight: 600; margin: 8px 0 10px; }
.post-card__intro { font-size: 16px; line-height: 1.55; color: var(--muted); }
.read-more { margin-top: 14px; font-size: 16px; font-weight: 700; color: var(--teal); }
.post-card .chip { margin-bottom: 0; }
/* Onderwerp- en bronchip staan naast elkaar boven de titel. */
.post-card__chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Extern bericht: verwijst naar een artikel bij een krant of omroep. */
.chip--extern { background: var(--footer-accent); color: var(--amber-text); display: inline-flex; align-items: center; gap: 5px; }
/* Pijltje bij alles wat naar een andere website gaat. */
.icon-extern { width: 1em; height: 1em; flex: none; vertical-align: -.12em; }

/* ---------- Onderwerpen (pills) ---------- */
.topic-pills { display: flex; flex-wrap: wrap; gap: 14px; }
.topic-pill {
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border: 2px solid var(--border-strong);
  border-radius: var(--r-chip); padding: 14px 20px;
  font-size: 18px; font-weight: 700; color: var(--ink);
}
.topic-pill:hover { color: var(--ink); border-color: var(--teal); }
/* Het onderwerp waarop nu gefilterd wordt */
.topic-pill.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }
.topic-pill.is-active:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
.topic-pill.is-active .count-badge { background: rgba(255, 255, 255, .22); color: #fff; }
.count-badge {
  background: #eef3f5; color: var(--muted); font-size: 14px; font-weight: 700;
  padding: 2px 9px; border-radius: 12px;
}

/* ---------- Aankomende activiteiten (band) ---------- */
.band-wrap { padding: 44px 40px 20px; }
.band {
  max-width: var(--container); margin: 0 auto; background: var(--tint);
  border-radius: var(--r-band); padding: 40px 44px;
}
.band .section-head h2 { color: var(--teal-dark); }
.activity-list { display: flex; flex-direction: column; gap: 14px; }
.activity-row {
  display: flex; align-items: center; gap: 22px;
  background: var(--surface); border-radius: var(--r-chip); padding: 18px 22px;
}
.date-chip {
  flex-shrink: 0; width: 72px; text-align: center; background: var(--teal);
  color: #fff; border-radius: 10px; padding: 10px 0;
}
.date-chip__day { font-size: 26px; font-weight: 800; line-height: 1; }
.date-chip__mon { font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.activity-row__info { flex: 1; }
.activity-row__info h3 { font-size: 20px; font-weight: 700; color: var(--ink); }
.activity-row__info p { font-size: 16px; color: var(--muted); margin-top: 5px; }
.activity-row .btn--outline { flex-shrink: 0; border-radius: 9px; }

/* ---------- Peiling-CTA (donkere band) ---------- */
.cta-wrap { padding: 44px 40px; }
.cta-dark {
  max-width: var(--container); margin: 0 auto; background: var(--teal-dark);
  border-radius: var(--r-band); padding: 40px 44px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.cta-dark__text { flex: 1; min-width: 320px; }
.cta-dark__text h2 { font-size: 26px; font-weight: 700; color: #fff; }
.cta-dark__text p { font-size: 18px; color: var(--footer-text); margin-top: 10px; }
.cta-dark .btn--amber { flex-shrink: 0; }

/* ---------- Footer ---------- */
.site-footer { flex-shrink: 0; background: var(--teal-darker); color: var(--footer-text); padding: 52px 40px; }
.site-footer__grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px;
}
/* Merk: wapen links, naam gestapeld rechts, net als in de navbar */
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.footer-crest { height: 54px; width: auto; display: block; flex-shrink: 0; }
.footer-brand__name { display: block; font-size: 20px; font-weight: 700; color: #fff; line-height: 1.1; }
.footer-brand__sub  { display: block; font-size: 15px; font-weight: 600; color: var(--footer-sub); }
.footer-address { font-size: 17px; line-height: 1.7; }
.footer-address--mail { margin-top: 12px; }
.footer-accent { color: var(--footer-accent); text-decoration: none; font-weight: 600; }
.footer-accent:hover { color: var(--footer-accent); }
.footer-sub {
  font-size: 16px; font-weight: 700; color: var(--footer-sub);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; font-size: 17px; }
.footer-links a { color: var(--footer-text); text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-kvk { font-size: 15px; line-height: 1.6; color: var(--footer-sub); margin-top: 18px; }

/* Compacte footer (artikel/agenda/verslagen/peiling) */
.site-footer--compact { padding: 44px 40px; }
.site-footer--compact .site-footer__line {
  max-width: var(--container); margin: 0 auto; font-size: 16px;
  display: flex; align-items: center; gap: 14px;
}
.footer-crest--sm { height: 34px; margin-bottom: 0; flex-shrink: 0; }

/* ---------- Artikel ---------- */
.article-hero {
  position: relative; min-height: 440px; background: var(--photo);
  display: flex; align-items: center; justify-content: center; color: var(--photo-icon);
}
.article-hero__overlay {
  position: absolute; inset: 0;
  /* Zelfde aanpak als bij de hero op de homepagina; de tekst staat hier
     gecentreerd, dus zonder verloop naar één kant. */
  background:
    linear-gradient(to top, rgba(15,32,40,.90) 0%, rgba(15,32,40,.70) 40%, rgba(15,32,40,.36) 70%, rgba(15,32,40,.12) 92%),
    rgba(15,32,40,.24);
}
.article-hero__content { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px; max-width: 900px; margin: 0 auto; }
.article-hero__content .badge-amber { margin-bottom: 14px; font-size: 14px; padding: 5px 13px; border-radius: 16px; }
.article-hero__title { font-size: 40px; line-height: 1.05; font-weight: 700; color: #fff; }
.article-meta { font-size: 17px; color: #dfeaef; font-weight: 600; margin-top: 14px; }

.prose { max-width: 800px; margin: 0 auto; padding: 44px 40px 8px; font-size: 20px; line-height: 1.75; color: var(--body); }
.prose p { margin-bottom: 22px; }
.prose h2 { font-size: 26px; font-weight: 700; color: var(--ink); margin: 34px 0 16px; }
.prose h3 { font-size: 22px; font-weight: 700; color: var(--ink); margin: 28px 0 14px; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 26px; }
.prose li { margin-bottom: 8px; }
.prose a { text-decoration: underline; }

.gallery { max-width: 960px; margin: 20px auto 0; padding: 0 40px; }
.gallery h3 { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.photo-tile { height: 180px; border-radius: 12px; gap: 6px; }
.photo-tile svg { opacity: .6; }
.photo-tile .photo-ph__label { font-size: 12px; }

.related { max-width: 960px; margin: 48px auto 0; padding: 0 40px 56px; }
.related h3 { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 20px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related-card {
  text-decoration: none; color: inherit; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 20px;
}
.related-card__cat { font-size: 13px; font-weight: 700; color: var(--teal); }
.related-card h4 { font-size: 18px; line-height: 1.2; font-weight: 700; color: var(--ink); margin: 8px 0 6px; }
.related-card__date { font-size: 14px; color: var(--muted-2); font-weight: 600; }

/* ---------- Pagina-intro (agenda / verslagen / topics / contact) ---------- */
.page-intro { max-width: var(--container); margin: 0 auto; padding: 48px 40px 0; }
.page-intro h1 { font-size: 36px; line-height: 1.05; font-weight: 700; color: var(--ink); }
.page-intro p { font-size: 19px; color: var(--muted); margin-top: 10px; }
.page-intro--solo { padding-bottom: 64px; }
.page-body { max-width: var(--container); margin: 0 auto; padding: 28px 40px 64px; }
.page-body--narrow { max-width: 900px; }

/* ---------- Agenda ---------- */
.view-toggle { display: inline-flex; background: var(--tint); border-radius: 11px; padding: 5px; margin: 28px 0; gap: 4px; }
.view-toggle button {
  border: none; cursor: pointer; font-size: 17px; font-weight: 700;
  padding: 12px 26px; border-radius: 8px; background: transparent; color: var(--teal);
}
.view-toggle button.is-active { background: var(--teal); color: #fff; }

.agenda-list { display: flex; flex-direction: column; gap: 16px; }
.agenda-row {
  display: flex; align-items: center; gap: 24px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card); padding: 22px 26px;
}
.date-chip-lg {
  flex-shrink: 0; width: 88px; text-align: center; background: var(--tint);
  color: var(--teal); border-radius: 12px; padding: 14px 0;
}
.date-chip-lg__wd  { font-size: 13px; font-weight: 700; }
.date-chip-lg__day { font-size: 30px; font-weight: 800; line-height: 1.05; }
.date-chip-lg__mon { font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.agenda-row__info { flex: 1; }
.agenda-row__info h3 { font-size: 22px; font-weight: 700; color: var(--ink); }
.agenda-row__info p { font-size: 17px; color: var(--muted); margin-top: 6px; }
.agenda-row .btn--primary { flex-shrink: 0; }

.calendar-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px 30px; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.calendar-head h3 { font-size: 24px; font-weight: 700; color: var(--ink); }
.legend { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }
.legend__swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--teal); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-weekday { text-align: center; font-size: 14px; font-weight: 700; color: #8a8a80; padding-bottom: 6px; }
.cal-cell {
  height: 60px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; border-radius: 10px; color: var(--ink); font-weight: 500;
}
.cal-cell--empty { height: 60px; }
.cal-cell--event { background: var(--teal); color: #fff; font-weight: 800; }
.cal-cell--today { box-shadow: inset 0 0 0 2px var(--teal); font-weight: 800; }

/* Bladeren door de maanden */
.calendar-nav { display: inline-flex; align-items: center; gap: 14px; }
.calendar-nav h3 { min-width: 190px; text-align: center; }
.calendar-nav__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--tint); color: var(--teal);
  font-size: 19px; font-weight: 700; text-decoration: none;
}
.calendar-nav__btn:hover { background: var(--teal); color: #fff; }

/* ---------- Locatiekaartje bij een activiteit ---------- */
/* Eén hoogte voor het kaartje en voor de uitleg die er staat zolang het niet
   geladen is. Zo is het vlak even groot voor en na de klik en verspringt de
   pagina niet. De uitleg mag wel groeien als de tekst meer regels nodig heeft;
   site.js geeft het kaartje dan diezelfde hoogte mee. */
.event-map { --map-h: 400px; max-width: 800px; margin: 0 auto; padding: 8px 40px 12px; }
.event-map__title { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.event-map__address { color: var(--muted); margin-bottom: 14px; }
.event-map__frame {
  border: 1px solid var(--border); border-radius: var(--r-card);
  overflow: hidden; background: var(--tint); line-height: 0;
}
.event-map__frame iframe { width: 100%; height: var(--map-h); border: 0; display: block; }
.event-map__link { margin-top: 12px; }

/* Uitleg die op de plek van het kaartje staat zolang de bezoeker het niet
   heeft toegestaan. Even hoog als het kaartje zelf, zodat de pagina niet
   verspringt zodra het geladen wordt. */
.map-consent {
  min-height: var(--map-h);
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  gap: 14px;
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--tint);
  padding: 28px 30px;
}
.map-consent__title { font-size: 19px; font-weight: 700; color: var(--ink); }
.map-consent__text { font-size: 17px; color: var(--body); }
.map-consent__note { font-size: 15px; color: var(--muted-2); }
/* De alinea's vullen de volle breedte van het vlak; de knop staat in een eigen
   alinea en houdt zijn eigen maat, dus die blijft vanzelf links staan. */
.map-consent p { margin: 0; }

/* Keuze weer intrekken: een knop die eruitziet als een link, want hij hoort
   bij de tekst en niet bij de knoppen van de pagina. */
.event-map__withdraw { margin-top: 10px; }
.linklike {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 15px; color: var(--muted-2);
  text-decoration: underline; cursor: pointer;
}
.linklike:hover { color: var(--teal-dark); }

/* ---------- Verslagen ---------- */
.report-list { display: flex; flex-direction: column; gap: 14px; }
.report-row {
  text-decoration: none; color: inherit; display: flex; align-items: center; gap: 22px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 20px 24px;
}
.report-row:hover { color: inherit; }
.pdf-icon {
  flex-shrink: 0; width: 52px; height: 60px; background: #fbeed4;
  border: 2px solid var(--amber); border-radius: 8px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  font-size: 12px; font-weight: 800; color: var(--amber-dark);
}
.report-row__info { flex: 1; }
.report-row__info h3 { font-size: 20px; font-weight: 700; color: var(--ink); }
.report-row__info p { font-size: 16px; color: var(--muted-2); margin-top: 5px; }
.btn--download { flex-shrink: 0; }

/* Lege lijst: melding als er nog geen items zijn */
.page-empty {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 24px 26px;
  font-size: 18px; line-height: 1.7; color: var(--muted);
}

/* ---------- Archief: afgelopen peilingen ---------- */
.poll-archive { max-width: var(--container); margin: 0 auto; padding: 24px 40px 72px; }
.poll-archive__title { font-size: 26px; font-weight: 700; color: var(--ink); }
.poll-archive__count { font-size: 16px; color: var(--muted-2); margin-top: 6px; }
.poll-archive__card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 28px 30px; margin-top: 18px;
}
.poll-archive__question { font-size: 22px; font-weight: 700; color: var(--ink); }
.poll-archive__period { font-size: 16px; font-weight: 600; color: var(--teal); margin-top: 6px; }
.poll-archive__intro { font-size: 17px; color: var(--muted); margin-top: 10px; }
.poll-archive__results { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.poll-archive__result {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 2px solid #e0e6e0; border-radius: var(--r-chip); padding: 14px 20px;
}
.poll-archive__label { font-size: 18px; font-weight: 700; color: var(--ink); }
.poll-archive__figures { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; }
.poll-archive__votes { font-size: 15px; color: var(--muted-2); }
.poll-archive__pct { font-size: 18px; font-weight: 800; color: var(--teal); }
.poll-archive__total { font-size: 16px; color: var(--muted-2); margin-top: 18px; }

.poll-pager { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.poll-pager__pages { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.poll-pager__step, .poll-pager__page {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border-radius: 10px;
  font-size: 16px; font-weight: 700; text-decoration: none;
  background: var(--tint); color: var(--teal);
}
.poll-pager__page { min-width: 44px; padding: 0 12px; }
.poll-pager__step:hover, .poll-pager__page:hover { background: #d3e4ea; color: var(--teal-dark); }
.poll-pager__page.is-current { background: var(--teal); color: #fff; }
.poll-pager__step.is-disabled { background: transparent; color: var(--muted-2); }

/* ---------- Peiling ---------- */
.poll { max-width: var(--container); margin: 0 auto; padding: 56px 40px 24px; }
.poll .badge-amber { margin-bottom: 18px; }
.poll h1 { font-size: 34px; line-height: 1.05; font-weight: 700; color: var(--ink); }
.poll__intro { font-size: 18px; color: var(--muted); margin: 14px 0 10px; }
.poll__period { font-size: 16px; font-weight: 600; color: var(--teal); margin: 0 0 26px; }
.poll-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px 34px; }
.poll-options { display: flex; flex-direction: column; gap: 16px; }
.poll-option {
  position: relative; overflow: hidden; text-align: left; width: 100%;
  border: 2px solid #e0e6e0; background: #fff; border-radius: var(--r-chip);
  padding: 18px 22px; cursor: pointer;
  transition: border-color .15s, background .5s ease;
}
.poll-option__row { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.poll-option__label { font-size: 19px; font-weight: 700; color: var(--ink); }
.poll-option__pct { font-size: 19px; font-weight: 800; color: var(--teal); }
.poll-option.is-selected { border-color: var(--amber); }
.poll--voted .poll-option { cursor: default; }
.poll-hint { font-size: 16px; color: var(--muted-2); margin-top: 22px; }
.poll-total { font-size: 16px; color: var(--muted); margin-top: 22px; font-weight: 600; }

/* Contactblok */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.contact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 28px 30px; }
.contact-card h2 { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.contact-card p { font-size: 18px; line-height: 1.7; color: var(--body); }
.contact-card a { font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-size: 16px; font-weight: 700; color: var(--ink); }
.field input, .field textarea {
  font-family: inherit; font-size: 18px; color: var(--body);
  border: 2px solid var(--border-strong); border-radius: 10px; padding: 12px 14px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field--error input, .field--error textarea { border-color: #b3453b; }
.field__error { font-size: 15px; font-weight: 600; color: #b3453b; }

/* Spamval: onzichtbaar, maar niet display:none, want dat vullen sommige bots juist wel in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Melding boven het formulier */
.form-notice { border-radius: var(--r-btn); padding: 14px 18px; margin-bottom: 20px; font-size: 17px; }
.form-notice p { margin: 0; }
.form-notice--ok { background: var(--tint); border: 1px solid #bcd6df; color: var(--teal-darker); }
.form-notice--error { background: #fbeeec; border: 1px solid #eccbc6; color: #8d332b; }
.form-privacy { font-size: 14px; line-height: 1.6; color: var(--muted-2); margin: 2px 0 18px; }

/* ---------- Responsief ---------- */
@media (max-width: 900px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid, .related-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .site-header { padding: 0 20px; }
  .section, .hero-wrap, .band-wrap, .cta-wrap { padding-left: 20px; padding-right: 20px; }
  .page-intro, .page-body, .prose, .gallery, .related, .poll, .poll-archive { padding-left: 20px; padding-right: 20px; }

  /* Mobiele hamburger-navigatie */
  .nav-toggle__btn { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 84px; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 6px;
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 12px 20px 20px;
  }
  .nav a { font-size: 19px; padding: 14px 16px; min-height: 48px; display: flex; align-items: center; }
  .nav-toggle input { display: none; }
  .nav-toggle input:checked ~ .nav { display: flex; }
  .site-header__inner { position: relative; }
}
@media (max-width: 640px) {
  .post-grid, .photo-grid, .related-grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: 30px; }
  .article-hero__title { font-size: 30px; }
  .hero, .article-hero { min-height: 380px; }
  .hero__content { padding: 28px 24px; }
  .band, .cta-dark, .calendar-card, .poll-card { padding-left: 24px; padding-right: 24px; }
  .cta-dark__text { min-width: 0; }
  .activity-row, .agenda-row, .report-row { flex-wrap: wrap; }
  .cal-cell, .cal-cell--empty { height: 46px; font-size: 15px; }
  .calendar-head { flex-wrap: wrap; gap: 12px; }
  .calendar-nav h3 { min-width: 0; font-size: 20px; }
  /* Smaller scherm: de tekst loopt over meer regels, dus het vlak wordt hoger. */
  .event-map { --map-h: 460px; padding-left: 24px; padding-right: 24px; }
  .map-consent { padding: 22px 20px; }
}

/* ==========================================================================
   Zwevende contact-CTA + dialoogvenster
   Stijl 1:1 met bestaande componenten (tokens, radius, schaduw, kleuren).
   ========================================================================== */
.contact-cta {
  position: fixed; left: 50%; bottom: var(--cta-gap); z-index: 80;
  transform: translate(-50%, 0); /* horizontaal gecentreerd onderaan */
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
/* Ingeklapt: alleen de bovenste ~25% steekt boven de schermrand uit */
.contact-cta.is-peek { transform: translate(-50%, calc(75% + var(--cta-gap))); }
.contact-cta.is-revealed { transform: translate(-50%, 0); }
/* Volledig weggeparkeerd wanneer de footer in beeld is (nooit overlap) */
.contact-cta.is-parked { transform: translate(-50%, 200%); }

.cta-fab {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--teal); color: #fff;
  border: none; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 700;
  padding: 15px 24px; min-height: 56px;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  transition: background 200ms ease;
}
.cta-fab:hover { background: var(--teal-dark); }
.cta-fab__icon { width: 22px; height: 22px; flex-shrink: 0; }
/* Tekst-crossfade: labels gestapeld in één cel, container = breedste label */
.cta-fab__text { position: relative; display: grid; }
.cta-fab__label {
  grid-area: 1 / 1; white-space: nowrap;
  opacity: 0; transition: opacity 900ms ease-in-out;
}
.cta-fab__label.is-active { opacity: 1; }

/* Dialoog */
.cta-dialog {
  border: none; padding: 0; background: transparent;
  max-width: 460px; width: calc(100vw - 40px);
  color: var(--body);
}
.cta-dialog::backdrop { background: rgba(26, 58, 70, .55); }
.cta-dialog[open] { animation: ctaDialogIn 260ms cubic-bezier(0.16, 1, 0.3, 1); }
.cta-dialog[open]::backdrop { animation: ctaBackdropIn 260ms ease-out; }
@keyframes ctaDialogIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ctaBackdropIn { from { opacity: 0; } to { opacity: 1; } }

.cta-dialog__panel {
  position: relative; background: var(--surface);
  border-radius: var(--r-band); box-shadow: var(--shadow-card);
  padding: 32px 30px;
}
.cta-dialog__close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 999px;
  border: none; background: var(--tint); color: var(--teal-dark);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.cta-dialog__close:hover { background: #d3e3e8; }
.cta-dialog__title { font-size: 24px; font-weight: 700; color: var(--ink); padding-right: 44px; }
.cta-dialog__intro { font-size: 17px; line-height: 1.55; color: var(--muted); margin-top: 8px; margin-bottom: 22px; }

.cta-form__privacy { font-size: 14px; line-height: 1.6; color: var(--muted-2); margin: 2px 0 18px; }
.cta-form__privacy a { color: var(--teal); font-weight: 600; }
/* Zelfde pilvorm als de hoofd-CTA, met de teal-kleur van de bestaande knoppen */
.cta-form__submit { width: 100%; font-size: 18px; min-height: 54px; border-radius: 999px; }

.cta-form__success { text-align: center; padding: 14px 0 4px; }
.cta-form__success-icon {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 999px;
  background: var(--tint); color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center;
}
.cta-form__success p { font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 20px; }

.req { color: var(--amber-dark); }
.opt { color: var(--muted-2); font-weight: 500; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .contact-cta { transition: none; }
  .cta-fab__label { transition: none; }
  .cta-dialog[open], .cta-dialog[open]::backdrop { animation: none; }
}
@media (max-width: 640px) {
  .cta-fab { font-size: 16px; padding: 13px 20px; min-height: 52px; }
  .cta-dialog__panel { padding: 26px 20px; }
}