/* ==========================================================================
   NVPG homepage — eigen stylesheet (Webright)
   Volledig vanaf nul. Geen code, class names of regels overgenomen uit de bron.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Custom properties — kleuren, spacing-ritme, typografie
   -------------------------------------------------------------------------- */
:root {
  /* Huisstijl — exacte tokens afgelezen van nvpg.nl */
  --nvpg-green:        #5fac30;  /* primair groen (links, accenten) */
  --nvpg-green-dark:   #3a4c2f;  /* donkergroen paneel (Thema's) */
  --nvpg-green-deep:   #2c522e;  /* hover op groen */
  --nvpg-blue:         #0068c3;  /* link-hover / accent (zoals live) */

  --nvpg-taupe:        #d0cdc3;  /* taupe van live (lichte variant) */
  --nvpg-taupe-dark:   #847d70;  /* donkerdere taupe — leesbaar met witte tekst */
  --nvpg-lightgray:    #f2f1ee;  /* nieuwskaart-panelen (live) */
  --nvpg-bg:           #ffffff;
  --nvpg-text:         #000000;  /* body + headings zijn zwart op live */
  --nvpg-text-muted:   #5a5a5a;
  --nvpg-border:       #e3e1da;
  --nvpg-white:        #ffffff;

  /* Spacing-ritme */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Vorm */
  --radius:    16px;
  --radius-sm: 10px;
  /* Verfijnde, gelaagde schaduwen voor zachte diepte (premium) */
  --shadow:      0 1px 2px rgba(35, 47, 25, 0.04), 0 4px 12px rgba(35, 47, 25, 0.05);
  --shadow-lift: 0 2px 6px rgba(35, 47, 25, 0.06), 0 18px 40px -12px rgba(35, 47, 25, 0.22);

  /* Layout — content vult normale schermen; vanaf 1500px opent de zijwitruimte (ref: nvpg.nl).
     Hero + alle content delen --content-width zodat ze uitlijnen; gutter geeft de zijmarge.
     De stap naar een smallere --content-width staat in de 1500px-mediaquery hieronder. */
  --content-width: 1440px;
  --gutter: 20px;   /* mobiel; wordt 50px op desktop */

  /* Typografie */
  --font-base: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Transitions — soepele, premium easing */
  --t:      0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.5s  cubic-bezier(0.4, 0, 0.2, 1);
}

/* Vanaf 1500px: smallere content-breedte → duidelijk zichtbare zijwitruimte op grote schermen.
   1500px → ~110px marge per kant, 1920px → ~320px. Onder 1500px vult content het scherm (minus gutter). */
@media (min-width: 1500px) {
  :root { --content-width: 1280px; }
}

/* --------------------------------------------------------------------------
   2. Reset / basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;   /* sticky header niet over anker-doelen laten vallen */
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 1.0625rem;          /* iets ruimer leesformaat */
  line-height: 1.7;              /* luchtiger leesritme */
  color: var(--nvpg-text);
  background: var(--nvpg-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;            /* geen horizontale scroll op mobiel */
}

/* Lange woorden netjes laten afbreken (zachte hyphenation, geen harde breuk) */
h1, h2, h3, h4, p, li, a, span, td, th, dt, dd, figcaption {
  overflow-wrap: break-word;
}
/* Nette woordafbreking met koppelteken op smalle schermen */
@media (max-width: 560px) {
  .nvpg-hero__title,
  .nvpg-themarow__title,
  .nvpg-newscard__title,
  .nvpg-article__title,
  .nvpg-prose h2, .nvpg-prose h3,
  .nvpg-about__title {
    hyphens: auto;
  }
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--nvpg-green); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--nvpg-blue); }

/* Nette focus-ring voor toetsenbordnavigatie (premium + toegankelijk) */
:focus-visible {
  outline: 2px solid var(--nvpg-green);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;   /* strakkere, premium kop-zetting */
  color: var(--nvpg-text);    /* zwart, zoals nvpg.nl */
  text-wrap: balance;          /* nettere regelafbreking in koppen */
}

p { margin: 0 0 var(--space-4); }

.nvpg-skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--nvpg-green-dark);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 200;
}
.nvpg-skiplink:focus { left: var(--space-3); top: var(--space-3); color: #fff; }

/* --------------------------------------------------------------------------
   3. Buttons & link-accenten
   -------------------------------------------------------------------------- */
.nvpg-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--nvpg-green);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.8rem var(--space-6);
  border-radius: 999px;       /* pill — past bij de zoekbalk, premium */
  box-shadow: 0 6px 16px -6px rgba(95, 172, 48, 0.55);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.nvpg-btn:hover {
  background: var(--nvpg-green-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(44, 82, 46, 0.6);
}
.nvpg-btn:active { transform: translateY(0); }

.nvpg-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  color: var(--nvpg-green);
  white-space: nowrap;
  text-decoration: none;   /* nooit onderstreept, ook niet binnen prose */
}
.nvpg-link-arrow::after {
  content: "\2192"; /* → */
  transition: transform var(--t);
}
.nvpg-link-arrow:hover { color: var(--nvpg-green-deep); }
.nvpg-link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   4. Header & navigatie (mobile-first)
   -------------------------------------------------------------------------- */
.nvpg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nvpg-white);
  border-bottom: 1px solid var(--nvpg-border);
}
.nvpg-header__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nvpg-header__logo { flex: 0 0 auto; }
.nvpg-header__logo img { width: 130px; height: auto; }

.nvpg-header__toggle {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  margin-left: auto;            /* duw naar rechts, los van logo */
  background: transparent;
  border: 1px solid #cfd4cb;    /* zichtbare rand */
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nvpg-header__toggle-bar {
  display: block;
  height: 2px;
  background: var(--nvpg-green-dark);
  transition: transform var(--t), opacity var(--t);
}
.nvpg-header__toggle[aria-expanded="true"] .nvpg-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nvpg-header__toggle[aria-expanded="true"] .nvpg-header__toggle-bar:nth-child(2) { opacity: 0; }
.nvpg-header__toggle[aria-expanded="true"] .nvpg-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav drawer (mobile) */
.nvpg-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--nvpg-white);
  border-bottom: 1px solid var(--nvpg-border);
  box-shadow: var(--shadow);
  padding: var(--space-3) var(--space-4) var(--space-5);
}
.nvpg-nav.is-open { display: block; }

.nvpg-nav__list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.nvpg-nav__item { border-bottom: 1px solid var(--nvpg-border); }
.nvpg-nav__link {
  display: block;
  padding: var(--space-3) 0;
  font-weight: 700;
  color: var(--nvpg-text);
}
.nvpg-nav__link:hover { color: var(--nvpg-green); }
/* Actieve pagina: menu-item groen (zoals nvpg.nl currentpath) */
.nvpg-nav__link--active { color: var(--nvpg-green); }

.nvpg-nav__sub {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0 0 var(--space-2) var(--space-4);
}
.nvpg-nav__sub a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--nvpg-text-muted);
  font-size: 0.95rem;
}
.nvpg-nav__sub a:hover { color: var(--nvpg-green); }

.nvpg-search { position: relative; display: flex; align-items: center; }
.nvpg-search__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}
.nvpg-search__input {
  width: 100%;
  height: 40px;                 /* slank, zoals nvpg.nl */
  font: inherit;
  font-size: 0.95rem;
  padding: 0 38px 0 16px;       /* ruimte rechts voor het loepje */
  border: 1px solid #e3e1da;    /* dunne lichte rand, geen vulling */
  border-radius: 20px;
  background: transparent;
  color: var(--nvpg-text);
}
.nvpg-search__input::placeholder { color: #8a8a84; }
.nvpg-search__input:focus {
  outline: none;
  border-color: var(--nvpg-green);
}
.nvpg-search__button {
  position: absolute;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #707070;
  cursor: pointer;
}
.nvpg-search__button:hover { color: var(--nvpg-green); }

/* Nav-chevron (eigen SVG i.p.v. Font Awesome Pro) — roteert op hover zoals live */
.nvpg-nav__chevron {
  margin-left: 5px;
  vertical-align: -2px;
  color: currentColor;
  transition: transform 0.2s;
}

/* --------------------------------------------------------------------------
   5. Hero — premium rounded card (ref: Execora), compacter + nieuws-card
   -------------------------------------------------------------------------- */
.nvpg-herowrap {
  max-width: var(--content-width);
  margin: 0 auto;
  /* mobiel: compacte ruimte boven de hero */
  padding: var(--space-4) var(--gutter) 0;
}
.nvpg-hero {
  position: relative;
  border-radius: var(--radius);        /* subtiele hoeken (14px) — institutioneel */
  overflow: hidden;
  min-height: clamp(360px, 50vw, 520px);
  display: flex;
  isolation: isolate;
}
.nvpg-hero__media,
.nvpg-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.nvpg-hero__img { object-fit: cover; z-index: -2; }
/* Rustige donkergroene overlay — lichter, foto ademt meer (vooral rechts) */
.nvpg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(28, 38, 20, 0.78) 0%, rgba(28, 38, 20, 0.52) 45%, rgba(28, 38, 20, 0.18) 100%),
    linear-gradient(to top, rgba(28, 38, 20, 0.35), transparent 60%);
}
.nvpg-hero__content {
  position: relative;
  align-self: center;
  width: 100%;
  min-width: 0;                  /* flex-kind mag krimpen (geen overflow) */
  max-width: 800px;              /* breder: lange naam/koppen passen zonder harde woordafbreking */
  padding: var(--space-7) clamp(var(--space-5), 5vw, var(--space-8));
}
.nvpg-hero__title {
  color: #fff;
  font-size: clamp(1.6rem, 6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
  margin-bottom: var(--space-4);
}
.nvpg-hero__text {
  color: #e8efe2;
  max-width: 52ch;
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  line-height: 1.6;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  margin-bottom: var(--space-5);
}
/* CTA: witte tekst + pijl, zoals de andere link-arrows */
.nvpg-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}
.nvpg-hero__cta svg { transition: transform var(--t); }
.nvpg-hero__cta:hover { color: #fff; }
.nvpg-hero__cta:hover svg { transform: translateX(4px); }

/* Floating nieuws-card rechtsonder (glassy) */
.nvpg-hero__news {
  position: absolute;
  right: clamp(var(--space-4), 3vw, var(--space-6));
  bottom: clamp(var(--space-4), 3vw, var(--space-6));
  z-index: 2;
  display: none;                       /* alleen op grotere schermen */
  flex-direction: column;
  gap: var(--space-2);
  width: min(330px, 36vw);
  padding: var(--space-5);
  border-radius: var(--radius);
  /* Solide donkergroen paneel — geen glas, institutioneel */
  background: var(--nvpg-green-dark);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.5);
  transition: transform var(--t), box-shadow var(--t);
}
.nvpg-hero__news:hover {
  transform: translateY(-3px);
  color: #fff;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.6);
}
.nvpg-hero__news-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nvpg-green);
}
.nvpg-hero__news-title {
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nvpg-hero__news-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  margin-top: var(--space-1);
}
.nvpg-hero__news-link svg { transition: transform var(--t); }
.nvpg-hero__news:hover .nvpg-hero__news-link svg { transform: translateX(4px); }

@media (min-width: 900px) {
  .nvpg-hero__news { display: flex; }
}

/* Compacte hero-variant (subpagina's: thema's e.d.) — minder hoog */
.nvpg-hero--compact { min-height: clamp(200px, 26vw, 300px); }
.nvpg-hero--compact .nvpg-hero__content { align-self: center; padding-block: var(--space-6); }
.nvpg-hero--compact .nvpg-hero__title { margin-bottom: 0; overflow-wrap: normal; }  /* geen harde afbreking van "Grondreinigingsmethoden" (mobiel hyphens via 560px-regel) */
.nvpg-hero--compact .nvpg-hero__breadcrumb {
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
  color: #d8e0d2;
}
.nvpg-hero--compact .nvpg-hero__breadcrumb a { color: #d8e0d2; }
.nvpg-hero--compact .nvpg-hero__breadcrumb a:hover { color: #fff; }
.nvpg-hero--compact .nvpg-hero__breadcrumb span[aria-current] { color: #fff; }

/* --------------------------------------------------------------------------
   6. Generieke sectie-layout
   -------------------------------------------------------------------------- */
.nvpg-section { padding: var(--space-8) 0; }
.nvpg-section--alt { background: var(--nvpg-lightgray); }
.nvpg-section__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.nvpg-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.nvpg-section__title {
  position: relative;
  font-size: clamp(1.6rem, 4vw, 2.15rem);
  padding-left: var(--space-4);
}
/* Subtiel groen accent-streepje vóór de sectietitel (premium detail) */
.nvpg-section__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 4px;
  border-radius: 2px;
  background: var(--nvpg-green);
}

/* --------------------------------------------------------------------------
   7. Thema's — donkergroen paneel met witte links (zoals nvpg.nl)
   -------------------------------------------------------------------------- */
:root {
  --nvpg-theme-card:       #4c6040;  /* binnenste thema-card (live) */
  --nvpg-theme-card-hover: #586c4c;  /* hover (live) */
}
.nvpg-themas__panel {
  background: var(--nvpg-green-dark);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.nvpg-themas__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.nvpg-themas__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  aspect-ratio: 3 / 1;        /* mobiel: brede tegel */
  padding: var(--space-5);
  background: var(--nvpg-theme-card);
  border-radius: 18px;        /* eigen hoeken (niet de 40/26px van live) */
  color: #fff;
  overflow: hidden;
  transition: background-color var(--t), transform var(--t), box-shadow var(--t);
}
/* zachte glans van bovenaf voor diepte (premium) */
.nvpg-themas__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.08), transparent 55%);
  pointer-events: none;
}
.nvpg-themas__card:hover {
  background: var(--nvpg-theme-card-hover);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.45);
}
.nvpg-themas__title {
  position: relative;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.nvpg-themas__arrow {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: transform var(--t), background-color var(--t);
}
.nvpg-themas__card:hover .nvpg-themas__arrow {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------------------------------
   8. Card-component (nieuws / thema's / methoden)
   -------------------------------------------------------------------------- */
.nvpg-card {
  background: var(--nvpg-white);
  border: 1px solid var(--nvpg-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.nvpg-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: transparent;
}

.nvpg-card__media { display: block; overflow: hidden; }
.nvpg-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  transition: transform var(--t-slow);
}
.nvpg-card:hover .nvpg-card__media img { transform: scale(1.04); }
.nvpg-card__body { padding: var(--space-5); }
.nvpg-card__date {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nvpg-green);
  margin-bottom: var(--space-2);
}
.nvpg-card__title { font-size: 1.15rem; margin-bottom: var(--space-3); }
.nvpg-card__title a { color: var(--nvpg-text); }
.nvpg-card__title a:hover { color: var(--nvpg-blue); }
.nvpg-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  color: var(--nvpg-green);
}
.nvpg-card__cta::after { content: "\2192"; transition: transform var(--t); }
.nvpg-card:hover .nvpg-card__cta::after { transform: translateX(3px); }

/* Actueel-layout: featured + lijst — lichtgrijs paneel zoals nvpg.nl */
.nvpg-actueel__grid { display: grid; gap: var(--space-5); }
.nvpg-actueel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.nvpg-actueel .nvpg-card { background: var(--nvpg-lightgray); border-color: transparent; }
.nvpg-card--compact { padding: var(--space-5); }
.nvpg-card--compact .nvpg-card__title { margin-top: 0; }

/* Actueel: links blijven zwart op hover — geen blauw (zoals nvpg.nl) */
.nvpg-actueel .nvpg-card__title a,
.nvpg-actueel .nvpg-card__title a:hover { color: var(--nvpg-text); }
.nvpg-actueel .nvpg-card__cta,
.nvpg-actueel .nvpg-card__cta:hover { color: var(--nvpg-text); }

/* Tegel-grid (methoden) */
.nvpg-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }

/* Methode-tegels (beeld + titel) */
.nvpg-card--method .nvpg-card__link { display: block; color: inherit; }
.nvpg-card--method .nvpg-card__media { display: block; }
.nvpg-card--method .nvpg-card__media img { aspect-ratio: 16 / 9; }
.nvpg-card--method .nvpg-card__body { display: block; }
.nvpg-card--method .nvpg-card__title { margin-bottom: var(--space-2); }

/* --------------------------------------------------------------------------
   9. Leden — marquee carousel
   -------------------------------------------------------------------------- */
.nvpg-marquee {
  overflow: hidden;
  max-width: var(--content-width);
  margin: var(--space-5) auto 0;
  padding: var(--space-5) var(--gutter);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.nvpg-marquee__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  width: max-content;
  gap: 0;
  animation: nvpg-marquee 50s linear infinite;
}
.nvpg-marquee:hover .nvpg-marquee__track { animation-play-state: paused; }
/* Cel-formaat exact als nvpg.nl: 200x160 met 20px marge, logo vult de cel (10px padding) */
.nvpg-marquee__item {
  flex: 0 0 auto;
  width: 200px;
  height: 160px;
  margin: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.nvpg-marquee__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* full-color logo's op witte achtergrond, zoals nvpg.nl */
}

@keyframes nvpg-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.nvpg-footer {
  /* donkerdere taupe ("bruine") footer met witte tekst — leesbaar */
  background: var(--nvpg-taupe-dark);
  color: #fff;
}
.nvpg-footer a { color: #fff; }
.nvpg-footer a:hover { color: var(--nvpg-green-dark); }

.nvpg-footer__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-7) var(--gutter);
  display: grid;
  gap: var(--space-6);
}
.nvpg-footer__title {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
}
.nvpg-footer__title--follow { margin-top: var(--space-5); }
.nvpg-footer__list { list-style: none; margin: 0; padding: 0; }
.nvpg-footer__list li { margin-bottom: var(--space-2); }
.nvpg-footer__contact { font-style: normal; line-height: 1.9; }
.nvpg-footer__social { font-weight: 700; }

.nvpg-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.35); }
.nvpg-footer__bottom-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}
.nvpg-footer__credit { color: #fff; }
.nvpg-footer__credit a { color: #fff; font-weight: 700; transition: color var(--t); }
.nvpg-footer__credit a:hover { color: var(--nvpg-green); }

/* --------------------------------------------------------------------------
   11. Scroll-fade (JS voegt .is-visible toe; fallback = zichtbaar)
   -------------------------------------------------------------------------- */
[data-fade] { opacity: 1; }
.nvpg-js [data-fade] {
  opacity: 0;
  transform: translateY(24px);
}
.nvpg-js [data-fade].is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   12. Breakpoint 720px — tablet
   -------------------------------------------------------------------------- */
@media (min-width: 720px) {
  :root { --gutter: 50px; }   /* ruime zijkanten zoals nvpg.nl */

  .nvpg-header__logo img { width: 150px; }

  .nvpg-actueel__grid { grid-template-columns: 1.1fr 1fr; align-items: start; }

  .nvpg-tiles--3 { grid-template-columns: repeat(3, 1fr); }

  .nvpg-themas__list { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .nvpg-themas__list--4 { grid-template-columns: repeat(2, 1fr); }
  .nvpg-themas__panel { padding: var(--space-5); }
  .nvpg-themas__card { aspect-ratio: 2 / 1; }

  /* Thema-overzicht: ruimere rijen op desktop */
  .nvpg-themapanel { padding: var(--space-7) var(--space-7) var(--space-5); }
  .nvpg-themarow { padding: var(--space-7) var(--space-4); gap: var(--space-6); }

  .nvpg-footer__inner { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   13. Breakpoint 1100px — desktop nav
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  .nvpg-header__toggle { display: none; }

  .nvpg-nav {
    display: flex;
    position: static;
    align-items: center;
    gap: var(--space-5);
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    flex: 1;
    justify-content: flex-start;   /* menu links uitlijnen, naast het logo */
    margin-left: var(--space-6);
  }

  .nvpg-nav__list {
    display: flex;
    gap: var(--space-3);
    margin: 0;
  }
  .nvpg-nav__item { border: 0; position: relative; }
  .nvpg-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 10px 10px;         /* iets ruimer */
    font-size: 16px;            /* groter dan voorheen (14px) */
    font-weight: 500;
    text-transform: uppercase;  /* HOOFDLETTERS */
    letter-spacing: 0.02em;
    color: var(--nvpg-text);
    white-space: nowrap;        /* menu-items niet afbreken */
  }
  .nvpg-nav__link:hover { color: var(--nvpg-green); }
  .nvpg-nav__link--active { color: var(--nvpg-green); }  /* actieve pagina groen (desktop) */

  /* Chevron roteert 180° als de parent gehoverd wordt (zoals live) */
  .nvpg-nav__item--has-sub:hover .nvpg-nav__chevron,
  .nvpg-nav__item--has-sub:focus-within .nvpg-nav__chevron {
    transform: rotate(180deg);
  }

  /* Desktop dropdown — witte rounded panel met ruime padding (zoals live) */
  .nvpg-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    margin: 0;
    padding: var(--space-5);
    background: var(--nvpg-white);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--t), transform var(--t), visibility var(--t);
    z-index: 50;
  }
  .nvpg-nav__item--has-sub:hover .nvpg-nav__sub,
  .nvpg-nav__item--has-sub:focus-within .nvpg-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nvpg-nav__sub a {
    padding: 6px 0;
    font-size: 18px;            /* live: 18px */
    font-weight: 300;           /* live: light */
    color: var(--nvpg-text);
    white-space: nowrap;
  }
  .nvpg-nav__sub a:hover { color: var(--nvpg-green); }

  .nvpg-search { flex: 0 0 auto; margin-left: auto; }  /* duwt zoekbalk naar rechts */
  .nvpg-search__input { width: 165px; }   /* slank, zoals nvpg.nl */

  .nvpg-section { padding: var(--space-8) 0; }
}

@media (min-width: 1340px) {
  .nvpg-nav { margin-left: var(--space-7); }
}

/* --------------------------------------------------------------------------
   14. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nvpg-marquee__track { animation: none; }
  .nvpg-js [data-fade] { opacity: 1; transform: none; }
  .nvpg-card:hover .nvpg-card__media img { transform: none; }
  * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   15. Print — alleen de inhoud, geen header/footer/nav/share over de pagina
   -------------------------------------------------------------------------- */
@media print {
  .nvpg-header,
  .nvpg-footer,
  .nvpg-breadcrumb,
  .nvpg-share,
  .nvpg-article__back,
  .nvpg-leden,
  .nvpg-skiplink { display: none !important; }

  .nvpg-page { padding: 0 !important; }
  [data-fade] { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ==========================================================================
   SUBPAGINA'S — gedeelde componenten (page-hero, breadcrumb, prose,
   leden-grid, artikel). Zelfde huisstijl als de homepage.
   ========================================================================== */

/* --- Page hero (compacte kop voor info/overzichtspagina's) --- */
.nvpg-pagehero {
  background: var(--nvpg-green-dark);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.nvpg-pagehero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(95, 172, 48, 0.22), transparent 60%);
  pointer-events: none;
}
.nvpg-pagehero__inner {
  position: relative;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-7) var(--gutter);
}
.nvpg-pagehero__title {
  color: #fff;
  font-size: clamp(1.8rem, 5vw, 3rem);
}
.nvpg-pagehero__lead {
  color: #eef2ea;
  max-width: 70ch;
  margin-top: var(--space-3);
  margin-bottom: 0;
}

/* --- Beeld-banner (voor methode-pagina's, zoals live) --- */
.nvpg-banner { position: relative; }
.nvpg-banner__img {
  width: 100%;
  height: clamp(220px, 38vw, 480px);
  object-fit: cover;
  display: block;
}
.nvpg-banner__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-6) var(--gutter);
  background: linear-gradient(to top, rgba(28, 38, 20, 0.85), rgba(35, 47, 25, 0.1) 70%, transparent);
}
.nvpg-banner__title {
  max-width: var(--content-width);
  margin: 0 auto;
  width: 100%;
  color: #fff;
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* --- Breadcrumb --- */
.nvpg-breadcrumb {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter) 0;
  font-size: 0.9rem;
  color: var(--nvpg-text-muted);
}
.nvpg-breadcrumb a { color: var(--nvpg-text-muted); }
.nvpg-breadcrumb a:hover { color: var(--nvpg-green); }
.nvpg-breadcrumb span[aria-current] { color: var(--nvpg-text); }

/* --- Content-wrapper / prose --- */
.nvpg-page { padding: var(--space-6) 0; }   /* mobiel: compacter na de hero */
.nvpg-page__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.nvpg-prose { max-width: 75ch; }
.nvpg-prose > * + * { margin-top: var(--space-4); }
.nvpg-prose h2 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin-top: var(--space-6); }
.nvpg-prose h3 { font-size: 1.25rem; margin-top: var(--space-5); }
.nvpg-prose h2:first-child, .nvpg-prose h3:first-child { margin-top: 0; }
.nvpg-prose p { color: #1d1d1d; }
.nvpg-prose ul { margin: 0; padding-left: 1.25em; }
.nvpg-prose li { margin-bottom: var(--space-2); }
.nvpg-prose a:not(.nvpg-link-arrow) { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Twee-koloms info-blok (bv. Over ons: kop links, tekst rechts) */
.nvpg-split { display: grid; gap: var(--space-5); }

/* --- Contact: intro-lead, gegevens-kaart + formulier --- */
.nvpg-contact { display: grid; gap: var(--space-6); }
.nvpg-contact__lead { max-width: 70ch; font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.6; color: #1d1d1d; margin-bottom: var(--space-7); text-wrap: pretty; }

/* Gegevens-kaart (secretariaat) */
.nvpg-contactinfo {
  background: var(--nvpg-green-dark);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--space-7) var(--space-6);
}
.nvpg-contactinfo__title { color: #fff; font-size: 1.3rem; margin-bottom: var(--space-5); }
.nvpg-contactinfo__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.nvpg-contactinfo__item { display: flex; gap: var(--space-4); align-items: flex-start; }
.nvpg-contactinfo__icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.nvpg-contactinfo__icon svg { width: 18px; height: 18px; }
.nvpg-contactinfo__label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nvpg-green); margin-bottom: 2px; }
.nvpg-contactinfo__value { font-style: normal; line-height: 1.5; color: #fff; }
.nvpg-contactinfo__value a { color: #fff; }
.nvpg-contactinfo__value a:hover { color: #b9e89a; }

/* Formulier-kaart */
.nvpg-formcard {
  background: var(--nvpg-white);
  border: 1px solid var(--nvpg-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-7) var(--space-6);
}
.nvpg-form { display: grid; gap: var(--space-5); }
.nvpg-form__row { display: grid; gap: var(--space-5); }
.nvpg-field { display: flex; flex-direction: column; gap: var(--space-2); }
.nvpg-field__label { font-weight: 700; font-size: 0.95rem; }
.nvpg-field__req { color: var(--nvpg-green); }
.nvpg-field input,
.nvpg-field textarea {
  font: inherit;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--nvpg-border);
  border-radius: var(--radius-sm);
  background: var(--nvpg-lightgray);
  color: var(--nvpg-text);
}
.nvpg-field input:focus,
.nvpg-field textarea:focus { outline: 2px solid var(--nvpg-green); outline-offset: 1px; background: #fff; }
.nvpg-field textarea { min-height: 140px; resize: vertical; }
.nvpg-form__submit {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--nvpg-green);
  color: #fff;
  font: inherit;
  font-weight: 700;
  border: 0;
  padding: 0.8rem var(--space-7);
  border-radius: 999px;
  box-shadow: 0 6px 16px -6px rgba(95, 172, 48, 0.55);
  cursor: pointer;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.nvpg-form__submit:hover { background: var(--nvpg-green-deep); transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(44, 82, 46, 0.6); }
.nvpg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Over ons: intro-lead, waarden-kaarten, bestuur-kaart --- */
.nvpg-about__intro { max-width: 70ch; margin-bottom: var(--space-8); }
.nvpg-about__title { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: var(--space-5); }
.nvpg-about__lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.6; color: #1d1d1d; }

.nvpg-values { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: var(--space-5); }
.nvpg-value {
  position: relative;
  padding: var(--space-6);
  background: var(--nvpg-white);
  border: 1px solid var(--nvpg-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 4px solid var(--nvpg-green);
}
.nvpg-value__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nvpg-green);
  margin-bottom: var(--space-3);
}
.nvpg-value__text { color: #1d1d1d; line-height: 1.6; margin: 0; }

/* Bestuur-kaart */
.nvpg-board {
  padding: var(--space-7) var(--space-6);
  background: #e3efd8;
  border-radius: var(--radius);
}
.nvpg-board__title { font-size: 1.3rem; margin-bottom: var(--space-5); }
.nvpg-board__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.nvpg-board__role {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nvpg-green-dark);
  display: block;
  margin-bottom: var(--space-1);
}
.nvpg-board__name { font-size: 1.15rem; font-weight: 700; color: var(--nvpg-text); }

/* Methode-detail: sticky 'In het kort'-aside links, brede tekst rechts */
.nvpg-methode { display: grid; gap: var(--space-6); }
.nvpg-methode__lead {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--nvpg-text);
  margin-bottom: var(--space-5);
  max-width: 60ch;
}
.nvpg-methode__body > * + * { margin-top: var(--space-4); }
.nvpg-methode__body p { color: #1d1d1d; max-width: 68ch; }
.nvpg-methode__body h3 { font-size: 1.3rem; margin-top: var(--space-6); }

/* Accent-kaart voor de factoren-bullets */
.nvpg-factors {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: #e3efd8;                 /* lichtgroen */
  border-radius: var(--radius);
  border-left: 4px solid var(--nvpg-green);
}
.nvpg-factors__title {
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
}
.nvpg-factors__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.nvpg-factors__list li {
  position: relative;
  padding-left: var(--space-5);
  line-height: 1.5;
}
.nvpg-factors__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nvpg-green);
}

/* Sticky 'In het kort'-kaart — verborgen op mobiel/tablet, alleen desktop */
.nvpg-methode__aside { display: none; }
.nvpg-toc {
  background: var(--nvpg-white);
  border: 1px solid var(--nvpg-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}
.nvpg-toc__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nvpg-green);
  margin-bottom: var(--space-4);
}
.nvpg-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.nvpg-toc__list a {
  display: block;
  padding: var(--space-2) 0;
  font-weight: 700;
  color: var(--nvpg-text);
  border-bottom: 1px solid var(--nvpg-border);
}
.nvpg-toc__list li:last-child a { border-bottom: 0; }
.nvpg-toc__list a:hover { color: var(--nvpg-green); }

/* Thema-layout: intro links, artikellijst rechts (zoals screenshot) */
.nvpg-themalayout { display: grid; gap: var(--space-6); }
.nvpg-themalayout__intro-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: var(--space-5);
}
.nvpg-themalayout__lead { max-width: 72ch; }            /* breed uitgelijnde platte tekst */
.nvpg-themalayout--single .nvpg-themalayout__lead { max-width: 90ch; }  /* breed zonder artikelen, nog leesbaar */
.nvpg-themalayout__articles {                            /* gekoppelde artikelen in een kader */
  background: var(--nvpg-lightgray);
  border: 1px solid var(--nvpg-border);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.nvpg-themalayout__lead p { color: var(--nvpg-text-muted); }
.nvpg-themalayout__lead > * + * { margin-top: var(--space-4); }
.nvpg-themalayout__articles-head {
  font-size: 1.3rem;
  margin-bottom: var(--space-4);
}

/* --- Definitie-rijtjes (bestuur e.d.) --- */
.nvpg-deflist { display: grid; gap: var(--space-2); margin: 0; }
.nvpg-deflist__row { display: flex; gap: var(--space-3); }
.nvpg-deflist__row dt { font-weight: 700; min-width: 140px; margin: 0; }
.nvpg-deflist__row dd { margin: 0; color: var(--nvpg-text-muted); }

/* --- Leden-grid (net rooster, full-color logos op witte kaarten) --- */
.nvpg-ledengrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* tracks mogen krimpen */
  gap: var(--space-4);
}
.nvpg-ledencard {
  position: relative;                 /* voor stretched link */
  min-width: 0;                       /* mag krimpen in grid */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-4);
  background: var(--nvpg-white);
  border: 1px solid #eceae4;          /* heel subtiele rand */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.nvpg-ledencard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: transparent;
}
.nvpg-ledencard__logo {
  height: 64px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Logo's standaard grijs (rustig), in kleur op hover */
.nvpg-ledencard__logo img {
  max-height: 64px;
  max-width: 80%;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: filter var(--t), opacity var(--t);
}
.nvpg-ledencard:hover .nvpg-ledencard__logo img {
  filter: grayscale(0);
  opacity: 1;
}
.nvpg-ledencard__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--nvpg-text);
}
.nvpg-ledencard__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--nvpg-text-muted);
  transition: color var(--t);
}
/* hele kaart klikbaar (stretched link) — betere tap-target op mobiel */
.nvpg-ledencard__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.nvpg-ledencard__link::after { content: "\2192"; transition: transform var(--t); }
.nvpg-ledencard:hover .nvpg-ledencard__link { color: var(--nvpg-green); }
.nvpg-ledencard:hover .nvpg-ledencard__link::after { transform: translateX(3px); }

/* --- Nieuwslijst (thema-overzicht / actueel) --- */
.nvpg-newslist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.nvpg-newsitem {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: var(--space-5);
  background: var(--nvpg-lightgray);
  border-radius: var(--radius);
  padding: var(--space-6);
  transition: transform var(--t), box-shadow var(--t), background-color var(--t);
}
.nvpg-newsitem:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.nvpg-newsitem__date {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nvpg-green);
  margin-bottom: var(--space-3);
}
.nvpg-newsitem__title { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.3; }
/* Hele card klikbaar via stretched link */
.nvpg-newsitem__title a { color: var(--nvpg-text); }
.nvpg-newsitem__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.nvpg-newsitem:hover .nvpg-newsitem__title a { text-decoration: underline; text-underline-offset: 3px; }
/* Pijltje rechts (↗), wordt groen op hover */
.nvpg-newsitem__arrow {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  flex: 0 0 auto;
  color: #9a9a93;
  transition: color var(--t), transform var(--t);
}
.nvpg-newsitem > div { grid-column: 1; grid-row: 1; }
.nvpg-newsitem:hover .nvpg-newsitem__arrow {
  color: var(--nvpg-green);
  transform: translateX(4px);
}

/* --- Artikel --- */
.nvpg-article { max-width: 1200px; margin-inline: auto; }   /* breed + gebalanceerd (conform nvpg.nl-referentie: ~1210px, gelijke marges) */
.nvpg-article__body img { max-width: 100%; height: auto; border-radius: var(--radius); }  /* afbeeldingen niet groter dan de kolom */
.nvpg-article__meta {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nvpg-green);
  margin-bottom: var(--space-3);
}
.nvpg-article__title { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: var(--space-5); }

/* Artikel-banner: full-width foto (16:9) boven de titel */
.nvpg-articlebanner {
  max-width: var(--content-width);
  margin: var(--space-5) auto var(--space-6);
  padding: 0 var(--gutter);
}
.nvpg-articlebanner__inner {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--nvpg-lightgray);
}
.nvpg-articlebanner__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
/* Logo-variant: logo netjes gecentreerd op lichtgroen vlak (niet uitgerekt) */
.nvpg-articlebanner--logo .nvpg-articlebanner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 5;
  background: #e3efd8;
}
.nvpg-articlebanner--logo .nvpg-articlebanner__img {
  width: auto;
  height: 56%;
  max-width: 70%;
  aspect-ratio: auto;
  object-fit: contain;
}

.nvpg-article__figure { margin: 0 0 var(--space-6); }
.nvpg-article__figure img { width: 100%; border-radius: var(--radius); display: block; }
.nvpg-article__body > * + * { margin-top: var(--space-4); }
.nvpg-article__body h3 { font-size: 1.3rem; margin-top: var(--space-6); }
.nvpg-article__body p:first-of-type { font-size: 1.1rem; font-weight: 700; }
.nvpg-article__body a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.nvpg-article__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
  font-weight: 700;
  color: var(--nvpg-green);
}
.nvpg-article__back::before { content: "\2190"; }

/* Artikel-meta header: datum + breadcrumb-achtige regel */
.nvpg-article__head { margin-bottom: var(--space-6); }

/* Deel- en printbalk (lichtgroene pill) */
.nvpg-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--nvpg-border);
}
.nvpg-share__list {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px;
  background: #e3efd8;           /* lichtgroene pill */
  border-radius: 999px;
}
.nvpg-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--nvpg-green-dark);
  cursor: pointer;
  transition: background-color var(--t), color var(--t);
}
.nvpg-share__btn:hover { background: var(--nvpg-green); color: #fff; }
.nvpg-share__btn svg { width: 17px; height: 17px; fill: currentColor; }

/* --- Actueel: grid van nieuwskaarten + paginering --- */
.nvpg-newsgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}
.nvpg-newsgrid .nvpg-card { background: var(--nvpg-white); }
.nvpg-newscard__date {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nvpg-green);
  margin-bottom: var(--space-2);
}
.nvpg-newscard__title { font-size: 1.1rem; line-height: 1.3; margin-bottom: var(--space-4); }
.nvpg-newscard__title a { color: var(--nvpg-text); }
.nvpg-newsgrid .nvpg-card:hover .nvpg-newscard__title a { color: var(--nvpg-text); text-decoration: underline; text-underline-offset: 3px; }
.nvpg-newscard__media img { aspect-ratio: 16 / 9; background: var(--nvpg-lightgray); object-fit: contain; padding: var(--space-4); }

/* Paginering */
.nvpg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
  font-weight: 700;
}
.nvpg-pagination__info { color: var(--nvpg-text-muted); }
.nvpg-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--nvpg-border);
  border-radius: 999px;
  color: var(--nvpg-green-dark);
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.nvpg-pagination__link:hover { background: var(--nvpg-green); border-color: var(--nvpg-green); color: #fff; }

/* --- Thema-overzicht: brede rijen onder elkaar (PolyNed-stijl) op groen paneel --- */
.nvpg-themaintro {
  max-width: 90ch;             /* volle breedte: niet half afgebroken */
  color: var(--nvpg-text-muted);
  margin-bottom: var(--space-7);
}
.nvpg-themapanel {
  position: relative;
  background: var(--nvpg-green-dark);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-6) var(--space-4);
  overflow: hidden;
}
.nvpg-themapanel::before {  /* subtiele glans, diepte */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, rgba(95,172,48,0.16), transparent 60%);
  pointer-events: none;
}
.nvpg-themapanel__heading {
  position: relative;
  color: #b9e89a;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.nvpg-themarows {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* altijd 2 kolommen — ook tablet + mobiel */
  column-gap: var(--space-4);                          /* compacte tussenruimte op smalle schermen */
}
@media (min-width: 768px) {
  .nvpg-themarows { column-gap: var(--space-7); }      /* ruimere kolomspatie op tablet/desktop */
}
.nvpg-themarows > li { border-top: 1px solid rgba(255,255,255,0.14); }

/* Eén brede rij */
.nvpg-themarow {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-3);
  color: #fff;
  transition: padding var(--t), color var(--t);
}
/* hover-sweep: lichtgroene balk schuift van links in */
.nvpg-themarow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(95,172,48,0.22), transparent 70%);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.nvpg-themarow:hover { color: #fff; padding-left: var(--space-5); }
.nvpg-themarow:hover::before { opacity: 1; }

.nvpg-themarow__num {
  position: relative;
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--nvpg-green);
  width: 2.4em;
}
.nvpg-themarow__main { position: relative; flex: 1; min-width: 0; }
.nvpg-themarow__title {
  display: block;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.nvpg-themarow__desc {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.98rem;
  line-height: 1.5;
  color: #cdd8c4;
  max-width: 70ch;
}
.nvpg-themarow__arrow {
  position: relative;
  flex: 0 0 auto;
  color: #fff;
  opacity: 0.5;
  transition: transform var(--t), opacity var(--t);
}
.nvpg-themarow:hover .nvpg-themarow__arrow { opacity: 1; transform: translateX(6px); }
/* Smalle 2-koloms-mobiel: compacter zodat titel + zinnetje netjes passen */
@media (max-width: 600px) {
  .nvpg-themarow { padding: var(--space-4) var(--space-3); gap: var(--space-2); }
  .nvpg-themarow__title { font-size: 1.05rem !important; line-height: 1.2; }  /* wint van een bredere clamp-regel */
  .nvpg-themarow__desc { font-size: 0.8rem; line-height: 1.4; margin-top: 4px; }
  .nvpg-themarow__arrow { display: none; }   /* geen pijl in de smalle kolom; de hele rij blijft klikbaar */
}

/* Documenten-variant: kleinere titel + datum-label, download-pijl beweegt omlaag */
.nvpg-themarow--doc .nvpg-themarow__title { font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.nvpg-themarow__meta {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nvpg-green);
}
.nvpg-themarow--doc:hover .nvpg-themarow__arrow { transform: translateY(3px); }

/* --- Subpagina breakpoints --- */
@media (min-width: 720px) {
  .nvpg-herowrap { padding-top: var(--space-8); }   /* desktop: ruimere bovenmarge */
  .nvpg-page { padding: var(--space-8) 0; }          /* desktop: ruimere sectie-padding */
  .nvpg-split { grid-template-columns: 1fr 1.6fr; align-items: start; gap: var(--space-7); }
  .nvpg-ledengrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .nvpg-newsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nvpg-values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nvpg-board__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nvpg-form__row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .nvpg-contact { grid-template-columns: 0.8fr 1.2fr; align-items: start; gap: var(--space-7); }
}
@media (min-width: 1100px) {
  .nvpg-ledengrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nvpg-newsgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Thema: intro links (sticky), artikellijst rechts */
  .nvpg-themalayout {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-8);
    align-items: start;
  }
  .nvpg-themalayout__intro {
    position: sticky;
    /* ~95px sticky header + ~35px witruimte erboven, zonder de header te tonen */
    top: 130px;
  }

  /* Thema zonder artikelen: volle breedte, niet sticky */
  .nvpg-themalayout--single { grid-template-columns: 1fr; }
  .nvpg-themalayout--single .nvpg-themalayout__intro { position: static; }
  .nvpg-themalayout--single .nvpg-themalayout__lead { max-width: 90ch !important; }  /* wint van een bredere reset elders */

  /* Methode-detail: leesbare tekstkolom (de "In het kort"-aside is verwijderd) */
  .nvpg-methode {
    grid-template-columns: minmax(0, 80ch);
    gap: var(--space-8);
    align-items: start;
  }
  .nvpg-methode__aside {
    display: block;
    position: sticky;
    top: 130px;
    order: -1;
  }
}

/* === Fluent Forms → NVPG contactformulier-styling ===
   Maps Fluent Forms' output (.frm-fluent-form / .ff-el-*) onto the NVPG form look.
   Scoped under .nvpg-formcard so it only affects the contact form. */
.nvpg-formcard .frm-fluent-form {
  display: grid;
  gap: var(--space-5);
  /* Recolor Fluent Forms' theme primary (button bg + accents) to the NVPG green via its own
     CSS variable — beats FF's high-specificity per-form inline CSS without a specificity fight. */
  --fluentform-primary: var(--nvpg-green);
  --fluentform-primary-hover: var(--nvpg-green-deep);
}
.nvpg-formcard .ff-el-group { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.nvpg-formcard .ff-t-container { display: grid; gap: var(--space-5); margin: 0; }
.nvpg-formcard .ff-t-cell { width: auto; padding: 0; }
.nvpg-formcard .ff-el-input--label { margin: 0; padding: 0; }
.nvpg-formcard .ff-el-input--label label { font-weight: 700; font-size: 0.95rem; margin: 0; padding: 0; color: var(--nvpg-text); }
.nvpg-formcard .frm-fluent-form .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: var(--nvpg-green) !important; }
.nvpg-formcard .ff-el-input--content { margin: 0; }
.nvpg-formcard .ff-el-form-control {
  font: inherit;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--nvpg-border);
  border-radius: var(--radius-sm);
  background: var(--nvpg-lightgray);
  color: var(--nvpg-text);
  box-shadow: none;
}
.nvpg-formcard .ff-el-form-control:focus {
  outline: 2px solid var(--nvpg-green);
  outline-offset: 1px;
  background: #fff;
  border-color: var(--nvpg-border);
}
.nvpg-formcard textarea.ff-el-form-control { min-height: 140px; resize: vertical; }
.nvpg-formcard .ff_submit_btn_wrapper { margin-top: var(--space-2); align-items: flex-start; }
.nvpg-formcard .ff-btn-submit {
  align-self: flex-start;
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  background: var(--nvpg-green) !important;
  color: #fff !important;
  font: inherit;
  font-weight: 700;
  border: 0 !important;
  width: auto !important;
  padding: 0.8rem var(--space-7) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 16px -6px rgba(95, 172, 48, 0.55);
  cursor: pointer;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.nvpg-formcard .ff-btn-submit:hover {
  background: var(--nvpg-green-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(44, 82, 46, 0.6);
}
.nvpg-formcard .ff-message-success,
.nvpg-formcard .ff_submit_failed,
.nvpg-formcard .error.text-danger,
.nvpg-formcard .ff-el-is-error .text-danger { font-size: 0.9rem; }
.nvpg-formcard .ff-message-success { color: var(--nvpg-green-deep); font-weight: 600; }
@media (min-width: 720px) {
  .nvpg-formcard .ff-t-container { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   EDITOR-ONLY — gebruik de volledige bewerkcanvas-breedte.
   De frontend-zijmarges (--content-width-cap + de 1500px-witruimtestap) horen NIET
   in de WP-editor: op een breed scherm zou de pagina anders als smalle ~40%-kolom
   tonen. .editor-styles-wrapper bestaat alléén in de editor-iframe, dus de frontend
   blijft ongemoeid.
   ========================================================================== */
.editor-styles-wrapper { --content-width: 100%; }
/* WP kapt niet-uitgelijnde root-blokken op ~840px content-breedte → opheffen in de editor */
.editor-styles-wrapper .is-root-container > .wp-block { max-width: none !important; }
.editor-styles-wrapper .nvpg-herowrap,
.editor-styles-wrapper .nvpg-section__inner,
.editor-styles-wrapper .nvpg-page__inner,
.editor-styles-wrapper .nvpg-header__inner,
.editor-styles-wrapper .nvpg-article,
.editor-styles-wrapper .nvpg-methode,
.editor-styles-wrapper .nvpg-themalayout__lead {
  max-width: none !important;
}