/* wings-client.css - bij1/amsterdam-bij1 - bij1.css + campaign-editor-fixes.css @ e8039fe
   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) + gform_footer (knop) naast elkaar */
.site-footer .bij1-newsletter-form_wrapper form {
  display: flex;
  align-items: stretch;
  /* 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. */
  flex-wrap: nowrap;
  gap: 0.5rem;
  background-color: #ffffff;
  padding: 0.3rem 0.3rem 0.3rem 0.6rem;
  border-radius: 999px;
}
.site-footer .bij1-newsletter-form_wrapper .gform_body {
  flex: 1 1 8rem;
  min-width: 0;
}
.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 {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
}
.site-footer .bij1-newsletter-form_wrapper .gform_footer input[type="submit"] {
  width: auto !important;
  height: 2.75rem;
  line-height: 2.75rem;
  margin: 0 !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;
}

/* === 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 --- */
.wings-campaign.wings-petition,
.wings-campaign.wings-fundraiser,
.wings-campaign.wings-signup {
  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. */
.main-navigation .menu-toggle {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  justify-content: center;
  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-box { width: 24px; height: 19px; display: block; position: relative; }
.main-navigation .menu-toggle .hamburger-inner,
.main-navigation .menu-toggle .hamburger-inner::before,
.main-navigation .menu-toggle .hamburger-inner::after {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background-color: #ffffff !important;
}
.main-navigation .menu-toggle .hamburger-inner { top: 8px; margin-top: 0; }
.main-navigation .menu-toggle .hamburger-inner::before { top: -8px; }
.main-navigation .menu-toggle .hamburger-inner::after { bottom: -8px; }

.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 {
  position: relative;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  color: var(--bij1-yellow, #ffff00) !important;
}
.wings-nav-drawer__close > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
.wings-nav-drawer__close::before,
.wings-nav-drawer__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.wings-nav-drawer__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.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; }
/* =====================================================================
   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;
}