/* ==========================================================================
   Zeker Spreken — componentstijlen
   --------------------------------------------------------------------------
   Overgezet uit het React-ontwerp (project "Website build: Seven-page
   WordPress theme"). Elke sectie hieronder verwijst naar de component waar
   hij vandaan komt, zodat het ontwerp en dit bestand naast elkaar te leggen
   zijn.

   Het ontwerp was een prototype voor desktop; alle @media-regels onderaan
   zijn hier toegevoegd omdat het prototype geen mobiel gedrag beschreef.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Basis — alleen wat theme.json niet dekt
   -------------------------------------------------------------------------- */

body {
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3 {
  text-wrap: balance;
}

img {
  max-width: 100%;
  height: auto;
}

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

/* Section — tone page/sunken/inverse/orange, ritme 112px (tight: 48px). */
.zs-section {
  padding-block: var(--section-y-lg);
}

.zs-section--tight {
  padding-block: var(--space-12);
}

/* De zijmarge (48px, krimpend naar 24px) komt uit theme.json als root
   padding — niet uit dit bestand, anders telt hij dubbel. */

/* Volle-breedte secties binnen een paginapatroon.
   --------------------------------------------------------------------------
   Een paginapatroon zit in één buitenste groep met "contentOnly"-vergrendeling.
   Die groep is een tweede constrained container binnen post-content, en dat
   levert twee problemen op:

   1. WordPress knijpt de wrapper tot contentSize (1120px), waardoor de secties
      erbinnen nooit breder kunnen worden.
   2. Zodra een alignfull-blok in een geneste container met global padding zit,
      zet WordPress de negatieve marge die het naar de rand zou trekken juist
      weer op 0 — bedoeld om dubbel compenseren te voorkomen.

   Samen zorgt dat ervoor dat elke band 1120px breed blijft in plaats van van
   rand tot rand te lopen. Hieronder wordt beide teruggedraaid. De marge van de
   wrapper zelf staat bij WordPress op `auto !important`, dus daar valt niet
   tegenin te werken — het moet op de secties gebeuren. */
.wp-block-post-content > .wp-block-group.is-layout-constrained {
  max-width: none;
}

.wp-block-post-content > .wp-block-group.is-layout-constrained > .alignfull {
  margin-inline: calc(var(--wp--style--root--padding-left) * -1);
}

/* Secties die juist niet vol zijn, verliezen door dezelfde nesting hun
   zijmarge. Die geven we hier terug, anders plakt de tekst op smalle schermen
   tegen de rand. */
.zs-section:not(.alignfull) {
  padding-inline: var(--gutter-inline);
}

/* Secties sluiten op elkaar aan. WordPress zet standaard een blockGap van
   24px tussen opeenvolgende blokken; tussen twee gekleurde banden zie je dat
   terug als een streep crème. Het ritme tussen secties komt uit hun eigen
   padding (80/112px), niet uit marge — dus die marge moet weg. Vooral onder
   de hero: daar loopt de oranje strook achter de knoppenkaart door in de
   oranje sectie eronder, en dat hoort één doorlopend vlak te zijn. */
.zs-section + .zs-section,
.zs-hero-band + .zs-section,
.zs-section + .zs-hero-band {
  margin-block-start: 0;
}

/* Leesbreedtes uit het ontwerp. */
.zs-measure { max-width: var(--measure-body); }
.zs-measure-narrow { max-width: 46ch; }

/* --------------------------------------------------------------------------
   2. Donkere en oranje banden
   Section tone="inverse" en tone="orange": crème tekst op een vol vlak.
   -------------------------------------------------------------------------- */

/* WordPress zet de kopkleur zelf met `:root :where(h1,...)`. Dat heeft
   gewicht 0,1,0, dus een regel in :where() (gewicht 0) verliest en koppen
   blijven donkerbordeaux op een donker vlak — onleesbaar. Daarom hier echte
   klasseselectors, met :not(.has-text-color) zodat een kleur die in de editor
   is gekozen alsnog voorgaat. */
.zs-inverse,
.zs-orange {
  color: var(--text-on-inverse);
}

.zs-inverse :is(h1, h2, h3, h4, h5):not(.has-text-color),
.zs-orange :is(h1, h2, h3, h4, h5):not(.has-text-color) {
  color: var(--text-on-inverse);
}

.zs-inverse :is(p, li):not(.has-text-color),
.zs-orange :is(p, li):not(.has-text-color) {
  color: var(--text-on-inverse-muted);
}

/* Op een donker vlak is de accentregel crème in plaats van bordeaux. */
.zs-inverse :is(.is-style-accent-line, .is-style-accent-line-lg):not(.has-text-color),
.zs-orange :is(.is-style-accent-line, .is-style-accent-line-lg):not(.has-text-color) {
  color: var(--brand-cream);
}

.zs-inverse a:not(.wp-block-button__link),
.zs-orange a:not(.wp-block-button__link) {
  color: var(--brand-cream);
}

/* Een kaart op een donker vlak is wit: daarbinnen gelden de gewone kleuren
   weer, anders wordt crème-op-wit onleesbaar. */
.zs-inverse .is-style-card :is(h1, h2, h3, h4, h5):not(.has-text-color),
.zs-orange .is-style-card :is(h1, h2, h3, h4, h5):not(.has-text-color) {
  color: var(--text-heading);
}

.zs-inverse .is-style-card :is(p, li):not(.has-text-color),
.zs-orange .is-style-card :is(p, li):not(.has-text-color) {
  color: var(--text-body);
}

/* --------------------------------------------------------------------------
   3. Knoppen — Button.jsx
   Pil, 2px rand, drie maten, vijf varianten.
   -------------------------------------------------------------------------- */

.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: var(--border-width-strong) solid transparent;
  white-space: nowrap;
  transition: var(--transition-control);
}

.wp-block-button .wp-block-button__link:active {
  transform: scale(var(--press-scale));
}

/* Maten. Standaard is md; sm en lg via blokstijl. */
.wp-block-button .wp-block-button__link { padding: 14px 26px; font-size: var(--text-sm); }
.wp-block-button.is-style-sm .wp-block-button__link { padding: 10px 18px; font-size: var(--text-xs); }
.wp-block-button.is-style-lg .wp-block-button__link { padding: 17px 32px; font-size: var(--text-base); }

/* Primair — de standaard uit theme.json, hier alleen de randkleur. */
.wp-block-button:not([class*="is-style-secondary"]):not([class*="is-style-accent"]):not([class*="is-style-quiet"]):not([class*="is-style-inverse"]) .wp-block-button__link {
  border-color: var(--action-primary-bg);
}

.wp-block-button:not([class*="is-style-secondary"]):not([class*="is-style-accent"]):not([class*="is-style-quiet"]):not([class*="is-style-inverse"]) .wp-block-button__link:hover {
  border-color: var(--action-primary-bg-hover);
}

/* Secundair — omlijnd. */
.wp-block-button.is-style-secondary .wp-block-button__link {
  background-color: var(--action-secondary-bg);
  color: var(--action-secondary-fg);
  border-color: var(--action-secondary-border);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background-color: var(--action-secondary-bg-hover);
  color: var(--action-secondary-fg);
}

/* Accent — oranje. */
.wp-block-button.is-style-accent .wp-block-button__link {
  background-color: var(--action-accent-bg);
  color: var(--action-accent-fg);
  border-color: var(--action-accent-bg);
}

.wp-block-button.is-style-accent .wp-block-button__link:hover {
  background-color: var(--action-accent-bg-hover);
  border-color: var(--action-accent-bg-hover);
}

/* Stil. */
.wp-block-button.is-style-quiet .wp-block-button__link {
  background-color: transparent;
  color: var(--action-quiet-fg);
}

.wp-block-button.is-style-quiet .wp-block-button__link:hover {
  background-color: var(--action-quiet-bg-hover);
}

/* Omgekeerd — crème knop op een donker vlak. */
.wp-block-button.is-style-inverse .wp-block-button__link {
  background-color: var(--brand-cream);
  color: var(--brand-primary);
  border-color: var(--brand-cream);
}

.wp-block-button.is-style-inverse .wp-block-button__link:hover {
  background-color: var(--sand-200);
  border-color: var(--sand-200);
}

/* Pijl achter het label (iconRight in het ontwerp). Als masker, zodat hij
   de tekstkleur volgt en het label gewoon bewerkbaar blijft. */
.wp-block-button.is-style-arrow .wp-block-button__link::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--zs-arrow-right) center / contain no-repeat;
  mask: var(--zs-arrow-right) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   4. Kaarten — Card.jsx
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-card,
.wp-block-column.is-style-card {
  background-color: var(--surface-card);
  border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  transition: var(--transition-surface);
}

/* De lift geldt alleen voor kaarten die ergens heen leiden (ServiceCard). */
.wp-block-group.is-style-card:has(.wp-block-button):hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.wp-block-group.is-style-card-quiet {
  background-color: var(--surface-card-quiet);
  border: var(--border-width-hairline) solid transparent;
  border-radius: var(--radius-card);
  padding: var(--space-8);
}

/* Een kaart op een donkere band houdt zijn eigen, lichte tekstkleur. */
.zs-inverse .is-style-card :is(h1, h2, h3, h4, h5) {
  color: var(--text-heading);
}

.zs-inverse .is-style-card p,
.zs-inverse .is-style-card li {
  color: var(--text-body);
}

/* --------------------------------------------------------------------------
   5. Accentregel — AccentLine.jsx / EyebrowRow
   Baby Doll. Ontbreekt het lettertype, dan valt hij terug op Open Sans.
   -------------------------------------------------------------------------- */

.is-style-accent-line {
  font-family: var(--font-accent);
  font-weight: var(--weight-regular);
  line-height: 1.3;
  margin-bottom: var(--space-5);
}

.is-style-accent-line-lg {
  font-family: var(--font-accent);
  font-weight: var(--weight-regular);
  line-height: 1.15;
  max-width: 24ch;
}

/* Gewicht 0, zodat een kleurkeuze in de editor voorgaat. */
:where(.is-style-accent-line, .is-style-accent-line-lg) {
  color: var(--text-accent);
}

/* Lead — 19px/1.8 op leesbreedte. */
.is-style-lead {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  max-width: var(--measure-body);
}

/* --------------------------------------------------------------------------
   6. Lijsten — CheckList.jsx
   Let op: rondjes, geen vinkjes. 8px oranje stip, 11px vanaf de bovenkant.
   -------------------------------------------------------------------------- */

.wp-block-list.is-style-dots {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: var(--space-3);
}

.wp-block-list.is-style-dots > li {
  position: relative;
  padding-left: var(--space-6);
}

.wp-block-list.is-style-dots > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--brand-orange);
}

/* Twee kolommen waar het ontwerp dat vraagt. */
.wp-block-list.is-style-dots.zs-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-8);
}

/* StepList.jsx — genummerde cirkel van 44px. */
.wp-block-list.is-style-steps {
  list-style: none;
  padding-left: 0;
  counter-reset: zs-step;
  display: grid;
  gap: var(--space-6);
}

.wp-block-list.is-style-steps > li {
  counter-increment: zs-step;
  position: relative;
  padding-left: calc(44px + var(--space-5));
  padding-top: 6px;
}

.wp-block-list.is-style-steps > li::before {
  content: counter(zs-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background-color: var(--brand-primary);
  color: var(--brand-cream);
  font: var(--weight-bold) var(--text-md) / 1 var(--font-heading);
}

.zs-inverse .wp-block-list.is-style-steps > li::before,
.zs-orange .wp-block-list.is-style-steps > li::before {
  background-color: var(--brand-orange);
}

/* De koptekst van een stap staat vet vooraan de regel. */
.wp-block-list.is-style-steps > li > strong {
  display: block;
  font: var(--type-h4);
  color: var(--text-heading);
  margin-bottom: var(--space-1);
}

/* --------------------------------------------------------------------------
   7. Quote.jsx — 3px oranje lijn, Baby Doll 33px
   -------------------------------------------------------------------------- */

.wp-block-quote.is-style-brand {
  margin: 0;
  padding-left: var(--space-6);
  border-left: 3px solid var(--brand-orange);
  max-width: var(--measure-body);
}

.wp-block-quote.is-style-brand p {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  line-height: 1.25;
  color: var(--text-accent);
  margin: 0;
}

.zs-inverse .wp-block-quote.is-style-brand p {
  color: var(--text-on-inverse);
}

.wp-block-quote.is-style-brand cite {
  display: block;
  margin-top: var(--space-4);
  font: var(--type-body-sm);
  font-style: normal;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   8. Accordion.jsx — core/details
   -------------------------------------------------------------------------- */

.wp-block-details.is-style-accordion {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.wp-block-details.is-style-accordion + .wp-block-details.is-style-accordion {
  margin-top: var(--space-3);
}

.wp-block-details.is-style-accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  font: var(--weight-bold) var(--text-md) / 1.35 var(--font-heading);
  color: var(--text-heading);
}

.wp-block-details.is-style-accordion > summary::-webkit-details-marker {
  display: none;
}

/* Chevron omlaag, draait 180° bij openen. */
.wp-block-details.is-style-accordion > summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--brand-orange);
  border-bottom: 2.5px solid var(--brand-orange);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.wp-block-details.is-style-accordion[open] > summary::after {
  transform: rotate(225deg) translate(-3px, -3px);
}

.wp-block-details.is-style-accordion > :not(summary) {
  padding: 0 var(--space-6) var(--space-6);
  max-width: var(--measure-body);
}

/* --------------------------------------------------------------------------
   9. InfoNotice.jsx
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-notice {
  background-color: var(--status-info-bg);
  color: var(--status-info-fg);
  border: 1px solid var(--status-info-line);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  max-width: var(--measure-wide);
}

.wp-block-group.is-style-notice :is(h1, h2, h3, h4, h5) {
  color: var(--status-info-fg);
  font-size: var(--text-base);
}

/* --------------------------------------------------------------------------
   10. PortraitFrame.jsx
   Ellips (50%/46%), 3px bordeaux ring, naamplaatje dat eroverheen valt.
   -------------------------------------------------------------------------- */

.zs-portrait {
  position: relative;
  max-width: 100%;
}

.zs-portrait .wp-block-image {
  margin: 0;
}

.zs-portrait .wp-block-image img {
  width: 100%;
  aspect-ratio: 380 / 470;
  object-fit: cover;
  border-radius: 50% / 46%;
  border: 3px solid var(--brand-primary);
  background-color: var(--sand-100);
}

/* Naamplaatje rechtsonder; links wanneer .zs-portrait--label-left. */
.zs-portrait .zs-portrait__label {
  position: absolute;
  bottom: 8%;
  right: -6%;
  background-color: var(--surface-raised);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--space-5);
}

.zs-portrait--label-left .zs-portrait__label {
  right: auto;
  left: -6%;
}

.zs-portrait .zs-portrait__label p {
  margin: 0;
  color: var(--text-heading);
}

.zs-portrait .zs-portrait__label p:first-child {
  font-family: var(--font-accent);
  font-size: var(--text-lg);
  line-height: 1.3;
}

.zs-portrait .zs-portrait__label p:last-child {
  font: var(--weight-semibold) var(--text-sm) / 1.3 var(--font-body);
  color: var(--text-body);
}

/* --------------------------------------------------------------------------
   11. CtaBand — Shared.jsx
   Donker paneel, radius 28, tekst links en beeld rechts (380px).
   -------------------------------------------------------------------------- */

.zs-cta-band {
  background-color: var(--surface-inverse);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.zs-cta-band .wp-block-columns {
  gap: 0;
  margin: 0;
  align-items: stretch;
}

.zs-cta-band .zs-cta-band__text {
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
}

.zs-cta-band .zs-cta-band__media {
  padding: 0;
  background-color: var(--sand-100);
  min-height: 340px;
}

.zs-cta-band .zs-cta-band__media .wp-block-image,
.zs-cta-band .zs-cta-band__media figure {
  margin: 0;
  height: 100%;
}

.zs-cta-band .zs-cta-band__media img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   12. Beeld met vaste verhouding — hero, praktijkruimte, therapiefoto
   -------------------------------------------------------------------------- */

.zs-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-image);
  background-color: var(--sand-100);
}

.zs-figure--hero img { aspect-ratio: 5 / 7; }
.zs-figure--tall img { aspect-ratio: 4 / 5; }
.zs-figure--wide img { aspect-ratio: 3 / 2; }

/* --------------------------------------------------------------------------
   13. Home — de zwevende kaart over de oranje band
   -------------------------------------------------------------------------- */

/* De band loopt van rand tot rand, maar de kaart erin moet op dezelfde lijn
   staan als de kop erboven. Zonder los wrapper-element doen we dat met
   padding: de helft van wat er naast de contentkolom overblijft. Op smallere
   schermen wordt dat vanzelf de gewone zijmarge.
   Let op: 100vw en niet 100%, want een percentage rekent tegen het
   bovenliggende blok en dat is hier smaller dan het scherm. */
.zs-hero-band {
  position: relative;
  margin-top: var(--space-12);
  padding-inline: max(
    var(--gutter-inline),
    calc((100vw - var(--container-lg)) / 2)
  );
}

/* De oranje band vult de onderste helft, over de volle breedte. */
.zs-hero-band::before {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background-color: var(--brand-orange);
}

/* De kaart moet bóven de oranje ::before liggen. Zonder eigen positie valt
   hij eronder en snijdt het oranje dwars door de knoppen heen. */
.zs-hero-band > * {
  position: relative;
  z-index: 1;
}

.zs-hero-card {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  background-color: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-8);
}

.zs-hero-card .wp-block-buttons { margin: 0; }

.zs-hero-card a.zs-textlink {
  font: var(--weight-bold) var(--text-base) / 1 var(--font-body);
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.zs-hero-card a.zs-textlink:hover {
  color: var(--text-link-hover);
}

/* --------------------------------------------------------------------------
   14. Contactkaarten met icoonvlak — ContactScreen.jsx
   -------------------------------------------------------------------------- */

.zs-contact-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
}

.zs-contact-card .zs-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background-color: var(--orange-200);
  color: var(--orange-700);
  display: grid;
  place-items: center;
}

.zs-contact-card .zs-icon svg {
  width: 22px;
  height: 22px;
}

.zs-contact-card p {
  margin: 0;
  color: var(--text-heading);
}

.zs-contact-card p.zs-contact-card__label {
  font: var(--type-label);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   15. Gegevenslijsten — praktijkgegevens en tarieven
   -------------------------------------------------------------------------- */

.zs-datagrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
}

.zs-datagrid > div {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-4);
}

.zs-datagrid dt {
  font: var(--type-label);
  color: var(--text-muted);
  margin: 0;
}

.zs-datagrid dd {
  font: var(--weight-bold) var(--text-md) / 1.4 var(--font-heading);
  color: var(--text-heading);
  margin: 0;
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   16. Header — NavBar.jsx
   Een donker, afgerond eiland dat meescrollt. Crème links, oranje CTA-pil,
   en een oranje balk bovenop de actieve pagina.
   -------------------------------------------------------------------------- */

.zs-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--surface-page);
  padding: var(--space-4) var(--space-6);
}

.zs-nav-island {
  max-width: var(--container-xl);
  margin-inline: auto;
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
  border-radius: var(--radius-md);
  padding: 0 var(--space-8);
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.zs-nav-island .wp-block-site-logo {
  padding: 12px 0;
  line-height: 0;
}

.zs-nav-island .wp-block-site-logo img {
  height: 52px;
  width: auto;
  border-radius: 0;
}

/* Valt er geen logo ingesteld, dan blijft de sitenaam leesbaar. */
.zs-nav-island .wp-block-site-title a {
  font: var(--weight-bold) var(--text-lg) / 1 var(--font-heading);
  color: var(--text-on-inverse);
  text-decoration: none;
}

.zs-nav-island .wp-block-navigation {
  font: var(--weight-semibold) var(--text-base) / 1 var(--font-body);
}

.zs-nav-island .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--text-on-inverse);
  text-decoration: none;
  padding: 26px 0;
  white-space: nowrap;
}

.zs-nav-island .wp-block-navigation .wp-block-navigation-item {
  position: relative;
}

/* Oranje balk bovenaan de actieve pagina, 14px doorlopend aan weerszijden. */
.zs-nav-island .wp-block-navigation .current-menu-item::before,
.zs-nav-island .wp-block-navigation .current_page_item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -14px;
  right: -14px;
  height: 4px;
  background-color: var(--brand-orange);
}

/* Contact staat op desktop alleen als CTA-pil, niet ook in de linkrij.
   Onder de mobiele grens keert dat om: de pil verdwijnt en Contact hoort
   gewoon bij de andere links in het uitklapmenu. */
.zs-nav-island .wp-block-navigation-item.zs-nav-link-contact {
  display: none;
}

/* CTA-pil rechts. */
.zs-nav-island .zs-nav-cta .wp-block-button__link {
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
  color: var(--brand-cream);
  font-weight: var(--weight-semibold);
  padding: 14px 22px;
}

.zs-nav-island .zs-nav-cta .wp-block-button__link:hover {
  background-color: var(--orange-700);
  border-color: var(--orange-700);
}

/* Het uitklapmenu op mobiel staat op hetzelfde donker. */
.zs-nav-island .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
  padding: var(--space-10) var(--space-6);
}

.zs-nav-island .wp-block-navigation__responsive-container-open,
.zs-nav-island .wp-block-navigation__responsive-container-close {
  color: var(--brand-cream);
}

/* --------------------------------------------------------------------------
   17. Footer — Footer.jsx
   -------------------------------------------------------------------------- */

.zs-footer {
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
}

.zs-footer :is(h1, h2, h3, h4, h5) {
  color: var(--text-on-inverse);
}

.zs-footer p,
.zs-footer li {
  color: var(--text-on-inverse-muted);
  font: var(--type-body-sm);
}

.zs-footer h4 {
  font: var(--weight-bold) var(--text-sm) / 1.3 var(--font-heading);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-4);
}

.zs-footer a {
  color: var(--text-on-inverse);
  text-decoration: none;
}

.zs-footer a:hover {
  color: var(--orange-300);
  text-decoration: underline;
}

.zs-footer .zs-footer__logo img {
  height: 132px;
  width: auto;
  border-radius: 0;
}

/* Ronde socialknop, 44px met dunne crème rand. */
.zs-footer .zs-social a {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-on-inverse);
  display: grid;
  place-items: center;
  transition: var(--transition-control);
}

.zs-footer .zs-social a:hover {
  border-color: var(--brand-cream);
  background-color: rgba(255, 253, 248, 0.08);
}

.zs-footer .zs-social img {
  height: 20px;
  width: auto;
  border-radius: 0;
}

/* Keurmerken staan op een wit vlakje zodat ze leesbaar blijven. */
.zs-footer .zs-keurmerk {
  background-color: var(--surface-raised);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-5);
  display: inline-flex;
  align-items: center;
}

.zs-footer .zs-keurmerk img {
  height: 34px;
  width: auto;
  border-radius: 0;
}

.zs-footer .zs-footer__bottom {
  border-top: 1px solid var(--border-on-inverse);
  padding-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   18. Formulieren — Input/Textarea/Select/Field/Checkbox
   -------------------------------------------------------------------------- */

.zs-form {
  display: grid;
  gap: var(--space-5);
}

.zs-form h2 {
  font: var(--type-h2);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  margin: 0;
}

.zs-form label {
  font: var(--type-label);
  color: var(--text-heading);
  display: block;
  margin-bottom: var(--space-2);
}

/* Spamval — onzichtbaar, maar niet display:none, want dat slaan bots over. */
.zs-form__honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Bedankt- en foutmelding na verzenden. */
.zs-form-bedankt {
  display: grid;
  gap: var(--space-5);
}

.zs-form-bedankt h2 {
  font: var(--type-h2);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  margin: 0;
}

.zs-form-fout {
  background-color: var(--status-critical-bg);
  color: var(--status-critical-fg);
  border: 1px solid var(--status-critical-line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.zs-form-fout p { margin: 0; font: var(--type-body-sm); }

.zs-form input[type="text"],
.zs-form input[type="email"],
.zs-form input[type="tel"],
.zs-form input[type="number"],
.zs-form textarea,
.zs-form select {
  font: var(--type-body);
  color: var(--text-body);
  background-color: var(--surface-raised);
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-input);
  padding: 12px 16px;
  width: 100%;
}

.zs-form :is(input, textarea, select):focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-focus);
}

.zs-form ::placeholder {
  color: var(--stone-400);
}

.zs-form .zs-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.zs-form .zs-form__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}

.zs-form .zs-form__check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--brand-primary);
}

.zs-form .zs-form__check label {
  font: var(--type-body-sm);
  color: var(--text-body);
  margin: 0;
}

/* --------------------------------------------------------------------------
   19. Responsief
   Niet uit het prototype — dat beschreef alleen desktop. Hieronder staat het
   gedrag dat een echte site nodig heeft.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .zs-datagrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  /* Het navigatie-eiland wordt logo + hamburger. */
  .zs-nav-island {
    min-height: 64px;
    padding: 0 var(--space-5);
    gap: var(--space-4);
  }

  .zs-nav-island .wp-block-site-logo img { height: 40px; }

  /* De CTA-pil verhuist het uitklapmenu in als gewone link. */
  .zs-nav-island .zs-nav-cta { display: none; }
  .zs-nav-island .wp-block-navigation-item.zs-nav-link-contact { display: block; }

  .zs-nav-island .wp-block-navigation .wp-block-navigation-item__content {
    padding: var(--space-3) 0;
    font-size: var(--text-lg);
  }

  .zs-nav-island .wp-block-navigation .current-menu-item::before,
  .zs-nav-island .wp-block-navigation .current_page_item::before {
    left: -14px;
    right: auto;
    top: auto;
    bottom: 0;
    width: 4px;
    height: auto;
    inset-block: var(--space-2);
  }
}

@media (max-width: 900px) {
  .zs-section { padding-block: var(--section-y); }

  .zs-section > .wp-block-group__inner-container,
  .zs-container,
  .zs-hero-band > .wp-block-group__inner-container {
    padding-inline: var(--gutter-inline);
  }

  .wp-block-list.is-style-dots.zs-cols-2 { grid-template-columns: 1fr; }

  /* Het beeld in de CTA-band gaat onder de tekst staan. */
  .zs-cta-band .zs-cta-band__text { padding: var(--space-8); }

  .zs-cta-band .zs-cta-band__media,
  .zs-cta-band .zs-cta-band__media img {
    min-height: 0;
  }

  .zs-cta-band .zs-cta-band__media img { aspect-ratio: 16 / 9; }

  /* Het portret krijgt een maximum zodat de ellips niet uitrekt. */
  .zs-portrait { max-width: 320px; margin-inline: auto; }
  .zs-portrait .zs-portrait__label,
  .zs-portrait--label-left .zs-portrait__label { right: 0; left: auto; }

  .zs-footer .zs-footer__logo img { height: 96px; }
}

@media (max-width: 720px) {
  .zs-datagrid { grid-template-columns: 1fr; }
  .zs-form .zs-form__row { grid-template-columns: 1fr; }

  .zs-hero-card {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
    padding: var(--space-5) var(--space-6);
  }

  /* De oranje band achter de kaart wordt smaller zodat hij niet domineert. */
  .zs-hero-band::before { inset: 65% 0 0; }
}

/* --------------------------------------------------------------------------
   20. Entree-animatie
   Ontwerp: korte fade plus 8-12px stijging, geen bounce of parallax.
   Inhoud is zichtbaar zonder JS — .zs-reveal-ready wordt pas door JS gezet.
   -------------------------------------------------------------------------- */

.zs-reveal-ready .zs-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.zs-reveal-ready .zs-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .zs-reveal-ready .zs-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   21. Toegankelijkheid
   -------------------------------------------------------------------------- */

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}

.skip-link:focus {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: 12px 24px;
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  background-color: var(--brand-primary);
  color: var(--brand-cream);
  border-radius: var(--radius-sm);
  text-decoration: none;
}