/* =====================================================
   New Yard Framework — basis-CSS
   =====================================================

   In dit bestand staat geen enkele hardgecodeerde sitekleur. Alles
   loopt via de --nyf-* tokens, die per site door de Customizer worden
   ingevuld (zie inc/tokens.php).

   De waarden hieronder zijn alleen een vangnet: mocht de inline
   :root-override om wat voor reden dan ook niet meekomen, dan blijft
   de site leesbaar in plaats van kleurloos.
   ===================================================== */

:root{
  --nyf-primary:#1e293b;
  --nyf-primary-deep:#0f172a;
  --nyf-accent:#64748b;
  --nyf-accent-strong:#475569;
  --nyf-bg:#ffffff;
  --nyf-bg-alt:#f1f5f9;
  --nyf-surface:#ffffff;
  --nyf-text:#334155;
  --nyf-line:#e2e8f0;
  --nyf-header-bg:#ffffff;
  --nyf-header-text:#1e293b;
  --nyf-footer-bg:#0f172a;
  --nyf-footer-text:#cbd5e1;
  --nyf-button-bg:#1e293b;
  --nyf-button-text:#ffffff;

  /* Afgeleide tokens. Deze zijn er zodat de regels verderop leesbaar
     blijven — je leest "de knopkleur", niet "de hoofdkleur die hier
     toevallig ook voor knoppen gebruikt wordt". */
  --nyf-ink:var(--nyf-primary);
  --nyf-ink-soft:var(--nyf-text);

  --nyf-font-heading:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --nyf-font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* De hoogte van de header. Wordt hieronder gebruikt voor zowel de
     balk zelf als de scroll-margin van de ankers, zodat een sprong
     naar #contact de kop niet onder de balk parkeert. */
  --nyf-header-h:92px;
  --nyf-wrap:1120px;
  --nyf-block-pad:104px;
}

/* =====================================================
   Basis
   ===================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  margin:0;
  background:var(--nyf-bg);
  color:var(--nyf-ink);
  font-family:var(--nyf-font-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
img{height:auto;}
a{color:inherit;}
p{margin:0;}
h1,h2,h3,h4{
  font-family:var(--nyf-font-heading);
  font-weight:700; margin:0; text-wrap:balance; letter-spacing:-0.01em;
}

.nyf-wrap{max-width:var(--nyf-wrap); margin:0 auto; padding:0 32px;}

/* Een blok met "Volle breedte" moet uit de contentkolom kunnen breken,
   ook als het binnen een .nyf-wrap staat — anders kan een iconenbalk of
   een gekleurde band nooit tot de rand van het scherm lopen.

   overflow-x:clip op de pagina vangt de horizontale scrollbalk af die
   100vw anders veroorzaakt zodra er een verticale scrollbalk is. Bewust
   clip en niet hidden: hidden maakt een scroll-container, en daar zou de
   meescrollende header zijn positie tegenaan plakken in plaats van tegen
   het venster. */
.nyf-page{overflow-x:clip;}

/* Twee niveaus, want de inhoud van een pagina zit nog een laag dieper:
   .nyf-wrap > .nyf-entry-content > het blok. Alleen op de directe kinderen
   mikken betekende dat een blok op "volle breedte" netjes binnen de
   contentkolom bleef staan — precies niet wat die knop belooft. */
.nyf-wrap > .alignfull,
.nyf-wrap > * > .alignfull{
  width:100vw; max-width:100vw;
  /* !important omdat de blok-CSS van WordPress zelf ook marges op deze
     elementen zet, en die komt na het themastylesheet. */
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
}
.nyf-wrap > .alignwide,
.nyf-wrap > * > .alignwide{margin-left:-32px; margin-right:-32px; max-width:none;}

/* Staat een volle-breedte blok boven- of onderaan een sectie, dan hoort
   het tegen de rand van die sectie aan te sluiten. Zonder dit blijft er
   een strook sectiekleur onder een band staan, wat eruitziet als een
   tweede, leeg vlak. */
.nyf-entry-content > .alignfull:first-child{margin-top:calc(var(--nyf-block-pad) * -1) !important;}
.nyf-entry-content > .alignfull:last-child{margin-bottom:calc(var(--nyf-block-pad) * -1) !important;}

.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
/* De overslaanlink hoort onzichtbaar te zijn tot hij focus krijgt —
   dan moet hij juist heel goed zichtbaar zijn. */
.nyf-skip-link:focus{
  position:fixed; top:12px; left:12px; z-index:100;
  width:auto; height:auto; clip:auto;
  background:var(--nyf-surface); color:var(--nyf-ink);
  border:2px solid var(--nyf-accent-strong); padding:12px 18px;
}

/* =====================================================
   Knoppen — eigen markup én de Gutenberg-knopblokken, zodat een
   knop in de editor er hetzelfde uitziet als een knop uit een
   template. "Fill" en "Outline" zijn de twee stijlen die WordPress
   zelf in de blokwerkbalk aanbiedt.
   ===================================================== */
/* De selectors zijn met opzet zwaarder dan nodig lijkt. WordPress
   genereert zelf een regel voor .wp-element-button uit theme.json, en
   die staat inline in de <head> — dus ná dit stylesheet. Met alleen
   .wp-block-button__link verloor de tekstkleur dat gevecht en kregen
   knoppen in de content donkere tekst terwijl die in de header wit was. */
.nyf-btn,
.wp-block-button .wp-block-button__link,
.wp-block-button__link.wp-element-button{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--nyf-font-body); font-size:14px; font-weight:600; letter-spacing:0.01em;
  text-decoration:none; padding:13px 24px; border:1.5px solid transparent; cursor:pointer;
  border-radius:var(--nyf-radius,0);
  background:var(--nyf-button-bg); color:var(--nyf-button-text);
  transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* De hover is een donkerder versie van de knopkleur zelf, niet een
   sprong naar het accent. Anders zou een site die zijn knoppen een
   eigen kleur geeft, bij het aanwijzen ineens een andere tint krijgen
   dan hij heeft ingesteld. */
.nyf-btn:hover,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button__link:hover{
  background:color-mix(in srgb, var(--nyf-button-bg) 82%, #000);
  color:var(--nyf-button-text); transform:translateY(-1px);
}

.nyf-btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent; border-color:var(--nyf-button-bg); color:var(--nyf-button-bg);
}
.nyf-btn-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  border-color:var(--nyf-button-bg); background:var(--nyf-button-bg); color:var(--nyf-button-text);
}
.wp-block-buttons{gap:16px; margin-top:34px;}

/* Blokstijl "Met pijl" — zie inc/block-styles.php. */
.wp-block-button.is-style-arrow .wp-block-button__link::after,
.nyf-btn.is-style-arrow::after{content:"→"; font-size:1.15em; line-height:1;}

/* =====================================================
   Bovenbalk

   Een smalle strook boven de header, voor een taalwisselaar en een
   contactregel. Die twee horen niet in het hoofdmenu thuis: een
   vlaggetje tussen je pagina's leest als een pagina, en dat is het
   niet.

   Neemt de kleuren van de footer over in plaats van eigen tokens te
   krijgen. Dat scheelt twee instellingen en zet de pagina tussen twee
   gelijke stroken.
   ===================================================== */
/* Koppen op een donkere ondergrond moeten de tekstkleur van dat vlak
   erven. WordPress genereert uit theme.json een regel die álle koppen de
   hoofdkleur geeft, en die is hier precies de achtergrondkleur — dan
   staat er een onzichtbare kop. Geldt voor de bovenbalk, de footer en
   elke baan die iemand een eigen achtergrondkleur geeft. */
.nyf-topbar h1, .nyf-topbar h2, .nyf-topbar h3, .nyf-topbar h4,
.nyf-footer h1, .nyf-footer h2, .nyf-footer h3, .nyf-footer h4,
.nyf-topbar .nyf-widget-title,
.nyf-footer .nyf-widget-title,
.has-background .wp-block-heading{color:inherit;}

.nyf-topbar{background:var(--nyf-footer-bg); color:var(--nyf-footer-text); font-size:13px;}

/* De lichte variant. Donker bovenaan én onderaan zet de pagina netjes
   tussen twee gelijke stroken, maar op een site die verder licht en
   luchtig is drukt die donkere balk de header weg. Dan is een lichte
   strook met een haarlijn eronder beter: hij hoort bij de header in
   plaats van ertegen te vechten. */
.nyf-topbar.is-light{
  background:var(--nyf-bg-alt); color:var(--nyf-ink-soft);
  border-bottom:1px solid var(--nyf-line);
}
.nyf-topbar.is-light a:hover{color:var(--nyf-accent-strong);}
.nyf-topbar .nyf-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:40px; flex-wrap:wrap;
}
.nyf-topbar a{text-decoration:none; opacity:0.82;}
.nyf-topbar a:hover{opacity:1; color:var(--nyf-accent);}
.nyf-topbar .nyf-widget-area{flex-direction:row; align-items:center; gap:18px; flex-wrap:wrap;}
.nyf-topbar ul{list-style:none; display:flex; gap:16px; margin:0; padding:0; flex-wrap:wrap;}
.nyf-topbar .nyf-widget-title{display:none;}

/* =====================================================
   Header
   ===================================================== */
.nyf-header{
  position:relative; z-index:40;
  background:var(--nyf-header-bg); border-bottom:1px solid var(--nyf-line);
}
.nyf-header.is-sticky{position:sticky; top:0;}
.nyf-header-inner{display:flex; align-items:center; justify-content:space-between; height:var(--nyf-header-h); gap:24px;}

/* flex:none plus een expliciete auto-hoogte houdt een geüpload logo op
   zijn eigen verhouding. Zonder dat knijpt de flexrij de afbeelding
   smaller dan zijn natuurlijke breedte, wat het beeldmerk vervormt en
   bovendien de aspect-ratio-controle van Lighthouse laat afgaan. */
.nyf-brand-logo{display:flex; align-items:center; flex:none;}
.nyf-brand-logo img{max-height:var(--nyf-logo-h,60px); width:auto; height:auto; object-fit:contain;}

/* Alles in de header kleurt mee met één token, zodat een donkere
   headerachtergrond niet betekent dat het menu onleesbaar wordt. De
   rustende staat van een menulink is diezelfde kleur op 72% — dat
   scheelt een tweede instelling en houdt het contrast voorspelbaar. */
.nyf-brand{display:flex; flex-direction:column; line-height:1.15; text-decoration:none; color:var(--nyf-header-text);}
.nyf-brand-name{font-family:var(--nyf-font-heading); font-size:23px; font-weight:700; letter-spacing:-0.01em;}
.nyf-brand-tag{margin-top:5px; font-size:12.5px; font-weight:500; letter-spacing:0.02em; opacity:0.72;}

.nyf-nav{display:flex; align-items:center; gap:32px;}
.nyf-nav ul{list-style:none; display:flex; align-items:center; gap:32px; margin:0; padding:0;}
.nyf-nav a{
  text-decoration:none; font-size:var(--nyf-nav-size,14px); font-weight:500;
  color:var(--nyf-header-text); opacity:0.72;
  position:relative; padding:6px 0; white-space:nowrap; transition:opacity 0.15s ease;
}
.nyf-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--nyf-accent); transform:scaleX(0); transform-origin:left; transition:transform 0.2s ease;
}

/* Welk item als "hier ben je" leest.
   Op een one-pager verlaat de browser de voorpagina nooit, dus zou
   WordPress het hele bezoek lang Home als actueel markeren en de
   onderstreping daar vastpinnen. assets/js/nav.js kijkt in plaats
   daarvan naar de scrollpositie. De eigen .current-menu-item van
   WordPress telt daarom alleen buiten de voorpagina, waar die wél
   klopt. */
.nyf-nav a:hover,
.nyf-nav a:focus-visible,
.nyf-nav a.is-current{opacity:1;}
.nyf-nav a:hover::after,
.nyf-nav a:focus-visible::after,
.nyf-nav a.is-current::after{transform:scaleX(1);}

body:not(.is-front-page) .nyf-nav .current-menu-item > a{opacity:1;}
body:not(.is-front-page) .nyf-nav .current-menu-item > a::after{transform:scaleX(1);}

.nyf-header-cta{flex:none; font-size:var(--nyf-nav-size,14px);}
.nyf-nav-toggle{
  display:none; background:none; color:var(--nyf-header-text);
  border:1.5px solid currentColor; opacity:0.72;
  width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer; flex:none;
}
.nyf-nav-toggle:hover, .nyf-nav-toggle:focus-visible{opacity:1;}

/* =====================================================
   Secties
   ===================================================== */
.nyf-block{padding:var(--nyf-block-pad) 0; border-bottom:1px solid var(--nyf-line);}
.nyf-block.is-alt{background:var(--nyf-bg-alt);}

/* Elke sectie met een id is een ankerdoel; die moeten allemaal onder
   de vaste header uit springen. Eén regel in plaats van een lijst met
   sectienamen, zodat een nieuwe sectie hier niets vraagt. */
.nyf-block[id]{scroll-margin-top:var(--nyf-header-h);}

.nyf-entry-title{font-size:clamp(26px,3vw,38px); color:var(--nyf-ink);}
.nyf-entry-head + .nyf-entry-content{margin-top:32px;}
.nyf-entry-image{margin:32px 0 0;}
/* De inleidende alinea. Bewust groter en donkerder dan lopende tekst:
   hij is ook smaller, en een regel die zich anders gedraagt zonder er
   anders uit te zien leest als een fout. Zet je er per ongeluk je hele
   verhaal in, dan zie je nu meteen dat dit niet de bodytekst is. */
.nyf-intro{
  margin-top:18px; font-size:17.5px; line-height:1.5;
  color:var(--nyf-ink); max-width:64ch;
}

.nyf-section-title{font-size:clamp(26px,3vw,36px); color:var(--nyf-ink); margin-bottom:28px; max-width:24ch;}

/* De contentbreedte zit op de tekst, niet op de container.

   Zou .nyf-entry-content zelf op 70ch staan, dan zouden ook kolommen,
   groepen en banden daarin gevangen zitten en kon een patroon nooit
   breder worden dan een alinea. Nu leest lopende tekst prettig terwijl
   alles met een eigen indeling de volle breedte houdt. */
.nyf-entry-content{font-size:15.5px; color:var(--nyf-ink-soft);}
.nyf-entry-content > * + *{margin-top:18px;}
.nyf-entry-content > p,
.nyf-entry-content > ul,
.nyf-entry-content > ol,
.nyf-entry-content > blockquote,
.nyf-entry-content > .wp-block-heading{max-width:70ch;}

/* Een leeslengte van 70 tekens is goed voor lopende tekst, maar een
   opsomming die als lijst is bedoeld — een publicatielijst, een
   overzicht — is geen lopende tekst en hoort de volle kolom te vullen.
   In twee kolommen was 70 tekens bovendien de helft van wat nodig is. */
.nyf-entry-content > .nyf-biblio{max-width:none;}
.nyf-entry-content h2,
.nyf-entry-content h3{color:var(--nyf-ink); margin-top:34px;}
.nyf-entry-content a{color:var(--nyf-ink); text-decoration-color:var(--nyf-accent);}
.nyf-entry-content ul,
.nyf-entry-content ol{padding-left:1.2em;}

/* Blokken die vol- of breeduit staan mogen de contentbreedte
   doorbreken; dat is precies waar align-wide voor bedoeld is. */
.nyf-entry-content .alignwide{max-width:var(--nyf-wrap);}
.nyf-entry-content .alignfull{max-width:none;}

.nyf-entry-list{display:grid; gap:32px; margin-top:40px;}
.nyf-entry-card{border-top:1px solid var(--nyf-line); padding-top:24px;}
.nyf-entry-card-title{font-size:20px;}
.nyf-entry-card-title a{text-decoration:none;}
.nyf-entry-card-title a:hover{color:var(--nyf-accent-strong);}
.nyf-entry-card-excerpt{margin-top:10px; color:var(--nyf-ink-soft); font-size:15px;}

.nyf-page-links,
.nyf-404-actions{margin-top:32px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}

/* Alleen zichtbaar voor ingelogde redacteuren — zie nyf_admin_hint(). */
.nyf-admin-hint{
  position:relative; display:inline-block; margin-top:2px; max-width:26ch;
  font-size:10.5px; font-weight:600; line-height:1.4;
  color:#7a5b00; background:#fff8de; border:1px dashed #d4a017; padding:6px 10px;
}

/* =====================================================
   Sectiebibliotheek

   Generieke opmaak voor de blokpatronen die het theme meelevert. Elke
   site kan ze gebruiken, geen enkele site is eraan gebonden: de klassen
   worden door de patronen op de blokken gezet, dus wat een site niet
   invoegt, matcht hier nergens op.
   ===================================================== */

/* Klein genummerd label boven een kop, plus het streepje eronder. */
.nyf-kicker{
  display:inline-flex; align-items:baseline; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--nyf-accent-strong); font-variant-numeric:tabular-nums;
}
.nyf-kicker .num{font-weight:700; color:var(--nyf-ink-soft); opacity:0.55;}
.nyf-rule{width:44px; height:3px; background:var(--nyf-accent); border:none; margin:18px 0 0;}

/* Hero: tekst naast beeld, met een fijn raster op de achtergrond. */
.nyf-hero{position:relative; overflow:hidden;}
.nyf-hero.has-grid::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--nyf-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--nyf-line) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:0.5;
  mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,0.9) 38%, transparent 92%);
  -webkit-mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,0.9) 38%, transparent 92%);
  pointer-events:none;
}
.nyf-hero > .nyf-wrap{position:relative;}
.nyf-hero .wp-block-columns{align-items:center !important;}
.nyf-hero h1{font-size:clamp(34px,4.4vw,50px); line-height:1.12; max-width:22ch;}
.nyf-hero .nyf-lede{margin-top:22px; font-size:16.5px; color:var(--nyf-ink-soft); max-width:56ch;}
.nyf-hero .nyf-payoff{margin-top:26px; font-size:21px; font-weight:600; color:var(--nyf-ink); letter-spacing:-0.01em;}

/* Iconenrij: gelijke kolommen met een rond icoon en een korte regel.
   Als volle-breedte band onder de hero, of ergens midden op een pagina. */
.nyf-icon-columns.wp-block-columns{margin-top:0 !important; gap:0 !important;}
.nyf-icon-columns .wp-block-column{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  padding:0 28px; border-left:1px solid var(--nyf-line);
}
.nyf-icon-columns .wp-block-column:first-child{border-left:none;}
.nyf-icon-columns p{font-size:14px; font-weight:500; color:var(--nyf-ink); margin:0; max-width:20ch;}

.nyf-icon-badge{
  width:46px; height:46px; margin:0 0 4px; box-sizing:border-box; padding:10px;
  border-radius:50%; border:1.5px solid var(--nyf-ink);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.nyf-icon-badge img{width:100%; height:100%; object-fit:contain;}

/* Bandje over de volle breedte, iets afwijkend van zijn buren. */
.nyf-band{background:var(--nyf-bg-alt); border-top:1px solid var(--nyf-line); border-bottom:1px solid var(--nyf-line);}
.nyf-band > .nyf-wrap{padding-top:44px; padding-bottom:44px;}

/* Rij: icoon, titel, omschrijving. Herhaal hem voor een dienstenlijst,
   een programma of een opsomming van edities. */
.nyf-feature-row.wp-block-columns{
  margin-top:0 !important; gap:24px !important; align-items:flex-start !important;
  padding:30px 0; border-top:1px solid var(--nyf-line);
}
.nyf-feature-row .nyf-icon-badge{width:48px; height:48px; border-color:var(--nyf-accent-strong); margin:0;}
.nyf-feature-row .wp-block-heading{font-size:17px; font-weight:600; color:var(--nyf-ink); margin:0;}
.nyf-feature-row p{font-size:14.5px; color:var(--nyf-ink-soft); margin:0;}

/* Uitgelicht blok met een zin en een knop ernaast. */
.nyf-callout.wp-block-group{
  margin-top:52px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--nyf-surface); border:1px solid var(--nyf-line); padding:32px 36px;
}
.nyf-callout p{font-size:16px; font-weight:500; color:var(--nyf-ink); max-width:46ch; margin:0;}
.nyf-callout .wp-block-buttons{margin-top:0;}

/* Contactkolom: adres als grote link, daaronder een opsomming. */
.nyf-contact-info .nyf-email a{
  display:inline-flex; align-items:baseline; gap:10px; font-size:18px; font-weight:600;
  padding-bottom:4px; border-bottom:1.5px solid var(--nyf-accent); text-decoration:none; color:var(--nyf-ink);
}
.nyf-contact-info ul.wp-block-list{list-style:none; margin:36px 0 0; padding:0; display:flex; flex-direction:column; gap:13px;}
.nyf-contact-info li{display:flex; align-items:baseline; gap:12px; font-size:14.5px; color:var(--nyf-ink-soft);}
.nyf-contact-info li::before{content:""; width:6px; height:6px; background:var(--nyf-accent); flex:none; transform:translateY(-2px);}

/* Contactkaart: één groot aanspreekpunt met daaronder de gegevens in
   twee kolommen. Bedoeld naast een kop met een korte uitnodiging. */
.nyf-contact-card{
  background:var(--nyf-surface); border:1px solid var(--nyf-line);
  border-radius:var(--nyf-radius,0); padding:34px;
}
.nyf-lead-link{margin:0;}
.nyf-lead-link a{
  font-family:var(--nyf-font-heading); font-size:27px; font-weight:600;
  color:var(--nyf-accent-strong); text-decoration:none;
}
.nyf-lead-link a:hover{text-decoration:underline;}

/* Een tabel zonder tabelstreken: links het label, rechts de waarde.
   Het tabelblok van WordPress is hier het handigst — een redacteur voegt
   een rij toe met de knop in de werkbalk, zonder opmaak te hoeven kennen. */
.nyf-detail-table.wp-block-table{margin-top:22px;}
.nyf-detail-table.wp-block-table table{border-collapse:collapse; width:100%;}
.nyf-detail-table.wp-block-table td,
.nyf-detail-table.wp-block-table th{
  border:0; padding:7px 0; vertical-align:top; font-size:15.5px; text-align:left;
}
.nyf-detail-table.wp-block-table tr > *:first-child{
  color:var(--nyf-ink-soft); padding-right:24px; white-space:nowrap; width:1%; font-weight:400;
}
.nyf-detail-table.wp-block-table tr > *:last-child{color:var(--nyf-ink); font-weight:600;}

/* Paneel voor een formulier-shortcode. */
.nyf-panel.wp-block-column,
.nyf-panel.wp-block-group{background:var(--nyf-surface); border:1px solid var(--nyf-line); border-radius:var(--nyf-radius,0); padding:40px;}
.nyf-panel .wp-block-shortcode{
  display:block; border:1.5px dashed var(--nyf-line); padding:28px; text-align:center;
  font-size:13.5px; color:var(--nyf-ink-soft); line-height:1.6;
}

/* Beeldkader met hoekmarkeringen, ook bruikbaar als lege plaatshouder
   zolang er nog geen foto is. */
/* Het kader heeft een eigen verhouding nodig. De afbeelding erin staat
   absoluut gepositioneerd, dus zonder aspect-ratio heeft het kader geen
   hoogte en wordt het een streep. Een andere verhouding zet je per blok
   met de bijsnijhulp, of met een eigen CSS-klasse. */
.nyf-frame{
  position:relative; aspect-ratio:4 / 3;
  border:1px solid var(--nyf-line);
  background:linear-gradient(155deg, var(--nyf-bg-alt) 0%, var(--nyf-line) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  text-align:center; overflow:hidden;
}
.nyf-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.nyf-frame::before, .nyf-frame::after{content:""; position:absolute; width:22px; height:22px; border:1.5px solid var(--nyf-accent-strong); opacity:0.65;}
.nyf-frame::before{top:16px; left:16px; border-right:none; border-bottom:none;}
.nyf-frame::after{bottom:16px; right:16px; border-left:none; border-top:none;}
.nyf-frame.has-photo::before, .nyf-frame.has-photo::after{display:none;}
.nyf-frame .nyf-frame-label{
  font-size:11.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--nyf-accent-strong); opacity:0.85; max-width:22ch; position:relative;
}

/* Sectie met het label in de kantlijn.

   Het label staat naast de kop op een dikke streep, zoals een kopregel
   in een boek. Daardoor is er onder de kop geen accentstreepje meer
   nodig — dat deed hetzelfde werk dubbel. */
.nyf-margin-label.wp-block-columns{gap:56px !important; align-items:flex-start !important;}
.nyf-margin-label .nyf-label{
  font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600;
  color:var(--nyf-accent-strong); padding-top:12px; border-top:2px solid var(--nyf-primary);
  margin:0;
}

/* Genummerde stappen.

   De nummers komen uit een CSS-teller, niet uit de tekst. Een stap
   ertussen zetten of eentje weghalen hernummert de rest dus vanzelf —
   met ingetypte cijfers is dat gegarandeerd een keer vergeten. */
.nyf-steps{counter-reset:nyf-step; margin-top:44px;}
.nyf-steps > .nyf-step{
  counter-increment:nyf-step;
  display:grid; grid-template-columns:74px 1fr; gap:24px;
  padding:26px 0; margin:0; border-top:1px solid var(--nyf-line);
}
.nyf-steps > .nyf-step::before{
  content:counter(nyf-step,decimal-leading-zero);
  font-family:var(--nyf-font-heading); font-size:30px; font-weight:600;
  color:var(--nyf-accent); line-height:1;
}
.nyf-steps .wp-block-heading{font-size:20px; color:var(--nyf-ink); margin:0;}
.nyf-steps p{margin-top:8px; color:var(--nyf-ink-soft); max-width:60ch;}

/* Feitenband: grote cijfers tussen haarlijnen.

   margin-block en niet margin: de horizontale marges zijn hier juist
   wat de band over de volle breedte trekt (zie de alignfull-regel
   bovenaan). Die met een kortschrift op nul zetten haalde die breedte
   er weer af — de band begon dan bij de tekstkolom en liep rechts het
   scherm uit. */
.nyf-facts.wp-block-columns{
  gap:0 !important; margin-block:0 !important;
  /* De band loopt door tot de schermrand, de cijfers erin blijven op
     de contentbreedte staan. Zonder die tweede stap staan drie getallen
     over twee meter beeldscherm uitgesmeerd. */
  padding-block:46px;
  padding-inline:max(32px, calc((100vw - var(--nyf-wrap)) / 2 + 32px));
  border-top:1px solid var(--nyf-line); border-bottom:1px solid var(--nyf-line);
  background:var(--nyf-surface);
}
.nyf-facts .wp-block-column{
  padding:0 34px; border-left:1px solid var(--nyf-line); text-align:center;
}
.nyf-facts .wp-block-column:first-child{border-left:none;}
.nyf-fact-number{
  font-family:var(--nyf-font-heading); font-size:44px; font-weight:600;
  color:var(--nyf-primary); line-height:1; margin:0;
}
.nyf-fact-label{
  margin-top:10px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--nyf-accent-strong); font-weight:600;
}

/* Oproepbaan over de volle breedte.

   Standaard licht en niet donker. Een donkere baan pal boven de donkere
   footer loopt daarmee samen tot één zwart blok waarin de scheiding
   wegvalt — en juist onderaan de pagina staat zo'n oproep bijna altijd.
   Wil een site hem toch donker, dan zet je de achtergrondkleur van het
   groepsblok zelf om in de blokinstellingen; het palet staat er al.

   De baan is zelf de flexrij. De zijruimte komt uit padding in plaats
   van uit een binnenwrapper, want die wrapper zit niet in de blokmarkup:
   padding-inline knijpt de inhoud naar dezelfde contentbreedte als de
   rest van de pagina, terwijl de achtergrond doorloopt tot de rand. */
.nyf-cta-band.wp-block-group,
.nyf-dark.wp-block-group{
  background:var(--nyf-bg-alt);
  border-top:1px solid var(--nyf-line); border-bottom:1px solid var(--nyf-line);
  padding-block:56px;
  padding-inline:max(32px, calc((100vw - var(--nyf-wrap)) / 2 + 32px));
  display:flex; align-items:center; justify-content:space-between;
  gap:30px; flex-wrap:wrap;
}
/* Blokken die WordPress met de indeling "constrained" heeft opgeslagen
   krijgen van core margin-inline:auto. Een kop met een kleinere
   max-width dan de alinea eronder raakt daardoor gecentreerd, en dan
   begint hij een stuk verder naar rechts dan de tekst. In een baan waar
   alles links uitlijnt is dat altijd fout. */
.nyf-cta-band > *,
.nyf-dark > *,
.nyf-cta-band .wp-block-group > *,
.nyf-dark .wp-block-group > *{margin-inline:0;}

.nyf-cta-band .wp-block-heading,
.nyf-dark .wp-block-heading{max-width:22ch;}
.nyf-cta-band p,
.nyf-dark p{margin-top:10px; color:var(--nyf-ink-soft); max-width:52ch;}
.nyf-cta-band .wp-block-buttons,
.nyf-dark .wp-block-buttons{margin-top:0;}

/* Zet iemand de baan alsnog op een donkere achtergrondkleur, dan moet de
   tekst meekleuren. has-background is de klasse die WordPress erop zet. */
.nyf-cta-band.has-background.has-text-color .wp-block-heading,
.nyf-cta-band.has-background.has-text-color p{color:inherit;}

/* Bibliografie: hangende inspringing, titel cursief.

   De titel is een gewoon vetgedrukt stuk tekst — dat kan een redacteur
   met de knop in de werkbalk, zonder dat er een eigen opmaakformaat
   geregistreerd hoeft te worden. */
.nyf-biblio.wp-block-list{list-style:none; margin-top:36px; padding:0;}
.nyf-biblio li{
  padding:16px 0 16px 2.2em; text-indent:-2.2em;
  border-top:1px solid var(--nyf-line); font-size:15px; color:var(--nyf-ink-soft);
}
/* Een lange lijst in twee kolommen. break-inside houdt een regel die
   over twee regels loopt bij elkaar in plaats van hem over de kolomrand
   te knippen. */
.nyf-biblio.is-two-column{columns:2; column-gap:56px;}
.nyf-biblio.is-two-column li{break-inside:avoid;}

.nyf-biblio li b,
.nyf-biblio li strong{
  font-family:var(--nyf-font-heading); font-style:italic; font-weight:400;
  font-size:18px; color:var(--nyf-ink);
}

/* Een beeldmerk of illustratie in plaats van een foto.

   Het verschil met .nyf-frame: geen kader, geen achtergrond, en de
   afbeelding wordt volledig getoond in plaats van bijgesneden. Een
   foto vult zijn kader en mag aan de randen wegvallen; een logo mag
   dat nooit. */
.nyf-mark{margin:0;}
.nyf-mark img{
  width:auto; max-width:100%; max-height:340px; height:auto;
  margin-inline:auto; object-fit:contain;
}

/* Ondertekening onder een persoonlijk stuk tekst. */
.nyf-signature{margin-top:30px; padding-top:24px; border-top:1px solid var(--nyf-line); font-size:14px; font-weight:600; color:var(--nyf-ink);}
.nyf-signature span{display:block; margin-top:3px; font-size:12.5px; font-weight:400; color:var(--nyf-ink-soft);}

/* Sectielabel met doorlopende lijn.

   Het label staat links, de lijn loopt eruit weg tot de rand van de
   contentkolom. Een alternatief voor de sectiekop met kicker: minder
   nadrukkelijk, en het verbindt de kop met de rest van de regel in
   plaats van er alleen boven te hangen. */
.nyf-rule-label{display:flex; align-items:center; gap:20px; margin-bottom:26px;}
.nyf-rule-label > *{margin:0;}
.nyf-rule-label p{
  font-size:12px; letter-spacing:0.19em; text-transform:uppercase; font-weight:700;
  color:var(--nyf-accent-strong); white-space:nowrap;
}
.nyf-rule-label::after{
  content:""; height:1px; background:var(--nyf-accent); flex:1; opacity:0.55;
}

/* Kolommen met een gekleurde bovenlijn in plaats van een kaartvlak.
   Lichter dan .nyf-cards: geen omkadering, alleen een streep boven en
   haarlijnen ertussen. */
.nyf-topline-columns.wp-block-columns{gap:0 !important; align-items:stretch !important;}
/* De eerste kolom heeft links geen padding, zodat de tekst gelijk staat
   met de rand van de contentkolom. Zijn buitenmaat is daardoor 34px
   smaller dan die van de andere, maar de inhoud is even breed — dat is
   wat je ziet. */
.nyf-topline-columns > .wp-block-column{
  border-top:2px solid var(--nyf-accent); padding:32px 34px 32px 0;
}
.nyf-topline-columns > .wp-block-column + .wp-block-column{
  padding-left:34px; border-left:1px solid var(--nyf-line);
}
.nyf-topline-columns .wp-block-heading{font-size:23px; color:var(--nyf-ink); margin:0;}
.nyf-topline-columns p{margin-top:12px; font-size:15.5px; color:var(--nyf-ink-soft);}

/* Sectiekop: het genummerde label, de kop en de intro als één geheel. */
.nyf-section-head{max-width:640px;}
.nyf-section-head .wp-block-heading{margin-top:16px; font-size:clamp(26px,3vw,36px); color:var(--nyf-ink);}

/* Hero zonder beeld, alles gecentreerd. */
.nyf-hero.is-centered{text-align:center;}
.nyf-hero.is-centered h1{margin-left:auto; margin-right:auto;}
.nyf-hero.is-centered .nyf-lede{margin-left:auto; margin-right:auto;}
.nyf-hero.is-centered .wp-block-buttons{justify-content:center;}

/* Kaartenrij: gelijke kaarten naast elkaar. Bruikbaar voor diensten,
   publicaties, edities of wat een site verder in drieën wil zetten. */
.nyf-cards.wp-block-columns{gap:24px !important; align-items:stretch !important;}
.nyf-card.wp-block-column{
  background:var(--nyf-surface); border:1px solid var(--nyf-line); border-radius:var(--nyf-radius,0); padding:32px 28px;
  display:flex; flex-direction:column; gap:12px;
}
.nyf-card .wp-block-heading{font-size:19px; color:var(--nyf-ink); margin:0;}
.nyf-card p{font-size:14.5px; color:var(--nyf-ink-soft); margin:0;}
.nyf-card .wp-block-buttons{margin-top:auto; padding-top:16px;}

/* Regel met datum, tijd en plaats boven een kaartkop. */
.nyf-meta{
  display:flex; flex-wrap:wrap; gap:6px 16px; margin:0;
  font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--nyf-accent-strong); font-variant-numeric:tabular-nums;
}

/* Logobalk. De logo's krijgen een vaste hoogte zodat een rij met
   wisselende bestandsformaten toch rustig oogt. */
.nyf-logos.wp-block-columns{gap:40px !important; align-items:center !important;}
.nyf-logos .wp-block-image{margin:0;}
.nyf-logos img{
  max-height:56px; width:auto; margin:0 auto; object-fit:contain;
  filter:grayscale(1); opacity:0.65; transition:filter 0.2s ease, opacity 0.2s ease;
}
.nyf-logos img:hover{filter:grayscale(0); opacity:1;}

/* Veelgestelde vragen, op het uitklapblok van WordPress zelf. */
.nyf-faq{margin-top:40px; max-width:760px;}
.nyf-faq .wp-block-details{border-top:1px solid var(--nyf-line); padding:20px 0;}
.nyf-faq .wp-block-details summary{
  font-family:var(--nyf-font-heading); font-size:16.5px; font-weight:600;
  color:var(--nyf-ink); cursor:pointer; list-style:none; position:relative; padding-right:32px;
}
.nyf-faq .wp-block-details summary::-webkit-details-marker{display:none;}
.nyf-faq .wp-block-details summary::after{
  content:""; position:absolute; right:4px; top:50%;
  width:10px; height:10px; margin-top:-6px;
  border-right:2px solid var(--nyf-accent-strong); border-bottom:2px solid var(--nyf-accent-strong);
  transform:rotate(45deg); transition:transform 0.2s ease;
}
.nyf-faq .wp-block-details[open] summary::after{transform:rotate(-135deg); margin-top:-2px;}
.nyf-faq .wp-block-details p{margin-top:14px; font-size:15px; color:var(--nyf-ink-soft); max-width:64ch;}

/* =====================================================
   Widgetgebieden
   ===================================================== */
.nyf-widget-area{display:flex; flex-direction:column; gap:12px;}
.nyf-widget-title{font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;}
.nyf-widget-area ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}

/* =====================================================
   Footer
   ===================================================== */
.nyf-footer{background:var(--nyf-footer-bg); color:var(--nyf-footer-text); padding:56px 0 30px;}
.nyf-footer a{color:inherit;}

/* De merknaam krijgt dubbele ruimte, de kolommen ernaast verdelen de
   rest. Met flexbox en niet met grid: een grid-tracklijst mag na een
   flexibele track (2fr) geen auto-repeat meer bevatten, dus die
   declaratie was ongeldig en werd stilzwijgend genegeerd — waarna alles
   onder elkaar kwam te staan. Flex heeft die beperking niet en past
   zich net zo goed aan het aantal kolommen aan. */
.nyf-footer-top{
  display:flex; flex-wrap:wrap; gap:48px; align-items:flex-start;
  padding-bottom:36px; border-bottom:1px solid color-mix(in srgb, var(--nyf-footer-text) 30%, transparent);
}
.nyf-footer-brand{flex:2 1 280px;}
.nyf-footer-col,
.nyf-footer-top .nyf-widget-area{flex:1 1 150px;}
.nyf-footer-name{display:block; font-family:var(--nyf-font-heading); font-size:20px; font-weight:700; color:var(--nyf-bg);}
.nyf-footer-tag{display:block; margin-top:8px; font-size:14px; opacity:0.85; max-width:44ch;}
.nyf-footer-col ul,
.nyf-footer-top .nyf-widget-area ul{
  list-style:none; display:flex; flex-direction:column; gap:9px; margin:0; padding:0;
}
.nyf-footer-col a,
.nyf-footer-top .nyf-widget-area a{font-size:14.5px; text-decoration:none;}
.nyf-footer-col a:hover,
.nyf-footer-top .nyf-widget-area a:hover{color:var(--nyf-accent);}
.nyf-footer-top .nyf-widget-title{
  font-family:var(--nyf-font-body); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; margin:0 0 14px; opacity:0.7;
}
.nyf-footer-bottom{margin-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px;}

/* =====================================================
   Formulieren — losse resets zodat een ingeplakte shortcode van een
   formulierplugin de look van het theme overneemt in plaats van zijn
   eigen grijze standaard mee te brengen.
   ===================================================== */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], textarea, select{
  font-family:inherit; font-size:14.5px; color:var(--nyf-ink); background:var(--nyf-bg);
  border:1px solid var(--nyf-line); border-radius:var(--nyf-radius,0); padding:12px 14px; width:100%; max-width:100%;
}
input[type="submit"], button[type="submit"]{
  font-family:inherit; font-size:14px; font-weight:600;
  background:var(--nyf-button-bg); color:var(--nyf-button-text);
  border:1.5px solid transparent; border-radius:var(--nyf-radius,0); padding:13px 24px; cursor:pointer;
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width:920px){
  :root{--nyf-block-pad:72px;}
  .nyf-footer-top{grid-template-columns:1fr;}
  .nyf-facts .wp-block-column{border-left:none; border-top:1px solid var(--nyf-line); padding:22px 0 0;}
  .nyf-facts .wp-block-column:first-child{border-top:none; padding-top:0;}
  .nyf-biblio.is-two-column{columns:1;}
  .nyf-topline-columns > .wp-block-column{padding-right:0;}
  .nyf-topline-columns > .wp-block-column + .wp-block-column{padding-left:0; border-left:0;}
  .nyf-margin-label .nyf-label{border-top:0; padding-top:0;}
}
@media (max-width:781px){
  /* WordPress stapelt wp:columns rond dit punt. De scheidingslijnen van
     de iconenrij gaan daarom van zij- naar bovenlijnen, anders staat er
     bij gestapelde items een losse streep langs de linkerkant. */
  .nyf-icon-columns .wp-block-column{border-left:none; border-top:1px solid var(--nyf-line); padding:20px 0 0;}
  .nyf-icon-columns .wp-block-column:first-child{border-top:none; padding-top:0;}
}
@media (max-width:720px){
  :root{--nyf-header-h:76px;}
  .nyf-nav-toggle{display:flex;}
  .nyf-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--nyf-header-bg); border-bottom:1px solid var(--nyf-line); padding:8px 0;
  }
  .nyf-nav.is-open{display:block;}
  .nyf-nav ul{flex-direction:column; align-items:flex-start; gap:0; padding:8px 32px 16px;}
  .nyf-nav a{display:block; padding:12px 0;}
  .nyf-brand-name{font-size:19px;}
  .nyf-header-cta{display:none;}
}
@media (max-width:560px){
  .nyf-wrap{padding:0 20px;}
}