/* ===========================================================
   TERUGKOMDAG 2026 — Direction B — "ANGLE OF RETURN"
   Identity/Interruption — angular cut as spatial identity device
   =========================================================== */

:root{
  --c-green:        #008535;
  --c-green-deep:    #035d26;
  --c-green-darker:  #02612c;
  --c-lime:          #bfce01;
  --c-blue:          #00a4eb;
  --c-ink:           #0b1f16;
  --c-paper:         #f3f5f0;
  --c-white:         #ffffff;

  --font-display: 'Space Grotesk', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --cut: 4.5vw; /* the shared angle unit, derived from a single diagonal ratio used everywhere */

  /* Implementation pass (2026-11-12), Design Critic finding #3: every
     corner-trim cut (buttons, pills, chips, selects, card corners) now
     shares this ONE inset percentage instead of the prior mix (6%/8%/10%/
     12%) — clip-path percentages are relative to each element's own box,
     so one shared value makes the angle read as the same device at any
     size, which is the concept's own central premise. */
  --cut-pct: 8%;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--c-ink);
  background:var(--c-paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }
img,svg{ display:block; max-width:100%; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

:focus-visible{
  outline:3px solid var(--c-blue);
  outline-offset:2px;
}

.placeholder-fact{
  border-bottom:2px dotted currentColor;
  font-style:normal;
}

.wrap{
  max-width:1280px;
  margin:0 auto;
  padding-inline:clamp(1.25rem, 4vw, 3rem);
}

/* ===================== NOISE OVERLAY (texture, used sparingly) ===================== */
.noise-overlay{
  position:absolute; inset:0; mix-blend-mode:overlay; opacity:.08; pointer-events:none;
}

/* ===================== HEADER / IDENTITY-BEARING NAV ===================== */
.site-header{
  position:relative;
  z-index:50;
  background:var(--c-green-deep);
  color:var(--c-white);
}
.header-shape{
  position:absolute; inset:0;
  background:linear-gradient(100deg, var(--c-green-deep) 0%, var(--c-green-deep) 72%, var(--c-green) 72%, var(--c-green) 100%);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 8% 100%);
  pointer-events:none;
}
.header-inner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding-block:0.9rem;
}
.logo-mark{
  display:flex; align-items:center; gap:0.65rem;
  text-decoration:none; color:var(--c-white);
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.01em;
}
/* The real approved logo is a square badge mark (Terugkomdag wordmark +
   year, generous internal padding) rather than a wide wordmark — needs
   real height to stay legible against the dark header, unlike the old
   inline-SVG placeholder it replaces. */
.logo-image{ height:58px; width:auto; flex:none; display:block; border-radius:6px; }
.logo-text{ display:flex; flex-direction:column; line-height:1.05; }
.logo-text strong{ font-size:1.05rem; }
.logo-edition{
  font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--c-lime); font-family:var(--font-body); font-weight:600;
}

.primary-nav ul{ display:flex; align-items:center; gap:1.9rem; }
.primary-nav a{
  text-decoration:none; font-size:0.92rem; font-weight:500;
  color:rgba(255,255,255,0.86);
  position:relative; padding-block:0.3rem;
}
.primary-nav a.active{ color:var(--c-white); }
.primary-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background:var(--c-lime);
  clip-path:polygon(0 0, 100% 0, 92% 100%, 0% 100%);
}
.primary-nav a:hover{ color:var(--c-white); }

.header-actions{ display:flex; align-items:center; gap:0.85rem; }

.pending-pill{
  display:inline-flex; align-items:center; gap:0.4rem;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.35);
  color:var(--c-white);
  font-size:0.78rem; font-weight:600;
  padding:0.45rem 0.9rem 0.45rem 0.75rem;
  clip-path:polygon(var(--cut-pct) 0, 100% 0, calc(100% - var(--cut-pct)) 100%, 0% 100%);
  text-decoration:none;
  transition:background 0.15s ease;
}
.pending-pill:hover{ background:rgba(255,255,255,0.22); }
.pending-pill .dot{
  width:7px; height:7px; border-radius:50%; background:var(--c-lime); flex:none;
}

.nav-toggle{
  display:none;
  background:transparent; border:1px solid rgba(255,255,255,0.4);
  color:var(--c-white); width:42px; height:38px;
  align-items:center; justify-content:center;
  clip-path:polygon(0 0, 100% 0, 100% 80%, 85% 100%, 0 100%);
}
.nav-toggle span{ position:relative; width:18px; height:2px; background:currentColor; display:block; }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor;
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }

.mobile-nav-overlay{
  display:none;
}

/* ===================== DIVIDERS — the angular cut device ===================== */
.angle-divider{
  position:relative;
  height:clamp(2.5rem, 7vw, 5.5rem);
  margin-top:-1px;
}
/* Design Critic finding #3: these were noticeably shallower (40%/60%)
   than the header/hero/button cuts — steepened to read as the same
   device, not a softer, unrelated transition. */
.angle-divider.to-paper{
  background:var(--c-paper);
  clip-path:polygon(0 100%, 100% 12%, 100% 100%);
}
.angle-divider.to-green{
  background:var(--c-green-deep);
  clip-path:polygon(0 0, 100% 88%, 100% 0, 0 0);
}
.angle-divider .chip{
  position:absolute; top:0; left:6%;
  width:14px; height:14px; background:var(--c-blue);
  clip-path:polygon(0 0, 100% 0, 100% 70%, 30% 100%);
}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  background:var(--c-green);
  color:var(--c-white);
  overflow:hidden;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem);
}
.hero-field{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 85% 20%, rgba(0,164,235,0.35), transparent 42%),
    radial-gradient(circle at 10% 90%, rgba(191,206,1,0.25), transparent 45%);
}
/* NDDA_50 Phase 1.2: restrained diagonal depth layers -- a faint angled
   deep-green band plus a large soft-edged triangular tint in the far
   corner, echoing the site's own diagonal-cut language without any new
   imagery/animation. Both sit behind .hero-inner (z-index below it). */
.hero-field::before{
  content:""; position:absolute; inset:-15% -15%;
  background:linear-gradient(118deg, transparent 0%, transparent 44%, rgba(2,97,44,0.5) 44%, rgba(2,97,44,0.5) 56%, transparent 56%, transparent 100%);
}
.hero-field::after{
  content:""; position:absolute; top:-20%; right:-15%; width:60%; height:150%;
  background:rgba(255,255,255,0.045);
  clip-path:polygon(55% 0, 100% 0, 100% 100%, 15% 100%);
}
.hero-inner{
  position:relative;
  display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(1.5rem, 4vw, 3rem); align-items:center;
}
.hero-copy{ min-width:0; }

/* Client review fix (2026-11-12): the header logo stays compact (its own
   nav-icon role); this gives the SAME, unaltered approved logo asset a
   genuinely prominent hero moment, framed in the direction's own angular
   cut language so it reads as a composed element, not a stray image. */
.hero-logo-wrap{ display:flex; justify-content:center; position:relative; }
/* NDDA_50 Phase 1.3: a small lime accent plate peeking out from behind the
   card, rather than just a white rectangle floating on the gradient --
   the logo image itself is untouched. */
.hero-logo-wrap::before{
  content:""; position:absolute; z-index:0;
  top:12%; left:50%; transform:translateX(-46%);
  width:min(92%, 276px); aspect-ratio:1; max-width:276px;
  background:var(--c-lime);
  clip-path:polygon(var(--cut-pct) 0, 100% 0, 100% calc(100% - var(--cut-pct)), calc(100% - var(--cut-pct)) 100%, 0 100%);
}
.hero-logo-frame{
  position:relative; z-index:1;
  width:min(100%, 300px);
  background:var(--c-white);
  padding:1.4rem;
  clip-path:polygon(var(--cut-pct) 0, 100% 0, 100% calc(100% - var(--cut-pct)), calc(100% - var(--cut-pct)) 100%, 0 100%);
  box-shadow:0 24px 54px rgba(2,24,12,0.4);
}
.hero-logo{ width:100%; height:auto; display:block; }

@media (max-width: 960px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-logo-wrap{ order:-1; margin-bottom:0.5rem; }
  .hero-logo-frame{ width:min(70%, 220px); }
  /* The decorative lime accent plate is sized/positioned for the desktop
     two-column layout; once the logo stacks above the copy on mobile it
     overflowed its own wrapper and sat on top of the eyebrow text below.
     Simpler on mobile anyway -- logo + white card is enough. */
  .hero-logo-wrap::before{ display:none; }
}

.eyebrow{
  font-size:0.85rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--c-lime); margin:0 0 1.1rem;
}

/* NDDA_50 Phase 1.1: replaces the old absolutely-positioned "3x rondes"
   badge, which overlapped the headline at several widths. This sits in
   normal document flow between the intro and the CTAs, so it can never
   overlap text again, on any viewport, by construction rather than by
   careful percentage-tuning. */
.hero-stats{ display:flex; flex-wrap:wrap; gap:1.4rem 1.8rem; margin:0 0 1.8rem; }
.hero-stat{ display:flex; flex-direction:column; gap:0.1rem; }
.hero-stat__num{
  font-family:var(--font-display); font-size:1.7rem; font-weight:700; line-height:1;
  color:var(--c-lime);
}
.hero-stat__label{ font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.82); }
.hero-stat + .hero-stat{ position:relative; padding-left:1.8rem; }
.hero-stat + .hero-stat::before{
  content:""; position:absolute; left:0; top:0.15rem; bottom:0.15rem; width:1px;
  background:rgba(255,255,255,0.3);
}

.hero-title{
  font-family:var(--font-display);
  font-weight:700;
  /* Scaled to the HERO-COPY column's own width, not the full viewport —
     the 8vw-based size (tuned for a full-width single-column hero) wrapped
     to 4 short lines once the hero logo (added 2026-11-12) took a grid
     column of its own, which pushed the "3x rondes" overlap badge
     (positioned by percentage within this same box) on top of the
     headline text itself. */
  font-size:clamp(2.2rem, 4.6vw, 4.6rem);
  line-height:1.02;
  letter-spacing:-0.02em;
  margin:0 0 0;
  max-width:16ch;
}

.hero-intro{
  max-width:46ch;
  font-size:1.05rem;
  color:rgba(255,255,255,0.92);
  margin:2.2rem 0 2.4rem;
}

.hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; }

.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-weight:600; font-size:0.95rem; text-decoration:none;
  padding:0.85rem 1.5rem;
  clip-path:polygon(var(--cut-pct) 0, 100% 0, calc(100% - var(--cut-pct)) 100%, 0% 100%);
  transition:transform 0.18s ease;
  border:none; cursor:pointer;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--c-white); color:var(--c-green-deep); }
.btn-secondary{ background:transparent; color:var(--c-white); border:1px solid rgba(255,255,255,0.55); }
.btn-primary-on-dark{ background:var(--c-lime); color:var(--c-ink); }
.btn-primary-on-light{ background:var(--c-green); color:var(--c-white); }

/* ===================== CONTENT SECTIONS ===================== */
.section{
  padding-block:clamp(3rem, 7vw, 5.5rem);
}
.section-grid{
  display:grid; gap:clamp(2rem, 5vw, 4rem);
  grid-template-columns: 0.85fr 1.15fr;
  align-items:start;
}
.section-kicker{
  font-family:var(--font-display); font-weight:700; font-size:1.6rem; letter-spacing:-0.01em;
  display:flex; align-items:baseline; gap:0.6rem;
}
.section-kicker .mark{
  color:var(--c-blue); font-size:1rem; font-weight:700;
}
.section-body p{ margin:0 0 1rem; max-width:62ch; }
.section-body p:last-child{ margin-bottom:0; }

.round-list{ display:grid; gap:0.6rem; margin:1.4rem 0 1.6rem; }
.round-list li{
  display:flex; align-items:center; gap:0.9rem;
  background:var(--c-white);
  border-left:4px solid var(--c-blue);
  padding:0.7rem 1rem;
  font-weight:600;
}
.round-list li span.r{
  font-family:var(--font-display); color:var(--c-green-deep); min-width:4.4rem;
}

/* ---- Contact section (NDDA_50 Phase 4.1) ---- */
.contact-list{ display:grid; gap:0.6rem; margin:1.4rem 0 1.6rem; }
.contact-list li{
  display:flex; align-items:baseline; gap:0.9rem; flex-wrap:wrap;
  background:var(--c-white);
  border-left:4px solid var(--c-blue);
  padding:0.7rem 1rem;
}
.contact-list__label{
  font-family:var(--font-display); color:var(--c-green-deep); font-weight:700; min-width:5.5rem;
}
.contact-list a{ color:var(--c-ink); font-weight:600; text-decoration:underline; }

.inschrijven{
  background:var(--c-ink);
  color:var(--c-white);
}
.inschrijven .section-grid{ align-items:center; }
.inschrijven .pending-pill-lg{
  display:inline-flex; align-items:center; gap:0.6rem;
  background:var(--c-lime); color:var(--c-ink); font-weight:700;
  padding:0.9rem 1.4rem;
  clip-path:polygon(5% 0, 100% 0, 95% 100%, 0% 100%);
}
.inschrijven .pending-pill-lg .dot{ width:8px;height:8px;border-radius:50%;background:var(--c-ink); }
.inschrijven p{ color:rgba(255,255,255,0.75); margin-top:1rem; max-width:40ch; }

/* ===================== FOOTER ===================== */
.site-footer{
  background:var(--c-green-deep); color:rgba(255,255,255,0.85);
  padding-block:3rem 2rem;
}
.footer-grid{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem;
  padding-bottom:1.6rem; border-bottom:1px solid rgba(255,255,255,0.18);
}
.footer-logo{ display:inline-flex; align-items:center; }
.footer-logo__img{ height:40px; width:auto; display:block; border-radius:5px; }
.footer-nav ul{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 1.6rem; }
.footer-nav a{ text-decoration:none; font-size:0.9rem; color:rgba(255,255,255,0.8); }
.footer-nav a:hover{ color:var(--c-white); }
.footer-meta{ font-size:0.8rem; margin-top:1.4rem; color:rgba(255,255,255,0.55); }
.footer-meta strong{ color:var(--c-lime); }

/* ===================== CATALOGUE PAGE ===================== */
/* NDDA_39 (2026-11-13): the client's own banner_nd_1.webp as the hero
   background, replacing the flat green fill. The dark-to-transparent
   gradient is layered OVER the image (first background listed = topmost)
   purely for text contrast on the left, where the title/intro sit -- the
   pattern itself is never edited, and the gradient fades out by midway so
   it stays clearly visible on the right. presentaties.html is the ONLY
   page using this class, so nothing else is affected. */
.catalogue-hero{
  background:
    linear-gradient(90deg, rgba(2,36,18,0.72) 0%, rgba(2,36,18,0.45) 42%, rgba(2,36,18,0.1) 100%),
    url("assets/hero/banner_nd_1.webp") left center/cover no-repeat,
    var(--c-green-deep);
  color:var(--c-white);
  padding-block:clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 3rem);
  position:relative;
  display:flex; align-items:center;
}
.catalogue-hero .wrap{ width:100%; }
.catalogue-hero h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.1rem, 5.6vw, 3.6rem); line-height:1.02; letter-spacing:-0.015em;
  max-width:16ch; margin:0.6rem 0 1.2rem;
}
.catalogue-hero p{ max-width:56ch; color:rgba(255,255,255,0.88); }

/* ===================== HOMEPAGE DECORATIVE BANNERS (NDDA_50 2.1) =====
   CSS-only fallback composition (diagonal tonal bands in the existing
   palette, no stock imagery) until a real WebP is supplied for each slot
   -- see the HTML comment above each <section> for the exact destination
   path/recommended dimensions. The overlay text is real HTML, never
   baked into an image. Once an asset exists, add it as the SECOND
   background layer (same convention as .catalogue-hero above), e.g.:
     background: linear-gradient(...), url("assets/hero/banner-home-a.webp") center/cover no-repeat, var(--c-green-deep);
*/
.home-banner{
  position:relative; overflow:hidden;
  min-height:clamp(200px, 26vw, 300px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--c-white);
  padding:2rem 1.5rem;
}
.home-banner--a{
  background:
    linear-gradient(115deg, transparent 0%, transparent 42%, rgba(191,206,1,0.9) 42%, rgba(191,206,1,0.9) 46%, transparent 46%, transparent 100%),
    linear-gradient(135deg, var(--c-green-deep) 0%, var(--c-green) 55%, var(--c-green-darker) 100%);
}
.home-banner--b{
  background:
    linear-gradient(-115deg, transparent 0%, transparent 42%, rgba(0,164,235,0.75) 42%, rgba(0,164,235,0.75) 46%, transparent 46%, transparent 100%),
    linear-gradient(135deg, var(--c-ink) 0%, var(--c-green-deep) 70%, var(--c-green) 100%);
}
.home-banner__text{
  position:relative; z-index:1; margin:0;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.4rem, 3.4vw, 2.2rem); line-height:1.15;
  max-width:26ch;
  text-shadow:0 3px 18px rgba(2,24,12,0.55);
}
@media (max-width:600px){
  .home-banner{ min-height:0; padding-block:2.2rem; }
}

/* Desktop/tablet only: cap the hero height to roughly 300-340px per the
   client's spec, via min-height + the flex centering above -- if content
   ever needs more room than that at some in-between viewport, it simply
   grows (never clips), so the text is never cramped. Mobile is explicitly
   excluded (height stays fully content-driven there, per spec). */
@media (min-width:761px){
  .catalogue-hero{ min-height:clamp(300px, 30vw, 340px); padding-block:clamp(1.6rem, 3vw, 2.2rem); }
}

.illustrative-note{
  background:rgba(255,255,255,0.1);
  border:1px dashed rgba(255,255,255,0.5);
  padding:0.75rem 1rem;
  font-size:0.82rem;
  margin-top:1.4rem;
  max-width:60ch;
}

.controls{
  background:var(--c-white);
  border-bottom:1px solid rgba(2,97,44,0.14);
  position:sticky; top:0; z-index:30;
}
.controls-inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
  padding-block:1.1rem;
}
.field-group{ display:flex; flex-direction:column; gap:0.3rem; }
.field-group label{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--c-green-deep); }
.text-input, .select-input{
  border:1.5px solid rgba(2,97,44,0.3);
  background:var(--c-paper);
  padding:0.55rem 0.8rem;
  font-family:var(--font-body); font-size:0.92rem; color:var(--c-ink);
  min-width:220px;
}
.select-input{ min-width:170px; }

.sector-chips{
  display:flex; flex-wrap:wrap; gap:0.5rem;
}
.sector-chip{
  border:1.5px solid rgba(2,97,44,0.35);
  background:var(--c-white);
  color:var(--c-green-deep);
  font-size:0.82rem; font-weight:600;
  padding:0.45rem 0.95rem 0.45rem 0.8rem;
  clip-path:polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
  cursor:pointer;
}
.sector-chip[aria-pressed="true"]{
  background:var(--c-blue); border-color:var(--c-blue); color:var(--c-ink);
}
.sector-chip-wrap{ display:none; }

/* Design Critic finding #2: the sort dropdown and the collapsed sector
   select sat as plain native controls directly beside cut-styled chips.
   Extended a restrained version of the SAME cut proportion to both,
   without converting them into a heavy custom widget (still a real
   <select>, still fast to scan). */
.select-cut{
  clip-path:polygon(var(--cut-pct) 0, 100% 0, calc(100% - var(--cut-pct)) 100%, 0 100%);
  border-color:rgba(2,97,44,0.35);
}

.result-counter{
  margin-left:auto;
  font-weight:700; font-size:0.9rem; color:var(--c-green-deep);
}

.controls-close{ display:none; }

/* Compact mobile toolbar + drawer (NDDA_30 §B, 2026-11-13): hidden and
   inert on desktop/by default; only ever shown on narrow viewports, only
   once .controls has scrolled out of view (toggled via IntersectionObserver
   in catalogue.js). Uses position:fixed (not sticky) so it never reserves
   layout space while inactive. */
.controls-compact{ display:none; }
.filters-backdrop{ display:none; }

@media (max-width:760px){
  /* The full search/filter block only needs to be sticky on desktop/tablet,
     where it's compact enough to never crowd out the cards. On mobile it
     would otherwise stay pinned (and large) for the whole scroll -- the
     exact problem this section fixes -- so it reverts to a normal,
     scrolls-away-with-the-page block; the compact toolbar below takes over
     once it's out of view. */
  .controls{ position:static; }

  .controls-compact{
    display:none;
    position:fixed; top:0; left:0; right:0; z-index:35;
    background:var(--c-white);
    border-bottom:1px solid rgba(2,97,44,0.14);
  }
  body.catalogue-scrolled .controls-compact{ display:block; }

  .controls-compact-inner{
    display:flex; align-items:center; justify-content:space-between; gap:0.8rem;
    padding-block:0.65rem;
    min-height:3.2rem; box-sizing:border-box;
  }
  .filters-toggle{
    display:inline-flex; align-items:center; gap:0.5rem;
    border:1.5px solid rgba(2,97,44,0.35);
    background:var(--c-paper); color:var(--c-green-deep);
    font-family:var(--font-body); font-weight:700; font-size:0.84rem;
    padding:0.5rem 0.9rem;
    clip-path:polygon(var(--cut-pct) 0, 100% 0, calc(100% - var(--cut-pct)) 100%, 0 100%);
  }
  .filters-toggle__count{
    background:var(--c-blue); color:var(--c-ink); font-size:0.72rem; font-weight:700;
    padding:0.1rem 0.45rem; line-height:1.4;
  }
  .controls-compact .result-counter{ margin-left:0; font-size:0.8rem; }

  /* Drawer mode: the ORIGINAL #controls-panel (same #search, same sector
     chips/select, same sort -- nothing duplicated) becomes a fixed overlay
     anchored just below the compact bar, so opening/closing it can never
     desync from the real filter state. */
  body.filters-drawer-open .filters-backdrop{
    display:block; position:fixed; inset:0; z-index:40;
    background:rgba(2,24,12,0.45);
  }
  body.filters-drawer-open .controls{
    position:fixed; top:3.2rem; left:0; right:0; z-index:50;
    max-height:min(80vh, 560px);
    overflow-y:auto;
    box-shadow:0 18px 40px rgba(2,24,12,0.35);
  }
  body.filters-drawer-open .controls-close{
    display:inline-flex; align-items:center; justify-content:center;
    margin-left:auto; order:-1;
    border:1px solid rgba(2,97,44,0.35); background:var(--c-white); color:var(--c-green-deep);
    width:36px; height:34px; flex:0 0 auto;
  }
}

.catalogue-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:1.4rem;
  padding-block:clamp(2rem, 5vw, 3rem);
}

.card{
  background:var(--c-white);
  border:1px solid rgba(2,97,44,0.14);
  padding:1.3rem 1.3rem 1.5rem;
  /* Design Critic finding #1: the prior 88%/88% cut read as a rounded
     corner at catalogue density. Steepened to the shared --cut-pct
     proportion AND given a small filled accent triangle (below) so the
     device reads as branded geometry, not a softened corner, even at
     small card size. */
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 22%), calc(100% - 22%) 100%, 0 100%);
  display:flex; flex-direction:column; gap:0.6rem;
  position:relative;
  /* NDDA_50 Phase 6: a small hover lift, same easing/duration as .btn,
     so the catalogue reads as one interactive system -- already muted
     under prefers-reduced-motion via the global rule near the top of
     this file. */
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(2,24,12,0.14); }
.card::after{
  content:"";
  position:absolute; right:0; bottom:0;
  width:22px; height:22px;
  background:var(--c-blue);
  clip-path:polygon(100% 0, 100% 100%, 0 100%);
}
.card-top{ display:flex; align-items:center; gap:0.8rem; }
.card-top h3{ font-family:var(--font-display); font-size:1.02rem; margin:0; line-height:1.25; }
.card-meta{ font-size:0.82rem; color:#4c6356; margin:0; }
.card-promo{
  font-size:0.86rem; color:#33493d; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card .sector-tag{
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--c-green-deep);
}
.card h3{
  font-family:var(--font-display); font-size:1.08rem; margin:0; line-height:1.25;
}
.card p{ margin:0; font-size:0.9rem; color:#33493d; }
.card .status{
  /* NDDA_50 3.2: cards with shorter promo text used to leave the status
     pill/profile-link/round-picks sitting at different heights per card
     in the same row -- margin-top:auto on this flex child (the card is
     display:flex;flex-direction:column) pushes it, and everything after
     it, down to the bottom as one group, so action controls line up
     across a row regardless of how much text each card has above them. */
  margin-top:auto;
  align-self:flex-start;
  font-size:0.72rem; font-weight:700; padding:0.25rem 0.6rem;
  margin-top:0.3rem;
}
.status.confirmed{ background:rgba(0,133,53,0.12); color:var(--c-green-deep); }
.status.provisional{ background:rgba(0,164,235,0.14); color:#045b82; }
.status.pending{ background:repeating-linear-gradient(135deg, rgba(11,31,22,0.08) 0 6px, rgba(11,31,22,0.02) 6px 12px); color:var(--c-ink); border:1px dashed rgba(11,31,22,0.4); }

.card.is-pending{
  background:repeating-linear-gradient(135deg, #ffffff 0 14px, #eef1ea 14px 28px);
}

.card[hidden]{ display:none; }

.empty-state{
  padding:3rem 1rem; text-align:center; color:#45604f; font-weight:600; display:none;
}
.empty-state.show{ display:block; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 860px){
  .section-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:1rem 1.4rem; margin-bottom:1.5rem; }
  .hero-stat__num{ font-size:1.4rem; }
}

/* NDDA_50 Phase 4.2: 7 nav items with long Dutch labels ("Mijn
   inschrijving", "Waar moet ik zijn?") no longer fit the header at
   common tablet widths (768px) once wrapped to a second line -- the
   hamburger breakpoint is now wide enough to cover that, separate from
   the narrower 760px breakpoint below (filter-control stacking etc.),
   which stays as-is. */
/* NDDA_50 Phase 4.2: 7 nav items with long Dutch labels ("Mijn
   inschrijving", "Waar moet ik zijn?") no longer fit the header at
   common tablet widths (768px) once wrapped to a second line -- the
   hamburger breakpoint (and its overlay panel) is now wide enough to
   cover that, separate from the narrower 760px breakpoint below (filter-
   control stacking only), which stays as-is. */
@media (max-width: 880px){
  .primary-nav{ display:none; }
  .header-actions .pending-pill{ display:none; }
  .nav-toggle{ display:flex; }

  .mobile-nav-overlay{
    display:block;
    position:fixed; inset:0; z-index:100;
    background:var(--c-green-deep);
    color:var(--c-white);
    transform:translateY(-100%);
    transition:transform 0.28s ease;
    padding:1.5rem;
  }
  .mobile-nav-overlay.is-open{ transform:translateY(0); }
  .mobile-nav-overlay .close-nav{
    background:transparent; border:1px solid rgba(255,255,255,0.4); color:var(--c-white);
    width:40px; height:38px; margin-left:auto; display:block;
  }
  .mobile-nav-overlay ul{ display:grid; gap:1.2rem; margin-top:2.5rem; }
  .mobile-nav-overlay a{
    font-family:var(--font-display); font-size:2rem; font-weight:700;
    text-decoration:none; color:var(--c-white); letter-spacing:-0.01em;
  }
  .mobile-nav-overlay .pending-pill{ margin-top:2rem; }
}

@media (max-width: 760px){
  .controls-inner{ flex-direction:column; align-items:stretch; }
  .sector-chips{ display:none; }
  .sector-chip-wrap{ display:flex; flex-direction:column; gap:0.3rem; }
  .result-counter{ margin-left:0; }
  .text-input, .select-input{ min-width:0; width:100%; }
}

/* ===========================================================
   IMPLEMENTATION PASS (2026-11-12) — new pages & components
   Light, white-dominant treatment per the quality bar ("avoid a
   predominantly dark-green site; use light sections, bright accents") —
   the hero/header/footer keep their approved dark-green identity moments;
   this new real-estate (signup, manage, admin) stays light/white with
   green/lime/cyan as accents only.
   =========================================================== */

.light-page{ background:var(--c-paper); }
.light-hero{
  background:var(--c-white);
  border-bottom:3px solid var(--c-green);
  padding-block:clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2rem);
}
.eyebrow-dark{ color:var(--c-green-deep); }
.light-hero__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem, 5vw, 3rem); line-height:1.05; letter-spacing:-0.015em;
  margin:0.4rem 0 0.8rem; max-width:18ch;
}
.light-hero__intro{ max-width:56ch; color:#33493d; }

/* NDDA (2026-11-13): inschrijven.html's own banner, additive to the
   shared .light-hero -- manage.html/waar-moet-ik-zijn.html/presentatie.html/
   admin.html all also use .light-hero and are deliberately untouched;
   this modifier only applies where BOTH classes are present. Same
   gradient-over-image recipe as .catalogue-hero (presentaties.html) per
   the client's own request to match that implementation, just with
   banner_nd_2.webp and inschrijven's own text. */
.light-hero--banner{
  background:
    linear-gradient(90deg, rgba(2,36,18,0.72) 0%, rgba(2,36,18,0.45) 42%, rgba(2,36,18,0.1) 100%),
    url("assets/hero/banner_nd_2.webp") left center/cover no-repeat,
    var(--c-green-deep);
  border-bottom:none;
}
.light-hero--banner .eyebrow-dark{ color:var(--c-lime); }
.light-hero--banner .light-hero__title{ color:var(--c-white); }
.light-hero--banner .light-hero__intro{ color:rgba(255,255,255,0.88); }
@media (min-width:761px){
  .light-hero--banner{ min-height:clamp(240px, 26vw, 300px); display:flex; align-items:center; }
  .light-hero--banner .wrap{ width:100%; }
}

/* ---- Circular presenter avatar ---- */
.avatar-circle{
  width:48px; height:48px; border-radius:50%; flex:none;
  object-fit:cover;
}
.avatar-placeholder{
  display:flex; align-items:center; justify-content:center;
  color:var(--c-white); font-family:var(--font-display); font-weight:700; font-size:1rem;
}

/* ---- Per-round pick buttons on catalogue cards ---- */
.round-picks{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.4rem; }
.round-pick{
  display:flex; flex-direction:column; align-items:flex-start; gap:0.1rem;
  background:var(--c-paper); border:1.5px solid rgba(2,97,44,0.3);
  color:var(--c-green-deep);
  padding:0.4rem 0.7rem;
  clip-path:polygon(var(--cut-pct) 0, 100% 0, calc(100% - var(--cut-pct)) 100%, 0 100%);
  cursor:pointer; font-size:0.78rem; font-weight:600;
  transition:border-color 0.15s ease, background 0.15s ease;
}
.round-pick:not([disabled]):not(.is-selected):hover{ border-color:var(--c-green); background:var(--c-white); }
.round-pick__round{ font-family:var(--font-display); }
.round-pick__avail{ font-size:0.7rem; font-weight:500; opacity:0.8; }
.round-pick.is-selected{ background:var(--c-green); border-color:var(--c-green); color:var(--c-white); }
.round-pick.is-full,.round-pick[disabled]{ opacity:0.45; cursor:not-allowed; text-decoration:line-through; }

/* Availability tiers (NDDA_32, 2026-11-13): the TEXT (round-pick__avail,
   set in catalogue.js) is always the real signal -- these are a secondary,
   supplementary visual cue only, kept inside Direction B's own palette
   (no off-brand red/orange warning color). Never overrides .is-selected or
   .is-full, which stay visually dominant regardless of tier. */
.round-pick--medium:not(.is-selected):not(.is-full){ border-color:var(--c-blue); }
.round-pick--medium:not(.is-selected):not(.is-full) .round-pick__avail{ color:#045b82; opacity:1; }
.round-pick--low:not(.is-selected):not(.is-full){ background:rgba(191,206,1,0.22); border-color:var(--c-green-deep); }
.round-pick--low:not(.is-selected):not(.is-full) .round-pick__avail{ font-weight:700; opacity:1; }

.round-avail-details{ margin-top:0.9rem; display:flex; flex-direction:column; gap:0.3rem; }
.round-avail-detail{ margin:0; font-size:0.84rem; color:#33493d; }
.round-avail-detail strong{ color:var(--c-green-deep); }
.round-avail-detail--low{ color:var(--c-green-deep); font-weight:600; }
.round-avail-detail--full{ color:#5a5a5a; }

/* ---- Presenter profile modal (2026-11-12) ---- */
.card-top__trigger{
  display:flex; align-items:center; gap:0.8rem; width:100%;
  background:transparent; border:none; padding:0; text-align:left; cursor:pointer;
}
.card-top__trigger:hover h3{ text-decoration:underline; }
.profile-link{
  align-self:flex-start;
  background:transparent; border:none; color:var(--c-blue); font-weight:700; font-size:0.82rem;
  padding:0; cursor:pointer; text-decoration:underline;
}
body.modal-open{ overflow:hidden; }
/* :not([hidden]) matters: an unconditional `display:flex` here would beat
   the browser's own `[hidden]{display:none}` UA rule on specificity,
   silently keeping the overlay (and its click-blocking) on screen even
   after JS sets `.hidden = true` -- caught by the E2E tests timing out on
   every click after the first close. */
.profile-modal-overlay:not([hidden]){
  position:fixed; inset:0; z-index:200;
  background:rgba(2,24,12,0.6);
  display:flex; align-items:center; justify-content:center;
  padding:1.2rem;
}
.profile-modal{
  background:var(--c-white);
  max-width:600px; width:100%;
  max-height:88vh;
  padding:2rem;
  position:relative;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 3%), calc(100% - 3%) 100%, 0 100%);
  display:flex; flex-direction:column;
}
/* NDDA_47: the close button lives OUTSIDE this scrolling wrapper (as a
   sibling, positioned absolute against .profile-modal itself) so it never
   scrolls out of reach, however tall the header/promo content gets. */
.profile-modal__scroll{
  overflow-y:auto; display:flex; flex-direction:column; gap:0.7rem;
  max-height:calc(88vh - 4rem);
}
.profile-modal__close{
  position:absolute; top:1rem; right:1rem; z-index:1;
  width:38px; height:38px;
  background:var(--c-paper); border:1px solid rgba(2,97,44,0.25);
  color:var(--c-ink); font-size:1rem; cursor:pointer;
}
/* ---- Profile header (NDDA_47): centered photo/name/sector/meta block;
   the rest of the modal (promo text, round picks, availability) stays a
   left-aligned sibling of this wrapper, inheriting .profile-modal's
   default (unset) text-align rather than this header's centering. */
.profile-modal__header{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:0.3rem; padding-bottom:0.3rem;
}
.profile-modal__avatars{ display:flex; justify-content:center; gap:0.8rem; margin-bottom:0.6rem; }
.profile-modal__avatars .avatar-circle{ width:144px; height:144px; font-size:2.8rem; }
.profile-modal__header .sector-tag{
  font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--c-green-deep);
}
.profile-modal h2{ font-family:var(--font-display); font-size:1.6rem; margin:0; }
.profile-modal__header .card-meta{ text-align:center; }
.profile-modal__promo{ white-space:pre-wrap; line-height:1.6; text-align:left; }

@media (max-width:600px){
  .profile-modal{ padding:1.5rem 1.2rem; max-height:92vh; }
  .profile-modal__scroll{ max-height:calc(92vh - 3rem); }
  .profile-modal__close{ top:0.7rem; right:0.7rem; }
  .profile-modal__avatars .avatar-circle{ width:112px; height:112px; font-size:2.2rem; }
  .profile-modal h2{ font-size:1.3rem; }
}

/* ---- Selection-replacement toast (client review fix, 2026-11-12) ---- */
.selection-notice{
  position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%); z-index:90;
  max-width:min(90vw, 480px);
  background:var(--c-ink); color:var(--c-white);
  padding:0.8rem 1.2rem;
  clip-path:polygon(var(--cut-pct) 0, 100% 0, calc(100% - var(--cut-pct)) 100%, 0 100%);
  font-size:0.88rem; font-weight:600; text-align:center;
  box-shadow:0 12px 30px rgba(2,24,12,0.35);
}

/* ---- Sticky "Mijn planning" indicator ---- */
.planning-bar{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:80;
  display:flex; align-items:center; gap:0.6rem;
  background:var(--c-ink); color:var(--c-white);
  padding:0.75rem 1.1rem;
  clip-path:polygon(var(--cut-pct) 0, 100% 0, calc(100% - var(--cut-pct)) 100%, 0 100%);
  text-decoration:none; font-weight:700; font-size:0.9rem;
  box-shadow:0 12px 30px rgba(2,24,12,0.35);
}
.planning-bar__count{
  background:var(--c-lime); color:var(--c-ink);
  padding:0.15rem 0.5rem; font-family:var(--font-display); font-size:0.85rem;
}

/* ---- Signup / manage forms ---- */
.signup-form:not([hidden]){ display:flex; flex-direction:column; gap:1rem; align-items:flex-start; margin-top:1.5rem; }
.form-note{ font-size:0.88rem; color:var(--c-green-deep); min-height:1.2em; margin:0; }
.schedule-review h2{ font-family:var(--font-display); font-size:1.3rem; margin:0 0 0.8rem; }
.schedule-list{ display:grid; gap:0.6rem; margin:0 0 1rem; }
.schedule-list li{
  display:flex; align-items:center; gap:0.9rem;
  background:var(--c-white); border-left:4px solid var(--c-blue);
  padding:0.65rem 0.9rem;
}
.schedule-list .r{ font-family:var(--font-display); color:var(--c-green-deep); font-weight:700; min-width:4.6rem; }
.schedule-list li span:nth-child(2){ flex:1; }
.remove-pick{
  background:transparent; border:none; color:#8a2a2a; cursor:pointer; font-size:1rem; padding:0.2rem;
}
.signup-sent h2{ font-family:var(--font-display); }

.manage-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  background:var(--c-white); border:1px solid rgba(2,97,44,0.14);
  padding:1rem 1.2rem; margin-bottom:0.9rem;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14%), calc(100% - 14%) 100%, 0 100%);
}
.manage-item h3{ font-family:var(--font-display); font-size:1rem; margin:0 0 0.3rem; }
.btn-cancel{
  background:transparent; border:1.5px solid #8a2a2a; color:#8a2a2a;
  padding:0.4rem 0.8rem; font-weight:600; font-size:0.85rem; cursor:pointer;
  clip-path:polygon(var(--cut-pct) 0, 100% 0, calc(100% - var(--cut-pct)) 100%, 0 100%);
}
.qr-wrap:not([hidden]){
  margin-top:1.8rem; padding:1.2rem; background:var(--c-white);
  border:1px solid rgba(2,97,44,0.14); display:flex; flex-direction:column; align-items:flex-start; gap:0.6rem;
}
.qr-wrap img{ border:1px solid rgba(2,97,44,0.14); }
.poster-qr{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; text-align:center; padding:3rem; }
.poster-qr img{ width:320px; height:320px; }
.poster-qr h1{ font-family:var(--font-display); font-size:2rem; margin:0; }
@media print{
  .site-header,.site-footer,.no-print{ display:none !important; }
}
.lock-notice{
  background:rgba(0,164,235,0.12); border:1px dashed rgba(0,164,235,0.5);
  padding:0.9rem 1.1rem; margin-bottom:1.2rem; font-size:0.9rem; color:#045b82;
}

/* ---- Admin dashboard ---- */
.admin-main .wrap{ max-width:1400px; }
.admin-toolbar{ display:flex; flex-wrap:wrap; gap:0.8rem; align-items:center; margin-bottom:1.6rem; }
.admin-toolbar #edition-status{ font-weight:700; color:var(--c-green-deep); margin-right:0.6rem; }
.btn-admin-action{
  background:var(--c-white); border:1.5px solid rgba(2,97,44,0.35); color:var(--c-green-deep);
  padding:0.5rem 0.9rem; font-weight:600; font-size:0.85rem; cursor:pointer; text-decoration:none;
  clip-path:polygon(var(--cut-pct) 0, 100% 0, calc(100% - var(--cut-pct)) 100%, 0 100%);
}
.admin-h2{ font-family:var(--font-display); font-size:1.15rem; margin:2.2rem 0 0.8rem; color:var(--c-green-deep); }
.admin-table-wrap{ overflow-x:auto; background:var(--c-white); border:1px solid rgba(2,97,44,0.14); }
.admin-table{ width:100%; border-collapse:collapse; font-size:0.86rem; }
.admin-table th{ text-align:left; background:var(--c-paper); padding:0.6rem 0.7rem; font-weight:700; color:var(--c-green-deep); white-space:nowrap; }
.admin-table td{ padding:0.5rem 0.7rem; border-top:1px solid rgba(2,97,44,0.1); vertical-align:middle; }
.admin-input{ border:1px solid rgba(2,97,44,0.3); padding:0.35rem 0.5rem; font-family:var(--font-body); font-size:0.85rem; width:100%; min-width:90px; }
.admin-input--narrow{ max-width:80px; }

/* ---- Loading / status notes ---- */
.loading-note{ padding:3rem 1rem; text-align:center; color:#45604f; font-weight:600; }
.verify-status{ padding-block:2rem; }
.verify-status h1{ font-family:var(--font-display); font-size:1.8rem; }

@media (max-width: 600px){
  .admin-toolbar{ flex-direction:column; align-items:stretch; }
  .manage-item{ flex-direction:column; }
}