/* wings-client.css - bij1/denhaag-bij1 - bij1.css + campaign-editor-fixes.css @ a6f4156
   Gegenereerd door scripts/client-css/client_css.py deploy; niet op de box bewerken. */
/* === BIJ1 GRV2026 styling override — extends wings-theme-token-integration === */
/* Bron: docs/clients/bij1/02-design-tokens-from-bij1.md                          */

/* TGN Soft Round via Typekit (project aqd4qpg) — Jaap's eigen Adobe Fonts-licentie.
   Werkt cross-domain (Typekit serveert vanaf use.typekit.net), dus ook lokaal.
   Echte TradeGothic op rotterdam.bij1.org is Monotype-hosted en domain-locked,
   vandaar dat we daar nu niet mee uit de voeten kunnen lokaal.

   tgn-soft-round levert weights 400 (n4), 700 (n7), 800 (n8). Het Wings-theme
   forceert via runtime-CSS heading-font-weight: 600, wat op deze Typekit-family
   fallback'd naar 700 in plaats van 800 (te dun). Daarom: alias het n8-bestand
   onder een eigen family 'tgn-headings' die intern weight 400 declareert — dan
   pakt elke heading-rule, ongeacht het opgevraagde gewicht, automatisch het
   heavy-bestand. Zelfde truc als bij Bricks/Astra-themes met hard-coded weights. */
@import url('https://use.typekit.net/aqd4qpg.css');

@font-face {
  font-family: "tgn-headings";
  src: url("https://use.typekit.net/af/e58076/00000000000000007735ba63/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff2"),
       url("https://use.typekit.net/af/e58076/00000000000000007735ba63/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bij1-yellow:   #ffff00;
  --bij1-yellow-soft: #ffffe6; /* ACSS --primary-ultra-light op bij1.org */
  --bij1-cyan:     #00ccff;
  --bij1-orange:   #ff9600;
  --bij1-magenta:  #ff00ba;
  --bij1-purple:   #c700bf;
  --bij1-neutral:  #282625;
  --bij1-base:     #3e3c3b;
  /* Eén gedeelde contentbreedte (bij1.org ~1356px) waar nav, hero, twocol,
     campaign-cards en nodes-grids op uitlijnen. */
  --bij1-shell:    min(1356px, calc(100vw - 6rem));
}

/* === Brede shell-uitlijning: nav + breakout-blokken op dezelfde breedte === */
@media (min-width: 783px) {
  .site-header .nav-container {
    max-width: none;
    width: var(--bij1-shell);
    padding: 0;
  }
}
@media (min-width: 769px) {
  .nodes-grid-wrapper {
    width: var(--bij1-shell) !important;
    padding: 0 !important;
  }
}

/* === Heading + body font: tgn-soft-round (Typekit, Trade Gothic Next Soft Rounded) ===
   - body / paragraph: tgn-soft-round @ 400 (regular)
   - headings: tgn-headings (alias voor het n8-bestand, dwingt heavy/800-look) */
:root,
[data-wings-v2-active="true"] {
  --wings-heading-font-family: "tgn-headings", "tgn-soft-round", "TradeGothicNextSRW01-He", -apple-system, sans-serif !important;
  --wings-font-family-headings: "tgn-headings", "tgn-soft-round", "TradeGothicNextSRW01-He", -apple-system, sans-serif !important;
  --wings-body-font-family: "tgn-soft-round", "TradeGothicNextSRW01", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  --wings-font-family-body: "tgn-soft-round", "TradeGothicNextSRW01", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  --wings-heading-font-weight: 400 !important;  /* the alias-family is al heavy */
  --wings-body-font-weight: 400 !important;
  /* Kop- en tekstkleur: het Dreamkit-default is #1e293b (Tailwind-slate, koel
     blauwzwart). BIJ1 gebruikt overal --neutral #282625 (warm bijna-zwart, zie
     02-design-tokens-from-bij1.md § Heading- en text-defaults). Het verschil is
     klein per letter en groot over een hele pagina: slate leest blauwig naast
     het gele/magenta palet. Geldt voor alle drie de sites. */
  --wings-heading-color: var(--bij1-neutral) !important;
  --wings-text-color: var(--bij1-neutral) !important;
}

/* Body krijgt expliciet weight 400 (regular). */
body, p, li, td, th, input, textarea, select, button {
  font-weight: 400;
}
/* Headings: explicit weight 400 i.c.m. tgn-headings alias = visueel 800.
   Bold-strong krijgt tgn-soft-round n7 (700). */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.entry-title,
.wings-cta h1, .wings-cta h2,
.card-title {
  font-weight: 400 !important;
  font-family: var(--wings-heading-font-family) !important;
}
strong, b {
  font-weight: 700;
}

/* Hard apply on body + headings to bypass any inline overrides. */
body { font-family: var(--wings-body-font-family) !important; }
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wings-cta h1, .wings-cta h2,
.entry-title { font-family: var(--wings-heading-font-family) !important; letter-spacing: 0.01em; }

/* === CTA contrast fix — geel-bg met witte tekst is onleesbaar === */
/* Force dark text + a black/dark button on yellow CTA backgrounds. */
.wings-cta,
.wings-cta__title,
.wp-block-wings-cta,
.wp-block-wings-cta h1,
.wp-block-wings-cta h2,
.wp-block-wings-cta h3,
.wp-block-wings-cta p {
  color: var(--bij1-neutral) !important;
}
.wings-cta .wings-anchor-heading,
.wp-block-wings-cta .wings-anchor-heading {
  color: var(--bij1-neutral) !important;
}
.wings-cta__button,
.wp-block-wings-cta .wings-cta__button {
  background-color: var(--bij1-neutral) !important;
  color: var(--bij1-yellow) !important;
  font-family: var(--wings-heading-font-family) !important;
  font-weight: 400; /* heavy via tgn-headings alias */
  font-size: 1.05rem;
  line-height: 1;
  border-radius: 999px;
  padding: 0.9em 1.8em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: transform 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.wings-cta__button:hover,
.wings-cta__button:focus,
.wp-block-wings-cta .wings-cta__button:hover,
.wp-block-wings-cta .wings-cta__button:focus {
  background-color: var(--bij1-magenta) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

/* === Footer styling — bij1.org-look — wit-op-cyaan icons + gele links === */
/* Link items in footer-menus → geel */
.site-footer .widget_wings_menu_widget a,
.site-footer .wings-menu-widget a,
.site-footer .menu-list a,
footer .widget_wings_menu_widget a {
  color: var(--bij1-yellow) !important;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s ease-out;
}
.site-footer .widget_wings_menu_widget a:hover,
.site-footer .wings-menu-widget a:hover,
.site-footer .menu-list a:hover {
  color: #ffffff !important;
}
/* Widget headings in footer → wit (uppercase via theme) */
.site-footer .widget-title,
footer .widget-title {
  color: #ffffff !important;
}

/* Social icons → wit-op-cyaan vierkante knoppen (zoals bij1.org footer) */
.wings-social-media-widget .social-media-icons {
  gap: 0.6rem !important;
}
.wings-social-media-widget .social-media-icons .social-icon,
.wings-social-media-widget .social-media-icons.size-small  .social-icon,
.wings-social-media-widget .social-media-icons.size-medium .social-icon,
.wings-social-media-widget .social-media-icons.size-large  .social-icon {
  width: 3rem !important;
  height: 3rem !important;
  padding: 0.6rem;
  background-color: var(--bij1-cyan) !important;
  color: #ffffff !important;
  border-radius: 0.4rem;
  transition: all 0.2s ease-out;
}
.wings-social-media-widget .social-media-icons .social-icon:hover {
  background-color: var(--bij1-magenta) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}
.wings-social-media-widget .social-media-icons .social-icon svg,
.wings-social-media-widget .social-media-icons .social-icon i {
  width: 100% !important;
  height: 100% !important;
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* === Footer-layout (bij1.org-pattern): nieuwsbrief + sociale media in één brede kolom ===
   Wat hier stond is platform geworden en dus weg (09-09-2026):
   - het theme rendert sinds 1.3.2 alleen de gevulde footer-kolommen, dus de
     `:not(:has(.widget))`-regel had niets meer te verbergen;
   - de token `"--wings-footer-layout": "3+wide"` in wp-content/wings-tokens.json
     levert exact dezelfde grid als onze eigen regel deed
     (`repeat(3, minmax(0,1fr)) minmax(20rem, 1.6fr)`, gap 2.5rem, vanaf 900px);
     hij staat aan op rotterdam-bij1 en amsterdam-bij1;
   - `.footer-widget .widget + .widget { margin-top: 1.75rem }` zit nu in het theme.
   Widgets: footer-1..3 = menu's, footer-4 = Dreamkit Form-widget (nieuwsbrief) +
   sociale-media-widget (in die volgorde), footer-5 leeg. */
/* Sociale-media-titel onder de nieuwsbrief alleen voor screenreaders (bij1.org toont
   daar enkel de iconen). De text-/custom_html-varianten staan er nog voor sites die
   het formulier nog als shortcode-widget dragen (bij1-demo). */
.site-footer .wings-gravity-forms-widget + .wings-social-media-widget .widget-title,
.site-footer .widget_text + .wings-social-media-widget .widget-title,
.site-footer .widget_custom_html + .wings-social-media-widget .widget-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* === Heading-stripes (group-wrapper survives wings-anchors class strip) === */
.bij1-section h2:first-of-type {
  position: relative;
  padding-left: 2rem;
}
.bij1-section h2:first-of-type::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 0.6rem;
  border-radius: 0 0.25rem 0.25rem 0;
  background-color: var(--bij1-cyan);
}
.bij1-section--cyan    h2:first-of-type::before { background-color: var(--bij1-cyan); }
.bij1-section--orange  h2:first-of-type::before { background-color: var(--bij1-orange); }
.bij1-section--purple  h2:first-of-type::before { background-color: var(--bij1-purple); }
.bij1-section--yellow  h2:first-of-type::before { background-color: var(--bij1-yellow); }
.bij1-section--magenta h2:first-of-type::before { background-color: var(--bij1-magenta); }

/* === Tekst-color subtle warmer-near-black === */
.entry-content p,
.entry-content li {
  color: var(--bij1-neutral);
}

/* === Magenta focus ring (mirrors ACSS --action focus on bij1.org) === */
:root { --wings-focus-color: var(--bij1-magenta); }
:focus-visible {
  outline: 2px solid var(--bij1-magenta) !important;
  outline-offset: 0.25em;
}

/* === Donkere menubar (bij1.org pattern) ===
   90px hoog, geen aparte rainbow-strip op top — de rainbow zit AL in het BIJ1
   logo-SVG (rainbow + BIJ1-badge integraal). Theme default position:fixed wordt
   teruggebracht naar relative zodat body-padding-top niet als loze ruimte komt. */
.site-header {
  background-color: var(--bij1-neutral) !important;
  color: #ffffff !important;
  height: 90px !important;
  min-height: 90px !important;
  position: relative !important;
  top: auto !important;
}
.site-header .nav-container,
.site-header .nav-wrapper {
  min-height: 90px;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* Header staat in de flow (position: relative hierboven), dus de body-padding
   die het theme voor een fixed header zet is hier altijd loze ruimte - ook met
   admin-bar. De admin-bar-offset regelt WordPress zelf al met
   `html { margin-top: 32px }` (46px mobiel). De oude `.admin-bar body`-regels
   matchten nooit: WP zet de class óp body, niet op een voorouder, waardoor
   ingelogd de theme-padding bleef staan (gat onder de admin-bar, 2026-09-21). */
body {
  padding-top: 0 !important;
}
/* Menu items wit + geel-on-hover */
.site-header a,
.site-header .menu-item a,
.site-header .nav-menu a,
.main-navigation a {
  color: #ffffff !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: color 0.15s ease-out;
}
.site-header a:hover,
.site-header a:focus,
.site-header .menu-item a:hover,
.main-navigation a:hover {
  color: var(--bij1-yellow) !important;
}
/* === Header: zoekveld als rustige pil in de donkere balk ===
   Safari en Chrome tekenen input[type=search] met eigen chrome (grijs, afgerond,
   met rand) zolang appearance niet gereset is; dat gaf het grijze veld in het
   cyaan blok. Nu: één pil in 12% wit, witte tekst, geel zoek-icoon; bij focus
   wordt de pil wit met donkere tekst. */
.site-header .header-search {
  width: 240px;
}
.site-header .header-search .search-form {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 0 !important;
  border-radius: 999px !important;
  overflow: hidden;
  transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.site-header .header-search .search-form:focus-within {
  background: #ffffff !important;
  box-shadow: 0 0 0 2px var(--bij1-yellow);
}
.site-header .header-search .search-field {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: #ffffff !important;
  font: inherit;
  font-size: 0.95rem;
  height: 40px;
  padding: 0 0.25rem 0 1.1rem;
}
.site-header .header-search .search-field::placeholder {
  color: rgba(255, 255, 255, 0.72) !important;
  opacity: 1;
}
.site-header .header-search .search-field::-webkit-search-decoration,
.site-header .header-search .search-field::-webkit-search-cancel-button,
.site-header .header-search .search-field::-webkit-search-results-button {
  -webkit-appearance: none;
  display: none;
}
.site-header .header-search .search-form:focus-within .search-field,
.site-header .header-search .search-form:focus-within .search-field::placeholder {
  color: var(--bij1-neutral) !important;
}
.site-header .header-search .search-form:focus-within .search-field::placeholder {
  color: rgba(40, 38, 37, 0.55) !important;
}
.site-header .header-search .search-submit {
  display: grid;
  place-items: center;
  height: 40px;
  padding: 0 0.9rem 0 0.5rem;
  background: transparent !important;
  border: 0 !important;
  color: var(--bij1-yellow) !important;
  cursor: pointer;
  transition: color 0.15s ease-out;
}
.site-header .header-search .search-form:focus-within .search-submit,
.site-header .header-search .search-submit:hover {
  color: var(--bij1-purple) !important;
}
.site-header .header-search .search-submit svg {
  width: 18px;
  height: 18px;
}

/* === Header: taalswitch als menu-item, niet als widget ===
   Geen grijs kader; erft wit/uppercase/geel-on-hover van .site-header a.
   Kleine globe blijft als affordance, iets gedempt. */
.site-header a.wings-language-switch {
  background: transparent !important;
  border-radius: 0;
  padding: 0 0.25rem;
  margin-right: 1rem;
  gap: 0.35rem;
  min-height: 40px;
}
.site-header a.wings-language-switch:hover,
.site-header a.wings-language-switch:focus {
  background: transparent !important;
  transform: none;
}
.site-header a.wings-language-switch .wings-language-switch__label {
  font-size: 1rem;
  font-weight: inherit;
  letter-spacing: inherit;
}
.site-header a.wings-language-switch .wings-language-switch__icon {
  width: 18px;
  height: 18px;
  opacity: 0.8;
}

/* === Footer NIEUWSBRIEF — Gravity Form "Nieuwsbrief (footer)" in footer-4 ===
   Geplaatst als Dreamkit Form-widget (`wings_gravity_forms_widget`, wings-footer-widgets
   1.1.0): die kiest het formulier, zet ajax altijd aan (bevestiging in de footer zelf,
   geen reload naar de top van de pagina) en wikkelt het in
   .wings-footer-form--inline/--stacked. Het formulier heeft cssClass
   bij1-newsletter-form, GF zet dat als bij1-newsletter-form_wrapper op de wrapper —
   daar hangen de regels hieronder aan, dus ze gelden ongeacht de plaatsing.
   Aanmaken/bijwerken van het formulier: scripts/footer-newsletter-form.php; plaatsen
   van de widget: scripts/footer-form-widget.php. Legacy GF-markup; GF laadt hier geen
   eigen CSS, dus de honeypot-li moet zelf verborgen worden. */
.site-footer .bij1-newsletter-form_wrapper {
  margin: 0;
  max-width: 30rem;
}
.site-footer .bij1-newsletter-form_wrapper .gform_heading {
  margin: 0;
}
.site-footer .bij1-newsletter-form_wrapper .gform_description {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  margin: 0 0 0.9rem;
}
.site-footer .bij1-newsletter-form_wrapper .gform_validation_container,
.site-footer .bij1-newsletter-form_wrapper .gform_validation_errors,
.site-footer .bij1-newsletter-form_wrapper .gfield_required {
  display: none !important;
}
/* Eén witte pil: gform_body (input) + submit-knop naast elkaar, op één regel.
   De widget-CSS van wings-footer-widgets laat de knop bij een smalle kolom naar een
   eigen regel zakken (flex-wrap: wrap). Binnen deze witte pil ziet dat er kapot uit:
   de knop valt dan onder het invoerveld, binnen dezelfde ronde vorm. Eén regel dus,
   ook op mobiel — het veld mag krimpen.
   Grid in plaats van flex, en de pil is ::before op rij 1 in plaats van de
   achtergrond van de form: wings-altcha zet zijn widget in .gform_footer vóór de
   knop (TODO #10, 24-09). .gform_footer wordt display: contents, zodat knop en
   widget elk een eigen cel krijgen: knop rechts in de pil, widget op rij 2 eronder,
   op de donkere footer. Groeit rij 1 (validatiemelding), dan groeit de pil mee. */
.site-footer .bij1-newsletter-form_wrapper form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.5rem;
  isolation: isolate;
}
.site-footer .bij1-newsletter-form_wrapper form::before {
  content: "";
  grid-row: 1;
  grid-column: 1 / -1;
  align-self: stretch;
  z-index: -1;
  background-color: #ffffff;
  border-radius: 999px;
}
.site-footer .bij1-newsletter-form_wrapper .gform_body {
  grid-row: 1;
  grid-column: 1;
  min-width: 0;
  margin: 0.3rem 0 0.3rem 0.6rem;
}
.site-footer .bij1-newsletter-form_wrapper .gform_fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
.site-footer .bij1-newsletter-form_wrapper .gfield {
  margin: 0 !important;
  padding: 0 !important;
}
.site-footer .bij1-newsletter-form_wrapper .gf-floating-label {
  position: relative;
  margin: 0;
}
.site-footer .bij1-newsletter-form_wrapper .gf-floating-label input {
  width: 100%;
  height: 2.75rem;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  padding: 0 0.5rem 0 1rem !important;
  font: inherit;
  font-size: 1rem;
  color: var(--bij1-neutral) !important;
}
/* Label gedraagt zich als placeholder: in het veld, weg zodra er focus of tekst is */
.site-footer .bij1-newsletter-form_wrapper .gf-floating-label label {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(40, 38, 37, 0.55) !important;
  pointer-events: none;
  transition: opacity 0.12s ease-out;
}
.site-footer .bij1-newsletter-form_wrapper .gfield.active .gf-floating-label label,
.site-footer .bij1-newsletter-form_wrapper .gf-floating-label input:focus + label,
.site-footer .bij1-newsletter-form_wrapper .gf-floating-label input:not(:placeholder-shown) + label {
  opacity: 0;
}
.site-footer .bij1-newsletter-form_wrapper .gform_footer {
  display: contents;
}
.site-footer .bij1-newsletter-form_wrapper .gform_footer input[type="submit"] {
  grid-row: 1;
  grid-column: 2;
  width: auto !important;
  height: 2.75rem;
  line-height: 2.75rem;
  margin: 0.3rem !important;
  padding: 0 1.5em !important;
  border: 0 !important;
  border-radius: 999px;
  /* Paars, niet magenta (WP4, 09-09-2026). Drie redenen: wit op #ff00ba haalt
     3,52:1 en zakt daarmee onder de AA-drempel voor deze tekstmaat; wit op
     #c700bf haalt 5,02:1. bij1.org gebruikt in zijn eigen footer #c700bf
     (gemeten, zelfde 5,02). En elke andere GF-submit in dit bestand staat al
     op --bij1-purple, dus dit was ook de enige uitzondering. Magenta blijft
     de hover-kleur. */
  background-color: var(--bij1-purple) !important;
  color: #ffffff !important;
  font-family: var(--wings-heading-font-family);
  font-weight: 400; /* heavy via tgn-headings alias */
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease-out, transform 0.15s ease-out;
}
.site-footer .bij1-newsletter-form_wrapper .gform_footer input[type="submit"]:hover,
.site-footer .bij1-newsletter-form_wrapper .gform_footer input[type="submit"]:focus {
  background-color: var(--bij1-magenta) !important;
  transform: translateY(-1px);
}
/* Foutmelding onder het veld, binnen de witte pil */
.site-footer .bij1-newsletter-form_wrapper .validation_message {
  color: var(--bij1-purple);
  font-size: 0.85rem;
  padding: 0 1rem 0.35rem;
  margin: 0;
  background: transparent;
  border: 0;
}
.site-footer .bij1-newsletter-form_wrapper .gform_confirmation_message {
  color: #ffffff;
  font-size: 1rem;
}
/* Terwijl GF (ajax) bezig is */
.site-footer .bij1-newsletter-form_wrapper .gform_ajax_spinner {
  display: none;
}
/* ALTCHA-widget (wings-altcha): onder de pil, in wit op de donkere footer. De
   plugin rekt .altcha op tot 100% voor brede formulieren; hier houden we de
   vendored cap van 260px, anders loopt het kader over de hele kolom. */
.site-footer .bij1-newsletter-form_wrapper .wings-altcha {
  grid-row: 2;
  grid-column: 1 / -1;
  margin: 0.75rem 0 0;
  color: #ffffff;
  --altcha-color-border: rgba(255, 255, 255, 0.45);
  --altcha-color-border-focus: #ffffff;
}
.site-footer .bij1-newsletter-form_wrapper .wings-altcha .altcha {
  max-width: 260px;
}

/* === Consent-banner (wings-privacy #wings-consent-root) — BIJ1-branding ===
   Was: display:none op de oude plugin-markup. De nieuwe banner blijft zichtbaar
   maar in huisstijl: donkere bar, gele accepteer-knop, witte outline-knoppen. */
#wings-consent-root .wings-consent-banner {
  background-color: #1b1918 !important;
  color: #ffffff !important;
  border-top: 4px solid var(--bij1-yellow, #ffff00);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.35);
}
#wings-consent-root .wings-consent-banner__text {
  color: #ffffff !important;
  font-size: 0.95rem;
}
#wings-consent-root .wings-consent-banner__button {
  border-radius: 999px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.6em 1.4em !important;
  border: 2px solid transparent !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#wings-consent-root .wings-consent-banner__button--accept {
  background-color: var(--bij1-yellow, #ffff00) !important;
  color: #1b1918 !important;
}
#wings-consent-root .wings-consent-banner__button--accept:hover {
  background-color: var(--bij1-purple, #c700bf) !important;
  color: #ffffff !important;
}
#wings-consent-root .wings-consent-banner__button--reject,
#wings-consent-root .wings-consent-banner__button--customize {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.55) !important;
}
#wings-consent-root .wings-consent-banner__button--reject:hover,
#wings-consent-root .wings-consent-banner__button--customize:hover {
  border-color: var(--bij1-yellow, #ffff00) !important;
  color: var(--bij1-yellow, #ffff00) !important;
}
/* Voorkeuren-panel: toggles + opslaan-knop in huisstijl */
#wings-consent-root .wings-consent-panel__toggle-input:checked + .wings-consent-panel__toggle-slider {
  background-color: var(--bij1-purple, #c700bf) !important;
}
#wings-consent-root .wings-consent-panel__footer .wings-consent-banner__button--accept {
  background-color: var(--bij1-yellow, #ffff00) !important;
  color: #1b1918 !important;
}

/* === Card-styling — bij1.org-look: dark info-strook met geel heading === */
/* Card-wrapper: rounded corners + soft shadow + hover lift */
a.card,
.wings-card,
.nodes-grid__item .card,
.nodes-grid .card {
  display: flex !important;
  flex-direction: column;
  border-radius: 0.6rem;
  overflow: hidden;
  background-color: var(--bij1-neutral) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
a.card:hover,
.wings-card:hover,
.nodes-grid .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

/* Image area */
a.card .card-image,
.wings-card .card-image,
.nodes-grid .card .card-image {
  aspect-ratio: 4 / 3;
  background-size: cover !important;
  background-position: center !important;
  position: relative;
}

/* Date pill — on top of image, magenta bg (action-color) ipv geel */
a.card .card-date,
.wings-card .card-date,
.nodes-grid .card .card-date {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background-color: var(--bij1-magenta) !important;
  color: #ffffff !important;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.35em 0.65em;
  border-radius: 0.25rem;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Category-tag pill (bij1.org "BLOG"-pattern) — linksboven op card-image.
   :has(.card-date) zorgt dat alleen article-cards (met datum) een tag krijgen.
   Person-cards op /onze-mensen + Onze-mensen-grid hebben geen datum dus geen tag. */
a.card .card-image:has(.card-date)::before,
.wings-card .card-image:has(.card-date)::before,
.nodes-grid .card .card-image:has(.card-date)::before {
  content: "NIEUWS";
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background-color: var(--bij1-neutral);
  color: #ffffff;
  font-family: var(--wings-heading-font-family);
  font-weight: 800;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35em 0.65em;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
  z-index: 2;
}

/* Info-strook: dark bg + yellow title + white description */
a.card .card-content,
.wings-card .card-content,
.nodes-grid .card .card-content {
  background-color: var(--bij1-neutral) !important;
  color: #ffffff !important;
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
}
a.card .card-title,
.wings-card .card-title,
.nodes-grid .card .card-title {
  color: var(--bij1-yellow) !important;
  font-family: var(--wings-heading-font-family);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase; /* bij1.org/utrecht card-titels zijn uppercase */
}
a.card .card-description,
.wings-card .card-description,
.nodes-grid .card .card-description {
  color: #ffffff !important;
  opacity: 0.85;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* === Spreekuur / wings/callout — paars variant zoals bij1.org "HELP MEE. DONEER." ===
   Theme rendert .wp-block-wings-callout > .wings-callout__container met een
   eigen --wings-callout-bg-color (default geel). Override beide niveaus. */
.wp-block-wings-callout {
  --wings-callout-bg-color: var(--bij1-purple) !important;
  background-color: var(--bij1-purple) !important;
  color: #ffffff !important;
  border-radius: 0.6rem;
  padding: 0;
  overflow: hidden;
}
.wp-block-wings-callout .wings-callout__container,
.wings-callout__container {
  background-color: var(--bij1-purple) !important;
  color: #ffffff !important;
  padding: 1.75rem 2rem !important;
  border-radius: 0.6rem;
}
.wp-block-wings-callout .wings-callout__content,
.wings-callout__content {
  color: #ffffff !important;
  background: transparent !important;
}
.wp-block-wings-callout *,
.wings-callout * {
  color: #ffffff !important;
}
.wp-block-wings-callout strong,
.wings-callout strong {
  color: var(--bij1-yellow) !important;
  display: inline-block;
  font-size: 1.1em;
  margin-bottom: 0.25em;
}
.wp-block-wings-callout a,
.wings-callout a {
  color: var(--bij1-yellow) !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.wp-block-wings-callout .wings-callout__emoji {
  font-size: 1.5rem;
}

/* === Logo-cell vult hele 90px-hoogte (rainbow zit in SVG) === */
.site-header .site-branding {
  display: flex;
  align-items: center;
  height: 90px;
}
.site-header .custom-logo-link,
.site-header a.custom-logo-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
}
.site-header .custom-logo,
.site-header .wings-logo,
.site-header .site-branding img,
.site-header .site-branding svg {
  height: 90px !important;  /* full bar height */
  max-height: 90px !important;
  width: auto !important;
  display: block;
}

/* === WORD LID — gele circle CTA in header (bij1.org-pattern) ===
   Hogere specificiteit (`.site-header a.wings-header-featured-link`) zodat de
   .site-header a witte-tekst-rule niet wint. */
.site-header a.wings-header-featured-link,
a.wings-header-featured-link,
.wings-header-featured-link {
  position: relative;
  display: grid !important;
  place-items: center;
  width: 5rem !important;
  height: 5rem !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: var(--bij1-yellow) !important;
  color: var(--bij1-neutral) !important;
  font-family: var(--wings-heading-font-family);
  font-weight: 400;  /* heavy via tgn-headings alias */
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background 0.2s ease-out;
  /* Verberg originele "Word lid"-tekst en gebruik ::before voor 2-regel rendering. */
  font-size: 0 !important;
  overflow: hidden;
}
.wings-header-featured-link::before {
  content: "WORD\A LID";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  white-space: pre;
  font-size: 1rem;
  line-height: 1.05;
  font-family: var(--wings-heading-font-family);
  font-weight: 400;
  color: inherit;
  letter-spacing: 0.04em;
  text-align: center;
}
.site-header a.wings-header-featured-link:hover,
.site-header a.wings-header-featured-link:focus,
.wings-header-featured-link:hover,
.wings-header-featured-link:focus {
  background-color: var(--bij1-magenta) !important;
  color: #ffffff !important;
  transform: scale(1.06) translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
/* Op kleinere schermen kleinere bol om header niet te dominant te maken. */
@media (max-width: 600px) {
  .wings-header-featured-link {
    width: 4rem !important;
    height: 4rem !important;
    font-size: 0.75rem;
  }
}

/* =====================================================================
   === Hero (wings/hero) — bij1.org GRV2026-look, gedeeld over alle 3 sites
   Tekstpaneel links + beeld rechts, 50/50, even hoog, geen overlap. Zwart
   paneel, uppercase titel met cyaan accent, gele pill-CTA met play-disc.
   De wings/hero-velden (titel/intro/cta/beeld) blijven leidend; dit zijn
   alleen visuele overrides. Op de homepage levert de hero de h1, dus de
   default page-title wordt verborgen.
   ===================================================================== */
body.home .entry-header,
body.home .entry-title { display: none !important; }

.wp-block-wings-hero {
  --hero-bg-color:#000000; --hero-text-color:#ffffff;
  --hero-button-bg: var(--bij1-yellow, #ffff00);
  --wings-hero-button-text-color:#282625;
  --wings-hero-button-hover-bg-color:#ffffff; --wings-hero-button-hover-text-color:#282625;
}
.wp-block-wings-hero .wings-hero__content { background-color:#000000 !important; color:#ffffff !important; position: relative; }
.wp-block-wings-hero .wings-hero__content * { color:#ffffff !important; }
@media (min-width: 769px) {
  .wp-block-wings-hero {
    margin-bottom: 60px;
    width: var(--bij1-shell, min(1356px, calc(100vw - 6rem))) !important;
    padding: 0 !important;
  }
  .wp-block-wings-hero .wings-hero__container {
    display: flex;
    align-items: stretch;
    min-height: 520px;
  }
  .wp-block-wings-hero .wings-hero__content-wrapper {
    width: 50% !important;
    flex: 0 0 50%;
    margin-top: 0 !important;
    display: flex;
  }
  .wp-block-wings-hero .wings-hero__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: var(--wings-border-radius, 8px) 0 0 var(--wings-border-radius, 8px);
  }
  .wp-block-wings-hero .wings-hero__image-wrapper {
    position: static !important;
    flex: 1 1 50%;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    border-radius: 0 var(--wings-border-radius, 8px) var(--wings-border-radius, 8px) 0;
    overflow: hidden;
  }
  .wp-block-wings-hero .wings-hero__image {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover;
  }
}
/* Hero-intro: 22px (bij1.org-maat), zonder de 500px-cap van het theme */
.wp-block-wings-hero .wings-hero__intro {
  font-size: 22px !important;
  line-height: 1.5;
  opacity: 1;
}
.wp-block-wings-hero .wings-hero__intro p { max-width: none !important; }
/* Cyaan accent-blok op de linkerrand van het paneel, ter hoogte van de titel */
.wp-block-wings-hero .wings-hero__title { position: relative; text-transform: uppercase; line-height: 1.05; }
.wp-block-wings-hero .wings-hero__title::before {
  content: "";
  position: absolute;
  left: -3rem;
  top: 0.08em;
  width: 0.9rem;
  height: 1.05em;
  border-radius: 0 0.25rem 0.25rem 0;
  background-color: var(--bij1-cyan, #00ccff);
}
/* Gele pill-CTA met zwarte play-disc (driehoek = uitsparing, schijnt door) */
.wp-block-wings-hero .wings-hero__cta-button {
  display: inline-flex !important;
  align-items: center;
  gap: 0.9em;
  background-color: var(--bij1-yellow, #ffff00) !important;
  color: #1b1918 !important;
  font-family: var(--wings-heading-font-family);
  font-weight: 400;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  border-radius: 999px !important;
  padding: 0.45em 0.5em 0.45em 1.6em !important;
  transition: background-color 0.6s ease, color 0.6s ease, transform 0.3s ease-out;
}
.wp-block-wings-hero .wings-hero__cta-button::after {
  content: "";
  flex: 0 0 auto;
  width: 2.2em;
  height: 2.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231b1918' fill-rule='evenodd' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zM9.8 7.2l8 4.8-8 4.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wp-block-wings-hero .wings-hero__cta-button:hover {
  background-color: #ffffff !important;
  transform: translateY(-1px);
}
/* Foto-paneel: gele achtergrond (zichtbaar bij PNG's met transparantie/gele rand;
   bij full-bleed foto's onzichtbaar door object-fit:cover) */
.wp-block-wings-hero .wings-hero__image-wrapper { background-color: var(--bij1-yellow, #ffff00); }

/* === Search-form minder dominant: kleinere breedte, niet middenin === */
.site-header .search-form,
.site-header form[role="search"] {
  max-width: 16rem;
  margin-left: auto;
  margin-right: 1.5rem;
}
.site-header .search-form input[type="search"] {
  font-size: 0.9rem;
  padding: 0.5em 0.9em;
}

/* Hero figcaption — niet italic (browsers stijlen <figcaption> default-italic),
   en weer normale font-style, kleur en weight als 'ie ergens nog opduikt. */
.entry-content figure figcaption,
.entry-content > figure.wp-block-image figcaption {
  font-style: normal !important;
  text-align: left;
  color: var(--bij1-neutral);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* Hero figure / wings/image extra-large: zorg dat 'ie max 70vh hoog is. */
.entry-content > figure.wp-block-image:first-of-type,
.wp-block-wings-image.layout-extra-large {
  max-height: 70vh;
  overflow: hidden;
}
.entry-content > figure.wp-block-image:first-of-type img,
.wp-block-wings-image.layout-extra-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Wings image: laat 'extra-large' breder zijn dan content-kolom (1280px max). */
.wp-block-wings-image.layout-extra-large,
.entry-content > .wp-block-wings-image.layout-extra-large {
  max-width: 1280px;
  width: calc(100vw - 2rem);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Card-grid gap iets ruimer */
.nodes-grid {
  gap: 1.5rem !important;
}

/* === Sub-menu (dropdowns) styling — wit menu-item op donkere submenu === */
.site-header .sub-menu,
.site-header ul ul,
.main-navigation .sub-menu {
  background-color: var(--bij1-neutral) !important;
  border-radius: 0.4rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  padding: 0.5rem 0;
  border: none !important;
}
.site-header .sub-menu a,
.main-navigation .sub-menu a {
  color: #ffffff !important;
  padding: 0.6rem 1.2rem !important;
  font-size: 0.95rem;
}
.site-header .sub-menu a:hover,
.main-navigation .sub-menu a:hover {
  color: var(--bij1-yellow) !important;
  background-color: rgba(255,255,255,0.05);
}

/* === Logo polish: zorg dat de SVG niet gestretched gerenderd wordt === */
.site-header .custom-logo,
.site-header .wings-logo,
.site-branding img,
.site-branding svg {
  max-height: 60px;
  width: auto !important;
  object-fit: contain;
  display: block;
}
.site-branding {
  display: flex;
  align-items: center;
}

/* === "Sluit je aan!" CTA → paars variant (visueel onderscheid t.o.v. gele voorwoord-CTA) ===
   Target alleen de LAATSTE wings-cta-wrapper op de pagina. */
.entry-content > .wings-cta-wrapper:last-of-type .wp-block-wings-cta {
  background-color: var(--bij1-purple) !important;
}
.entry-content > .wings-cta-wrapper:last-of-type .wp-block-wings-cta h1,
.entry-content > .wings-cta-wrapper:last-of-type .wp-block-wings-cta h2,
.entry-content > .wings-cta-wrapper:last-of-type .wp-block-wings-cta p,
.entry-content > .wings-cta-wrapper:last-of-type .wp-block-wings-cta .wings-anchor-heading {
  color: #ffffff !important;
}
.entry-content > .wings-cta-wrapper:last-of-type .wp-block-wings-cta .wings-cta__button {
  background-color: var(--bij1-neutral) !important;
  color: var(--bij1-yellow) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.entry-content > .wings-cta-wrapper:last-of-type .wp-block-wings-cta .wings-cta__button:hover,
.entry-content > .wings-cta-wrapper:last-of-type .wp-block-wings-cta .wings-cta__button:focus {
  background-color: var(--bij1-yellow) !important;
  color: var(--bij1-neutral) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}

/* =====================================================================
   === Zachtgeel highlight-blok, tekst in 2 kolommen (bij1.org standpunten-pattern)
   Gebruik: group-block met className "bij1-highlight-cols". Paragrafen en
   lijsten erin stromen in 2 kolommen op een zachtgele kaart.
   ===================================================================== */
.bij1-highlight-cols {
  background-color: var(--bij1-yellow-soft) !important;
  border-radius: 0.6rem;
  padding: 2rem 2.25rem;
  margin: 1.5rem 0;
  font-size: 22px; /* bij1.org-maat */
  line-height: 1.5;
}
.bij1-highlight-cols p,
.bij1-highlight-cols li {
  font-size: inherit !important;
}
.bij1-highlight-cols > p,
.bij1-highlight-cols > ul,
.bij1-highlight-cols > ol {
  column-count: 2;
  column-gap: 3rem;
  margin: 0 0 1rem;
}
.bij1-highlight-cols > *:last-child { margin-bottom: 0; }
.bij1-highlight-cols li {
  break-inside: avoid;
  margin-bottom: 0.5rem;
}
/* Meerdere losse paragrafen samen laten stromen: wikkel ze in een inner group
   met className "bij1-highlight-cols__flow". */
.bij1-highlight-cols .bij1-highlight-cols__flow {
  column-count: 2;
  column-gap: 3rem;
}
.bij1-highlight-cols .bij1-highlight-cols__flow > p { margin: 0 0 1rem; }
@media (max-width: 781px) {
  .bij1-highlight-cols > p,
  .bij1-highlight-cols > ul,
  .bij1-highlight-cols > ol,
  .bij1-highlight-cols .bij1-highlight-cols__flow {
    column-count: 1;
  }
  .bij1-highlight-cols { padding: 1.5rem 1.25rem; }
}

/* =====================================================================
   === Losse CTA-button — paarse pill + play-disc (bij1.org-pattern)
   Gebruik: een a-element met class "bij1-button" in een paragraph,
   of een core button-block met className "bij1-button".
   De play-driehoek is een uitsparing in de witte disc, zodat de
   button-achtergrondkleur er doorheen schijnt (klopt automatisch on-hover).
   ===================================================================== */
a.bij1-button,
.bij1-button > a,
.wp-block-button.bij1-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  background-color: var(--bij1-purple) !important;
  color: #ffffff !important;
  font-family: var(--wings-heading-font-family);
  font-weight: 400; /* heavy via tgn-headings alias */
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  text-decoration: none !important;
  border: none !important;
  border-radius: 999px;
  padding: 0.45em 0.5em 0.45em 1.6em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: background-color 0.6s ease, color 0.6s ease, transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
a.bij1-button::after,
.bij1-button > a::after,
.wp-block-button.bij1-button .wp-block-button__link::after {
  content: "";
  flex: 0 0 auto;
  width: 2.2em;
  height: 2.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zM9.8 7.2l8 4.8-8 4.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
a.bij1-button:hover,
a.bij1-button:focus,
.bij1-button > a:hover,
.bij1-button > a:focus,
.wp-block-button.bij1-button .wp-block-button__link:hover,
.wp-block-button.bij1-button .wp-block-button__link:focus {
  background-color: var(--bij1-cyan) !important;
  color: var(--bij1-neutral) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* =====================================================================
   === Campaign-pages + campaign-cards — paars full-width, witte form
   (bij1.org "HELP MEE. DONEER."-pattern). Werkt op de wings-campaigns
   single-templates (.wings-campaign) en het wings/campaign-card block.
   ===================================================================== */
.wings-campaign,
.campaign-card {
  --wings-campaign-content-bg-color: transparent;
  --wings-campaign-content-text-color: #ffffff;
  --wings-campaign-title-text-color: #ffffff;
  --wings-campaign-link-color: #ffffff;
  --wings-campaign-sidebar-bg-color: transparent;
  --wings-campaign-sidebar-text-color: #ffffff;
  --wings-campaign-sidebar-form-bg-color: #ffffff;
  --wings-campaign-sidebar-form-text-color: var(--bij1-neutral);
}

/* --- Single campaign-pagina: paarse full-bleed band ---
   Een event (wings-events) hergebruikt de campagne-opmaak en dus de witte
   tekst hierboven; zonder de band was dat wit op lichtgrijs (A'N, 30-09). */
.wings-campaign.wings-petition,
.wings-campaign.wings-fundraiser,
.wings-campaign.wings-signup,
.wings-campaign.wings-event {
  background-color: var(--bij1-purple);
  padding: 3rem 0 4rem;
  /* Repoint de read-more fade naar de band-kleur (theme-default = wit op :root,
     wat anders een witte gradient over de paarse band geeft). */
  --wings-campaign-fade-color: var(--bij1-purple);
}
.wings-campaign .wings-campaign-content-wrapper { margin-top: -60px; }
.wings-campaign.no-header-image .wings-campaign-content-wrapper {
  margin-top: 0;
}
.wings-campaign .wings-campaign-layout {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 18px;
  gap: 3rem;
}
@media (min-width: 769px) {
  .wings-campaign .wings-campaign-layout {
    max-width: none;
    width: var(--bij1-shell);
    padding: 0;
  }
}
.wings-campaign .wings-campaign-main {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 0 1rem;
}
.wings-campaign .wings-campaign-sidebar {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
}

/* --- Campaign-card block: paarse full-bleed band over de hele viewport --- */
.campaign-card.campaign-card--full {
  width: 100vw !important;
  max-width: 100vw;
  padding: 0 !important;
  background-color: var(--bij1-purple);
  border-radius: 0;
  margin: 60px 0;
  --wings-campaign-fade-color: var(--bij1-purple);
}
.campaign-card--full .campaign-card-layout {
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 3rem 18px;
  gap: 3rem;
}
@media (min-width: 769px) {
  .campaign-card--full .campaign-card-content-wrapper {
    width: var(--bij1-shell) !important; /* theme capt op 1120px ($card-content-width) */
  }
  .campaign-card--full .campaign-card-layout {
    width: 100%;
    padding: 3rem 0;
  }
}
.campaign-card--full .campaign-card-main {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
}
.campaign-card--full .campaign-card-sidebar {
  background: transparent !important;
  box-shadow: none !important;
  margin-top: 0 !important; /* geen lift nodig binnen de paarse band */
}
@media (max-width: 768px) {
  .campaign-card--full .campaign-card-layout { padding: 2rem 18px; }
}

/* --- Witte tekst + koppen in de paarse band --- */
.wings-campaign .wings-campaign-title,
.wings-campaign .wings-campaign-main h1,
.wings-campaign .wings-campaign-main h2,
.wings-campaign .wings-campaign-main h3,
.campaign-card .campaign-card-title,
.campaign-card .campaign-card-main h2,
.campaign-card .campaign-card-main h3 {
  color: #ffffff !important;
}
.wings-campaign .entry-content p,
.wings-campaign .entry-content li,
.wings-campaign .wings-campaign-content p,
.wings-campaign .wings-campaign-content li,
.campaign-card .campaign-card-content p,
.campaign-card .campaign-card-content li,
.campaign-card .campaign-card-body p,
.campaign-card .campaign-card-body li {
  color: #ffffff !important;
  font-size: 22px; /* bij1.org-maat */
  line-height: 1.5;
}
/* Cyaan blokje voor de campagne-titel (bij1.org sectie-marker) */
.wings-campaign .wings-campaign-title,
.campaign-card .campaign-card-title {
  position: relative;
  padding-left: 1.9rem;
}
.wings-campaign .wings-campaign-title::before,
.campaign-card .campaign-card-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.25rem;
  background-color: var(--bij1-cyan);
}

/* --- Links in campagne-tekst: gele highlight, blauw on-hover --- */
.wings-campaign .wings-campaign-content a,
.wings-campaign .entry-content a,
.campaign-card .campaign-card-content a,
.campaign-card .campaign-card-body a {
  background-color: var(--bij1-yellow);
  color: var(--bij1-neutral) !important;
  font-weight: 700;
  text-decoration: none;
  padding: 0.05em 0.3em;
  border-radius: 2px;
  transition: color 0.4s ease;
}
.wings-campaign .wings-campaign-content a:hover,
.wings-campaign .entry-content a:hover,
.campaign-card .campaign-card-content a:hover,
.campaign-card .campaign-card-body a:hover {
  color: var(--bij1-cyan) !important;
}

/* --- Witte form-kaart in de sidebar --- */
.wings-campaign .campaign-card-form,
.wings-campaign .campaign-form-section,
.campaign-card .campaign-card-form {
  background: #ffffff !important;
  border-radius: 0.6rem;
  padding: 1.75rem !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.wings-campaign .campaign-form-section label,
.wings-campaign .campaign-form-section legend,
.wings-campaign .campaign-form-section .gfield_label,
.campaign-card .campaign-card-form label,
.campaign-card .campaign-card-form legend,
.campaign-card .campaign-card-form .gfield_label {
  color: var(--bij1-neutral) !important;
}
/* Velden full-width binnen de witte form-kaart (legacy GF-markup rendert li.gfield
   en de gf-floating-label-wrapper shrink-to-fit) */
.wings-campaign .campaign-form-section .gform_fields .gfield,
.campaign-card .campaign-card-form .gform_fields .gfield {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
  float: none !important;
  grid-column: 1 / -1 !important; /* gform_fields is een 12-koloms grid */
}
.wings-campaign .campaign-form-section .gf-floating-label,
.wings-campaign .campaign-form-section .ginput_container,
.campaign-card .campaign-card-form .gf-floating-label,
.campaign-card .campaign-card-form .ginput_container {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* Zichtbare invoervelden in de witte form-kaart (doemee.bij1.org-stijl) */
.wings-campaign .campaign-form-section input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wings-campaign .campaign-form-section select,
.wings-campaign .campaign-form-section textarea,
.campaign-card .campaign-card-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.campaign-card .campaign-card-form select,
.campaign-card .campaign-card-form textarea {
  border: 1px solid #cfccc9 !important;
  border-radius: 0.35rem;
  background-color: #ffffff !important;
  color: var(--bij1-neutral) !important;
  width: 100% !important;
  padding: 0.55em 0.75em;
  box-sizing: border-box;
}
.wings-campaign .campaign-form-section input:focus,
.wings-campaign .campaign-form-section select:focus,
.campaign-card .campaign-card-form input:focus,
.campaign-card .campaign-card-form select:focus {
  border-color: var(--bij1-magenta) !important;
}
/* Links in het formulier (privacybeleid e.d.): zelfde gele highlight */
.wings-campaign .campaign-form-section a,
.campaign-card .campaign-card-form a {
  background-color: var(--bij1-yellow);
  color: var(--bij1-neutral) !important;
  font-weight: 700;
  text-decoration: none;
  padding: 0.05em 0.3em;
  border-radius: 2px;
  transition: color 0.4s ease;
}
.wings-campaign .campaign-form-section a:hover,
.campaign-card .campaign-card-form a:hover {
  color: var(--bij1-cyan) !important;
}
/* Read-more-toggle ("Lees meer") in witte stijl op paars */
.wings-campaign .campaign-expand-btn,
.campaign-card .wings-expand-btn {
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 2px #ffffff;
  border-radius: 999px;
}

/* =====================================================================
   === Losse GF-forms (shortcode-embed in content): witte kaart + nette velden
   Zelfde look als de campagne-form-sidebar, zodat een los geplaatst formulier
   er standaard verzorgd uitziet (welke achtergrondkleur de sectie ook heeft).
   ===================================================================== */
.entry-content .gform_wrapper {
  background: #ffffff;
  border: 1px solid #e7e4e1;
  border-radius: 0.6rem;
  padding: 1.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  max-width: 720px;
}
.entry-content .gform_wrapper .gform_fields .gfield {
  grid-column: 1 / -1 !important; /* gform_fields is een 12-koloms grid */
  width: 100% !important;
  max-width: 100% !important;
  display: block;
  float: none !important;
}
.entry-content .gform_wrapper .gf-floating-label,
.entry-content .gform_wrapper .ginput_container {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}
.entry-content .gform_wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.entry-content .gform_wrapper select,
.entry-content .gform_wrapper textarea {
  border: 1px solid #cfccc9 !important;
  border-radius: 0.35rem;
  background-color: #ffffff !important;
  color: var(--bij1-neutral) !important;
  width: 100% !important;
  padding: 0.55em 0.75em;
  box-sizing: border-box;
}
.entry-content .gform_wrapper input:focus,
.entry-content .gform_wrapper select:focus,
.entry-content .gform_wrapper textarea:focus {
  border-color: var(--bij1-magenta) !important;
}
.entry-content .gform_wrapper label,
.entry-content .gform_wrapper legend,
.entry-content .gform_wrapper .gfield_label {
  color: var(--bij1-neutral) !important;
}
.entry-content .gform_wrapper a {
  background-color: var(--bij1-yellow);
  color: var(--bij1-neutral) !important;
  font-weight: 700;
  text-decoration: none;
  padding: 0.05em 0.3em;
  border-radius: 2px;
  transition: color 0.4s ease;
}
.entry-content .gform_wrapper a:hover {
  color: var(--bij1-cyan) !important;
}

/* Buttonized radio-pills. Het theme stijlt `.gfield-choice-input + label`, maar
   de geforceerde GF-legacy-markup zet die class niet op de inputs - daarom hier
   legacy-veilige selectors (input[type=radio]) met BIJ1-paarse selected-state. */
.gform_wrapper .gfield.buttonized .gfield_radio,
.gform_wrapper .gfield.buttonized .ginput_container_radio ul,
.gform_wrapper .gfield.buttonized .ginput_container_radio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  list-style: none;
  padding: 0;
}
.gform_wrapper .gfield.buttonized .gchoice,
.gform_wrapper .gfield.buttonized .ginput_container_radio li {
  flex: 1 1 110px;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  list-style: none;
}
.gform_wrapper .gfield.buttonized input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
}
.gform_wrapper .gfield.buttonized input[type="radio"] + label {
  display: block;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 10px;
  background: #ffffff !important;
  border: 2px solid var(--bij1-neutral) !important;
  border-radius: 0.45rem !important;
  text-align: center;
  font-weight: 700;
  color: var(--bij1-neutral) !important;
  margin: 0 !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.gform_wrapper .gfield.buttonized input[type="radio"] + label:hover {
  border-color: var(--bij1-purple) !important;
}
.gform_wrapper .gfield.buttonized input[type="radio"]:checked + label {
  background: var(--bij1-purple) !important;
  border-color: var(--bij1-purple) !important;
  color: #ffffff !important;
}
.gform_wrapper .gfield.buttonized input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--bij1-magenta);
  outline-offset: 2px;
}

/* === Vacature-meta (Vrijwillig | Online | uren) — magenta uppercase label === */
.bij1-vacature-meta {
  color: var(--bij1-magenta) !important;
  font-family: var(--wings-heading-font-family);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem !important;
  margin: -0.5rem 0 0.75rem;
}

/* =====================================================================
   === Footer-polish: rainbow-strip + leesbaar contrast (bij1.org-look)
   ===================================================================== */
.site-footer {
  position: relative;
  padding-top: 3.5rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg,
    var(--bij1-orange)  0 14.3%,
    var(--bij1-magenta) 14.3% 28.6%,
    #64bc26             28.6% 42.9%,
    var(--bij1-yellow)  42.9% 57.2%,
    var(--bij1-purple)  57.2% 71.5%,
    #ff0000             71.5% 85.8%,
    var(--bij1-cyan)    85.8% 100%);
}
/* Tekst-widgets (o.a. nieuwsbrief-intro): leesbaar wit i.p.v. donkergrijs */
.site-footer .textwidget,
.site-footer .textwidget p,
.site-footer .widget_custom_html p {
  color: rgba(255, 255, 255, 0.85) !important;
}
/* Kale links in tekst-widgets: geel i.p.v. browser-blauw */
.site-footer .textwidget a:not(.bij1-newsletter__btn),
.site-footer .widget_custom_html a:not(.bij1-newsletter__btn) {
  color: var(--bij1-yellow) !important;
  font-weight: 700;
  text-decoration: none;
}
.site-footer .textwidget a:not(.bij1-newsletter__btn):hover {
  color: #ffffff !important;
}
/* Iets rondere social-knoppen */
.wings-social-media-widget .social-media-icons .social-icon {
  border-radius: 0.6rem !important;
}

/* =====================================================================
   === bij1 strak-trekken 2026-07-10 — consolidatie demo-fixes + polish ===
   ---------------------------------------------------------------------
   Generieke fixes die eerder alleen op bij1-demo live stonden (en dus op
   amsterdam/rotterdam misten), plus referentie-polish n.a.v. utrecht.bij1.org.
   ===================================================================== */

/* Footer zwart: de v2 footer-token valt terug op de dreamkit-default #2563eb
   (blauw) omdat een directe option-set de token-CSS niet regenereert. Forceren. */
:root { --wings-footer-background-color: #000000; }
.site-footer { background-color: #000000 !important; }

/* Nodes-grid 'all posts'-knop: NL-label (het blok levert een EN-default).
   Alle BIJ1-sites zijn NL-only, dus dit kan in de gedeelde bundle. */
.nodes-grid-all-posts-button { font-size: 0 !important; }
.nodes-grid-all-posts-button::after { content: "Bekijk al het nieuws"; font-size: 1rem; font-weight: 700; }

/* Card-meta/category op donkere cards leesbaar (nieuwe nodes-grid markup) */
.nodes-grid .card .card-category,
.nodes-grid .card .card-meta { color: #ffffff !important; }

/* === Formulieren (Gravity Forms) === */
/* Submit-knoppen: paarse pill (doemee.bij1.org DONEREN-stijl), overal consistent */
.gform_wrapper .gform_button,
.gform_wrapper button[type="submit"],
.gform_wrapper .gform_next_button,
.gform_wrapper input[type="submit"] {
  background: var(--bij1-purple, #c700bf) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: .85rem 2.25rem !important;
  width: auto !important;
  transition: background-color 0.15s ease;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper button[type="submit"]:hover,
.gform_wrapper input[type="submit"]:hover { background: var(--bij1-magenta, #ff00ba) !important; }
/* Vorige-knop subtieler */
.gform_wrapper .gform_previous_button { background: transparent !important; color: #282625 !important; box-shadow: inset 0 0 0 2px #282625; }
/* Textareas niet absurd hoog */
.gform_wrapper textarea { min-height: 90px !important; height: 110px !important; }
/* EN "(Required)"-suffix → magenta asterisk (GF-instelling per form omzeilen).
   :has() voorkomt dubbele asterisken op markup die al een kale * rendert. */
.gform_wrapper .gfield_required_text { display: none !important; }
.gform_wrapper .gfield_required:has(> .gfield_required_text)::after { content: "*"; font-weight: 700; }
.gform_wrapper .gfield_required { color: var(--bij1-magenta, #ff00ba) !important; }

/* (Oude "Search-form donker en subtiel"-regels verwijderd op 2026-09-09; het zoekveld
   wordt nu in het Header-blok hierboven gestyled.) */

/* =====================================================================
   === Hamburger en menu-lade (2026-09-09, vanuit de landelijke demo) ===
   ---------------------------------------------------------------------
   bij1.org heeft geen lade (het menu staat daar op desktop uitgeschreven),
   dus dit is een eigen keuze binnen het BIJ1-palet. Regels:
   - hamburger: drie gelijke balkjes van 3px op hele pixels, geen kader,
     ronde hover-vlek; het theme zette 2px-lijnen op halve pixels in een
     38px-knop, wat ongelijke diktes gaf.
   - het kruisje is geen tekstglyph meer (die zakte onder het midden) maar
     twee balkjes in dezelfde dikte als de hamburger, geel, gecentreerd in
     een 44px-vierkant; de zoekknop is hetzelfde 44px-vierkant, zodat
     kruisje en loep op één verticale lijn staan.
   - zoekveld = dezelfde donkere pil als in de header (12% wit, gele loep,
     wit bij focus), niet het cyaan blok.
   - menu-items in het titelfont, uppercase, geel bij hover; "Word lid" als
     gele pil zoals de featured-knop in de header.
   Jaap keurde dit op de demo goed voor alle drie de sites (09-09). De
   var()-fallbacks staan erbij omdat 04 ook zonder de demo-tokens moet
   werken; de tokens zelf staan bovenaan dit bestand. */
/* Geometrie (44px-knop, balkjes op hele pixels, kruis als twee balkjes)
   komt sinds 24-09 uit het theme (1.3.14); hier alleen nog BIJ1: 3px-dikte,
   wit, ronde hover-vlek, geel kruis. */
:root { --wings-burger-thickness: 3px; }
.main-navigation .menu-toggle {
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.main-navigation .menu-toggle:hover { background: rgba(255, 255, 255, 0.12) !important; }
.main-navigation .menu-toggle:focus-visible { outline: 2px solid var(--bij1-yellow, #ffff00); outline-offset: 2px; }
.main-navigation .menu-toggle .hamburger-inner,
.main-navigation .menu-toggle .hamburger-inner::before,
.main-navigation .menu-toggle .hamburger-inner::after {
  border-radius: 2px;
  background-color: #ffffff !important;
}

.wings-nav-drawer__panel { background: var(--bij1-neutral, #282625) !important; }
.wings-nav-drawer__header { padding: 0.75rem 0.75rem 0 !important; height: auto !important; }
.wings-nav-drawer__close {
  border-radius: 999px !important;
  color: var(--bij1-yellow, #ffff00) !important;
}
.wings-nav-drawer__close::before,
.wings-nav-drawer__close::after { border-radius: 2px; }
.wings-nav-drawer__close:hover { background: rgba(255, 255, 255, 0.12) !important; color: #ffffff !important; }
.wings-nav-drawer :focus-visible { outline: 2px solid var(--bij1-yellow, #ffff00) !important; outline-offset: 2px; box-shadow: none !important; }

.wings-nav-drawer__content { padding: 0.75rem !important; gap: 1.25rem !important; }
.wings-nav-drawer__search .search-form {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 0 !important;
  border-radius: 999px !important;
  max-width: none !important;
  margin: 0 !important;
  transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.wings-nav-drawer__search .search-form:focus-within { background: #ffffff !important; box-shadow: 0 0 0 2px var(--bij1-yellow, #ffff00); }
.wings-nav-drawer__search .search-field {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font: inherit;
  font-size: 1rem !important;
  height: 44px !important;
  padding: 0 0.25rem 0 1.25rem !important;
}
.wings-nav-drawer__search .search-field::placeholder { color: rgba(255, 255, 255, 0.72) !important; }
.wings-nav-drawer__search .search-form:focus-within .search-field { color: var(--bij1-neutral, #282625) !important; }
.wings-nav-drawer__search .search-form:focus-within .search-field::placeholder { color: rgba(40, 38, 37, 0.55) !important; }
.wings-nav-drawer__search .search-submit {
  display: grid;
  place-items: center;
  flex: 0 0 44px;   /* niet laten krimpen: het loepje moet onder het kruisje staan */
  width: 44px;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 999px;
  color: var(--bij1-yellow, #ffff00) !important;
}
.wings-nav-drawer__search .search-submit svg { width: 20px; height: 20px; }
.wings-nav-drawer__search .search-form:focus-within .search-submit,
.wings-nav-drawer__search .search-submit:hover { color: var(--bij1-purple, #c700bf) !important; }

.wings-nav-drawer__menu { gap: 0 !important; }
.wings-nav-drawer__menu li:not(.featured-menu-item) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.wings-nav-drawer__menu a {
  font-family: var(--wings-heading-font-family);
  font-weight: 800;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.9rem 0.75rem !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  background: transparent !important;
}
.wings-nav-drawer__menu a:hover,
.wings-nav-drawer__menu a:focus { color: var(--bij1-yellow, #ffff00) !important; }
.wings-nav-drawer__menu .current-menu-item > a { color: var(--bij1-yellow, #ffff00) !important; }
.wings-nav-drawer__menu .featured-menu-item { margin-block: 1.25rem; } /* ook ruimte eronder: op R'dam/A'dam staat "Word lid" midden in de lijst */
.wings-nav-drawer__menu .featured-menu-item a {
  display: inline-block;
  background: var(--bij1-yellow, #ffff00) !important;
  color: var(--bij1-neutral, #282625) !important;
  border-radius: 999px !important;
  padding: 0.8rem 1.75rem !important;
}
.wings-nav-drawer__menu .featured-menu-item a:hover,
.wings-nav-drawer__menu .featured-menu-item a:focus { background: var(--bij1-purple, #c700bf) !important; color: #ffffff !important; }

/* === Gedeelde voorpagina-componenten (sinds 2026-09-30 voor alle BIJ1-sites) ===
   Tot 30-09 stonden intro en speerpunten alleen in demo.css, dus alleen de
   landelijke demo had de brede twee-koloms tekst met paarse koppen. Jaap
   30-09: dit hoort op elke BIJ1-voorpagina. Beide zijn gewone
   Gutenberg-groepen met een klasse; in de editor zijn ze kiesbaar als
   blokpatroon zodra de hub patronen per klant kan registreren (briefing
   klant-blokpatronen). Tot dan: klasse bij Geavanceerd > Extra CSS-klasse(n).

   .bij1-intro       groep: h2 + kolommen-blok met twee alinea's (links vet)
   .bij1-speerpunten groep met .bij1-speerpunten__item-groepen (h3 + tekst):
                     raster van twee kolommen, paarse kapitale koppen
   .bij1-opsomming   groep: h3 + alinea + lange lijst, lijst in twee kolommen */
.bij1-intro,
.bij1-speerpunten {
  width: var(--bij1-shell, min(1356px, calc(100vw - 6rem))) !important;
  max-width: none !important;
  margin-left: 50% !important;
  transform: translateX(-50%);
}
.bij1-intro { margin-block: 3.5rem 3rem !important; }
.bij1-intro > h2 {
  color: var(--bij1-purple, #c700bf) !important;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}
/* Intro-kop en tussenkoppen één maat; het theme zet h2 op mobiel op 62%
   (17px), dan werd de intro-kop kleiner dan de h3's eronder. */
.entry-content .bij1-intro > h2 {
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem) !important;
  line-height: 1.2;
}
.bij1-intro .wp-block-columns { gap: 3.5rem; margin: 0; }
.entry-content .bij1-intro .wp-block-column p {
  font-size: 1.22rem;   /* 22px, zoals bij1.org */
  line-height: 1.5;
  margin: 0;
}
.bij1-speerpunten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5.5rem 3.5rem;   /* rijafstand ~100px, zoals bij1.org */
  margin-block: 4rem;
}
/* Paarse tussenkop: een slag groter dan bij1.org (28px), Jaap 30-09. */
.bij1-speerpunten__item h3,
.bij1-opsomming > h3 {
  color: var(--bij1-purple, #c700bf) !important;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem) !important;
  line-height: 1.2;
  margin: 0 0 0.9rem;
}
.bij1-speerpunten__item p { margin: 0 0 0.8rem; }
.entry-content .bij1-speerpunten__item p,
.entry-content .bij1-speerpunten__item li {
  font-size: 1.22rem;   /* leesmaat van de demo */
  line-height: 1.5;
}
.bij1-speerpunten__item p:last-child { margin-bottom: 0; }
/* Knop onder de intro: gecentreerd onder beide kolommen, met lucht erboven
   (Jaap 30-09: in de rechterkolom plakte hij tegen de tekst). */
.bij1-intro > p:has(> a.bij1-button) {
  text-align: center;
  margin: 2.5rem 0 0;
}
.entry-content .wp-block-column p:has(> a.bij1-button:only-child) { margin-top: 1.75rem; }

/* .bij1-opsomming: een lange opsomming in de brede shell, lijst in twee
   kolommen (A'dam "BIJ1 staat voor", 13 punten). Groep: h3 + alinea + lijst. */
.bij1-opsomming {
  width: var(--bij1-shell, min(1356px, calc(100vw - 6rem))) !important;
  max-width: none !important;
  margin: 4rem 0 3rem 50% !important;
  transform: translateX(-50%);
}
.entry-content .bij1-opsomming p,
.entry-content .bij1-opsomming li { font-size: 1.22rem; line-height: 1.5; }
.bij1-opsomming ul { columns: 2; column-gap: 3.5rem; margin-top: 1.25rem; }
.bij1-opsomming li { break-inside: avoid; margin-bottom: 0.5rem; }
.block-editor-iframe__body .bij1-opsomming {
  width: auto !important; margin-left: 0 !important; transform: none !important;
}
@media (max-width: 781px) {
  .bij1-opsomming { width: auto !important; margin-left: 0 !important; transform: none; }
  .bij1-opsomming ul { columns: 1; }
}

/* Een kop (en lede) direct boven het raster staat in dezelfde brede shell. */
.entry-content h2:has(+ .bij1-speerpunten),
.entry-content h2:has(+ p + .bij1-speerpunten),
.entry-content p:has(+ .bij1-speerpunten) {
  width: var(--bij1-shell, min(1356px, calc(100vw - 6rem)));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.block-editor-iframe__body .bij1-intro,
.block-editor-iframe__body .bij1-speerpunten {
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  transform: none !important;
}
.block-editor-iframe__body .bij1-speerpunten { display: block; }
@media (max-width: 781px) {
  .bij1-intro,
  .bij1-speerpunten,
  .entry-content h2:has(+ .bij1-speerpunten),
  .entry-content h2:has(+ p + .bij1-speerpunten),
  .entry-content p:has(+ .bij1-speerpunten) {
    width: auto !important;
    margin-left: 0 !important;
    transform: none;
  }
  .bij1-intro .wp-block-columns { gap: 1rem; }
  .bij1-speerpunten { grid-template-columns: 1fr; gap: 3rem; }
}

/* === Doe mee-kaarten (wings/action-cards) op BIJ1-maat, alle sites ===
   Uit demo.css (10-09) naar hier, 30-09. De band is op bij1.org #433f3c,
   niet het zwart van de `secondary`-token; het blok zet die property inline,
   vandaar !important. De band loopt een stuk onder de kaarten door (Jaap
   30-09): extra ruimte onderin de rij. */
@media (min-width: 1024px) {
  .entry-content .wings-action-cards--cols-3:not(.alignwide, .alignfull) {
    width: var(--bij1-shell, min(1356px, calc(100vw - 6rem)));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
.block-editor-iframe__body .wings-action-cards--cols-3 {
  width: auto !important;
  margin-left: 0 !important;
  transform: none !important;
}
.entry-content .wings-action-cards--band {
  --wings-action-cards-band-color: #433f3c !important;
  padding-bottom: 4.5rem !important;
}
.wings-action-card__title { text-transform: uppercase; }
.entry-content .wings-action-card__text p {
  font-size: 1.22rem;
  line-height: 1.45;
}
.wings-action-cards__grid { gap: 2.5rem; }
.wings-action-card { padding: 2.5rem 2.25rem 2.5rem 2.5rem; }

/* === Polish 2026-09-30: callout, lijstbolletjes, nieuwsbriefkaart ===
   - Callout zonder emoji: het lampje past niet bij de BIJ1-toon (Jaap 30-09).
   - Lijstbolletjes: het theme kleurt ::marker via de token
     --wings-smart-list-marker-color (bij BIJ1 geel), te weinig contrast op
     wit. Paars; op gekleurde vlakken de tekstkleur. Kandidaat voor
     wings-tokens.json zodra die per site opnieuw uitgerold wordt.
   - Nieuwsbriefkaart (wings/campaign-card): de kaart is al paars, dus de
     schaduw rond .campaign-card-main gaf paars-op-paars met een rand; het
     formulier had een grijze kader om het witte vlak en ALTCHA een eigen
     browserkader. Alle drie weg. */
.wings-callout__emoji { display: none !important; }
.entry-content { --wings-smart-list-marker-color: var(--bij1-purple, #c700bf); }
.entry-content .wp-block-wings-callout,
.entry-content .campaign-card,
.entry-content .bij1-highlight-cols { --wings-smart-list-marker-color: currentColor; }
.campaign-card .campaign-card-main { box-shadow: none !important; }
.campaign-card .gform_wrapper { border: 0 !important; }
.campaign-card .altcha {
  border: 0 !important;
  padding-inline: 0 !important;
  background: transparent !important;
}

/* === Nieuwsbriefkaart in de pagina (wings/campaign-card): volle breedte ===
   Jaap 30-09: de paarse kaart hoort de hele paginabreedte te beslaan, en de
   tekst liep tot achter het formulier (hoofdkolom en formulierkolom lagen
   zonder tussenruimte naast elkaar, het formulier 9px breder dan zijn
   kolom; op sommige breedtes bleef er een reepje paars naast het witte vlak).
   Pragmatisch: de band gaat van 1320px naar 100vw (het theme centreert al), de
   inhoud staat in de brede shell, tekst en formulier in een raster met
   vaste tussenruimte. Alleen in .entry-content, de campagnepagina's zelf
   (.wings-campaign als pagina) houden hun eigen layout. */
.entry-content .campaign-card {
  /* Het theme centreert de kaart al (left: 50% + translateX(-50%)) en
     begrenst hem op --wings-content-width-xxl (1320px); die grens eraf, en de
     centrering vastgezet, want op mobiel zet het theme transform: none. */
  width: 100vw !important;
  max-width: none !important;
  left: 50% !important;
  margin-left: 0 !important;
  transform: translateX(-50%) !important;
  border-radius: 0 !important;
  padding-block: 4.5rem !important;
}
.entry-content .campaign-card .campaign-card-content-wrapper {
  width: var(--bij1-shell, min(1356px, calc(100vw - 6rem)));
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.entry-content .campaign-card .campaign-card-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 4rem;
  align-items: start;
  width: 100%;
}
/* Compacte kaart (nieuwsbrief): tekst naast het korte formulier centreren. */
.entry-content .campaign-card--compact .campaign-card-layout { align-items: center; }
.entry-content .campaign-card .campaign-card-main { padding: 0 !important; width: auto !important; }
.entry-content .campaign-card .campaign-card-sidebar { width: auto !important; margin: 0 !important; }
.entry-content .campaign-card .gform_wrapper { width: auto !important; margin: 0 !important; }
/* Het theme trekt het formulier op mobiel 27px buiten zijn kolom (compensatie
   voor de padding die hierboven weg is); dan liep het wit tot de schermrand. */
.entry-content .campaign-card .campaign-card-form { margin: 0 !important; border-radius: 0.6rem; }
@media (max-width: 900px) {
  .entry-content .campaign-card { padding-block: 3rem !important; }
  .entry-content .campaign-card .campaign-card-content-wrapper { width: auto; padding-inline: 1.25rem !important; }
  .entry-content .campaign-card .campaign-card-layout { grid-template-columns: 1fr; gap: 2rem; }
}
/* =====================================================================
   bij1 — editor-guard + campaign-fixes (2026-06-17)
   ---------------------------------------------------------------------
   Twee blokken die idempotent (op marker) zijn TOEGEVOEGD aan de live
   Customizer-CSS van alle 3 de staging-sites (bij1-demo, amsterdam-bij1,
   rotterdam-bij1) op dreamkitboxb, via wp_update_custom_css_post.

   NB: de live Customizer-CSS is gedrift t.o.v. 04-customizer-css.css in
   deze repo (live ~45-49k vs repo ~21k). Volledige reconciliatie van
   04-customizer-css.css is een open follow-up (zie tasks.md). Dit bestand
   legt alleen de NIEUWE fix-blokken vast zodat ze version-controlled zijn.

   Blok 1  wings-editor-guard v1     — neutraliseert frontend full-bleed/
                                        viewport-CSS binnen de block-editor
                                        (anders schuift de pagina buiten beeld
                                        tijdens bewerken).
   Blok 2  bij1 campaign-fixes        — gradient→bandkleur, CPT top-padding
                                        zonder header-image, progress/form als
                                        één kaart met gele progress-kop.
   ===================================================================== */



/* wings-editor-guard v1 */
/* Editor-only: full-bleed/viewport-maten resetten binnen de block-editor.
   Geldt alleen in de editor-iframe; op de frontend verandert niets. */
.block-editor-iframe__body .bij1-twocol,
.block-editor-iframe__body .bij1-section,
.block-editor-iframe__body .wp-block-wings-hero,
.block-editor-iframe__body .campaign-card.campaign-card--full,
.block-editor-iframe__body .wp-block-wings-image.layout-extra-large,
.block-editor-iframe__body .nodes-grid-wrapper {
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
}


/* =====================================================================
   === bij1 campaign-fixes 2026-06-17 (gradient/naad/top-padding) ===
   Getest op rotterdam-bij1 lokaal. Cosmetische overrides; raken de
   theme-/plugin-render niet aan.
   ===================================================================== */

/* 1. Read-more fade-gradient moet naar de BANDKLEUR vervagen i.p.v. wit.
   Het thema rendert de fade via --wings-campaign-fade-rgb (default 255,255,255);
   op de magenta full-width band zetten we 'm op de magenta RGB (#c700bf). */
.campaign-card.campaign-card--full,
.campaign-card.campaign-card--full .wings-campaign-content,
.campaign-card.campaign-card--full .campaign-content-expandable,
.campaign-card.campaign-card--full .campaign-content {
  --wings-campaign-fade-rgb: 199, 0, 191;
}

/* 2. Campagne-CPT-pagina zonder header-image: meer top-padding zodat de
   titel niet tegen de header-nav plakt. Het thema zet .no-header-image
   al op de campagne-wrapper; we verruimen alleen de top-spacing. */
.wings-campaign.no-header-image {
  padding-top: 5.5rem !important;
}
@media (max-width: 768px) {
  .wings-campaign.no-header-image {
    padding-top: 3.5rem !important;
  }
}

/* 3. Progress + formulier als één doorlopende kaart (geen magenta naad,
   geen mismatchende afronding). Progress-kop in bij1-geel met zwarte tekst. */
.campaign-card-progress.campaign-progress-section {
  border-radius: 12px 12px 0 0 !important;
  margin-bottom: 0 !important;
  background: var(--bij1-yellow, #ffff00) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #1b1918 !important;
}
.campaign-card-progress.campaign-progress-section * {
  color: #1b1918 !important;
}
.campaign-card-form.campaign-form-section {
  border-radius: 0 0 12px 12px !important;
  margin-top: 0 !important;
}


/* =====================================================================
   === bij1 campaign-fixes batch 2 2026-06-17 ===
   Titel-positie mét header-image, progress-bar-kleur, form-velden, basis-font.
   Getest op rotterdam-bij1 lokaal (/petitions/stop-het-hijabverbod/).
   ===================================================================== */

/* 4. Basis-fontsize: body staat op 16px terwijl html 18px is -> normale
   paragraaftekst te klein. Body op 18px (bij1; dreamkit-breed staat op ROADMAP). */
body {
  font-size: 18px;
}

/* 5. Campagne-CPT mét header-image: de titel werd 60px over de foto getrokken
   (content-wrapper margin-top:-60px) en stond half op de foto, half op de band.
   Overlap weg + nette top-padding zodat de titel volledig in de gekleurde band staat. */
.wings-campaign:not(.no-header-image) .wings-campaign-content-wrapper {
  margin-top: 0 !important;
  padding-top: 2rem !important;
}

/* 6. Progress-bar: track was donker-op-20%-alpha -> fletse witte streep op geel.
   Donkere track + heldere cyaan fill (contrast op geel). Geldt voor CPT-template
   (.campaign-progress-*) én card-block. */
.campaign-progress-bar {
  background: rgba(0, 0, 0, 0.85) !important;
}
.campaign-progress-fill {
  background: var(--bij1-cyan, #00ccff) !important;
}

/* 7. Form-velden: de inputs hadden een hard grijs 1px-kader dat als losse
   boxen oogde. Zachter: lichte vulling + subtiele rand + ronding. Beide contexten. */
.campaign-card-form input[type="text"],
.campaign-card-form input[type="email"],
.campaign-card-form input[type="tel"],
.campaign-card-form input[type="number"],
.campaign-card-form textarea,
.campaign-form-section input[type="text"],
.campaign-form-section input[type="email"],
.campaign-form-section input[type="tel"],
.campaign-form-section input[type="number"],
.campaign-form-section textarea {
  border: 1px solid #e3e3e6 !important;
  background: #fafafb !important;
  border-radius: 8px !important;
}


/* =====================================================================
   === bij1 campaign-fixes batch 3 2026-06-17 ===
   Campagne-formulier: minder ruimte tussen velden + label-kleuren gelijk.
   Getest op rotterdam-bij1 lokaal.
   ===================================================================== */

/* 8. Minder verticale ruimte tussen form-velden (was 18px grid-gap). */
.campaign-form-section .gform_fields,
.campaign-card-form .gform_fields {
  grid-row-gap: 8px !important;
  row-gap: 8px !important;
}

/* 9. Label-kleuren gelijktrekken: de gform-floating-sublabels (Voornaam/
   Achternaam) waren grijs (rgba(0,0,0,.6)) terwijl hoofd-labels (Email/
   Woonplaats) bijna-zwart waren. Alles op bijna-zwart. Hoge specificiteit
   nodig om de gform-foundation-theme te verslaan; gescoped op campagne-forms. */
.campaign-form-section .gform-theme--foundation .gfield .gfield_label,
.campaign-form-section .gform-theme--foundation .gfield .gform-field-label--type-sub,
.campaign-card-form .gform-theme--foundation .gfield .gfield_label,
.campaign-card-form .gform-theme--foundation .gfield .gform-field-label--type-sub {
  color: #282625 !important;
  opacity: 1 !important;
}