/*
Theme Name: Vast Fundament
Theme URI: https://eenvastfundament.nl
Author: Vast Fundament
Description: Blokthema voor Vast Fundament — artikelen, preken, catechese en een webshop met eigen uitgaven. Gebouwd naar het Vast Fundament design system: inktblauw, EB Garamond en Archivo, haarlijnen in plaats van schaduw.
Version: 0.1.6
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vast-fundament
Tags: full-site-editing, block-patterns, e-commerce, one-column, custom-colors, editor-style
*/

/* ==========================================================================
   1. Tokens — overgenomen uit design/_ds/.../tokens/. Niet herschrijven:
      dit is de bron. Wijzigt de huisstijl, dan wijzigt hier één waarde.
   ========================================================================== */

:root {
  /* Inktblauw — de merkkleur. Donkere vlakken, beeldmerk, koppen. */
  --ink-900: #0D1A2F; --ink-800: #12233F; --ink-700: #1B3355; --ink-600: #24456E;
  /* Accentblauw — links, knoppen, actieve staten. */
  --blue-700: #204C8C; --blue-600: #2B5FA8; --blue-500: #3D74C4;
  --blue-300: #9CBEE6; --blue-100: #DCE6F4; --blue-50: #EFF4FA;
  /* Neutraal — wit als papier, koele grijzen. */
  --white: #FFFFFF; --gray-50: #F6F7F9; --gray-100: #EDEFF2; --gray-200: #DFE3E8;
  --gray-300: #C6CCD3; --gray-400: #98A1AB; --gray-500: #6C757F; --gray-600: #4C555F;
  --gray-700: #333B44; --black: #16191D;
  /* Semantisch — spaarzaam; alleen in formulieren en webshop. */
  --green-600: #2F6B4F; --green-50: #EDF5F0;
  --amber-600: #8A6520; --amber-50: #F8F2E4;
  --red-600: #9A342E; --red-50: #F8EEED;

  /* Semantische aliassen — gebruik deze in componenten, niet de ruwe kleuren. */
  --text-strong: var(--ink-800); --text-body: var(--gray-700); --text-muted: var(--gray-500);
  --text-faint: var(--gray-400); --text-inverse: var(--white);
  --text-link: var(--blue-600); --text-link-hover: var(--blue-700);
  --surface-page: var(--white); --surface-sunken: var(--gray-50); --surface-card: var(--white);
  --surface-raised: var(--white); --surface-inverse: var(--ink-800); --surface-accent-soft: var(--blue-50);
  --border-hairline: var(--gray-200); --border-strong: var(--gray-300); --border-inverse: rgba(255,255,255,.18);
  --action-primary: var(--ink-800); --action-primary-hover: var(--ink-900);
  --action-accent: var(--blue-600); --action-accent-hover: var(--blue-700);
  --focus-ring: var(--blue-500);
  --duotone-dark: var(--ink-800); --duotone-light: var(--blue-100);

  /* Typografie */
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-prose: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --text-display-1: 4.25rem; --text-display-2: 3.25rem; --text-display-3: 2.5rem;
  --text-h1: 2rem; --text-h2: 1.5rem; --text-h3: 1.1875rem;
  --text-quote: 1.875rem;
  --text-prose: 1.1875rem; --text-prose-lead: 1.375rem;
  --text-body-size: 1rem; --text-sm: .875rem; --text-xs: .8125rem; --text-eyebrow: .6875rem;
  --leading-tight: 1.08; --leading-snug: 1.22; --leading-quote: 1.34;
  --leading-prose: 1.62; --leading-ui: 1.45;
  --tracking-display: -.012em; --tracking-normal: 0; --tracking-wide: .06em;
  --tracking-eyebrow: .2em; --tracking-wordmark: .14em;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --measure-prose: 34rem; --measure-quote: 22rem;

  /* Ruimte — 4px-basis; 8 en 24 zijn de werkpaarden. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --gutter: 24px; --section-y: 96px; --section-y-tight: 64px;
  --container: 1180px; --container-narrow: 720px; --container-prose: 640px;
  --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;
  --radius-pill: 999px; --radius-circle: 50%;
  --border-width: 1px; --rule-width: 1px; --rule-heavy: 2px;

  /* Effecten — de stijl leunt op haarlijnen, niet op diepte. */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(13,26,47,.06);
  --shadow-md: 0 4px 16px rgba(13,26,47,.08);
  --shadow-lift: 0 10px 32px rgba(13,26,47,.10);
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-out: cubic-bezier(0,.5,.25,1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
  --transition-ui: color var(--dur-fast) var(--ease-standard),
                   background-color var(--dur-fast) var(--ease-standard),
                   border-color var(--dur-fast) var(--ease-standard);
  --scrim-bottom: linear-gradient(to top, rgba(13,26,47,.88) 0%, rgba(13,26,47,.55) 45%, rgba(13,26,47,0) 100%);
  --scrim-flat: rgba(13,26,47,.55);
  --duotone-filter: grayscale(1) contrast(1.05);
  --patroon-diagonaal: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px);
}

/* ==========================================================================
   2. Basis
   ========================================================================== */

body { -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
img { max-width: 100%; }

a { text-decoration-thickness: 1px; text-underline-offset: .18em; transition: var(--transition-ui); }
a:hover { text-decoration-thickness: 2px; }

/* Beweging uit voor wie daarom vraagt. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   3. Hulpklassen uit het design system
   ========================================================================== */

.vf-eyebrow {
  font-family: var(--font-ui); font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-muted); margin: 0;
}
.vf-eyebrow--licht { color: var(--blue-300); }

.vf-hint { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); }
.vf-meta {
  font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center;
}
.vf-ui { font-family: var(--font-ui); }
.vf-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.vf-prose {
  font-family: var(--font-prose); font-size: var(--text-prose);
  line-height: var(--leading-prose); color: var(--text-body);
  max-width: var(--measure-prose); text-wrap: pretty;
}
.vf-prose > * + * { margin-top: var(--space-5); }
.vf-lead { font-size: var(--text-prose-lead); line-height: var(--leading-prose); }

/* Duotone-beeldbehandeling in inktblauw. Alle redactionele foto's. */
.vf-duotone { position: relative; overflow: hidden; background: var(--duotone-dark); }
.vf-duotone > img,
.vf-duotone .wp-block-post-featured-image img { filter: var(--duotone-filter); opacity: .72; mix-blend-mode: screen; }
.vf-duotone::after {
  content: ""; position: absolute; inset: 0; background: var(--duotone-light);
  mix-blend-mode: multiply; opacity: .28; pointer-events: none;
}
.vf-scrim::before {
  content: ""; position: absolute; inset: 0; background: var(--scrim-bottom); pointer-events: none;
}

/* Inktblauw vlak met het 4%-diagonaalpatroon. Hoogstens twee per pagina. */
.vf-vlak-ink { background-color: var(--ink-800); background-image: var(--patroon-diagonaal); color: var(--blue-100); }
.vf-vlak-ink h1, .vf-vlak-ink h2, .vf-vlak-ink h3 { color: var(--white); }
.vf-vlak-sunken { background: var(--surface-sunken); }

/* ==========================================================================
   4. Componenten
   ========================================================================== */

/* --- Knoppen ------------------------------------------------------------ */
.vf-btn, .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium);
  letter-spacing: .01em; border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; transition: var(--transition-ui); text-decoration: none; white-space: nowrap;
  padding: 11px 20px;
}
.vf-btn:hover, .wp-block-button__link:hover { text-decoration: none; }
.vf-btn--sm { padding: 7px 14px; font-size: var(--text-xs); }
.vf-btn--lg { padding: 14px 28px; font-size: var(--text-body-size); }
.vf-btn--block, .wp-block-button.is-vf-block .wp-block-button__link { width: 100%; }

.vf-btn--primary, .is-style-vf-primary .wp-block-button__link { background: var(--action-primary); color: var(--text-inverse); }
.vf-btn--primary:hover, .is-style-vf-primary .wp-block-button__link:hover { background: var(--action-primary-hover); color: var(--text-inverse); }
.vf-btn--accent, .is-style-vf-accent .wp-block-button__link { background: var(--action-accent); color: var(--text-inverse); }
.vf-btn--accent:hover, .is-style-vf-accent .wp-block-button__link:hover { background: var(--action-accent-hover); color: var(--text-inverse); }
.vf-btn--secondary, .is-style-vf-secondary .wp-block-button__link { background: transparent; color: var(--text-strong); border-color: var(--border-strong); }
.vf-btn--secondary:hover, .is-style-vf-secondary .wp-block-button__link:hover { border-color: var(--ink-800); background: var(--gray-50); }
.vf-btn--ghost, .is-style-vf-ghost .wp-block-button__link { background: transparent; color: var(--text-link); }
.vf-btn--ghost:hover, .is-style-vf-ghost .wp-block-button__link:hover { background: var(--surface-accent-soft); }
.vf-btn--inverse, .is-style-vf-inverse .wp-block-button__link { background: var(--white); color: var(--ink-800); }
.vf-btn--inverse:hover, .is-style-vf-inverse .wp-block-button__link:hover { background: var(--blue-100); color: var(--ink-800); }
.vf-btn--ghost-wit, .is-style-vf-ghost-wit .wp-block-button__link { background: transparent; color: var(--white); border-color: var(--border-inverse); }
.vf-btn--ghost-wit:hover, .is-style-vf-ghost-wit .wp-block-button__link:hover { border-color: var(--white); background: rgba(255,255,255,.06); color: var(--white); }
.vf-btn[disabled], .vf-btn--disabled { background: var(--gray-200); color: var(--text-faint); border-color: transparent; cursor: not-allowed; }

.vf-iconbtn {
  display: inline-grid; place-items: center; background: transparent;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
  color: var(--text-body); cursor: pointer; transition: var(--transition-ui);
  width: 38px; height: 38px; padding: 0;
}
.vf-iconbtn:hover { border-color: var(--ink-800); color: var(--text-strong); }
.vf-iconbtn--bare { border-color: transparent; }
.vf-iconbtn--bare:hover { background: var(--gray-100); }
.vf-iconbtn--solid { background: var(--ink-800); border-color: var(--ink-800); color: var(--white); }
.vf-iconbtn--solid:hover { background: var(--ink-900); }

/* --- Iconen ------------------------------------------------------------- */
.vf-icon { display: inline-block; flex: none; line-height: 0; }
.vf-icon > svg { width: 100%; height: 100%; display: block; stroke: currentColor; }
.vf-icon--16 { width: 16px; height: 16px; }
.vf-icon--18 { width: 18px; height: 18px; }
.vf-icon--22 { width: 22px; height: 22px; }

/* --- Formulieren -------------------------------------------------------- */
.vf-field { display: flex; flex-direction: column; gap: var(--space-2); }
.vf-label { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-strong); }
.vf-error { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--red-600); }
.vf-input, .vf-select, .vf-textarea,
input[type=text], input[type=email], input[type=search], input[type=tel], input[type=number], textarea, select {
  font-family: var(--font-ui); font-size: var(--text-body-size); color: var(--text-strong);
  background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 10px 12px; transition: var(--transition-ui); width: 100%;
}
.vf-input::placeholder, .vf-textarea::placeholder { color: var(--text-faint); }
.vf-input:hover, .vf-select:hover, .vf-textarea:hover { border-color: var(--gray-400); }
.vf-input:focus, .vf-select:focus, .vf-textarea:focus,
input:focus, textarea:focus, select:focus { outline: 2px solid var(--focus-ring); outline-offset: -1px; border-color: var(--blue-500); }
.vf-input--invalid { border-color: var(--red-600); }
.vf-select, select {
  appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--gray-500) 50%),
                    linear-gradient(135deg, var(--gray-500) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.vf-check { display: flex; align-items: flex-start; gap: var(--space-3); font-family: var(--font-ui); font-size: var(--text-body-size); color: var(--text-body); cursor: pointer; }
.vf-check input {
  appearance: none; width: 18px; height: 18px; flex: none; margin: 1px 0 0;
  border: 1px solid var(--border-strong); background: var(--white); cursor: pointer; transition: var(--transition-ui);
}
.vf-check input[type=radio] { border-radius: var(--radius-circle); }
.vf-check input:hover { border-color: var(--gray-400); }
.vf-check input:checked { background: var(--ink-800); border-color: var(--ink-800); }
.vf-check input[type=checkbox]:checked {
  background-image: linear-gradient(45deg, transparent 44%, var(--white) 44%, var(--white) 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 44%, var(--white) 44%, var(--white) 56%, transparent 56%);
  background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
}
.vf-check input[type=radio]:checked { box-shadow: inset 0 0 0 3px var(--white); }

/* --- Kaarten, badges, tags ---------------------------------------------- */
.vf-card { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); }
.vf-card--sunken { background: var(--surface-sunken); border-color: transparent; }
.vf-card--inverse { background: var(--surface-inverse); border-color: transparent; color: var(--text-inverse); }
.vf-card--link { display: block; text-decoration: none; color: inherit; transition: box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.vf-card--link:hover { border-color: var(--gray-300); box-shadow: var(--shadow-md); }

.vf-badge {
  display: inline-flex; align-self: flex-start; align-items: center;
  font-family: var(--font-ui); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius-sm);
}
.vf-badge--ink { background: var(--ink-800); color: var(--white); }
.vf-badge--soft { background: var(--surface-accent-soft); color: var(--blue-700); }
.vf-badge--outline { border: 1px solid var(--border-strong); color: var(--text-muted); }
.vf-badge--green { background: var(--green-50); color: var(--green-600); }
.vf-badge--amber { background: var(--amber-50); color: var(--amber-600); }

.vf-tag {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-body);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-pill);
  padding: 5px 12px; background: var(--white); text-decoration: none; transition: var(--transition-ui);
}
a.vf-tag:hover { border-color: var(--ink-800); color: var(--text-strong); text-decoration: none; }
.vf-tag--active { background: var(--ink-800); color: var(--white); border-color: var(--ink-800); }

/* --- Navigatie ---------------------------------------------------------- */
.vf-navlink {
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body);
  text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; transition: var(--transition-ui);
}
.vf-navlink:hover { color: var(--text-strong); border-bottom-color: var(--border-strong); text-decoration: none; }
.vf-navlink--active { color: var(--text-strong); border-bottom-color: var(--ink-800); }

.vf-page-link {
  display: inline-grid; place-items: center; min-width: 34px; height: 34px;
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body);
  text-decoration: none; border: 1px solid transparent; transition: var(--transition-ui);
}
.vf-page-link:hover { border-color: var(--border-strong); color: var(--text-strong); }
.vf-page-link--current { background: var(--ink-800); color: var(--white); }

/* --- Aantalstepper ------------------------------------------------------ */
.vf-qty { display: inline-flex; align-items: center; }
.vf-qty button, .vf-qty input {
  width: 34px; height: 34px; border: 1px solid var(--border-strong); background: var(--white);
  font-family: var(--font-ui); font-size: 15px; color: var(--text-strong);
  cursor: pointer; transition: var(--transition-ui); text-align: center; padding: 0;
  border-radius: 0;
}
.vf-qty button:hover { border-color: var(--ink-800); }
.vf-qty input { cursor: text; border-left: 0; border-right: 0; width: 44px; }

/* --- Audiospeler -------------------------------------------------------- */
.vf-speler { display: grid; gap: var(--space-4); padding: var(--space-5); }
.vf-speler__kop { display: flex; align-items: flex-start; gap: var(--space-4); }
.vf-speler__knop {
  width: 48px; height: 48px; flex: none; border-radius: var(--radius-circle);
  border: 1px solid var(--ink-800); background: var(--ink-800); color: var(--white);
  display: grid; place-items: center; cursor: pointer; transition: var(--transition-ui);
}
.vf-speler__knop:hover { background: var(--ink-900); }
.vf-speler--compact .vf-speler__knop { width: 38px; height: 38px; }
.vf-speler__titel { font-family: var(--font-display); font-size: var(--text-h3); color: var(--text-strong); margin: 0 0 4px; line-height: var(--leading-snug); }
.vf-speler__balk { display: flex; align-items: center; gap: var(--space-3); }
.vf-speler__tijd { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.vf-track {
  appearance: none; height: 3px; background: var(--gray-200); border-radius: var(--radius-pill);
  cursor: pointer; width: 100%; padding: 0; border: 0;
}
.vf-track::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; border-radius: var(--radius-circle); background: var(--ink-800); }
.vf-track::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: var(--radius-circle); background: var(--ink-800); }
.vf-speler--inverse { color: var(--blue-100); }
.vf-speler--inverse .vf-speler__titel { color: var(--white); }
.vf-speler--inverse .vf-speler__knop { background: var(--white); color: var(--ink-800); border-color: var(--white); }
.vf-speler--inverse .vf-speler__knop:hover { background: var(--blue-100); }
.vf-speler--inverse .vf-track { background: rgba(255,255,255,.24); }
.vf-speler--inverse .vf-track::-webkit-slider-thumb { background: var(--white); }
.vf-speler--inverse .vf-track::-moz-range-thumb { background: var(--white); }
.vf-speler--inverse .vf-speler__tijd { color: var(--blue-300); }

/* --- Videokaart --------------------------------------------------------- */
.vf-video__beeld { position: relative; aspect-ratio: 16 / 9; }
.vf-video__ring {
  position: absolute; inset: 0; margin: auto; width: 56px; height: 56px;
  border-radius: var(--radius-circle); border: 2px solid rgba(255,255,255,.8);
  display: grid; place-items: center; color: var(--white);
  backdrop-filter: blur(2px); transition: var(--transition-ui);
}
.vf-card--link:hover .vf-video__ring { border-color: var(--white); background: rgba(255,255,255,.12); }
.vf-video__duur {
  position: absolute; right: var(--space-2); bottom: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--white);
  background: rgba(13,26,47,.75); padding: 2px 6px; border-radius: var(--radius-sm);
}

/* --- Schriftcitaat ------------------------------------------------------ */
.vf-citaat, .is-style-vf-schriftcitaat {
  border-left: 2px solid var(--border-hairline); padding-left: var(--space-5);
  max-width: var(--measure-quote); margin: 0;
}
.vf-citaat p, .is-style-vf-schriftcitaat p {
  font-family: var(--font-display); font-style: italic; font-size: var(--text-quote);
  line-height: var(--leading-quote); color: var(--text-strong); margin: 0;
}
.vf-citaat cite, .is-style-vf-schriftcitaat cite {
  display: block; margin-top: var(--space-4); font-family: var(--font-ui); font-style: normal;
  font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted);
}
.vf-vlak-ink .vf-citaat, .vf-vlak-ink .is-style-vf-schriftcitaat { border-left-color: var(--border-inverse); }
.vf-vlak-ink .vf-citaat p, .vf-vlak-ink .is-style-vf-schriftcitaat p { color: var(--white); }
.vf-vlak-ink .vf-citaat cite, .vf-vlak-ink .is-style-vf-schriftcitaat cite { color: var(--blue-300); }

/* ==========================================================================
   5. Sitebalk en voettekst
   ========================================================================== */

.vf-header {
  position: sticky; top: 0; z-index: 40; background: var(--white);
  border-bottom: 1px solid var(--border-hairline);
}
.vf-header__binnen {
  max-width: var(--container); margin: 0 auto; padding: 14px var(--space-6);
  display: flex; align-items: center; gap: var(--space-8);
}
.vf-logo { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.vf-logo:hover { text-decoration: none; }
.vf-logo svg { width: 40px; height: 40px; display: block; }
.vf-logo__woord {
  font-family: var(--font-display); font-size: 17px; font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-wordmark); color: var(--ink-800);
}
.vf-header nav { margin-left: auto; }
.vf-header nav ul { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.vf-header__acties { display: flex; align-items: center; gap: var(--space-2); }
.vf-wagen { position: relative; }
.vf-wagen__telling {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--radius-pill); background: var(--blue-600); color: var(--white);
  font-family: var(--font-ui); font-size: 10px; line-height: 17px; text-align: center;
}

.vf-footer { background: var(--ink-900); color: var(--blue-100); }
.vf-footer a { color: var(--blue-100); text-decoration: none; }
.vf-footer a:hover { color: var(--white); text-decoration: underline; }
.vf-footer__binnen {
  max-width: var(--container); margin: 0 auto; padding: var(--space-9) var(--space-6) var(--space-7);
  display: grid; grid-template-columns: 1.4fr repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-8); align-items: start;
}
.vf-footer__kop {
  font-family: var(--font-ui); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--blue-300); margin: 0 0 var(--space-4);
}
.vf-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.vf-footer li { font-family: var(--font-ui); font-size: var(--text-sm); }
.vf-footer__onder {
  max-width: var(--container); margin: 0 auto; padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-inverse);
  display: flex; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
  font-family: var(--font-ui); font-size: var(--text-xs); color: var(--blue-300);
}

/* ==========================================================================
   6. Secties en rasters
   ========================================================================== */

.vf-sectie { padding-block: var(--section-y); }
.vf-sectie--dicht { padding-block: var(--section-y-tight); }
.vf-sectiekop { display: grid; gap: var(--space-2); margin-bottom: var(--space-7); }
.vf-sectiekop__rij { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
.vf-raster { display: grid; gap: var(--gutter); }
.vf-raster--2 { grid-template-columns: repeat(2, 1fr); }
.vf-raster--3 { grid-template-columns: repeat(3, 1fr); }
.vf-raster--4 { grid-template-columns: repeat(4, 1fr); }

.vf-hero { padding: var(--space-9) var(--space-6); }
.vf-hero__binnen {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-8); align-items: center;
}
.vf-hero h1 { font-size: var(--text-display-1); color: var(--white); margin: var(--space-4) 0 var(--space-5); }
.vf-hero__lead { max-width: 30rem; font-family: var(--font-prose); font-size: var(--text-prose-lead); line-height: var(--leading-prose); color: var(--blue-100); }
.vf-hero__knoppen { display: flex; gap: var(--space-3); margin-top: var(--space-7); flex-wrap: wrap; }

/* Artikelkaart binnen een query-loop */
.vf-artikelkaart { display: grid; gap: var(--space-3); padding: var(--space-5); height: 100%; }
.vf-artikelkaart h3 { font-size: var(--text-h3); }
.vf-artikelkaart__samenvatting { font-family: var(--font-prose); font-size: 1rem; line-height: var(--leading-prose); color: var(--text-body); }

/* Productkaart */
.vf-product__omslag { aspect-ratio: 135 / 210; background: linear-gradient(160deg, var(--ink-700), var(--ink-800)); display: grid; place-items: center; padding: var(--space-5); }
.vf-product__omslag img { width: 100%; height: 100%; object-fit: cover; }
.vf-product__body { display: grid; gap: var(--space-2); padding: var(--space-4); }
.vf-product__prijs { font-family: var(--font-display); font-size: var(--text-h3); color: var(--text-strong); }
.vf-voorraad { font-family: var(--font-ui); font-size: var(--text-xs); }
.vf-voorraad--op { color: var(--green-600); }
.vf-voorraad--beperkt { color: var(--amber-600); }

.vf-geruststelling {
  border-top: 1px solid var(--border-hairline); margin-top: var(--space-7); padding-top: var(--space-5);
  display: flex; gap: var(--space-8); flex-wrap: wrap;
  font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted);
}

/* Leeskolom: links uitgelijnd binnen de container, niet gecentreerd. */
.vf-leeskolom { max-width: var(--measure-prose); margin-left: 0; margin-right: auto; }

/* ==========================================================================
   7. WordPress-blokken bijsturen
   ========================================================================== */

.wp-block-post-title a { text-decoration: none; color: inherit; }
.wp-block-post-title a:hover { text-decoration: underline; }
.wp-block-query-pagination { font-family: var(--font-ui); font-size: var(--text-sm); }
.wp-block-post-terms a { text-decoration: none; }
.wp-block-separator { border: 0; border-top: 1px solid var(--border-hairline); opacity: 1; }
.wp-block-post-excerpt__excerpt { font-family: var(--font-prose); }
.wp-block-search__button { border-radius: var(--radius-sm); }

/* De eerste alinea van een artikel is de lead. */
.vf-artikel .wp-block-post-content > p:first-of-type { font-size: var(--text-prose-lead); line-height: var(--leading-prose); }

/* ==========================================================================
   8. WooCommerce — eigen stylesheet overschrijven met de tokens
   ========================================================================== */

.woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.wc-block-components-button {
  font-family: var(--font-ui) !important; font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important; border-radius: var(--radius-sm) !important;
  background: var(--action-accent) !important; color: var(--white) !important;
  padding: 11px 20px !important; transition: var(--transition-ui);
}
.woocommerce button.button:hover, .woocommerce a.button:hover, .woocommerce input.button:hover,
.wc-block-components-button:hover { background: var(--action-accent-hover) !important; }
.woocommerce .price, .wc-block-components-product-price {
  font-family: var(--font-display) !important; color: var(--text-strong) !important; font-size: var(--text-h3) !important;
}
.woocommerce .stock.in-stock { color: var(--green-600); font-family: var(--font-ui); font-size: var(--text-xs); }
.woocommerce .stock.available-on-backorder, .woocommerce .stock.low-stock { color: var(--amber-600); }
.woocommerce ul.products li.product, .wc-block-grid__product { border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--white); }
.woocommerce .quantity input.qty { border-radius: var(--radius-sm); border-color: var(--border-strong); }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--blue-600); font-family: var(--font-ui); font-size: var(--text-sm); border-radius: var(--radius-sm);
}
.wc-block-components-notice-banner { border-radius: var(--radius-sm) !important; }
.woocommerce-checkout .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display) !important; font-size: var(--text-h1) !important; color: var(--text-strong) !important;
}
.vf-wagen-samenvatting { position: sticky; top: 88px; }

/* ==========================================================================
   9. Responsive — het prototype is op desktop gemaakt; dit is de invulling
      die de README voorstelt.
   ========================================================================== */

@media (max-width: 1024px) {
  .vf-raster--4 { grid-template-columns: repeat(2, 1fr); }
  .vf-raster--3 { grid-template-columns: repeat(2, 1fr); }
  .vf-hero__binnen { grid-template-columns: 1fr; gap: var(--space-7); }
  .vf-hero h1 { font-size: var(--text-display-2); }
  .vf-footer__binnen { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .vf-header__binnen { gap: var(--space-5); }
}

@media (max-width: 720px) {
  :root { --section-y: 64px; --section-y-tight: 48px; }
  .vf-raster--2, .vf-raster--3, .vf-raster--4 { grid-template-columns: 1fr; }
  .vf-hero h1 { font-size: var(--text-display-3); }
  .vf-footer__binnen { grid-template-columns: 1fr; }
  .vf-header nav ul { gap: var(--space-4); flex-wrap: wrap; }
  .vf-wagen-samenvatting { position: static; }
  .vf-header { position: static; }
}

/* ==========================================================================
   10. Samenstellingen die alleen in dit thema voorkomen
   ========================================================================== */

/* Query-loops krijgen het rasterritme van 24px. */
.wp-block-post-template { gap: var(--gutter); }
.wp-block-post-template.vf-raster { list-style: none; margin: 0; padding: 0; }

/* Prekenarchief: lijst links, kaart rechts. */
.vf-preken-raster { gap: var(--space-7); }
.vf-preken-raster .wp-block-column > .vf-speler + .vf-speler { margin-top: var(--space-4); }
.vf-zijkaart { position: sticky; top: 88px; }

/* Uit de webshop: twee producten plus tekst in één raster van vier kolommen. */
.vf-webshop-uitgelicht { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); align-items: start; }
.vf-webshop-uitgelicht > * { grid-column: span 2; }
.vf-webshop-uitgelicht .vf-raster--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
.vf-webshop-uitgelicht__tekst { display: grid; gap: var(--space-5); align-content: center; }

/* Productkaart: knop altijd onderaan, ongeacht de lengte van de titel. */
.vf-product { display: flex; flex-direction: column; height: 100%; }
.vf-product .vf-product__body { flex: 1; align-content: start; }
.vf-product .vf-btn { justify-self: start; margin-top: auto; }
/* De hover zat op het anker; nu het anker alleen de omslag is, hoort hij
   op de kaart zelf. */
.vf-product { transition: box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.vf-product:hover { border-color: var(--gray-300); box-shadow: var(--shadow-md); }
.vf-product__omslag { text-decoration: none; }
/* De videokaart gebruikt spans, zodat wpautop er niet in kan knippen. */
.vf-video__beeld { display: block; }
.vf-artikelkaart { display: grid; }

/* Nieuwsbrief: één kaart, geen radius aan de binnenkant. */
.vf-nieuwsbrief { overflow: hidden; margin-block: 0; }
.vf-nieuwsbrief .vf-duotone { min-height: 320px; background: var(--ink-800); background-image: var(--patroon-diagonaal); }
.vf-nieuwsbrief .mailpoet_form { margin-top: var(--space-5); }
.vf-nieuwsbrief input[type=email] { max-width: 22rem; }

/* Paginering in de webshop. */
.vf-paginering .page-numbers {
  display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px;
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body);
  text-decoration: none; border: 1px solid transparent; transition: var(--transition-ui);
}
.vf-paginering .page-numbers:hover { border-color: var(--border-strong); color: var(--text-strong); }
.vf-paginering .page-numbers.current { background: var(--ink-800); color: var(--white); }

/* Filters boven het prekenarchief. */
.vf-filters .vf-label { font-size: var(--text-xs); color: var(--text-muted); }

@media (max-width: 1024px) {
  .vf-webshop-uitgelicht { grid-template-columns: 1fr; }
  .vf-webshop-uitgelicht > * { grid-column: 1 / -1; }
  .vf-zijkaart { position: static; }
}

@media (max-width: 720px) {
  .vf-filters { grid-template-columns: 1fr !important; }
  .vf-webshop-uitgelicht .vf-raster--2 { grid-template-columns: 1fr; }
  .vf-nieuwsbrief .vf-duotone { min-height: 180px; }
}

/* ==========================================================================
   11. Preken met video
   ========================================================================== */

.vf-preekvideo { margin: var(--space-5) 0 0; }
.vf-videospeler {
  width: 100%; display: block; background: var(--ink-900);
  border-radius: var(--radius-sm); aspect-ratio: 16 / 9;
}
.vf-preekvideo figcaption { margin-top: var(--space-2); }

/* Compacte regel in het prekenarchief: beeld, titel, duur. */
.vf-preekregel {
  display: grid; grid-template-columns: 128px 1fr auto; gap: var(--space-4);
  align-items: center; padding: var(--space-3); text-decoration: none;
}
.vf-preekregel + .vf-preekregel { margin-top: var(--space-4); }
.vf-preekregel__beeld {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--ink-800); border-radius: var(--radius-sm);
}
.vf-preekregel__beeld img { width: 100%; height: 100%; object-fit: cover; }
.vf-preekregel__beeld .vf-video__ring { width: 34px; height: 34px; }
.vf-preekregel__tekst { display: grid; gap: var(--space-1); }
.vf-preekregel .vf-speler__titel { font-size: var(--text-h3); }

@media (max-width: 720px) {
  .vf-preekregel { grid-template-columns: 96px 1fr; }
  .vf-preekregel .vf-mono { grid-column: 2; }
}

/* ==========================================================================
   12. Uitgelichte preek op de homepagina
   ========================================================================== */

.vf-uitgelicht {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8);
  align-items: center;
}
.vf-uitgelicht__beeld {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--ink-800); border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline);
}
.vf-uitgelicht__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-uitgelicht__tekst { display: grid; gap: var(--space-3); }
.vf-uitgelicht__tekst h3 { font-size: var(--text-h1); line-height: var(--leading-snug); }
.vf-uitgelicht__tekst h3 a { color: inherit; text-decoration: none; }
.vf-uitgelicht__tekst h3 a:hover { text-decoration: underline; }
.vf-uitgelicht__tekst p { margin: 0; }

@media (max-width: 720px) {
  .vf-uitgelicht { grid-template-columns: 1fr; gap: var(--space-5); }
}