/* ============================================================
   Zunnebeke.be — dorpsbulletin
   White ground, banded layout in the spirit of a municipal
   portal (quick links up top, a tinted band for the modules) —
   but built with our own voice: Fraunces for character, poppy
   red as the one loud colour, hedgerow green and wheat gold
   as quiet company, not another blue/teal government clone.
   ============================================================ */

:root{
  --bg:         #ffffff;
  --tint:       #f5f2ea;
  --tint-2:     #efe9d9;
  --card:       #ffffff;
  --ink:        #26201a;
  --ink-2:      #6c6150;
  --ink-3:      #5f5340;  /* WCAG AA: >=6:1 on white/tint, keep any new token checked */
  --line:       rgba(42,35,24,.15);
  --line-soft:  rgba(42,35,24,.09);

  --poppy:      #EE9C16;
  --poppy-deep: #29313C;
  --poppy-soft: #FEF3E6;

  --field:      #4c6a45;
  --field-soft: #dfe9d6;

  --wheat:      #b9852b;
  --wheat-soft: #f1e2bf;

  --sky:        #4f7089;
  --sky-soft:   #dbe6ea;

  /* Flemish waste-fraction colours — recognisable at a glance,
     matched to the real bag/container colours. Ready for BUILD.md Phase 4. */
  --waste-rest:   #504a42;
  --waste-pmd:    #2f6fb0;
  --waste-gft:    #4c6a45;
  --waste-papier: #93672f;
  --waste-glas:   #2e7d5b;

  /* Severe traffic hindrance (road closed): the one red on the site */
  --warn:       #b3261e;

  --radius:     11px;
  --radius-lg:  16px;
  --shadow-1:   0 1px 2px rgba(42,35,24,.05);
  --shadow-2:   0 12px 28px -14px rgba(42,35,24,.22);
  --ease:       cubic-bezier(.22,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:'Karla',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  position:relative;
}

a{color:var(--poppy-deep);text-decoration-color:rgba(140,42,32,.35);text-underline-offset:2px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px}

.container{max-width:1080px;margin:0 auto;padding:0 1.35rem}

h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.01em}

/* ── Decorative motif ──────────────────────────────── */
.poppy-motif{
  position:absolute;top:-30px;right:-60px;z-index:0;pointer-events:none;
  color:var(--poppy);opacity:.05;
  transform:rotate(12deg);
}
@media(max-width:640px){ .poppy-motif{ width:220px;height:220px;top:-15px;right:-70px } }

/* ── Masthead ─────────────────────────────────────── */
.site-head{position:relative;z-index:5;padding:2.4rem 0 1.1rem}
/* Logo and tagline left, the weather widget right (stacked under 760px). */
.head-inner{display:flex;align-items:center;gap:1.5rem}
.head-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5rem}

.masthead-line{
  font-family:'Karla',sans-serif;font-size:.76rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);
  animation:riseIn .5s var(--ease) both;
}
.masthead-sep{margin:0 .5rem;color:var(--ink-3)}
.masthead-tag{color:var(--poppy-deep)}

.brand{display:inline-block;line-height:0;animation:riseIn .6s .06s var(--ease) both}
/* Stacked logo (mark above the wordmark, 500×227) — needs more height than the old horizontal one */
.brand-logo{display:block;height:clamp(72px,12vw,110px);width:auto;max-width:100%}

.brand-sub{
  color:var(--ink-2);font-size:.96rem;max-width:38rem;margin-top:.6rem;
  animation:riseIn .6s .12s var(--ease) both;
}

@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── Quick links — "snel naar", the practical stuff people
   actually came for: recyclage, wachtapotheek, noodnummers. ── */
.quick-links{position:relative;z-index:1;padding:.3rem 0 1.9rem}
.quick-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:1.3rem 0;
}
.quick-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.4rem;border-radius:10px;
  text-decoration:none;color:var(--ink);
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.quick-item:hover{background:var(--tint);transform:translateY(-1px);text-decoration:none}
.quick-icon{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--tint);color:var(--poppy-deep);
}
.quick-item:nth-child(1) .quick-icon{color:var(--wheat);background:var(--wheat-soft)}
.quick-item:nth-child(2) .quick-icon{color:var(--poppy-deep);background:var(--poppy-soft)}
.quick-item:nth-child(3) .quick-icon{color:var(--wheat);background:var(--wheat-soft)}
.quick-item:nth-child(4) .quick-icon{color:var(--poppy-deep);background:var(--poppy-soft)}
.quick-label{font-size:.88rem;font-weight:600;line-height:1.3}
.quick-label small{display:block;font-size:.74rem;font-weight:500;color:var(--ink-2);margin-top:.05rem}

/* Police & emergency: one number per line, each its own tap-to-call link */
.quick-phones small a{color:var(--ink-2);text-decoration:none}
.quick-phones small a strong{color:var(--ink);font-weight:700}
.quick-phones small a:hover{color:var(--poppy-deep)}
.quick-phones small a:hover strong{color:var(--poppy-deep);text-decoration:underline;text-underline-offset:2px}

/* Placeholder until a link is chosen: muted, and no hover so it does not look clickable */
.quick-soon{cursor:default}
.quick-soon:hover{background:none;transform:none}
.quick-soon .quick-label{color:var(--ink-2)}
.quick-soon .quick-label small{font-style:italic}

/* ── Deelgemeente filter ──────────────────────────── */
.dg-bar{position:relative;z-index:1;padding:0 0 1.6rem}
.dg-inner{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
.dg-label{font-size:.78rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-right:.3rem}
.dg-chip{
  padding:.4rem 1.05rem;border-radius:100px;
  border:1.5px solid var(--line);
  background:var(--bg);
  color:var(--ink-2);
  font-size:.85rem;font-weight:600;
  text-decoration:none;
  transition:border-color .18s var(--ease),color .18s var(--ease),
             background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.dg-chip:hover{color:var(--ink);border-color:var(--poppy);text-decoration:none;transform:translateY(-1px)}
.dg-chip.on{
  color:#fdf6ee;border-color:var(--poppy);background:var(--poppy);
  box-shadow:var(--shadow-1);
}

/* ── Module band — the tinted section that groups afval,
   agenda, nieuws, weer and overlijden, the way a portal groups
   its content clusters against a light band. ── */
.module-band{position:relative;z-index:1;background:#f8f8f8;padding:2.1rem 0 2.4rem}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.6rem;
  margin-bottom:1.35rem;
  box-shadow:var(--shadow-1);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}

.accent-wheat{border-top-color:transparent}
.accent-field{border-top-color:transparent}
.accent-sky{border-top-color:transparent}
.accent-poppy{border-top-color:transparent}
.card.sober{border-top-color:transparent;background:#f8f8f8;box-shadow:none}
.card.sober:hover{transform:none;box-shadow:none}

.card-head{
  display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;
  justify-content:space-between;
  margin-bottom:1.15rem;
}
.card-head h2{font-size:1.12rem;font-weight:600;margin-right:auto}
.card-icon{
  display:inline-flex;color:var(--poppy-deep);flex-shrink:0;
  order:-1;margin-right:-.25rem;
}
.accent-wheat .card-icon{color:var(--wheat)}
.accent-field .card-icon{color:var(--wheat)}
.accent-sky .card-icon{color:var(--wheat)}
.accent-poppy .card-icon{color:var(--poppy)}

.card-src{
  font-size:.78rem;font-weight:600;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap;
}
.card-src a{color:var(--ink-2);text-decoration:none;border-bottom:1px dotted var(--ink-3)}
.card-src a:hover{color:var(--poppy-deep);border-color:var(--poppy-deep)}

/* Reveal-on-scroll, staggered by position among siblings */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.on{opacity:1;transform:translateY(0)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem;align-items:start}
.grid-2 .card{margin-bottom:1.35rem}

.empty{color:var(--ink-2);font-size:.96rem}
.empty small{color:var(--ink-3);font-size:.87rem}

/* ── Weer ─────────────────────────────────────────────
   A compact button beside the logo — current temperature, sky and
   today's range — that opens a modal with the details, the next hours
   and seven days (templates/weather-modal.php, a native <dialog>).
   Without JS the button is a link to the same details, shown as a
   section at the end of the page (<noscript> block in header.php). */
.wx-widget{flex-shrink:0;animation:riseIn .6s .18s var(--ease) both}
.wx-toggle{
  display:flex;flex-direction:column;gap:.55rem;
  padding:.85rem 1.1rem .75rem;min-width:13.5rem;
  color:var(--ink);text-decoration:none;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);
}
.wx-toggle:hover{border-color:var(--poppy);box-shadow:var(--shadow-2);transform:translateY(-1px);text-decoration:none}

.wx-now{display:flex;align-items:center;gap:.8rem}
.wx-now-icon{color:var(--wheat);flex-shrink:0;line-height:0}
.wx-icon.wx-regen{color:var(--sky)}
.wx-icon.wx-onweer{color:var(--poppy-deep)}
.wx-icon.wx-bewolkt,.wx-icon.wx-mist,.wx-icon.wx-halfbewolkt{color:var(--ink-2)}
.wx-icon.wx-sneeuw{color:#5f7688}

.wx-now-main{display:flex;flex-direction:column;line-height:1.2}
.wx-temp{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:1.75rem;line-height:1.05;letter-spacing:-.01em;color:var(--ink);
}
.wx-temp span{font-family:'Karla',sans-serif;font-size:.85rem;font-weight:500;color:var(--ink-2);margin-left:.1rem}
.wx-text{color:var(--ink);font-size:.85rem;font-weight:600}
.wx-range{color:var(--ink-3);font-size:.75rem}

.wx-more{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:.5rem;border-top:1px solid var(--line-soft);
  font-size:.75rem;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em;
}
.wx-toggle:hover .wx-more{color:var(--poppy-deep)}

/* The modal */
.wx-modal{
  width:min(42rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);
  margin:auto;padding:0;overflow:auto;
  color:var(--ink);background:var(--card);
  border:0;border-radius:var(--radius-lg);
  box-shadow:0 30px 70px -25px rgba(38,32,26,.5);
}
.wx-modal[open]{animation:wxIn .32s var(--ease)}
.wx-modal::backdrop{background:rgba(38,32,26,.45);backdrop-filter:blur(3px);animation:wxFade .32s var(--ease)}
@keyframes wxIn{from{opacity:0;transform:translateY(14px) scale(.98)}}
@keyframes wxFade{from{opacity:0}}
html:has(.wx-modal[open]){overflow:hidden}   /* no page scroll behind the modal */

.wx-modal-inner{padding:1.4rem 1.6rem 1.2rem}
.wx-modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.wx-modal-head h2{font-size:1.3rem}
.wx-close{
  display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;
  color:var(--ink-2);background:var(--tint);border:0;border-radius:50%;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.wx-close:hover{background:var(--poppy-soft);color:var(--poppy-deep)}

.wx-hero{
  display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;
  padding:1.1rem 1.2rem;background:var(--tint);border-radius:var(--radius);
}
.wx-hero-now{display:flex;align-items:center;gap:.9rem}
.wx-hero-icon{color:var(--wheat);line-height:0}
.wx-hero-temp{font-family:'Fraunces',Georgia,serif;font-size:3rem;font-weight:600;line-height:1;letter-spacing:-.02em}
.wx-hero-temp span{font-family:'Karla',sans-serif;font-size:1.1rem;font-weight:500;color:var(--ink-2);margin-left:.15rem}
.wx-hero-text{font-weight:700;margin-top:.25rem}
.wx-hero-feels{font-size:.85rem;color:var(--ink-2)}

.wx-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem 1.2rem}
.wx-stats dt{font-size:.66rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.wx-stats dd{font-size:.92rem;font-weight:700;line-height:1.3}
.wx-stats small{display:block;font-size:.74rem;font-weight:500;color:var(--ink-2)}

.wx-sub{
  margin:1.3rem 0 .5rem;font-family:'Karla',sans-serif;
  font-size:.72rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;
}

/* Next hours: one row, scrolls sideways on a narrow screen */
.wx-hours{list-style:none;display:flex;gap:.25rem;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:thin}
.wx-hours li{
  flex:1 0 3.4rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;
  padding:.5rem .2rem;border-radius:10px;text-align:center;
}
.wx-hours li:first-child{background:var(--wheat-soft)}
.wx-hour-time{font-size:.72rem;font-weight:700;color:var(--ink-2)}
.wx-hours strong{font-size:.95rem}
.wx-hour-rain{font-size:.7rem;font-weight:600;color:var(--sky)}

/* Seven days: day, icon, sky, rain, min — bar — max */
.wx-week{list-style:none}
.wx-week li{
  display:grid;grid-template-columns:5.6rem 1.6rem 1fr 4.6rem 2rem 5rem 2rem;
  align-items:center;gap:.6rem;padding:.5rem 0;border-top:1px solid var(--line-soft);
}
.wx-week-day{font-size:.88rem;font-weight:700}
.wx-week-text{font-size:.85rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-week-rain{font-size:.78rem;font-weight:600;color:var(--sky);text-align:right;line-height:1.2}
.wx-week-rain small{display:block;font-weight:500;color:var(--ink-3)}
.wx-week-min{font-size:.85rem;color:var(--ink-3);text-align:right}
.wx-week-max{font-size:.88rem;font-weight:700}
.wx-week-bar{position:relative;height:6px;border-radius:3px;background:var(--line-soft)}
.wx-week-bar i{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,var(--sky),var(--wheat))}

.wx-src{margin-top:1rem;font-size:.72rem;color:var(--ink-3)}
.wx-src a{color:var(--ink-2)}

/* ── Afvalkalender fraction badges — ready for BUILD.md Phase 4 ──
   Use as: <span class="waste-badge waste-pmd">PMD</span> */
.waste-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .7rem;border-radius:100px;
  font-size:.78rem;font-weight:700;letter-spacing:.02em;
  color:#fdf6ee;
}
.waste-badge::before{content:'';width:.55rem;height:.55rem;border-radius:50%;background:currentColor;flex-shrink:0}
.waste-rest{background:var(--waste-rest)}
.waste-pmd{background:var(--waste-pmd)}
.waste-gft{background:var(--waste-gft)}
.waste-papier{background:var(--waste-papier)}
.waste-glas{background:var(--waste-glas)}

/* ── Afvalkalender card ─────────────────────────────
   Without a street it shows only the street picker. With one,
   closed it shows that street's next collection; the toggle slides
   open the picker and the following weeks. Closed is the
   CSS default so nothing jumps on load — the <noscript> block in
   templates/header.php opens it for visitors without JS. */
.afval-card .card-head{margin-bottom:.9rem}

.afval-sums{display:grid;gap:.85rem}
.afval-sum{display:flex;align-items:center;justify-content:space-between;gap:1rem;container-type:inline-size}
.afval-sum-text{min-width:0}

/* Bin and bag pictures: one height every day, so the card keeps its size
   whatever is collected. A combination normally has its own photo (see
   waste_pictures()); without one, the single pictures overlap a little and
   multiply blends their white backgrounds into each other and the card.
   The height follows the card width (cqi): 125px on a wide card, down to
   64px on a phone. 100px for browsers without container queries. */
.afval-pics{--h:100px;display:flex;align-items:flex-end;flex-shrink:0}
@supports (height:1cqi){.afval-pics{--h:clamp(64px,40cqi - 60px,125px)}}
.afval-pics img{display:block;width:auto;height:var(--h);border-radius:var(--radius);mix-blend-mode:multiply}
.afval-pics img + img{margin-left:calc(var(--h) * -.24)}
.afval-sum[hidden],.afval-round[hidden]{display:none}
.afval-sum-label{
  display:block;margin-bottom:.15rem;
  font-size:.72rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;
}
.afval-when{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .6rem}
.afval-when strong{font-family:'Fraunces',Georgia,serif;font-size:1.25rem;font-weight:600;line-height:1.3}
.afval-shift{
  font-style:normal;font-size:.7rem;font-weight:700;
  color:var(--poppy-deep);background:var(--poppy-soft);
  padding:.1rem .5rem;border-radius:100px;
}
.afval-fr{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:.45rem 0 0}
.afval-tip{margin-top:.5rem;font-size:.85rem;font-weight:600;color:var(--field)}
.afval-none{color:var(--ink-2);font-size:.9rem}

.afval-toggle{
  flex-shrink:0;display:inline-flex;align-items:center;gap:.35rem;
  margin-top:1rem;padding:.45rem .6rem .45rem .85rem;
  font:inherit;font-size:.8rem;font-weight:700;color:var(--ink-2);
  background:var(--tint);border:0;border-radius:100px;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.afval-toggle:hover{background:var(--poppy-soft);color:var(--poppy-deep)}
.afval-toggle svg{transition:transform .35s var(--ease)}
.afval-card.is-open .afval-toggle svg{transform:rotate(180deg)}

/* Slide: animating grid rows 0fr → 1fr gives a real height
   transition without JS measuring anything. */
.afval-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.afval-more-inner{
  min-height:0;overflow:hidden;
  margin:0 -6px;padding:0 6px;          /* room for focus rings */
  visibility:hidden;opacity:0;
  transition:opacity .25s var(--ease),visibility 0s linear .4s;
}
.afval-card.is-open .afval-more{grid-template-rows:1fr}
.afval-card.is-open .afval-more-inner{
  visibility:visible;opacity:1;
  transition:opacity .35s var(--ease) .08s,visibility 0s;
}

.afval-pick{margin-top:1.15rem;padding-top:1.05rem;border-top:1px dashed var(--line)}
.afval-pick label{
  display:block;margin-bottom:.4rem;
  font-size:.72rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;
}
.afval-pick-row{display:flex;gap:.5rem}
.afval-pick select{
  flex:1;min-width:0;min-height:2.75rem;padding:.55rem .75rem;
  font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--bg);border:1.5px solid var(--line);border-radius:10px;
}
.afval-pick select:hover{border-color:var(--poppy)}
.afval-go{
  padding:0 1.1rem;border:0;border-radius:10px;cursor:pointer;
  font:inherit;font-weight:700;color:#fdf6ee;background:var(--poppy-deep);
}
.afval-pick.js .afval-go{display:none}

/* No street chosen yet: only the picker, without the separator line.
   Also holds without JS, where the noscript block opens .afval-more. */
.afval-card.no-street .afval-sums,
.afval-card.no-street .afval-toggle,
.afval-card.no-street .afval-more{display:none}
[data-slot="top"] .afval-pick{margin-top:0;padding-top:0;border-top:0}

.afval-round{margin-top:1.1rem}
.afval-round-h{
  font-family:'Karla',sans-serif;font-size:.72rem;font-weight:700;
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.2rem;
}
.afval-later{list-style:none}
.afval-later > li{
  display:flex;align-items:center;gap:.7rem;
  padding:.4rem 0;border-top:1px solid var(--line-soft);
}
.afval-date{flex-shrink:0;width:5.6rem;font-size:.85rem;font-weight:600;color:var(--ink-2)}
.afval-later .afval-fr{margin:0}
.afval-later .waste-badge{font-size:.7rem;padding:.18rem .55rem}

.afval-foot{margin:1rem 0 .1rem;font-size:.8rem;color:var(--ink-3)}

/* ── Agenda: "Wat is er te doen?" ───────────────────────
   Beside the afvalkalender. Four upcoming events; the toggle slides
   open four more, the long-running ones and links to the full agendas
   (same grid-rows slide as the afval card). Every row is one link. */
.agenda-card .card-head{margin-bottom:.7rem}
.ev-list{list-style:none}
.ev-list > li + li{border-top:1px solid var(--line-soft)}
.ev{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:.65rem .4rem;margin:0 -.4rem;border-radius:10px;
  color:var(--ink);text-decoration:none;
  transition:background .18s var(--ease);
}
.ev:hover{background:var(--tint);text-decoration:none}
.ev-date{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:3.1rem;padding:.35rem 0 .3rem;border-radius:10px;
  background:var(--wheat-soft);color:var(--wheat);
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1.1;
}
.ev-date b{font-family:'Fraunces',Georgia,serif;font-size:1.3rem;font-weight:600;color:var(--ink);letter-spacing:0}
.ev-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ev-title{font-weight:700;font-size:.95rem;line-height:1.3}
.ev:hover .ev-title{color:var(--poppy-deep)}
.ev-meta{font-size:.8rem;color:var(--ink-2)}
.ev-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-top:.2rem}
.ev-tags .news-tag{font-size:.62rem;padding:.12rem .45rem}
.ev-price{font-size:.74rem;font-weight:700;color:var(--field)}
.ev-kind{font-size:.66rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}

.agenda-toggle{margin-top:.7rem}
.agenda-card.is-open .agenda-toggle svg{transform:rotate(180deg)}
.agenda-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.agenda-more-inner{
  min-height:0;overflow:hidden;margin:0 -6px;padding:0 6px;
  visibility:hidden;opacity:0;
  transition:opacity .25s var(--ease),visibility 0s linear .4s;
}
.agenda-card.is-open .agenda-more{grid-template-rows:1fr}
.agenda-card.is-open .agenda-more-inner{visibility:visible;opacity:1;transition:opacity .35s var(--ease) .08s,visibility 0s}
.agenda-more-inner > .ev-list{margin-top:.6rem;border-top:1px solid var(--line-soft)}

.ev-sub{
  margin:1.1rem 0 .3rem;font-family:'Karla',sans-serif;
  font-size:.72rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;
}
.ev-ongoing{list-style:none}
.ev-ongoing li{display:flex;flex-direction:column;padding:.4rem 0;border-top:1px solid var(--line-soft)}
.ev-ongoing a{font-size:.88rem;font-weight:700;color:var(--ink);text-decoration:none}
.ev-ongoing a:hover{color:var(--poppy-deep)}
.ev-ongoing span{font-size:.78rem;color:var(--ink-2)}
.ev-foot{margin:1rem 0 .1rem;font-size:.8rem;color:var(--ink-3)}

/* ── Overlijdensberichten ───────────────────────────
   Deliberately quiet: no colour, no hover lift. A small round portrait
   loaded from the director's site (never stored), name, age, place,
   the two dates, and the way to the director's register. */
/* One row per funeral director, each under its own "bron" label */
.obit-sub{
  margin:1.4rem 0 .6rem;font-family:'Karla',sans-serif;
  font-size:.78rem;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;
}
.card-head + .obit-sub{margin-top:.2rem}
.obit-sub a{color:var(--ink-2);text-decoration:none;border-bottom:1px dotted var(--ink-3)}
.obit-sub a:hover{color:var(--poppy-deep);border-color:var(--poppy-deep)}
.obit-list{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.obit{
  display:flex;flex-direction:column;gap:.2rem;
  padding:1rem 1.1rem;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);
}
.obit-head{display:flex;align-items:center;gap:.75rem}
.obit-photo{flex-shrink:0;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center 20%;background:var(--tint)}
.obit-name{font-family:'Fraunces',Georgia,serif;font-size:1.02rem;font-weight:600;line-height:1.3;color:var(--ink)}
.obit-meta{font-size:.8rem;color:var(--ink-2)}
.obit-dates{display:flex;flex-direction:column;margin-top:.35rem;font-size:.8rem;color:var(--ink-3)}
.obit-link{margin-top:auto;padding-top:.6rem;font-size:.8rem;font-weight:700;color:var(--ink-2);text-decoration:none}
.obit-link:hover{color:var(--ink);text-decoration:underline}
.obit-foot{margin-top:1rem;font-size:.8rem;color:var(--ink-3)}
.obit-foot a{color:var(--ink-2)}
@media(max-width:760px){.obit-list{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.obit-list{grid-template-columns:1fr}}

/* ── Text pages (colofon, later privacy…) ─────────────
   One calm reading column on a card. */
.page{max-width:46rem;margin:0 auto 1.35rem;padding:2rem 2.2rem 2.2rem}
.page:hover{transform:none;box-shadow:var(--shadow-1)}
.page h1{font-size:clamp(1.6rem,4vw,2.1rem);line-height:1.2;margin-bottom:.8rem}
.page h2{font-size:1.15rem;margin:1.8rem 0 .5rem}
.page p{color:var(--ink-2);margin-bottom:.8rem}
.page p strong{color:var(--ink)}
.page-lead{font-size:1.05rem}
.page-sources{margin:1rem 0 1.2rem;border-top:1px solid var(--line-soft)}
.page-sources div{display:grid;grid-template-columns:12rem 1fr;gap:.3rem 1.2rem;padding:.7rem 0;border-bottom:1px solid var(--line-soft)}
.page-sources dt{font-weight:700;color:var(--ink)}
.page-sources dd{color:var(--ink-2)}
@media(max-width:600px){
  .page{padding:1.4rem 1.2rem 1.6rem}
  .page-sources div{grid-template-columns:1fr}
}

/* ── Forms (verwijderen.php) ──────────────────────── */
.form{margin-top:1.4rem}
.form-field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.form-field label{font-weight:700;font-size:.9rem;color:var(--ink)}
.form-field label span{font-weight:500;color:var(--ink-3)}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:.6rem .75rem;min-height:2.75rem;
  font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--bg);border:1.5px solid var(--line);border-radius:10px;
}
.form-field textarea{resize:vertical;min-height:8rem}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.form-note{font-size:.82rem}
.form-submit{
  margin-top:.4rem;padding:.75rem 1.4rem;border:0;border-radius:10px;cursor:pointer;
  font:inherit;font-weight:700;color:#fdf6ee;background:var(--poppy-deep);
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.form-submit:hover{background:var(--ink);transform:translateY(-1px)}
.form-errors{margin:1rem 0;padding:.9rem 1.1rem;border-radius:10px;background:var(--poppy-soft);border:1px solid var(--poppy)}
.form-errors p{margin-bottom:.3rem;font-weight:700;color:var(--ink)}
.form-errors ul{margin-left:1.1rem;color:var(--ink)}
.form-done{padding:1rem 0}
.form-done h2{margin-top:0}
/* The bot trap: off screen, never shown to people. */
.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.page-updated{margin-top:1.8rem;font-size:.8rem;color:var(--ink-3)}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}

/* Visually hidden, still read by screen readers. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Gemeentenieuws ─────────────────────────────────
   Six latest items from the zonnebeke.be feed (lib/news.php). Pictures
   are loaded from zonnebeke.be itself — img-src in .htaccess allows it.
   Every card links out; nothing is shown beyond the feed's own excerpt. */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.news-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--card);box-shadow:var(--shadow-1);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.news-card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.news-thumb{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/10;overflow:hidden;
  color:var(--ink-3);background:var(--tint);   /* placeholder when there is no picture */
}
.news-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.news-card:hover .news-thumb img{transform:scale(1.03)}
.news-body{display:flex;flex-direction:column;flex:1;padding:.9rem 1rem 1rem}
.news-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.55rem}
.news-tag{
  display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--poppy-deep);background:var(--poppy-soft);padding:.2rem .55rem;border-radius:100px;
}
.news-tag.news-dg{color:var(--field);background:var(--field-soft)}
.news-body h3{font-size:1rem;font-weight:600;line-height:1.35;margin-bottom:.4rem}
.news-body h3 a{color:var(--ink);text-decoration:none}
.news-body h3 a:hover{color:var(--poppy-deep)}
.news-sum{
  font-size:.84rem;line-height:1.5;color:var(--ink-2);margin-bottom:.6rem;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
}
.news-body time{margin-top:auto;font-size:.78rem;color:var(--ink-3)}
.news-more{margin-top:1.1rem;font-size:.85rem;font-weight:600}

/* ── Hinder in Zonnebeke (GIPOD) — street, what and until when, the effect;
   a closure gets the one red label on the site ── */
.hinder-list{list-style:none}
.hinder-list > li + li{border-top:1px solid var(--line-soft)}
.hinder{padding:.65rem 0}
.hinder-street{font-weight:700;font-size:.95rem;line-height:1.3;color:var(--ink)}
.hinder-meta{font-size:.8rem;color:var(--ink-2)}
.hinder-effect{margin-top:.1rem;font-size:.8rem;color:var(--ink-3)}
.hinder-flag{
  display:inline-block;margin-left:.35rem;padding:.05rem .5rem;border-radius:100px;vertical-align:.12em;
  font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:#fff;background:var(--warn);
}
.hinder.is-severe .hinder-effect{color:var(--warn);font-weight:600}
@media(max-width:760px){.news-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.news-grid{grid-template-columns:1fr}}

/* ── Foot ─────────────────────────────────────────── */
.site-foot{
  position:relative;z-index:1;
  border-top:2px solid var(--poppy);
  background:var(--bg);
  padding:2.4rem 0 2.6rem;
  color:var(--ink-2);font-size:.87rem;
}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.25rem;margin-bottom:1.85rem}
.foot-grid h4{
  font-family:'Fraunces',Georgia,serif;color:var(--ink);font-size:.95rem;
  font-weight:600;margin-bottom:.6rem;letter-spacing:-.005em;
}
.foot-links{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.foot-links a{color:var(--ink-2);text-decoration:none;border-bottom:1px dotted transparent}
.foot-links a:hover{color:var(--poppy-deep);border-color:var(--poppy-deep)}
.foot-bottom{
  padding-top:1.35rem;border-top:1px solid var(--line);
  font-size:.76rem;color:var(--ink-3);
}

/* ── Responsive ───────────────────────────────────── */
@media(max-width:760px){
  .quick-grid{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:1.5rem}
  .head-inner{flex-direction:column;align-items:stretch;gap:1rem}
  .wx-widget{align-self:flex-start}
  .wx-hero{grid-template-columns:1fr;gap:1rem}
}
@media(max-width:420px){
  .quick-grid{grid-template-columns:1fr}
  .card{padding:1.25rem 1.1rem 1.35rem}
  .wx-modal-inner{padding:1.1rem 1rem 1rem}
  .wx-hero{padding:1rem}
  .wx-hero-temp{font-size:2.5rem}
  .wx-week li{grid-template-columns:4.6rem 1.5rem 1fr 2rem 3.5rem 2rem;gap:.45rem}
  .wx-week-text{display:none}
}

/* ── Reduced motion ───────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}