/*
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; }