/* Zorgloket.nl — Redesign · versie 1.7 */

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap");

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Huisstijl-tokens */
  --zl-fg: #172e40;
  --zl-primary: #1e5178;           /* huisstijl navy */
  --zl-primary-hover: #184769;
  --zl-primary-soft: #e7f6dc;
  --zl-muted-fg: #51686f;
  --zl-accent: #94c35a;            /* huisstijl groen */
  --zl-accent-fg: #1f2f0b;
  --zl-accent-soft: #def4ca;
  --zl-accent-text: #4f7a22;       /* groen voor kleine tekst (voldoende contrast) */
  --zl-surface: #f0f9ea;
  --zl-band-soft: #ecf8e4;
  --zl-band-border: #d0e7be;
  --zl-border: #dbe2e9;
  --zl-radius: 6px;
  --zl-radius-lg: 12px;
  --zl-shadow-soft: 0 1px 2px rgba(22, 48, 69, .05);
  --zl-shadow-lift: 0 2px 10px -4px rgba(22, 48, 69, .18);
  --zl-shadow-pop: 0 10px 30px -12px rgba(22, 48, 69, .25);
  --zl-font: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Bestaande Oddworks-variabelen laten meeliften */
  --mainfont: var(--zl-font);
  --headerfont: var(--zl-font);
  --colorS: var(--zl-primary);
  --colorSd: var(--zl-primary-hover);
  --colorP: var(--zl-accent);
  --colorBlack: var(--zl-fg);
  --colorGrey: var(--zl-surface);
  --siteWidth: 1216px;
}

/* --------------------------------------------------------------------------
   2. Basis & typografie
   -------------------------------------------------------------------------- */
body {
  font-family: var(--zl-font);
  color: var(--zl-fg);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body,
.site-container,
.site-main {
  font-weight: 400;
}

.site-main p,
.site-main li {
  color: var(--zl-muted-fg);
  font-weight: 400;
}

.site-main strong,
.site-main b {
  color: var(--zl-fg);
  font-weight: 700;
}

/* child.css kleurt koppen groen via body:not(.wp-admin) h1-h3.
   Zelfde selector → wint op volgorde, maar laat specifiekere sectieregels
   (witte koppen op donkere banners) intact. */
h1, h2, h3, h4,
body:not(.wp-admin) h1,
body:not(.wp-admin) h2,
body:not(.wp-admin) h3,
body:not(.wp-admin) h4 {
  font-family: var(--zl-font);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--zl-primary);
}

.site-main h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
.site-main h2 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2rem); }
.site-main h3 { font-size: 1.25rem; }
.site-main h4 { font-size: 1.1rem; }

.site-main a:not(.wp-block-button__link):not(.wp-element-button) {
  color: var(--zl-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.site-main a:not(.wp-block-button__link):not(.wp-element-button):hover {
  color: var(--zl-primary-hover);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--zl-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Knoppen
   -------------------------------------------------------------------------- */
.wp-block-button__link,
.wp-element-button,
.site-main button.fwp-submit,
.site-main input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: 0 1.25rem;
  border: 0;
  border-radius: var(--zl-radius);
  background-color: var(--zl-accent);
  color: var(--zl-accent-fg);
  font-family: var(--zl-font);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--zl-shadow-soft);
  transition: box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.site-main button.fwp-submit:hover,
.site-main input[type="submit"]:hover {
  background-color: var(--zl-accent);
  color: var(--zl-accent-fg);
  box-shadow: var(--zl-shadow-lift);
}

.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--zl-primary);
  border: 1.5px solid var(--zl-primary);
  box-shadow: none;
}
.is-style-outline .wp-block-button__link:hover {
  background: var(--zl-primary);
  color: #fff;
}

/* --------------------------------------------------------------------------
   4. Topbalk (navy)
   -------------------------------------------------------------------------- */
.header-top-bar {
  background-color: var(--zl-primary);
}
@media (min-width: 1025px) {
  .header-top-bar .wrap {      /* alleen desktop: op mobiel is deze wrap leeg */
    min-height: 56px;
    align-items: center;
  }
}
.header-top-bar .nav-menu .menu-item a {   /* zelfde specificiteit als child.css, wint op volgorde */
  text-decoration: none;
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  opacity: .9;
  padding: 1rem .75rem;
  text-underline-offset: 4px;
  transition: opacity .15s ease;
}
.header-top-bar .nav-menu .menu-item a:hover {
  opacity: 1;
  text-decoration: underline;
}
/* Iconen in de topbalk weg: alleen tekstlinks.
   child.css zet ze per menu-item-ID (li#menu-item-… > a::before), daarom !important */
#menu-header-menu-top li > a::before,
.header-top-bar .nav-menu a i,
.header-top-bar .nav-menu a svg {
  display: none !important;
}
/* Alleen Zakelijk, Dashboard en Inloggen onderstreept */
.header-top-bar #menu-item-22867 > a,
.header-top-bar li.user > a,
.header-top-bar li.guest > a {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. Hoofdmenu (wit)
   -------------------------------------------------------------------------- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--zl-border);
  padding: 0;
}
.site-header .wrap {
  min-height: 64px;
  align-items: center;
}

@media (min-width: 1025px) {
  /* Menubalk: items vullen de volle balkhoogte en centreren hun tekst verticaal
     (gelijke marge boven/onder); het submenu klapt daardoor direct onder de balk open. */
  .site-header .wrap {
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
  .site-header .nav-menu {
    margin-top: 0;                    /* thema zet hier 4px → balk niet symmetrisch */
  }
  #primary-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 4.25rem;              /* 68px balkhoogte */
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--zl-fg);
    /* zelfde horizontale padding (12px) als de topbalklinks: daardoor staat de
       tekst van het laatste item recht onder die van het laatste topbalkitem */
    padding: 0 .75rem;
    border-radius: 0;
    transition: color .15s ease;
  }
  #primary-menu > li > a:hover,
  #primary-menu > li:hover > a,
  #primary-menu > li.current-menu-item > a,
  #primary-menu > li.current-menu-ancestor > a {
    color: var(--zl-primary);
  }

  /* Submenu als zwevende kaart */
  #primary-menu .sub-menu {
    min-width: 18rem;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--zl-border);
    border-radius: var(--zl-radius-lg);
    box-shadow: var(--zl-shadow-pop);
  }
  #primary-menu .sub-menu a {
    display: block;
    padding: .5rem .75rem;
    border-radius: 8px;
    font-size: 1rem;
    color: var(--zl-fg);
    white-space: normal;
    transition: background-color .15s ease, color .15s ease;
  }
  #primary-menu .sub-menu a:hover {
    background: var(--zl-surface);
    color: var(--zl-primary);
  }
  /* main.css zet bij hover een groene balk links (border-left 5px) → weg op desktop */
  #primary-menu .sub-menu .menu-item:hover > a {
    border-left: 0;
  }
}

/* Mobiel menu: tekst en pijltje op één lijn, ruimere tikvlakken */
@media (max-width: 1024px) {
  #primary-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 56px 0 16px;
    font-size: 1rem;
    line-height: 1.3;
  }
  #primary-menu > li > .submenu-expand {
    top: 4px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #primary-menu .sub-menu a {
    font-size: .95rem;
    line-height: 1.3;
  }
}

/* --------------------------------------------------------------------------
   6. Hero (cover-blok met zoeker)
   -------------------------------------------------------------------------- */
.wp-block-cover.alignfull .wp-block-cover__background.has-background-dim {
  opacity: 1 !important;
  background: linear-gradient(
    90deg,
    rgba(0, 28, 50, .82) 0%,
    rgba(8, 36, 56, .62) 42%,
    rgba(30, 53, 72, .32) 70%,
    rgba(53, 74, 92, .08) 100%
  ) !important;
}

body:not(.wp-admin) .wp-block-cover .search-text h2 {
  color: #fff;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.9rem);
  line-height: 1.15;
}
.wp-block-cover .search-text h2 strong {
  color: var(--zl-accent);
}
.wp-block-cover .search-text p {
  color: rgba(255, 255, 255, .9);
  font-size: 1.125rem;
}

.wp-block-cover .search-box {
  background: #fff;
  border-radius: var(--zl-radius-lg);
  box-shadow: var(--zl-shadow-pop);
}
.wp-block-cover .search-box input,
.wp-block-cover .search-box select {
  border: 1px solid var(--zl-border);
  border-radius: var(--zl-radius);
  font-family: var(--zl-font);
  color: var(--zl-fg);
}

/* --------------------------------------------------------------------------
   7. Secties, kaarten en media & tekst
   -------------------------------------------------------------------------- */
/* Grijze secties → zachtgroene band */
.has-grey-custom-background-color {
  background-color: var(--zl-band-soft) !important;
  border-top: 1px solid var(--zl-band-border);
  border-bottom: 1px solid var(--zl-band-border);
}

/* Kaarten (kolommen met class "cards") */
.wp-block-columns.cards .wp-block-column {
  background: #fff;
  border: 1px solid var(--zl-border);
  border-radius: var(--zl-radius);
  box-shadow: var(--zl-shadow-soft);
  padding: 1.75rem;
  transition: box-shadow .2s ease;
}
.wp-block-columns.cards .wp-block-column:hover {
  box-shadow: var(--zl-shadow-lift);
}
.wp-block-columns.cards .wp-block-column.uitgelicht {
  border: 2px solid var(--zl-accent);
}

/* Media & tekst: afgeronde beelden */
.wp-block-media-text .wp-block-media-text__media img {
  border-radius: var(--zl-radius-lg);
}
.wp-block-media-text .wp-block-media-text__content > h2:first-child,
.wp-block-media-text .wp-block-media-text__content > h3:first-child {
  margin-top: 0;
}

/* Knoppenlijst (gemeenten) → pills */
.buttonlist {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  list-style: none;
}
.buttonlist li {
  margin: 0;
  list-style: none;
}
.site-main .buttonlist a {
  display: inline-flex;
  align-items: center;
  padding: .45rem 1rem;
  border: 1px solid var(--zl-border);
  border-radius: 999px;
  background: #fff;
  color: var(--zl-fg);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.site-main .buttonlist a:hover {
  background: var(--zl-primary);
  color: #fff;
  text-decoration: none;
}

/* Koppen met link: geen onderstreping */
.site-main h1 a, .site-main h2 a, .site-main h3 a, .site-main h4 a {
  text-decoration: none !important;
  color: inherit !important;
}
.site-main h1 a:hover, .site-main h2 a:hover, .site-main h3 a:hover {
  text-decoration: underline !important;
}

/* Disclaimer onderaan elke pagina → witte kaart op zachte achtergrond.
   .warning_group staat binnen de 1216px-wrap; achtergrond en bovenrand lopen
   paginabreed door via box-shadow/border-image (veroorzaakt geen horizontale scroll). */
.warning_group {
  background: var(--zl-surface);
  box-shadow: 0 0 0 100vmax var(--zl-surface);
  clip-path: inset(0 -100vmax);
  border-top: 1px solid var(--zl-border);
  border-image: linear-gradient(var(--zl-border), var(--zl-border)) 1 / 1px 0 0 0 / 0 100vmax;
}
.warning_group .warning.has-grey-custom-background-color {
  background: #fff !important;
  border: 1px solid var(--zl-border);
  border-radius: var(--zl-radius);
  box-shadow: var(--zl-shadow-soft);
  padding: 1.75rem;
}
.warning_group .warning > span[style] {   /* kopkleur staat inline in de markup */
  color: var(--zl-primary) !important;
  font-weight: 700;
}
.warning_group .warning p {
  color: var(--zl-muted-fg);
  font-size: .9rem;
  line-height: 1.6;
}

/* Tabellen, details/accordeons */
.site-main .wp-block-table table {
  border-collapse: collapse;
}
.site-main .wp-block-table td,
.site-main .wp-block-table th {
  border-color: var(--zl-border);
}
.site-main details {
  border: 1px solid var(--zl-border);
  border-radius: var(--zl-radius);
  padding: .75rem 1rem;
  background: #fff;
}
.site-main details summary {
  font-weight: 600;
  color: var(--zl-primary);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   7b. Paginatemplate "template-import-page" (voorzieningpagina's)
   -------------------------------------------------------------------------- */
/* Paginakop: zachtgroene band i.p.v. lichtblauw
   (template: .zorgloket-acf .zl-page-header in inline <style>) */
.site-main .zorgloket-acf .zl-page-header,
.zl-page-header {
  background-color: var(--zl-band-soft);
  border-bottom: 1px solid var(--zl-band-border);
}
.zl-page-header__kicker {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--zl-accent-text);
}

/* Aanvraagtegels: witte kaarten
   (template zet de achtergrond via een inline <style> met 3 klassen → hier 4) */
.site-main .tegel,
.site-main .wmo-aanvraag-tegels .tegel,
.site-main .zorgloket-acf .zl-top-aanvraag__tegels .tegel {
  background-color: #fff;
  border: 1px solid var(--zl-border);
  border-radius: var(--zl-radius);
  box-shadow: var(--zl-shadow-soft);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.site-main .zorgloket-acf .zl-top-aanvraag__tegels .tegel:hover,
.site-main .tegel:hover,
.site-main .tegel:focus-visible {
  border-color: var(--zl-accent);
  box-shadow: var(--zl-shadow-lift);
}
.tegel .icon i {
  color: var(--zl-primary);
}
.tegel .titel strong {
  color: var(--zl-fg);
}

/* CTA-linkblok: template zet koppen zwart met !important → navy zoals overige koppen */
.site-main .zl-cta-links-block h2.zl-cta-links-block__intro-title,
.site-main .zl-cta-links-block h3.zl-cta-links-block__section-title {
  color: var(--zl-primary) !important;
}

/* --------------------------------------------------------------------------
   7c. Zorgzoeker (FacetWP-archief)
   -------------------------------------------------------------------------- */
/* Filterkolom als kaart */
.site-sidebar {
  border: 1px solid var(--zl-border);
  border-radius: var(--zl-radius-lg);
  box-shadow: var(--zl-shadow-soft);
}
/* Filterkoppen navy (zorgzoeker-sidebar én gemeenten-overzicht) */
.widget .facet-label {
  color: var(--zl-primary);
}
.site-sidebar input.facetwp-autocomplete,
.site-sidebar input.facetwp-search,
.facetwp-type-proximity input.facetwp-location,
.widget .facetwp-facet select {
  border: 1px solid var(--zl-border);
  border-radius: var(--zl-radius);
  font-family: var(--zl-font);
  color: var(--zl-fg);
}
/* "Zoek"-knop in de huisstijl */
.site-sidebar input.facetwp-autocomplete-update {
  margin-top: .5rem;
  min-height: 44px;
  border: 0;
  border-radius: var(--zl-radius);
  background-color: var(--zl-accent);
  color: var(--zl-accent-fg);
  font-family: var(--zl-font);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--zl-shadow-soft);
  transition: box-shadow .18s ease;
}
.site-sidebar input.facetwp-autocomplete-update:hover {
  box-shadow: var(--zl-shadow-lift);
}
/* Aanbiederkaarten */
.facetwp-template .post-summary {
  border: 1px solid var(--zl-border);
  border-radius: var(--zl-radius);
  box-shadow: var(--zl-shadow-soft);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.facetwp-template .post-summary:hover {
  border-color: var(--zl-accent);
  box-shadow: var(--zl-shadow-lift);
}
/* Aanvraagbanner boven de resultaten: wit met groene rand i.p.v. lichtblauw
   (staat op de zachtgroene paginaachtergrond) */
.zorgloket-aanvraagbanner .zorgloket-aanvraagbanner__content {
  background-color: #fff;
  border-color: var(--zl-accent);
  box-shadow: var(--zl-shadow-soft);
  border-radius: var(--zl-radius-lg);
}

/* --------------------------------------------------------------------------
   10. Homepage-componenten (redesign)
   -------------------------------------------------------------------------- */
/* Bovenschrift boven koppen */
.site-main .zl-eyebrow {
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--zl-accent-text);
}
.site-main .zl-eyebrow + h2,
.site-main .zl-eyebrow + h1 {
  margin-top: 0;
}

/* Hero */
.wp-block-cover.zl-hero {
  min-height: clamp(30rem, 62vh, 36rem) !important;
  padding-inline: max(1.25rem, calc((100% - var(--siteWidth)) / 2 + 16px));
}
.wp-block-cover.zl-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--siteWidth);
  margin: 0 auto;
  padding: 0;
}
.zl-hero .zl-hero__content {
  max-width: 36rem;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 28, 50, .5);
}
.zl-hero .zl-hero__content > * {
  margin-left: 0 !important;
  max-width: none !important;
}
.zl-hero .zl-eyebrow {
  color: var(--zl-accent);
}
body:not(.wp-admin) .site-main .zl-hero h1.zl-hero__title {
  margin: .75rem 0 0;
  color: #fff;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  line-height: 1.12;
}
.zl-hero .zl-accent {
  color: var(--zl-accent);
}
.site-main .zl-hero p.zl-hero__lead {
  margin-top: 1rem;
  max-width: 28rem;
  color: rgba(255, 255, 255, .88);
  font-size: 1.05rem;
}
.zl-hero .zl-hero__buttons {
  margin-top: 2rem;
  gap: .75rem;
}
.zl-hero .zl-btn-light .wp-block-button__link {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
  text-shadow: none;
}
.zl-hero .zl-btn-light .wp-block-button__link:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.site-main .zl-hero p.zl-hero__note {
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, .78);
  font-size: .9rem;
}
.site-main .zl-hero p.zl-hero__note a {
  color: #fff;
}

/* USP-strip met vinkjes */
.site-main .zl-usp {
  background: var(--zl-surface);
  border-top: 1px solid var(--zl-border);
  border-bottom: 1px solid var(--zl-border);
  padding-block: 2rem;
}
.zl-usp .zl-usp__grid {
  max-width: var(--siteWidth);
  margin: 0 auto;
  gap: 1.5rem;
}
.zl-usp .zl-usp__item {
  position: relative;
  padding-left: 2.5rem;
}
.zl-usp .zl-usp__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--zl-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231e5178' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") center / 1rem no-repeat;
}
.site-main .zl-usp p.zl-usp__title {
  margin: 0;
  color: var(--zl-fg);
  font-weight: 600;
  line-height: 1.3;
}
.site-main .zl-usp p.zl-usp__text {
  margin: .25rem 0 0;
  font-size: .9rem;
  line-height: 1.5;
}

/* Drie stappen */
.site-main .zl-steps-card {
  max-width: var(--siteWidth);
  margin: 3.5rem auto;
  padding: 2rem;
  background: var(--zl-band-soft);
  border: 1px solid var(--zl-band-border);
  border-radius: var(--zl-radius);
}
.site-main .zl-steps-card > * {
  max-width: none !important;
}
.site-main .zl-steps-card > p:not(.zl-eyebrow) {
  max-width: 48rem !important;
}
.site-main ol.zl-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 1.75rem 0;
  padding: 0;
  list-style: none;
  counter-reset: zl-step;
}
.site-main ol.zl-steps li {
  counter-increment: zl-step;
  margin: 0;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--zl-border);
  border-radius: var(--zl-radius);
  box-shadow: var(--zl-shadow-soft);
  font-size: .97rem;
}
.site-main ol.zl-steps li::before {
  content: counter(zl-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: .75rem;
  border-radius: 50%;
  background: var(--zl-accent);
  color: var(--zl-accent-fg);
  font-weight: 700;
  font-size: .9rem;
}

/* Primaire (navy) knop en outline-knop in de content */
.site-main .zl-btn-primary .wp-block-button__link {
  background: var(--zl-primary);
  color: #fff;
}
.site-main .zl-btn-primary .wp-block-button__link:hover {
  background: var(--zl-primary-hover);
  color: #fff;
}

/* Tussen-CTA */
.site-main .zl-subtle-cta {
  max-width: var(--siteWidth);
  margin: 2.5rem auto;
  padding: 1.25rem 1.5rem;
  background: var(--zl-band-soft);
  border: 1px solid var(--zl-band-border);
  border-radius: var(--zl-radius-lg);
}
.site-main .zl-subtle-cta > * {
  max-width: none !important;
}
.site-main .zl-subtle-cta .wp-block-columns {
  margin: 0;
  gap: 1rem;
}
.site-main .zl-subtle-cta p.zl-subtle-cta__title {
  margin: 0;
  color: var(--zl-accent-text);
  font-weight: 700;
}
.site-main .zl-subtle-cta p.zl-subtle-cta__text {
  margin: .25rem 0 0;
  font-size: .9rem;
}

/* FAQ als uitklapblokken */
.site-main .zl-faq details.wp-block-details {
  margin: 0 0 .75rem;
  padding: 1rem 1.5rem;
  background: #fff;
  border: 1px solid var(--zl-border);
  border-radius: var(--zl-radius);
  box-shadow: var(--zl-shadow-soft);
}
.site-main .zl-faq details.wp-block-details summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  list-style: none;
  color: var(--zl-fg);
  font-weight: 600;
}
.site-main .zl-faq details.wp-block-details summary::-webkit-details-marker {
  display: none;
}
.site-main .zl-faq details.wp-block-details summary::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234f7a22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}
.site-main .zl-faq details.wp-block-details[open] summary::after {
  transform: rotate(90deg);
}
.site-main .zl-faq details.wp-block-details p {
  margin: .75rem 0 0;
  font-size: .97rem;
}

/* Afsluitende CTA-band */
.site-main .zl-cta-band {
  background: var(--zl-accent-soft);
  border-top: 1px solid var(--zl-band-border);
  border-bottom: 1px solid var(--zl-band-border);
  padding-block: 3.5rem;
}
.site-main .zl-cta-band .zl-cta-band__inner {
  max-width: var(--siteWidth);
  margin: 0 auto;
  gap: 2rem;
}
.site-main .zl-cta-band h2 {
  margin-top: 0;
}
.site-main .zl-cta-band p.zl-cta-band__reassurance {
  font-size: .875rem;
  opacity: .85;
}
.site-main .zl-cta-band__buttons {
  gap: .75rem;
}
.site-main .zl-cta-band__buttons .wp-block-button,
.site-main .zl-cta-band__buttons .wp-block-button__link {
  width: 100%;
}

/* Mobiel */
@media (max-width: 781px) {
  .site-main ol.zl-steps {
    grid-template-columns: 1fr;
  }
  .site-main .zl-steps-card,
  .site-main .zl-subtle-cta {
    margin-inline: 1rem;
    padding: 1.5rem;
  }
  .zl-hero .zl-hero__buttons .wp-block-button {
    width: 100%;
  }
  .zl-hero .zl-hero__buttons .wp-block-button__link {
    width: 100%;
  }
  .zl-usp .zl-usp__grid {
    gap: 1rem;
  }
}

/* Tussen-CTA: tekstkolom vult, knopkolom krimpt mee */
.site-main .zl-subtle-cta .wp-block-columns > .wp-block-column:first-child {
  flex: 1 1 0;
  min-width: 0;
}
.site-main .zl-subtle-cta .wp-block-columns > .wp-block-column:last-child {
  flex: 0 0 auto;
  width: auto;
}
.site-main .zl-subtle-cta .wp-block-buttons,
.site-main .zl-subtle-cta .wp-block-button {
  width: auto;
  margin: 0;
}

/* "Lees meer": overige alinea's in een uitklapblok (core/details, class zl-readmore).
   Geen JavaScript; de knop staat onder de tekst en wordt "Lees minder" als hij open is. */
.site-main details.zl-readmore {
  display: flex;
  flex-direction: column-reverse;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.site-main details.zl-readmore > summary {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  width: max-content;
  margin-top: .75rem;
  list-style: none;
  cursor: pointer;
  color: var(--zl-primary);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.site-main details.zl-readmore > summary::-webkit-details-marker {
  display: none;
}
.site-main details.zl-readmore > summary::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231e5178'%3E%3Cpath d='M10 13.2 4.8 8l1.4-1.4L10 10.4l3.8-3.8L15.2 8 10 13.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}
.site-main details.zl-readmore[open] > summary::after {
  transform: rotate(180deg);
}
.site-main details.zl-readmore > summary:hover {
  color: var(--zl-accent-text);
}
.site-main details.zl-readmore[open] > summary {
  font-size: 0;
}
.site-main details.zl-readmore[open] > summary::before {
  content: "Lees minder";
  font-size: .9rem;
}
.site-main details.zl-readmore > p:first-of-type {
  margin-top: 0;
}

/* Mobiel: vaste zijmarge voor paginabrede homepage-blokken */
@media (max-width: 781px) {
  .wp-block-cover.zl-hero,
  .site-main .zl-cta-band,
  .site-main .zl-usp {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* --------------------------------------------------------------------------
   8. Formulieren (Gravity Forms)
   -------------------------------------------------------------------------- */
.gform-theme--framework {
  --gf-color-primary: var(--zl-accent);
  --gf-color-primary-contrast: var(--zl-accent-fg);
  --gf-ctrl-border-color: var(--zl-border);
  --gf-ctrl-radius: var(--zl-radius);
  --gf-font-family-base: var(--zl-font);
}

/* Losse formulieren buiten Gravity Forms (o.a. inloggen) */
.site-main form:not(.gform-theme) input[type="text"],
.site-main form:not(.gform-theme) input[type="email"],
.site-main form:not(.gform-theme) input[type="password"],
.site-main form:not(.gform-theme) textarea {
  border: 1px solid var(--zl-border);
  border-radius: var(--zl-radius);
  font-family: var(--zl-font);
  color: var(--zl-fg);
}
.site-main form:not(.gform-theme) input[type="text"]:focus,
.site-main form:not(.gform-theme) input[type="email"]:focus,
.site-main form:not(.gform-theme) input[type="password"]:focus,
.site-main form:not(.gform-theme) textarea:focus {
  border-color: var(--zl-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 81, 120, .12);
}

/* --------------------------------------------------------------------------
   9. Footer (navy)
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--zl-primary);
  color: rgba(255, 255, 255, .9);
  font-size: 1rem;
  padding-top: 3.5rem;
}
/* Logo boven de footerkolommen. De lege .socials-bar dient als drager;
   het SVG is het witte topbalk-logo (zonder ringen), inline als data-URI. */
.site-footer .socials-bar {
  height: 50px;
  padding: 0;
  margin-bottom: 2.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 157 49.81'%3E%3Cpath fill='%23fff' d='M0,39.92v-2.3l7.12-9.24v1.02H0v-2.99h10.77v2.35l-6.81,9.01-.1-.84h7.09v2.99H0Z'/%3E%3Cpath fill='%23fff' d='M20.06,40.18c-1.38,0-2.61-.3-3.69-.91-1.08-.6-1.93-1.43-2.55-2.49-.62-1.05-.93-2.26-.93-3.62s.31-2.56.93-3.61,1.47-1.88,2.55-2.49c1.08-.61,2.31-.92,3.69-.92s2.58.31,3.66.92,1.93,1.44,2.54,2.49.92,2.25.92,3.61-.31,2.57-.92,3.62c-.61,1.06-1.46,1.88-2.54,2.49-1.08.6-2.3.91-3.66.91ZM20.06,37.02c.66,0,1.26-.17,1.79-.5.53-.33.94-.79,1.24-1.38.3-.59.45-1.25.45-1.98s-.15-1.42-.45-2c-.3-.59-.71-1.05-1.24-1.38-.53-.33-1.12-.5-1.79-.5s-1.28.17-1.81.51c-.53.34-.94.8-1.25,1.38-.31.58-.45,1.24-.43,1.99-.02.73.13,1.39.43,1.98.31.59.72,1.05,1.25,1.38.53.33,1.13.5,1.81.5Z'/%3E%3Cpath fill='%23fff' d='M29.91,39.92v-13.5h3.5l.13,4.34-.61-.89c.2-.7.54-1.33,1-1.9.46-.57,1-1.02,1.62-1.34.62-.32,1.27-.48,1.95-.48.29,0,.57.03.84.08.27.05.5.11.69.18l-.97,3.98c-.2-.1-.45-.19-.74-.27-.29-.08-.59-.11-.89-.11-.41,0-.79.07-1.14.22-.35.14-.65.35-.91.61-.25.26-.46.57-.6.93s-.22.75-.22,1.17v6.99h-3.65Z'/%3E%3Cpath fill='%23fff' d='M46.85,45.79c-1.07,0-2.13-.16-3.16-.47-1.04-.31-1.88-.72-2.53-1.21l1.28-2.6c.34.24.73.45,1.17.64.44.19.91.33,1.39.43s.98.15,1.49.15c.88,0,1.61-.14,2.18-.41.57-.27,1-.68,1.29-1.21.29-.54.43-1.22.43-2.05v-2.35l.61.13c-.1.56-.38,1.08-.84,1.54-.46.47-1.04.84-1.74,1.12s-1.41.42-2.14.42c-1.26,0-2.37-.29-3.34-.87-.97-.58-1.74-1.38-2.3-2.4s-.84-2.19-.84-3.52.28-2.56.83-3.61,1.31-1.87,2.27-2.48c.96-.6,2.05-.91,3.28-.91.51,0,1,.06,1.47.18.47.12.9.29,1.3.5.4.21.76.45,1.07.71.31.26.57.55.78.85s.33.61.38.92l-.74.2.1-3.09h3.47v12.48c0,1.11-.16,2.08-.48,2.94-.32.85-.8,1.57-1.42,2.16-.62.59-1.38,1.03-2.27,1.34-.89.31-1.89.46-3,.46ZM46.96,37.02c.71,0,1.34-.16,1.88-.48.54-.32.95-.77,1.24-1.35.29-.58.43-1.26.43-2.04s-.14-1.44-.43-2.03c-.29-.59-.7-1.04-1.24-1.37-.54-.32-1.16-.48-1.88-.48s-1.31.17-1.85.5c-.54.33-.95.79-1.24,1.37-.29.58-.43,1.25-.43,2.02s.14,1.44.43,2.03c.29.59.7,1.04,1.24,1.37.54.32,1.15.48,1.85.48Z'/%3E%3Cpath fill='%23fff' d='M57.65,39.92v-18.89h3.62v18.89h-3.62Z'/%3E%3Cpath fill='%23fff' d='M70.97,40.18c-1.38,0-2.61-.3-3.69-.91-1.08-.6-1.93-1.43-2.55-2.49-.62-1.05-.93-2.26-.93-3.62s.31-2.56.93-3.61,1.47-1.88,2.55-2.49c1.08-.61,2.31-.92,3.69-.92s2.58.31,3.66.92,1.93,1.44,2.54,2.49.92,2.25.92,3.61-.31,2.57-.92,3.62c-.61,1.06-1.46,1.88-2.54,2.49-1.08.6-2.3.91-3.66.91ZM70.97,37.02c.66,0,1.26-.17,1.79-.5.53-.33.94-.79,1.24-1.38.3-.59.45-1.25.45-1.98s-.15-1.42-.45-2c-.3-.59-.71-1.05-1.24-1.38-.53-.33-1.12-.5-1.79-.5s-1.28.17-1.81.51c-.53.34-.94.8-1.25,1.38-.31.58-.45,1.24-.43,1.99-.02.73.13,1.39.43,1.98.31.59.72,1.05,1.25,1.38.53.33,1.13.5,1.81.5Z'/%3E%3Cpath fill='%23fff' d='M80.82,39.92v-18.89h3.62v18.89h-3.62ZM84.27,35.87l-1.07-2.99,6.38-6.46h4.77l-10.08,9.44ZM89.96,39.92l-4.85-6.1,2.55-2.04,6.66,8.14h-4.36Z'/%3E%3Cpath fill='%23fff' d='M102.16,40.18c-1.46,0-2.74-.3-3.83-.89-1.09-.6-1.94-1.41-2.55-2.45-.61-1.04-.92-2.23-.92-3.57,0-1.04.17-1.99.51-2.86.34-.87.82-1.62,1.43-2.26.61-.64,1.34-1.13,2.18-1.48.84-.35,1.76-.52,2.74-.52.92,0,1.77.17,2.55.5.78.33,1.46.8,2.03,1.4.57.6,1.01,1.31,1.31,2.13.31.82.44,1.71.41,2.68l-.03,1.12h-10.85l-.59-2.22h8.45l-.41.46v-.56c-.03-.46-.18-.88-.45-1.25-.26-.37-.6-.66-1.01-.87s-.87-.31-1.38-.31c-.75,0-1.38.14-1.9.43-.52.29-.92.71-1.19,1.28-.27.56-.41,1.24-.41,2.04s.17,1.52.52,2.12c.35.6.84,1.06,1.48,1.39.64.33,1.39.5,2.26.5.6,0,1.14-.09,1.63-.28.49-.19,1.02-.51,1.58-.97l1.74,2.42c-.49.44-1.04.81-1.63,1.11-.6.3-1.21.52-1.84.68-.63.15-1.25.23-1.86.23Z'/%3E%3Cpath fill='%23fff' d='M109.48,29.67v-3.24h8.91v3.24h-8.91ZM112.01,39.92v-16.92h3.62v16.92h-3.62Z'/%3E%3Cpath fill='%2394c35a' d='M156.63 14.74 C156.63 26.43 156.63 38.12 156.63 49.81 144.94 49.81 133.25 49.81 121.56 49.81 121.56 38.12 121.56 26.43 121.56 14.74 133.25 14.74 144.94 14.74 156.63 14.74 z'/%3E%3Cpath fill='%231e5178' d='M130.07,39.92v-12.52h1.77l.07,2.61-.29.12c.16-.54.47-1.04.94-1.49.46-.45,1.02-.81,1.67-1.09.65-.28,1.31-.42,2-.42.93,0,1.7.18,2.33.55.62.37,1.09.94,1.41,1.7.32.77.48,1.74.48,2.92v7.6h-1.82v-7.5c0-.83-.11-1.51-.32-2.05-.22-.54-.55-.93-1-1.19-.45-.26-1-.38-1.65-.36-.54,0-1.05.09-1.51.28-.46.18-.86.44-1.2.76-.34.32-.6.69-.79,1.1-.19.42-.29.86-.29,1.34v7.62h-1.8Z'/%3E%3Cpath fill='%231e5178' d='M143.93,39.92v-17.74h1.8v17.74h-1.8Z'/%3E%3Ccircle cx='121.56' cy='37.32' r='3.02' fill='%23fff'/%3E%3C/svg%3E") left center / auto 50px no-repeat;
}
.site-footer .footer-header {
  display: block;
  margin-bottom: 1rem;
  color: var(--zl-accent);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-footer ul {
  padding: 0;
  list-style: none;
}
.site-footer li {
  margin: 0 0 .5rem;
  list-style: none;       /* theme zet "> " als list-style-type */
}
.site-footer a {
  color: rgba(255, 255, 255, .9);
  font-weight: 400;
  text-decoration: none;
  transition: color .15s ease;
}
.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer .madebywa {
  border-top: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .6);
}