/*
Theme Name: NVPG
Theme URI: https://nvpg.nl/
Author: Webright
Author URI: https://webright.nl/
Description: Minimal classic theme carrying the NVPG design 1:1, powered by Blockstudio 7 file-based blocks and pages. Designer CSS is enqueued verbatim from assets/styles.css.
Version: 1.0.0
Requires PHP: 8.2
Text Domain: nvpg
*/
/* All source design rules live in assets/styles.css (verbatim from the static site).
   Below: additive styling for NEW components only, built on the NVPG design tokens. */

/* ─── Lato self-hosted (geen Google-Fonts-request, geen render-block, AVG-vriendelijk) ─── */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lato-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lato-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/lato-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/lato-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── Galerij (nvpg/galerij) ─── */
.nvpg-galerij { margin: 0; }
.nvpg-galerij__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* auto-fit: lege tracks klappen in → altijd volle, gebalanceerde rijen (ook op tablet) */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4, 20px);
}
.nvpg-galerij__item figure { margin: 0; }
.nvpg-galerij__item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius, 16px);
}
.nvpg-galerij__caption {
  font-size: 0.875rem;
  color: var(--nvpg-taupe-dark, #847d70);
  padding-top: 8px;
}
.nvpg-galerij__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 14px);
  margin-top: var(--space-5, 28px);
}
.nvpg-galerij__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--nvpg-green, #5fac30);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  transition: background-color .2s ease;
}
.nvpg-galerij__btn:hover { background: var(--nvpg-green-dark, #3a4c2f); }

/* ─── Zoekresultaten-pagina ─── */
.nvpg-search--page {
  max-width: 460px;
  margin: 0 0 var(--space-6, 36px);
}
.nvpg-search--page .nvpg-search__input { width: 100%; }

/* ─── CookieYes: NVPG-stijl + geen zwevende revisit-widget ─── */
.cky-btn-revisit-wrapper { display: none !important; } /* heropenen gaat via de footer-knop */
.cky-consent-bar, .cky-preference-center { font-family: 'Lato', sans-serif !important; }
.cky-btn { border-radius: 999px !important; font-weight: 700 !important; }
.cky-btn-accept { background: var(--nvpg-green, #5fac30) !important; border-color: var(--nvpg-green, #5fac30) !important; }
.cky-btn-accept:hover { background: var(--nvpg-green-dark, #3a4c2f) !important; border-color: var(--nvpg-green-dark, #3a4c2f) !important; }
.cky-btn-reject, .cky-btn-customize { color: var(--nvpg-green-dark, #3a4c2f) !important; border-color: var(--nvpg-green-dark, #3a4c2f) !important; }

/* ─── Drawer-submenu accordeon (tablet/mobiel) ───
   Bron toont subs altijd uitgeklapt in de drawer; op iPad wordt het menu
   daardoor erg lang. Ingeklapt + chevron-toggle is een bewuste UX-verbetering. */
@media (max-width: 1099px) {
  .nvpg-nav__item--has-sub .nvpg-nav__sub { display: none; }
  .nvpg-nav__item--has-sub.is-sub-open .nvpg-nav__sub { display: block; }
  .nvpg-nav__item--has-sub > .nvpg-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between; /* chevron rechts = duidelijk tikdoel */
  }
  .nvpg-nav__item--has-sub > .nvpg-nav__link .nvpg-nav__chevron {
    width: 20px;
    height: 20px;
    padding: 2px;
    box-sizing: content-box;
    transition: transform .2s ease;
  }
  .nvpg-nav__item--has-sub.is-sub-open > .nvpg-nav__link .nvpg-nav__chevron {
    transform: rotate(180deg);
  }
}

/* footer-knop voor cookie-voorkeuren (heropent het CookieYes-voorkeurencentrum) */
.nvpg-footer__cookie {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.nvpg-footer__cookie:hover { color: var(--nvpg-green, #5fac30); }

/* ============================================================================
   KLANTFEEDBACK (juni 2026) — additieve overrides op de designer-CSS.
   ============================================================================ */

/* [2] Meer zijwitruimte + content onder de hero uitlijnen met de hero-tekst.
   De hero-tekst is binnen de container ingesprongen met clamp(space-5,5vw,space-8);
   we geven de body-containers dezelfde inspring → één linkerlijn + meer marge. */
@media (min-width: 1000px) {
  .nvpg-section__inner,
  .nvpg-page__inner {
    padding-inline: calc(var(--gutter) + clamp(var(--space-5), 5vw, var(--space-8)));
  }
}

/* [6] Hero-titel breder opzetten (volledige verenigingsnaam mag minder krap wrappen).
   De "Laatste nieuws"-kaart is weg, dus de tekstkolom mag ruimer. */
.nvpg-hero__content { max-width: 860px; }
.nvpg-hero__title { text-wrap: balance; }

/* [9+10] Thema's-overzicht: nummers weg + 2 kolommen (schaalt naar 10-15 thema's). */
@media (min-width: 900px) {
  .nvpg-themapanel .nvpg-themarows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
  }
  .nvpg-themapanel .nvpg-themarows > li { border-top: 0; }
  .nvpg-themapanel .nvpg-themarow { padding-block: var(--space-5); }
}
.nvpg-themarow__title { font-size: clamp(1.25rem, 2vw, 1.7rem); } /* iets compacter in 2 kolommen */

/* [14] Artikel (single nieuws): gebalanceerde, smallere leeskolom + kleinere banner.
   Banner was over de volle content-breedte (te groot); body lijnde links uit. */
.nvpg-articlebanner { max-width: 900px; }
.nvpg-articlebanner__img { aspect-ratio: 16 / 7; }
.nvpg-breadcrumb { max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); }
.nvpg-article { margin-inline: auto; }  /* gecentreerd i.p.v. links geplakt */

/* [15] Thema zonder gekoppelde artikelen → introtekst breed uitgelijnd
   (mét artikelen blijft de 2-koloms kaderlayout). */
@media (min-width: 1000px) {
  .nvpg-themalayout--single .nvpg-themalayout__lead { max-width: none; }
}

/* [16] Methode-detail zonder "In het kort"-aside → content over de volle breedte
   (leesbare maat behouden). */
@media (min-width: 1000px) {
  .nvpg-methode--full { grid-template-columns: 1fr; }
  .nvpg-methode--full .nvpg-methode__content { max-width: 80ch; }
}

/* [17] N2 (Siegbert-sprint): ledenlogo's permanent in kleur — de designer-grijsfilter
   (assets/styles.css .nvpg-ledencard__logo img) additief geneutraliseerd. */
.nvpg-ledencard__logo img { filter: none; opacity: 1; }

/* [18] Contactformulier (G2-form, E2E H1, H2, M32): meldingen, foutregels onder de velden en de belofteregel.
   De meldingsstijl stond eerst als losse <style> in het blok; hier zodat ze ook in de editor-canvas geldt. */
.wr-form-notice { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; font-size: 15px; line-height: 1.5; }
.wr-form-notice--ok { background: #e8f4ec; color: #1b5e20; }
.wr-form-notice--error { background: #fbeaea; color: #b3261e; }
.wr-form-notice:focus { outline: 2px solid currentColor; outline-offset: 2px; }
/* De header is sticky: een sprong naar de melding (#contactmelding) mag niet eronder eindigen; 150 px laat ook de rand van de kaart zien. */
#contactformulier, .wr-form-notice { scroll-margin-top: 150px; }
.nvpg-field__head { font-weight: 700; font-size: 0.95rem; }   /* label en verplichtmarkering naast elkaar, zoals de markering eerst in het label stond */
.nvpg-field__error { margin: 0; font-size: 0.875rem; line-height: 1.4; font-weight: 600; color: #b3261e; }
.nvpg-field__error[hidden], .nvpg-field__error:empty { display: none; }
.nvpg-field input[aria-invalid="true"], .nvpg-field textarea[aria-invalid="true"] { border-color: #b3261e; background: #fff; }
.nvpg-form__promise { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--nvpg-text-muted); }

/* [19] Pagina niet gevonden (G4-site-data, E2E L14): twee uitwegen onder het zoekveld. De knoppen gebruiken het donkere groen van de hover
   (wit op #2c522e is ruim boven 4,5:1); de gewone groene knop haalt dat niet (E2E M31, sitebreed, ander spoor). */
.nvpg-notfound__links { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); margin: 0; }
.nvpg-notfound .nvpg-btn { background: var(--nvpg-green-deep, #2c522e); color: #fff; }
.nvpg-notfound .nvpg-btn:hover { background: var(--nvpg-green-dark, #3a4c2f); }
.nvpg-notfound .nvpg-btn--omlijnd { background: transparent; color: var(--nvpg-green-dark, #3a4c2f); box-shadow: none; border: 2px solid var(--nvpg-green-dark, #3a4c2f); padding: calc(0.8rem - 2px) calc(var(--space-6, 32px) - 2px); }
.nvpg-notfound .nvpg-btn--omlijnd:hover { background: var(--nvpg-green-dark, #3a4c2f); color: #fff; }
/* Copyrightregel in de voettekst (alleen als de klant er een invult). */
.nvpg-footer__copy { color: #fff; }

/* [20] Pagina zonder kop met foto (G5-new-items-admin, E2E M24): de titel van de pagina staat als h1 boven de inhoud (page.php). Een pagina met een
   kop met foto heeft die h1 al en krijgt dit niet. */
.nvpg-page--titel { padding-bottom: 0; }
.nvpg-page__title { font-size: clamp(1.8rem, 4.5vw, 2.6rem); line-height: 1.15; margin: 0; text-wrap: balance; }

/* [21] Nieuwsbericht (G5, E2E M24): de klant mag koppen op niveau 2 tot en met 4 gebruiken; het ontwerp had alleen h3. Zelfde ritme als de h3
   (de bestaande berichten hebben geen h2 of h4, dus er verandert niets aan wat er staat). */
.nvpg-article__body h2 { font-size: 1.6rem; margin-top: var(--space-6); }
.nvpg-article__body h4 { font-size: 1.1rem; line-height: 1.15; margin: var(--space-5) 0 0; }

/* ==========================================================================
   G6 (E2E M30, L16, M31): overloop op 280 en 320 px en kleurcontrast (WCAG AA). Alleen toevoegingen, het ontwerp in assets/styles.css blijft
   zoals het was; de kleuren veranderen zo weinig mogelijk (alleen waar de verhouding onder 4,5 : 1 lag).
   ========================================================================== */

/* M30: het themaoverzicht liep op 280 en 320 px 54 en 14 px te breed (een track van `auto` krimpt niet onder de langste regel). De tekst werd
   afgekapt omdat de body overflow-x verbergt. */
/* Alleen onder 1100 px een kolom: vanaf 1100 px geldt de twee kolommen van assets/styles.css (0.85fr 1.15fr). Een regel zonder mediaquery sloopte die (review F1). */
@media (max-width: 1099px) { .nvpg-themalayout { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1100px) { .nvpg-themalayout:not(.nvpg-themalayout--single) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.nvpg-themalayout__intro,
.nvpg-themalayout__lead,
.nvpg-themalayout__articles { min-width: 0; }
.nvpg-themalayout__intro-title { overflow-wrap: anywhere; }
/* De artikelkaarten in die lijst: de tekstkolom mocht niet krimpen (1fr = minmax(auto, 1fr)), dus de kaart was 21 px breder dan zijn lijst. */
.nvpg-newsitem { grid-template-columns: minmax(0, 1fr) auto; }
.nvpg-newsitem__title { overflow-wrap: anywhere; }
@media (max-width: 359px) {
  .nvpg-themalayout__articles { padding: var(--space-4); }
  .nvpg-newsitem { padding: var(--space-4); column-gap: var(--space-3); }
}

/* L16: de deelbalk (vier knoppen in een pil) was op 280 px 22 px te breed. */
.nvpg-share__list { flex-wrap: wrap; justify-content: center; max-width: 100%; }

/* M31: groen als tekstkleur haalde 2,82 : 1 op wit en 2,5 : 1 op de grijze kaart. Een donkerder groen voor tekst (5,25 : 1 op wit, 4,65 : 1 op
   #f2f1ee), een lichter groen voor de labels op het donkergroene paneel, een donkerder groen voor de Verzenden-knop (wit erop: 5,25 : 1) en een
   donkerdere taupe voor de voettekst (wit erop: 5,44 : 1). Achtergronden, randen en pijlen blijven het oude groen. */
:root {
  --nvpg-green-text:    #3d7a1d;
  --nvpg-green-on-dark: #8fd45f;
  --nvpg-taupe-dark:    #6f695e;
}
a,
.nvpg-link-arrow,
.nvpg-nav__link:hover,
.nvpg-nav__link--active,
.nvpg-nav__sub a:hover,
.nvpg-search__button:hover,
.nvpg-card__date,
.nvpg-card__cta,
.nvpg-breadcrumb a:hover,
.nvpg-field__req,
.nvpg-value__label,
.nvpg-toc__title,
.nvpg-toc__list a:hover,
.nvpg-ledencard:hover .nvpg-ledencard__link,
.nvpg-newsitem__date,
.nvpg-newsitem:hover .nvpg-newsitem__arrow,
.nvpg-article__meta,
.nvpg-article__back,
.nvpg-newscard__date { color: var(--nvpg-green-text); }
.nvpg-contactinfo__label { color: var(--nvpg-green-on-dark); }
.nvpg-form__submit { background: var(--nvpg-green-text); box-shadow: 0 6px 16px -6px rgba(61, 122, 29, 0.55); }
.nvpg-form__submit:hover { background: var(--nvpg-green-deep); }

/* Review F2: zoekresultaten en de documentpagina gebruikten altijd twee kolommen; op 280 tot 480 px kwamen er 1 tot 4 tekens per regel. Onder 480 px
   een kolom, zonder het rijnummer. */
@media (max-width: 479px) {
  .nvpg-themarows { grid-template-columns: minmax(0, 1fr); }
  .nvpg-themarow__num { display: none; }
  .nvpg-themarow__title { overflow-wrap: anywhere; }
}