/* WTP publieke site. Kleuren en lettertypes naar de oude Wix-site. */
@font-face { font-family: 'Barrio'; src: url('/fonts/barrio-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Questrial'; src: url('/fonts/questrial-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Enriqueta'; src: url('/fonts/enriqueta-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Enriqueta'; src: url('/fonts/enriqueta-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* Kleuren van het thema. /thema.css (src/theme.js) zet hier de kleuren van het actieve thema
     overheen; dit zijn de kleuren van de oude site, voor als die stylesheet ontbreekt. */
  --t-primair: #014b3f;
  --t-secundair: #ffef98;
  --t-accent: #ff5e1a;
  --t-licht: #fbd3c0;
  --t-achtergrond: #fff6ef;
  --t-tekst: #1d0e03;
  --t-knoptekst: #fff;
  /* Wat de opmaak gebruikt. Een blok met een gekozen kleur (.kleur, onderaan) zet --vlak, --ink,
     --green, --orange en --knoptekst opnieuw; de afgeleide kleuren volgen dan vanzelf. */
  --cream: var(--t-achtergrond);
  --vlak: var(--t-achtergrond);
  --paper: #ffffff;
  --ink: var(--t-tekst);
  --green: var(--t-primair);
  --yellow-soft: var(--t-secundair);
  --orange: var(--t-accent);
  --knoptekst: var(--t-knoptekst);
  --peach: var(--t-licht);
  --radius: 14px;
  --wrap: 1120px;
  --serif: 'Enriqueta', Georgia, serif;
  --sans: 'Questrial', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 18px/1.65 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--orange-dark); }
h1, h2, h3 { font-family: var(--serif); line-height: 1.2; color: var(--green); margin: 0 0 .6em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--green); color: #fff; padding: .5em 1em; z-index: 10; }
.skip:focus { left: 1rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 780px; }

/* header */
.site-header { background: var(--cream); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; transition: transform .25s ease; }
.site-header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.brand { text-decoration: none; color: var(--green); display: flex; flex-direction: column; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 1.45rem; line-height: 1.1; }
.brand-tag { font-size: .85rem; color: var(--ink-soft); }
.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.nav a { display: block; padding: .4em .8em; border-radius: 999px; text-decoration: none; color: var(--ink); }
.nav a:hover { background: var(--peach); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--green); color: var(--cream); }

/* secties */
.band { padding: clamp(48px, 7vw, 88px) 0; }
.band-accent { background: var(--peach); }
.band-soft { background: var(--yellow-soft); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.section-head h2 { margin: 0; }
.lead { font-size: 1.25rem; color: var(--ink-soft); }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.split-top { align-items: start; }
.split-img img { max-height: 440px; width: auto; margin: 0 auto; }
.split-img img.rounded { border-radius: var(--radius); }
.split-flip > .split-img { order: -1; }
.split-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }

.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.4em; }
.prose h3 { margin-top: 1.3em; }
.prose > :first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .3em; }

/* hero */
/* Hoogte max. 2/3 van de breedte (foto is 3:2): dan wordt de foto nooit aan de zijkanten
   afgesneden en blijft de kat op dezelfde plek. */
.hero { position: relative; min-height: min(78vh, 680px, 66vw); display: flex; align-items: flex-end; padding: 0 0 56px; overflow: hidden; background: var(--green); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; }
.hero .wrap { position: relative; width: 100%; }
/* De kat begint op ~46% van de schermbreedte. De rechterrand van het kader blijft op 41vw:
   breedte = 41vw min de linkermarge van .wrap (20px, of meer als het scherm breder is dan 1120px). */
.hero-card { background: var(--cream); border-radius: var(--radius); padding: clamp(22px, 3vw, 40px);
  max-width: min(520px, calc(41vw - max(20px, (100vw - var(--wrap)) / 2 + 20px))); box-shadow: 0 10px 40px rgba(29, 14, 3, .18); }
@media (max-width: 1100px) { .hero-card { font-size: .95rem; } .hero-card h1 { font-size: 2rem; } }
.hero-card p:last-child { margin-bottom: 0; }
.hero.no-img { min-height: 0; padding-top: 56px; }

/* knoppen */
.btn { display: inline-block; background: var(--orange); color: var(--knoptekst); font: inherit; font-weight: 600; padding: .7em 1.4em; border-radius: 999px; border: 2px solid var(--orange); text-decoration: none; cursor: pointer; transition: background .15s; }
.btn:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: var(--knoptekst); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--vlak); border-color: var(--ink); }

/* berichtkaarten */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.card a { display: flex; flex-direction: column; height: 100%; background: var(--paper); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(29, 14, 3, .08); transition: transform .15s, box-shadow .15s; }
.card a:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(29, 14, 3, .14); color: inherit; }
.card-img { aspect-ratio: 3 / 2; background: var(--yellow-soft); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-noimg { width: 100%; height: 100%; background: linear-gradient(135deg, var(--peach), var(--yellow-soft)); }
.card-body { padding: 18px 20px 22px; }
.card-body time { font-size: .85rem; color: var(--muted); }
.card-body h3 { margin: .2em 0 .4em; }
.card-body p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* bericht */
.back { margin-bottom: 1.5rem; }
.meta { color: var(--muted); margin-top: -.6em; }
.figure { margin: 1.5rem 0; }
.figure img { border-radius: var(--radius); width: 100%; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 2rem; }
.gallery.single { grid-template-columns: 1fr; }
.gallery figure { margin: 0; }
.gallery img { border-radius: 10px; width: 100%; }
.gallery:not(.single) img { aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { font-size: .9rem; color: var(--ink-soft); margin-top: .4em; }

/* obligaties */
.facts { background: var(--paper); border-radius: var(--radius); padding: 26px 28px; border-top: 6px solid var(--orange); position: sticky; top: 100px; }
.facts h2 { font-size: 1.35rem; }
.facts ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.facts li { padding: .45em 0; border-bottom: 1px solid var(--line); }
.docs { list-style: none; padding: 0; margin: 0; }
.docs li { padding: .3em 0; }
.docs a::before { content: '📄 '; }
.afm-banner { margin-top: 2rem; }
.afm-banner img { margin: 0 auto; }
.donate-imgs { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; }
.qr { background: #fff; padding: 12px; border-radius: var(--radius); }
.qr img { width: 200px; }
.drawing { width: 220px; }

/* over ons */
.network { display: grid; gap: 2rem; }
.logos { list-style: none; padding: 0; margin: 0; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.logos img { height: 110px; width: auto; }

/* formulieren */
.form { margin-top: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.field { margin: 0 0 1.1rem; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { display: block; font-weight: 600; margin-bottom: .3rem; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=number], .field textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .7em .85em; border: 1.5px solid #cdbfb3; border-radius: 10px; background: #fff; color: var(--t-tekst);
}
.field input:focus, .field textarea:focus { border-color: var(--green); outline: 2px solid var(--green); outline-offset: 0; }
.field .hint { display: block; color: var(--muted); font-size: .88rem; margin-top: .25rem; font-weight: 400; }
.has-error input, .has-error textarea { border-color: #b3261e; }
.err { display: block; color: #b3261e; font-size: .9rem; margin-top: .25rem; }
.req { color: var(--orange-dark); }
.choice { display: flex !important; gap: .6em; align-items: flex-start; font-weight: 400 !important; margin: .4em 0; cursor: pointer; }
.choice input { margin-top: .35em; width: 1.1em; height: 1.1em; accent-color: var(--green); flex: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { background: var(--paper); border-left: 5px solid var(--orange); padding: 14px 18px; border-radius: 8px; }
.notice.success { border-color: var(--green); background: #fff; }
.notice.error { border-color: #b3261e; }
.notice p:last-child { margin: 0; }

/* voorbeeld van een verborgen pagina (alleen beheerders) */
.preview-bar { margin: 0; padding: 10px 20px; background: #fff1d6; color: #7a4b00; text-align: center; font-size: .95rem; }

/* formulieren die beheerders samenstellen: twee kolommen, 'heel' beslaat beide */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid fieldset.field { margin-bottom: 1.1rem; }
.form-grid legend { font-weight: 600; margin-bottom: .3rem; }
.field input[type=date] { width: 100%; font: inherit; font-size: 1rem; padding: .65em .85em; border: 1.5px solid #cdbfb3; border-radius: 10px; background: #fff; color: var(--t-tekst); }
@media (max-width: 800px) { .form-grid { grid-template-columns: 1fr; } }

/* footer */
.site-footer { background: var(--t-primair); color: var(--t-achtergrond); padding: 44px 0; font-size: .95rem; }
.site-footer a { color: inherit; }
.footer-inner { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer-nav { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; }

@media (max-width: 800px) {
  body { font-size: 17px; }
  .split { grid-template-columns: 1fr; }
  .split-flip > .split-img { order: 0; }
  .split-img img { max-height: 320px; }
  .facts { position: static; }
  .grid-2 { grid-template-columns: 1fr; }
  .nav a { padding: .3em .65em; font-size: .95rem; }
  .hero { min-height: 0; padding: 0; flex-direction: column; background: var(--cream); }
  .hero-img { position: static; height: 46vh; min-height: 260px; }
  .hero .wrap { padding: 0; }
  .hero-card { border-radius: 0; box-shadow: none; max-width: none; padding: 28px 20px 8px; }
}
.prose + .logos { margin-top: 1.5rem; }

/* foto in een blok: plaats en grootte (migratie 006) */
.split-klein { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
.split-klein.split-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
.split-groot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.split-groot.split-flip { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split-groot .split-img img { max-height: 620px; }
.split-klein .split-img img { max-height: 300px; }
.figure.fig-klein { max-width: 340px; margin-left: auto; margin-right: auto; }
.figure.fig-middel { max-width: 560px; margin-left: auto; margin-right: auto; }
.figure.fig-groot { max-width: none; }
.prose.wraps { max-width: none; }
.prose.wraps::after { content: ''; display: table; clear: both; }
.float { margin: .35rem 0 1rem; }
.float img { width: 100%; border-radius: var(--radius); }
.float-links { float: left; margin-right: 1.6rem; }
.float-rechts { float: right; margin-left: 1.6rem; }
.float-klein { width: 30%; }
.float-middel { width: 42%; }
.float-groot { width: 55%; }
.band-photo { position: relative; overflow: hidden; background: var(--green); padding: clamp(70px, 10vw, 130px) 0; }
.band-photo-klein { padding: clamp(40px, 6vw, 70px) 0; }
.band-photo-groot { padding: clamp(110px, 16vw, 220px) 0; }
.band-photo .bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-photo .wrap { position: relative; }
.bg-card { background: var(--cream); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); max-width: 580px;
  box-shadow: 0 10px 40px rgba(29, 14, 3, .22); }
.bg-card > :last-child { margin-bottom: 0; }
@media (max-width: 800px) {
  .split-klein, .split-klein.split-flip, .split-groot, .split-groot.split-flip { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .float, .float-links, .float-rechts { float: none; width: 100%; margin: 0 0 1rem; }
}
/* staande foto's boven/onder de tekst niet hoger dan het scherm */
.figure.fig-klein img, .figure.fig-middel img, .figure.fig-groot img { width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
.figure.fig-klein img { max-height: 320px; }
.figure.fig-middel img { max-height: min(520px, 70vh); }
.figure.fig-groot img { max-height: 85vh; }

/* homepagina: pagina's met "toon inleiding op de homepagina", in de indeling van hun inleiding */
.teaser-title { color: inherit; text-decoration: none; }
.teaser-title:hover { color: var(--orange-dark); }

/* ruimte rond een foto (media_padding), in procenten van de breedte */
.pad-5 { padding: 5%; }
.pad-10 { padding: 10%; }
.pad-15 { padding: 15%; }
.pad-20 { padding: 20%; }
.pad-25 { padding: 25%; }
.pad-30 { padding: 30%; }
.figure[class*="pad-"], .float[class*="pad-"] { box-sizing: border-box; }
.preview-bar.draft { background: #ffef98; color: var(--green); }

/* grootte als percentage van de PAGINAbreedte (media_size = procent). De pagina is de inhoud van
   .wrap: max. 1120px min 2x 20px zijrand = 1080px, op kleine schermen de schermbreedte min de randen.
   --wv komt uit wv-<n>. Geldt op elk scherm: wie een percentage kiest, krijgt dat percentage. */
:root { --page: min(100vw - 40px, 1080px); }
html, body { overflow-x: clip; }
.wv-10 { --wv: calc(var(--page) * 0.1); }
.wv-15 { --wv: calc(var(--page) * 0.15); }
.wv-20 { --wv: calc(var(--page) * 0.2); }
.wv-25 { --wv: calc(var(--page) * 0.25); }
.wv-30 { --wv: calc(var(--page) * 0.3); }
.wv-35 { --wv: calc(var(--page) * 0.35); }
.wv-40 { --wv: calc(var(--page) * 0.4); }
.wv-45 { --wv: calc(var(--page) * 0.45); }
.wv-50 { --wv: calc(var(--page) * 0.5); }
.wv-55 { --wv: calc(var(--page) * 0.55); }
.wv-60 { --wv: calc(var(--page) * 0.6); }
.wv-65 { --wv: calc(var(--page) * 0.65); }
.wv-70 { --wv: calc(var(--page) * 0.7); }
.wv-75 { --wv: calc(var(--page) * 0.75); }
.wv-80 { --wv: calc(var(--page) * 0.8); }
.wv-85 { --wv: calc(var(--page) * 0.85); }
.wv-90 { --wv: calc(var(--page) * 0.9); }
.wv-95 { --wv: calc(var(--page) * 0.95); }
.wv-100 { --wv: calc(var(--page) * 1); }
.split.wv { grid-template-columns: minmax(0, 1fr) min(var(--wv), calc(100% - 3rem)); }
.split.wv.split-flip { grid-template-columns: min(var(--wv), calc(100% - 3rem)) minmax(0, 1fr); }
.split.wv .split-img img { max-height: none; width: 100%; }
.float.wv { width: min(var(--wv), 100%); }
/* boven/onder en afbeeldingblok: zo breed als gekozen, ook breder dan de smalle tekstkolom */
.figure.wv { width: var(--wv); max-width: none; position: relative; left: 50%; transform: translateX(-50%); }
.figure.wv img { width: 100%; max-height: 100vh; object-fit: cover; }
@media (max-width: 800px) {
  /* de gewone indeling stapelt op kleine schermen; met een gekozen percentage niet */
  .split.wv { grid-template-columns: minmax(0, 1fr) min(var(--wv), calc(100% - 3rem)); gap: 16px; }
  .split.wv.split-flip { grid-template-columns: min(var(--wv), calc(100% - 3rem)) minmax(0, 1fr); }
  .split.wv.split-flip > .split-img { order: -1; }
  .split.wv { align-items: start; }   /* foto bovenaan naast de tekst, niet halverwege */
}
@media (max-width: 640px) {
  .float.wv { width: min(var(--wv), 100%); }
  .float.wv.float-links { float: left; margin: .3rem 1rem .8rem 0; }
  .float.wv.float-rechts { float: right; margin: .3rem 0 .8rem 1rem; }
}

/* meerdere foto's in een tekstblok */
.photo-stack { display: grid; gap: 14px; }
.photo-stack img { width: 100%; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; border-radius: 10px; }
.figure .photo-grid img { max-height: none; }
.split-img .photo-stack img { max-height: none; }
.bg-card h1 { margin-bottom: .4em; }

/* Foto "in de tekst": nooit breder dan 45% van de tekstkolom, zodat er altijd genoeg ruimte voor
   tekst overblijft (ook bij een groot percentage van de pagina). Op telefoon zonder percentage
   staat de foto gewoon boven de tekst. */
.float { max-width: 45%; }
@media (max-width: 640px) { .float:not(.wv) { max-width: none; } }

/* Sitenaam zoals op de oude site: speels lettertype (Barrio) in donkergroen op een oranje label. */
.brand { gap: 4px; }
.brand-name { font-family: 'Barrio', var(--serif); font-weight: 400; font-size: clamp(1.35rem, 5.4vw, 2.2rem); line-height: 1.05;
  color: var(--t-primair); background: var(--t-accent); padding: .06em .3em .02em; align-self: flex-start; white-space: nowrap; }
.brand:hover .brand-name { color: var(--t-tekst); }

/* In beeld schuiven bij scrollen (site.js zet .reveal, .reveal-item of .reveal-photo en daarna
   .is-in). Blokken komen omhoog en hun titel beweegt een fractie later mee; kaartjes en foto's
   doen dat elk apart. Met translate/scale in plaats van transform, zodat bestaande transforms
   (.figure.wv, hover op .card) blijven werken. */
.reveal, .reveal-item, .reveal-photo, .reveal :is(h1, h2) { --ease: cubic-bezier(.2, .7, .2, 1); opacity: 0; }
.reveal { translate: 0 36px; transition: opacity .7s ease, translate .9s var(--ease); }
.reveal :is(h1, h2) { translate: 0 .6em; transition: opacity .7s ease .12s, translate 1s var(--ease) .12s; }
.reveal-item { translate: 0 28px; transition: opacity .6s ease, translate .8s var(--ease); }
.reveal-photo { scale: .94; transition: opacity .8s ease, scale 1.1s var(--ease); }
.reveal.is-in, .reveal.is-in :is(h1, h2), .reveal-item.is-in, .reveal-photo.is-in { opacity: 1; translate: none; scale: none; }
@media print { :is(.reveal, .reveal-item, .reveal-photo), .reveal * { opacity: 1 !important; translate: none !important; scale: none !important; } }

/* Kleuren die van de andere afhangen. Op :root, op elk gekleurd blok en op de witte/lichte vlakken
   daarin opnieuw uitrekenen, want een custom property erft als vaste waarde. */
:root, .kleur, .kleur :is(.card a, .notice, .facts, .qr) {
  --orange-dark: color-mix(in srgb, var(--orange) 78%, #000);
  --ink-soft: color-mix(in srgb, var(--ink) 72%, var(--vlak));
  --muted: color-mix(in srgb, var(--ink) 50%, var(--vlak));
  --line: color-mix(in srgb, var(--ink) 10%, var(--vlak));
}

/* Blok of strook met een gekozen kleur (src/theme.js: .kleur-<rol> of .kleur-x<hex> in /thema.css
   zet --vlak en de leesbare tekst-, kop- en knopkleur). Staat onderaan, zodat het wint van
   .band-soft, .site-header, .hero-card enz. */
.kleur { background: var(--vlak); color: var(--ink); }
/* witte kaartjes en meldingen in een gekleurd blok houden de gewone kleuren */
.kleur :is(.card a, .notice, .facts, .qr) { --vlak: var(--paper); --ink: var(--t-tekst); --green: var(--t-primair);
  --orange: var(--t-accent); --knoptekst: var(--t-knoptekst); color: var(--ink); }
.kleur .nav a:hover { color: var(--t-tekst); }
.kleur .nav a[aria-current="page"] { background: var(--green); color: var(--vlak); }
/* foto als achtergrond: de kleur gaat naar de kaart op de foto */
.band-photo.kleur .bg-card { background: var(--vlak); }