/*
Theme Name: In Balans met Danique
Theme URI: https://inbalansmetdanique.nl
Author: Danique Fluit
Description: Leefstijlcoaching in Ede & online — custom block theme, mobile-first met drie breakpoints.
Version: 0.6.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: Proprietary
Text Domain: in-balans-met-danique
*/

/* ========================================================
   BREAKPOINTS
   Mobiel   < 720px    (basis, ontworpen op 390px)
   Tablet   >= 720px   (ontworpen op 834px)
   Desktop  >= 1024px  (ontworpen op 1440px)
   Nav      >= 1280px  (horizontale navigatie i.p.v. hamburger)

   Alles wat per breakpoint verandert loopt via de variabelen
   hieronder, zodat de componenten zelf breakpoint-vrij blijven.
   ======================================================== */

/* == Design tokens ======================================= */
:root {
  --ibd-warm-white: #FAF7F2;  /* paginaachtergrond, tekst op donker */
  --ibd-sand:       #EDE3D6;  /* afwisselende secties               */
  --ibd-card:       #FFFDF9;  /* kaarten en velden op zand          */
  --ibd-brown:      #3E362E;  /* broodtekst, donkere secties        */
  --ibd-clay:       #6B5B4A;  /* knoppen, secundaire tekst          */
  --ibd-taupe:      #B8A48D;  /* lijnen, cijfers, accenten          */
  --ibd-rose:       #EBD8D2;  /* spaarzaam accent, labels op donker */
  --ibd-line:       #E4D8C7;  /* scheidingslijnen op warm wit       */
  --ibd-border:     #DCCDB8;  /* outline-knoppen op licht           */
  --ibd-on-dark:    #D9CDBC;  /* body-tekst in donkere secties      */
  --ibd-meta:       #8A7A66;  /* labels, bijschriften               */
  --ibd-hero-sub:   #F0E7DA;  /* subregel en navlinks op de hero    */

  --ibd-display: "Cormorant Garamond", Georgia, serif;
  --ibd-sans:    Karla, system-ui, -apple-system, sans-serif;
  --ibd-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --ibd-ease: 150ms ease;

  /* -- Responsieve maten: mobiel ------------------------- */
  --ibd-gutter:      26px;   /* horizontale marge, ook root padding */
  --ibd-section:     56px;   /* verticale sectiepadding             */
  --ibd-split-gap:   22px;   /* kolomafstand in tweekolomssecties    */
  --ibd-grid-gap:    12px;   /* afstand tussen kaarten              */
  --ibd-card-pad:    24px;
  --ibd-card-radius: 18px;
  --ibd-bar-h:       72px;   /* hoogte sticky CTA-balk              */

  --ibd-r-pill:  99px;
  --ibd-r-field: 12px;
}

@media (min-width: 720px) {
  :root {
    --ibd-gutter:    56px;
    --ibd-section:   80px;
    --ibd-split-gap: 44px;
    --ibd-grid-gap:  18px;
    --ibd-card-pad:  28px;
    --ibd-bar-h:     78px;

    /* Broodtekst en koppen schalen mee via de presets uit theme.json. */
    --wp--preset--font-size--kicker:    11px;
    --wp--preset--font-size--small:     15px;
    --wp--preset--font-size--secondary: 16px;
    --wp--preset--font-size--medium:    17px;
    --wp--preset--font-size--quote:     22px;
    --wp--preset--font-size--heading-s:        28px;
    --wp--preset--font-size--heading-m:        38px;
    --wp--preset--font-size--heading-l:        52px;
  }
}

@media (min-width: 1024px) {
  :root {
    --ibd-gutter:      120px;
    --ibd-section:     120px;
    --ibd-split-gap:   100px;
    --ibd-grid-gap:    24px;
    --ibd-card-pad:    38px;
    --ibd-card-radius: 20px;
    --ibd-r-field:     14px;

    --wp--preset--font-size--meta:      13px;
    --wp--preset--font-size--small:     15px;
    --wp--preset--font-size--secondary: 17px;
    --wp--preset--font-size--medium:    18px;
    --wp--preset--font-size--quote:     24px;
    --wp--preset--font-size--heading-s:        32px;
    --wp--preset--font-size--heading-m:        48px;
    --wp--preset--font-size--heading-l:        66px;
  }
}

/* == Basis =============================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  /* Ruimte onder de vaste CTA-balk zodat de footer niet wegvalt. */
  padding-bottom: var(--ibd-bar-h);
}

/* WP geeft elk blok op het hoogste niveau een margin-block-start uit de
   root-blockGap. Dat zet een gat boven <main> en onder de footer; de
   secties regelen hun eigen ruimte, dus hier weghalen. */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

/* De sticky CTA-balk staat position:fixed, dus de template-part-wrapper
   eromheen is leeg en mag geen ruimte innemen. */
.wp-site-blocks > .wp-block-template-part:empty { display: none; }
.ibd-ctabar-wrap { display: contents; }

/* Geen schaduwen - diepte komt uit 1px-lijnen en kleurvlakken. */
.wp-block-group, .wp-block-column, .wp-block-image img { box-shadow: none; }

a { transition: color var(--ibd-ease); }

h1 { line-height: 1.08; }
h2 { line-height: 1.15; }

@media (min-width: 720px) {
  body { line-height: 1.8; }
  h1 { line-height: 1.06; }
  h2 { line-height: 1.12; }
}

@media (min-width: 1024px) {
  h1 { line-height: 1.02; }
  h2 { line-height: 1.1; }
}

/* == Secties =============================================
   Drie vlakken wisselen elkaar af: warm wit, zand, donker.

   Elke sectie loopt over de volle breedte (het kleurvlak), met de
   gutter als eigen padding en de inhoud gecentreerd op max 1200px.
   De gutter staat bewust hier en niet in theme.json: een var() in
   WP's root padding breekt de negatieve-marge-berekening van
   alignfull, waardoor de kleurvlakken niet meer full-bleed zijn.  */
.ibd-section {
  padding-block: var(--ibd-section);
  padding-inline: var(--ibd-gutter);
}

.ibd-section > * {
  max-width: 1200px;
  margin-inline: auto;
}

/* Vangnet voor losse blokken die buiten een sectie geplaatst worden. */
.entry-content > :not(.ibd-section):not(.wp-block-cover) {
  max-width: calc(1200px + 2 * var(--ibd-gutter));
  margin-inline: auto;
  padding-inline: var(--ibd-gutter);
}
.ibd-section--tight { padding-block: calc(var(--ibd-section) * .72); }
.ibd-section--roomy { padding-block: calc(var(--ibd-section) * 1.1); }

.ibd-section--sand { background: var(--ibd-sand); }
.ibd-section--dark { background: var(--ibd-brown); }

.ibd-section--dark,
.ibd-section--dark :where(p, li, .ibd-body) { color: var(--ibd-on-dark); }
.ibd-section--dark :where(h1, h2, h3, h4)   { color: var(--ibd-warm-white); }

/* == Tweekolomsraster ====================================
   Mobiel gestapeld; vanaf desktop naast elkaar. Media-secties
   schakelen al op tablet om, zoals in de prototypes.        */
.ibd-split {
  display: grid;
  gap: var(--ibd-split-gap);
}

.ibd-split > * { min-width: 0; }

/* De beeldverhouding hoort bij de component, niet bij de afbeelding,
   zodat hij per breakpoint kan wisselen ongeacht wat er geupload is. */
.ibd-split--media .ibd-figure img { aspect-ratio: 390 / 280; }

@media (min-width: 720px) {
  /* Beeld naast tekst: tablet 280px kolom, desktop 480px. */
  .ibd-split--media {
    grid-template-columns: 280px 1fr;
    align-items: center;
  }
  .ibd-split--media .ibd-figure img { aspect-ratio: 280 / 340; }
}

@media (min-width: 1024px) {
  .ibd-split { grid-template-columns: 1fr 1fr; align-items: start; }
  .ibd-split--media { grid-template-columns: 480px 1fr; align-items: center; }
  .ibd-split--media .ibd-figure img { aspect-ratio: 480 / 600; }
  /* Beeld afwisselend rechts in plaats van links. */
  .ibd-split--reverse > :first-child { order: 2; }
}

/* Kaartraster: 1 -> 2 -> 3 kolommen. */
.ibd-grid { display: grid; gap: var(--ibd-grid-gap); align-items: stretch; }

/* WP's blockGap zet margin-block-start op elk volgend blok. Binnen een
   grid regelt 'gap' de ruimte al, en die marge maakt de tweede en derde
   kaart juist korter dan de eerste. Daarom hier weghalen. */
.ibd-grid > *,
.ibd-split > *,
.ibd-tiles > * { margin-block: 0; }

/* Kaarten vullen de hele rijhoogte, zodat ze even hoog zijn. */
.ibd-grid > .ibd-card { height: 100%; }

@media (min-width: 720px) {
  .ibd-grid { grid-template-columns: repeat(2, 1fr); }
  /* Bij drie kaarten op twee kolommen vult de laatste de hele rij. */
  .ibd-grid--3 > .ibd-card--wide { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .ibd-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ibd-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .ibd-grid--3 > .ibd-card--wide { grid-column: auto; }
}

/* Accordeonsectie: tekst links, accordeon rechts (alleen desktop). */
@media (min-width: 1024px) {
  .ibd-split--acc { grid-template-columns: 1fr 1.15fr; }
  .ibd-split--socials { grid-template-columns: 1fr 1.2fr; align-items: center; }
}

/* Staande videotegels (TikTok), drie naast elkaar.
   Op telefoon niet tonen: daar leiden de pill-links naar de profielen. */
.ibd-tiles { display: none; }

@media (min-width: 720px) {
  .ibd-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: start;
  }
}
.ibd-tiles .ibd-tile { margin: 0; min-width: 0; }

/* Postertegel: alleen het beeld van de video, doorlinkend naar TikTok.
   Zie de render_block-filter in functions.php. */
.ibd-tile--poster { margin: 0; }

.ibd-tile__link {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ibd-sand);
}

.ibd-tile--poster img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  transition: transform 250ms ease;
}
.ibd-tile__link:hover img { transform: scale(1.03); }

/* Afspeeldriehoek in een rustig rondje, in de merkkleuren. */
.ibd-tile__play {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(250, 247, 242, .88);
}
.ibd-tile__play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -40% -50%;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--ibd-brown);
}

/* Als een video niet opgehaald kan worden valt hij terug op TikTok's
   eigen insluiting; die mag de tegel dan niet uit zijn voegen duwen. */
.ibd-tiles .wp-block-embed__wrapper { width: 100%; }
.ibd-tiles :where(iframe, blockquote.tiktok-embed) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.ibd-tiles .ibd-tile img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

@media (min-width: 1024px) {
  .ibd-tiles { gap: 16px; }
  .ibd-tiles .ibd-tile img { border-radius: 18px; }
}

/* == Typografie-helpers ================================== */
.ibd-kicker {
  font-size: var(--wp--preset--font-size--kicker);
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1.6;
}

.ibd-body {
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.75;
  color: var(--ibd-clay);
}
.ibd-body--sm { font-size: var(--wp--preset--font-size--secondary); line-height: 1.65; }

.ibd-meta {
  font-size: var(--wp--preset--font-size--meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ibd-meta);
}

@media (min-width: 720px) {
  .ibd-body { line-height: 1.8; }
}

@media (min-width: 1024px) {
  .ibd-kicker { letter-spacing: .26em; }
  /* Alinea's nooit breder dan een leesbare regel, ook niet op 1440px. */
  .ibd-body:not(.has-text-align-center) { max-width: 68ch; }
}

/* == Knoppen ============================================= */
.wp-block-button__link { transition: background-color var(--ibd-ease), color var(--ibd-ease); }
.wp-block-button__link:hover { background-color: #5B4D3E; }

/* Volle breedte - de hero-CTA en de sectie-CTA's zijn blokknoppen. */
.ibd-btn-block .wp-block-button__link { display: block; width: 100%; text-align: center; }

/* Lichte knop op een donkere ondergrond. */
.ibd-btn-light .wp-block-button__link {
  background-color: var(--ibd-warm-white);
  color: var(--ibd-brown);
}
.ibd-btn-light .wp-block-button__link:hover { background-color: #EFE9DF; }

/* Outline-knop op licht. */
.ibd-btn-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--ibd-clay);
  border: 1px solid var(--ibd-border);
}
.ibd-btn-outline .wp-block-button__link:hover { background-color: #F2EBE0; }

/* Outline-knop op donker (tweede hero-knop). */
.ibd-btn-ghost .wp-block-button__link {
  background-color: transparent;
  color: var(--ibd-warm-white);
  border: 1px solid rgba(250, 247, 242, .55);
  font-weight: 400;
}
.ibd-btn-ghost .wp-block-button__link:hover { background-color: rgba(250, 247, 242, .12); }

/* Tekstlink met onderstreping - "Lees meer over mij". */
.ibd-link-more a,
a.ibd-link-more {
  font-size: var(--wp--preset--font-size--secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--ibd-taupe);
  padding-bottom: 3px;
}
.ibd-link-more a:hover,
a.ibd-link-more:hover { color: var(--ibd-brown); }

@media (min-width: 1024px) {
  .ibd-link-more a, a.ibd-link-more { padding-bottom: 4px; }
  .wp-block-button__link { font-size: 16px; padding: 18px 34px; }
}

/* == Header ==============================================
   Mobiel/tablet: merknaam + hamburger.
   Desktop: merknaam + horizontale links + CTA-knop.        */
.ibd-header {
  padding: 18px var(--ibd-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
}

.ibd-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Op Home ligt de header over de hero heen, zonder achtergrond. */
.home .ibd-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
}

.ibd-header .wp-block-site-title a { color: var(--ibd-brown); }

/* De CTA-knop in de header bestaat alleen op desktop.
   Extra specificiteit omdat core's layout-CSS (.wp-block-buttons-is-
   layout-flex{display:flex}) na deze stylesheet wordt ingeladen. */
.ibd-header .ibd-header__cta { display: none; }

/* Hamburger: twee lijnen in plaats van het core-icoon. */
.ibd-header .wp-block-navigation__responsive-container-open svg { display: none; }
.ibd-header .wp-block-navigation__responsive-container-open {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.ibd-header .wp-block-navigation__responsive-container-open::before,
.ibd-header .wp-block-navigation__responsive-container-open::after {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: var(--ibd-brown);
}

/* Overlay-menu in de merkkleuren. */
.ibd-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--ibd-warm-white);
  padding: 22px var(--ibd-gutter);
}
.ibd-header .wp-block-navigation__responsive-container.is-menu-open a {
  font-family: var(--ibd-display);
  font-size: 26px;
  color: var(--ibd-brown);
}
.ibd-header .wp-block-navigation__responsive-container-close { color: var(--ibd-brown); }

/* -- Tablet -------------------------------------------- */
@media (min-width: 720px) {
  .ibd-header { padding-block: 26px; }
  .ibd-header .wp-block-site-title a { font-size: 21px; }

  .ibd-header .wp-block-navigation__responsive-container-open { gap: 5px; }
  .ibd-header .wp-block-navigation__responsive-container-open::before,
  .ibd-header .wp-block-navigation__responsive-container-open::after { width: 24px; }

  /* Buiten Home krijgt de header een scheidingslijn. */
  body:not(.home) .ibd-header { border-bottom: 1px solid var(--ibd-line); }

  /* Op Home ligt de header op de scrim: merknaam en hamburger wit. */
  .home .ibd-header .wp-block-site-title a { color: var(--ibd-warm-white); }
  .home .ibd-header .wp-block-navigation__responsive-container-open::before,
  .home .ibd-header .wp-block-navigation__responsive-container-open::after {
    background: var(--ibd-warm-white);
  }
}

/* Core schakelt het overlay-menu standaard al op 600px uit; wij
   houden de hamburger aan tot 1024px, zoals in het ontwerp.      */
@media (min-width: 600px) and (max-width: 1279.98px) {
  /* Core voegt 'hidden-by-default' alleen toe bij overlayMenu "always",
     dus daar kunnen we niet op selecteren; de extra .wp-block-navigation
     geeft genoeg gewicht om core's eigen 600px-regel te overrulen. */
  .ibd-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
  .ibd-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* -- Desktop ------------------------------------------- */
@media (min-width: 1024px) {
  .ibd-header { padding-block: 34px; }
  .ibd-header .wp-block-site-title a { font-size: 24px; }
}

/* -- Horizontale navigatie -----------------------------
   Pas vanaf 1280px: de zes links plus de CTA-knop passen daar
   pas op een regel. De tussenruimte schaalt mee zodat het ook
   net boven de grens niet klemt.                            */
@media (min-width: 1280px) {
  .ibd-header__right { gap: clamp(22px, 2.65vw, 38px); }
  .ibd-header .ibd-header__cta { display: flex; }

  /* De hamburger verdwijnt; onze basisregel zet hem op flex. */
  .ibd-header .wp-block-navigation__responsive-container-open { display: none; }

  .ibd-header .wp-block-navigation__container { gap: clamp(22px, 2.65vw, 38px); flex-wrap: nowrap; }
  .ibd-header .wp-block-navigation a { font-size: 15px; white-space: nowrap; }

  /* De actieve pagina krijgt een onderlijn. */
  .ibd-header .current-menu-item > a {
    border-bottom: 1px solid var(--ibd-taupe);
    padding-bottom: 2px;
  }

  .ibd-header__cta .wp-block-button__link {
    padding: 13px 26px;
    font-size: 15px;
    white-space: nowrap;
  }

  /* Op Home staat de header op de hero: alles licht. */
  .home .ibd-header .wp-block-navigation a { color: var(--ibd-hero-sub); }
  .home .ibd-header .current-menu-item > a { color: var(--ibd-warm-white); }
  .home .ibd-header__cta .wp-block-button__link {
    background-color: var(--ibd-warm-white);
    color: var(--ibd-brown);
  }
}

/* == Hero ================================================
   Mobiel en tablet: verloop van onderaf, tekst onderin.
   Desktop: verloop naar rechts, tekst links, foto rechts vrij. */
/* core/cover is een flexrij: align-items regelt de verticale positie,
   niet justify-content. Met 'stretch' vult de inner container de hele
   hoogte en plakt de tekst bovenaan, achter de header. */
.ibd-hero.wp-block-cover {
  min-height: 500px;
  padding: 0;
  align-items: flex-end;
  justify-content: flex-start;
}

/* Het verloop staat in CSS, niet inline op het blok, zodat het per
   breakpoint kan wisselen van richting. Het zit op core's eigen
   overlay-span (zie patterns/hero.php), niet op een ::after van de
   cover zelf: een pseudo-element van .ibd-hero zou boven de inner
   container uitkomen en de tekst afdekken. */
/* De extra .wp-block-cover is nodig omdat core de overlay-span standaard
   op opacity .5 zet; de alfa-waarden uit het ontwerp zitten al in het
   verloop zelf. */
.ibd-hero.wp-block-cover > .ibd-hero__overlay { opacity: 1; }

.ibd-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(62, 54, 46, .9) 0%,
    rgba(62, 54, 46, .82) 55%,
    rgba(62, 54, 46, .5) 82%,
    rgba(62, 54, 46, 0) 100%
  );
}

/* De extra .wp-block-cover in de selector is nodig: core zet zelf
   z-index 1 op de inner container en laadt na deze stylesheet. Bij een
   gelijke z-index wint ::after op DOM-volgorde en ligt het verloop
   over de tekst heen. */
.ibd-hero.wp-block-cover > .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  padding: 56px var(--ibd-gutter) 34px;
  width: 100%;
}

.ibd-hero .ibd-kicker { color: var(--ibd-rose); margin-bottom: 14px; }

.ibd-hero h1 {
  font-size: 42px;
  line-height: 1.06;
  color: var(--ibd-warm-white);
  margin: 0;
}

.ibd-hero .ibd-hero__sub {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ibd-hero-sub);
  max-width: 30ch;
  margin-top: 14px;
}

.ibd-hero .wp-block-buttons { gap: 10px; }

/* De tweede, secundaire hero-knop bestaat pas vanaf tablet; op mobiel
   is Werkwijze & aanbod bereikbaar via het menu en de sticky balk. */
.ibd-hero .ibd-hero__alt { display: none; }

@media (min-width: 720px) {
  .ibd-hero.wp-block-cover { min-height: 620px; }

  .ibd-hero .ibd-hero__alt { display: block; }

  /* De knoppen staan naast elkaar in plaats van over de volle breedte. */
  .ibd-hero .ibd-btn-block .wp-block-button__link { display: inline-block; width: auto; }
  .ibd-hero .wp-block-button.has-custom-width { width: auto; }

  /* Losse scrim bovenin zodat de witte merknaam leesbaar blijft.
     Als pseudo van de overlay-span, zodat hij onder de tekst blijft. */
  .ibd-hero__overlay::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 150px;
    background: linear-gradient(to bottom, rgba(62, 54, 46, .62), rgba(62, 54, 46, 0));
  }

  .ibd-hero__overlay {
    background: linear-gradient(
      to top,
      rgba(62, 54, 46, .9) 0%,
      rgba(62, 54, 46, .8) 55%,
      rgba(62, 54, 46, .45) 82%,
      rgba(62, 54, 46, 0) 100%
    );
  }

  .ibd-hero .wp-block-cover__inner-container { padding: 70px var(--ibd-gutter) 48px; }
  .ibd-hero .ibd-kicker { margin-bottom: 18px; }
  .ibd-hero h1 { font-size: 58px; line-height: 1.04; }
  .ibd-hero .ibd-hero__sub { font-size: 18px; line-height: 1.6; max-width: 44ch; margin-top: 18px; }
  .ibd-hero .wp-block-buttons { gap: 12px; margin-top: 28px; }
  .ibd-hero .wp-block-button__link { padding: 16px 30px; font-size: 15px; }
}

@media (min-width: 1024px) {
  /* Tekst verticaal gecentreerd en links uitgelijnd; de foto blijft
     rechts vrij en de header loopt er overheen zonder overlap. */
  .ibd-hero.wp-block-cover {
    min-height: 760px;
    align-items: center;
  }

  /* Geen aparte scrim meer: het zijverloop dekt de header al af. */
  .ibd-hero__overlay::after { content: none; }

  .ibd-hero__overlay {
    background: linear-gradient(
      to right,
      rgba(62, 54, 46, .82) 0%,
      rgba(62, 54, 46, .66) 42%,
      rgba(62, 54, 46, .15) 72%,
      rgba(62, 54, 46, 0) 100%
    );
  }

  .ibd-hero .wp-block-cover__inner-container {
    padding: 70px var(--ibd-gutter) 0;
    max-width: 880px;
    margin-right: auto;
  }

  .ibd-hero .ibd-kicker { margin-bottom: 26px; }
  .ibd-hero h1 { font-size: 82px; line-height: 1.02; }
  .ibd-hero .ibd-hero__sub { font-size: 20px; max-width: 46ch; margin-top: 26px; }
  .ibd-hero .wp-block-buttons { gap: 14px; margin-top: 38px; }
  .ibd-hero .wp-block-button__link { padding: 18px 34px; font-size: 16px; }

  /* De hero-knoppen staan naast elkaar, niet over de volle breedte. */
  .ibd-hero .ibd-btn-block .wp-block-button__link { display: inline-block; width: auto; }
  .ibd-hero .wp-block-button.has-custom-width { width: auto; }
}

/* == Afsluitende CTA =====================================
   De kop is iets groter dan een gewone H2, de knop blijft
   op mobiel vol breed en krimpt vanaf tablet naar een pill. */
.ibd-cta__title { font-size: 32px; }

@media (min-width: 720px) {
  .ibd-cta__title { font-size: 42px; }
  .ibd-section--roomy .wp-block-buttons { justify-content: center; }
  .ibd-section--roomy .ibd-btn-block .wp-block-button__link { display: inline-block; width: auto; }
  .ibd-section--roomy .wp-block-button.has-custom-width { width: auto; }
}

@media (min-width: 1024px) {
  .ibd-cta__title { font-size: 56px; }
  .ibd-section--roomy .ibd-body { font-size: 19px; line-height: 1.7; }
  .ibd-section--roomy .wp-block-button__link { padding: 19px 42px; }
}

/* == Beeld =============================================== */
.ibd-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ibd-card-radius);
  display: block;
}
.ibd-figure--flush img { border-radius: 0; }

@media (min-width: 1024px) {
  .ibd-figure img { border-radius: 20px; }
}

/* Placeholder zolang de fotoshoot nog niet verwerkt is. */
.ibd-figure--empty {
  background: repeating-linear-gradient(135deg, #E0D3C0 0 14px, #E8DDCE 14px 28px);
  border-radius: var(--ibd-card-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 11px/1.6 var(--ibd-mono);
  color: var(--ibd-meta);
  letter-spacing: .08em;
  text-align: center;
  padding: 0 40px;
}

/* == Bulletlijst ========================================= */
.ibd-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ibd-bullets li {
  position: relative;
  padding-left: 17px;
  font-size: var(--wp--preset--font-size--secondary);
  line-height: 1.6;
}
.ibd-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ibd-taupe);
}
.ibd-section--dark .ibd-bullets li { font-size: var(--wp--preset--font-size--small); color: var(--ibd-on-dark); }
.ibd-section--dark .ibd-bullets li::before { width: 4px; height: 4px; top: 8px; }

/* Op tablet is de sectie eenkoloms, dus passen de bullets in twee kolommen. */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .ibd-bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
}

@media (min-width: 1024px) {
  .ibd-bullets { gap: 14px; }
  .ibd-bullets li { padding-left: 19px; }
  .ibd-bullets li::before { top: 11px; }
}

/* == Kaarten ============================================= */
.ibd-card {
  padding: var(--ibd-card-pad);
  border-radius: var(--ibd-card-radius);
  background: var(--ibd-card);
  border: 1px solid var(--ibd-sand);
}
/* Kaart binnen een donker vlak. */
.ibd-section--dark .ibd-card {
  background: rgba(250, 247, 242, .07);
  border-color: rgba(184, 164, 141, .35);
}
.ibd-card__meta {
  font-size: var(--wp--preset--font-size--kicker);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ibd-meta);
  margin-bottom: 10px;
}
.ibd-section--dark .ibd-card__meta { color: var(--ibd-rose); }
.ibd-card h3 { font-size: var(--wp--preset--font-size--heading-s); margin: 0 0 8px; }
.ibd-card p  { font-size: var(--wp--preset--font-size--secondary); line-height: 1.7; margin: 0; }

@media (min-width: 1024px) {
  .ibd-card p { line-height: 1.75; }
}

/* == Scheidingslijn ====================================== */
.ibd-rule { height: 1px; background: var(--ibd-line); border: 0; margin: 0; }
/* Op donkere vlakken (en in de footer) is de lijn taupe-transparant. */
.ibd-section--dark .ibd-rule,
.ibd-footer .ibd-rule { background: rgba(184, 164, 141, .3); }

/* == Reviews =============================================
   Mobiel citaten onder elkaar; vanaf tablet kaarten op zand. */
.ibd-quote { margin: 0; }
.ibd-quote p {
  font-family: var(--ibd-display);
  font-style: italic;
  font-size: var(--wp--preset--font-size--quote);
  line-height: 1.45;
  margin: 0;
  color: var(--ibd-brown);
}
.ibd-quote .ibd-quote__name {
  font-family: var(--ibd-sans);
  font-style: normal;
  margin-top: 10px;
  font-size: var(--wp--preset--font-size--meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ibd-meta);
}

/* Mobiel geen kaarten maar citaten met een scheidingslijn ertussen. */
.ibd-grid--2 > .ibd-quote + .ibd-quote {
  border-top: 1px solid var(--ibd-line);
  padding-top: var(--ibd-grid-gap);
}

@media (min-width: 720px) {
  .ibd-quote {
    background: var(--ibd-sand);
    border-radius: var(--ibd-card-radius);
    padding: var(--ibd-card-pad);
  }
  .ibd-quote .ibd-quote__name { margin-top: 16px; }
  /* In kaartvorm is de scheidingslijn overbodig. */
  .ibd-grid--2 > .ibd-quote + .ibd-quote { border-top: 0; padding-top: var(--ibd-card-pad); }
}

@media (min-width: 1024px) {
  .ibd-quote { padding: 40px; border-radius: 20px; }
  .ibd-quote .ibd-quote__name { margin-top: 20px; }
  .ibd-grid--2 > .ibd-quote + .ibd-quote { padding-top: 40px; }
}

/* == Sectiekop en gecentreerde knoppen ===================
   Op desktop staan de koppen van Aanbod en Reviews gecentreerd. */
@media (min-width: 1024px) {
  .ibd-section__title { text-align: center; }
}

.ibd-buttons--center { justify-content: stretch; }

@media (min-width: 720px) {
  .ibd-buttons--center { justify-content: center; }
  .ibd-buttons--center .ibd-btn-block .wp-block-button__link { display: inline-block; width: auto; }
  .ibd-buttons--center .wp-block-button.has-custom-width { width: auto; }
}

/* De tekstlink onder een accordeon of lijst krijgt wat lucht. */
.ibd-link-more--after { margin-top: 10px; }

/* == Pill-rij (Instagram / TikTok / Podcast, contact) =====
   De rij regelt de tussenruimte zelf met gap. WP's blockGap zou
   margin-block-start op elke volgende pill zetten, waardoor de tweede
   pill omlaag schuift zodra ze naast elkaar staan. */
.ibd-pill-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.ibd-pill-row > * { margin-block: 0; }

.ibd-pill-row a,
a.ibd-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--ibd-r-pill);
  background: var(--ibd-card);
  font-size: var(--wp--preset--font-size--secondary);
  font-weight: 600;
  color: var(--ibd-brown);
}
.ibd-pill__value { color: var(--ibd-meta); font-weight: 400; }

/* Op desktop staan de pills naast elkaar en vervalt de waarde rechts. */
@media (min-width: 1024px) {
  .ibd-pill-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }
  .ibd-pill-row a { padding: 15px 26px; font-size: 15px; }
}

/* == Accordeon (core/details) ============================ */
.ibd-accordion .wp-block-details {
  border-top: 1px solid var(--ibd-line);
  padding: 0;
}
.ibd-accordion .wp-block-details:last-child { border-bottom: 1px solid var(--ibd-line); }

.ibd-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--ibd-display);
  font-size: 24px;
}
.ibd-accordion summary::-webkit-details-marker { display: none; }

/* De samenvatting rechts uitgelijnd, daarachter het +/- teken. */
.ibd-accordion summary .ibd-acc__sum {
  flex: 1;
  font-family: var(--ibd-sans);
  font-size: var(--wp--preset--font-size--small);
  color: var(--ibd-meta);
  text-align: right;
}
.ibd-accordion summary::after {
  content: "+";
  color: var(--ibd-taupe);
  font-family: var(--ibd-sans);
  font-size: 17px;
  line-height: 1;
  width: 14px;
  text-align: right;
  flex: none;
}
.ibd-accordion .wp-block-details[open] > summary::after { content: "\2212"; }

.ibd-accordion .wp-block-details > :not(summary) { margin-block: 0; }
.ibd-accordion .wp-block-details[open] > :not(summary):last-child { padding-bottom: 20px; }

.ibd-acc__key  { font-size: var(--wp--preset--font-size--secondary); font-weight: 600; margin: 0 0 4px; }
.ibd-acc__desc { font-size: var(--wp--preset--font-size--secondary); line-height: 1.65; color: var(--ibd-clay); margin: 0 0 14px; }
.ibd-acc__desc:last-child { margin-bottom: 0; }

/* Vanaf tablet toont een open paneel de twee sleutels naast elkaar. */
@media (min-width: 720px) {
  .ibd-accordion .ibd-acc__panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .ibd-acc__desc { margin-bottom: 0; }
}

@media (min-width: 1024px) {
  .ibd-accordion .ibd-acc__panel { gap: 28px; }
}

@media (min-width: 1024px) {
  .ibd-accordion summary { padding: 26px 0; gap: 24px; font-size: 32px; }
  .ibd-accordion summary::after { font-size: 20px; width: 18px; }
  .ibd-accordion summary .ibd-acc__sum { font-size: 16px; }
  .ibd-accordion .wp-block-details[open] > :not(summary):last-child { padding-bottom: 26px; }
  .ibd-acc__key  { font-size: 17px; margin-bottom: 6px; }
  .ibd-acc__desc { font-size: 16px; line-height: 1.7; }
}

/* == Genummerde lijst (zes sleutels) ===================== */
.ibd-numbered { list-style: none; margin: 0; padding: 0; }
.ibd-numbered li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--ibd-line);
  font-size: 16px;
}
.ibd-numbered li::before {
  counter-increment: ibd-key;
  content: counter(ibd-key, decimal-leading-zero);
  font-family: var(--ibd-mono);
  font-size: 12px;
  color: var(--ibd-taupe);
  flex: none;
}
.ibd-numbered { counter-reset: ibd-key; }

@media (min-width: 1024px) {
  .ibd-numbered li { padding: 18px 0; font-size: 18px; }
  .ibd-numbered li::before { font-size: 13px; }
}

/* == Footer ==============================================
   Mobiel 1 kolom, tablet 3, desktop 4 + onderregel.        */
.ibd-footer {
  background: var(--ibd-brown);
  padding: 40px var(--ibd-gutter);
}

.ibd-footer__cols { display: grid; gap: 32px; }

.ibd-footer .wp-block-site-title a { font-size: 22px; color: var(--ibd-warm-white); }

/* Zonder deze regel erven de navigatielinks de bruine bodytekstkleur
   en vallen ze weg tegen de donkere footerachtergrond. */
.ibd-footer nav a,
.ibd-footer .wp-block-navigation a,
.ibd-footer .wp-block-navigation .wp-block-navigation-item__content {
  font-size: 14px;
  color: var(--ibd-on-dark);
}
.ibd-footer nav a:hover,
.ibd-footer .wp-block-navigation a:hover { color: var(--ibd-warm-white); }

.ibd-footer__label {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ibd-meta);
  margin: 0 0 4px;
}

.ibd-footer__tagline,
.ibd-footer__contact {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ibd-taupe);
  margin: 0;
}
.ibd-footer__contact { color: var(--ibd-on-dark); }

.ibd-footer__links { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.ibd-footer__links a { font-size: 14px; color: var(--ibd-on-dark); }

/* De footernavigatie staat onder elkaar, niet naast elkaar. */
.ibd-footer .wp-block-navigation__container {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.ibd-footer .wp-block-navigation__responsive-container-open { display: none; }

.ibd-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(184, 164, 141, .3);
}
.ibd-footer__bottom p {
  margin: 0;
  font-size: 13px;
  color: var(--ibd-meta);
}

@media (min-width: 720px) {
  .ibd-footer { padding: 56px var(--ibd-gutter); }
  .ibd-footer__cols { grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
  .ibd-footer .wp-block-site-title a { font-size: 24px; }
}

@media (min-width: 1024px) {
  .ibd-footer { padding: 80px var(--ibd-gutter) 56px; }
  .ibd-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 60px; }
  .ibd-footer .wp-block-site-title a { font-size: 30px; }
  .ibd-footer nav a,
  .ibd-footer__links a,
  .ibd-footer__tagline,
  .ibd-footer__contact { font-size: 15px; }
  .ibd-footer__tagline { line-height: 1.7; max-width: 34ch; }
  .ibd-footer__label { font-size: 11px; }
  .ibd-footer__bottom { margin-top: 56px; padding-top: 28px; }
}

/* == Sticky CTA-balk =====================================
   Alleen onder 1024px; desktop heeft de CTA in de header.  */
.ibd-ctabar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(250, 247, 242, .94);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--ibd-line);
  /* Schuift pas in beeld zodra de hero uit beeld is - zie assets/js/site.js. */
  transform: translateY(100%);
  transition: transform 220ms ease;
}
.ibd-ctabar.is-visible { transform: translateY(0); }

.ibd-ctabar .wp-block-buttons { flex: 1; gap: 10px; display: flex; align-items: stretch; }
.ibd-ctabar .wp-block-button { flex: 1; }
.ibd-ctabar .wp-block-button__link {
  /* Beide knoppen even hoog (48px) - de balk is een flexrij. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  width: 100%;
  text-align: center;
  padding: 14px;
  font-size: 14px;
}

/* WhatsApp-knop: alleen het icoon, de knoptekst blijft er voor screenreaders. */
.ibd-btn-wa.wp-block-button { flex: none; }
.ibd-btn-wa .wp-block-button__link {
  width: 52px;
  height: 48px;
  padding: 0;
  font-size: 0;
  background: transparent;
  border: 1px solid var(--ibd-border);
  color: var(--ibd-clay);
  position: relative;
}
.ibd-btn-wa .wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 21px;
  height: 21px;
  background: currentColor;
  -webkit-mask: var(--ibd-wa-icon) center / contain no-repeat;
  mask: var(--ibd-wa-icon) center / contain no-repeat;
}
.ibd-btn-wa .wp-block-button__link:hover { background: #F2EBE0; }

@media (min-width: 720px) {
  .ibd-ctabar { gap: 12px; padding: 14px var(--ibd-gutter); }
  .ibd-ctabar .wp-block-buttons { gap: 12px; }
  .ibd-ctabar .wp-block-button__link { min-height: 50px; padding: 15px; font-size: 15px; }
  .ibd-btn-wa .wp-block-button__link { width: 58px; height: 50px; padding: 0; }
  .ibd-btn-wa .wp-block-button__link::before { width: 22px; height: 22px; }
}

/* De balk verdwijnt pas als de CTA in de header verschijnt. */
@media (min-width: 1280px) {
  :root { --ibd-bar-h: 0px; }
  .ibd-ctabar { display: none; }
}

/* == Formulier =========================================== */
.ibd-form label,
.ibd-field__label {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ibd-meta);
  margin-bottom: 8px;
}
.ibd-form :where(input[type="text"], input[type="email"], input[type="tel"], textarea) {
  width: 100%;
  padding: 15px 16px;
  border-radius: var(--ibd-r-field);
  background: var(--ibd-card);
  border: 1px solid var(--ibd-line);
  font-family: var(--ibd-sans);
  font-size: 16px;
  color: var(--ibd-brown);
}
.ibd-form textarea { min-height: 110px; resize: vertical; }
.ibd-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  accent-color: var(--ibd-clay);
}

/* Op desktop staat het formulier in een zandkleurig blok. */
@media (min-width: 1024px) {
  .ibd-form--boxed {
    background: var(--ibd-sand);
    border-radius: 24px;
    padding: 48px;
  }
  .ibd-form :where(input, textarea) { padding: 16px 18px; }
  .ibd-form textarea { min-height: 140px; }
}

/* == Toegankelijkheid ==================================== */
:where(a, button, summary, input, textarea):focus-visible {
  outline: 2px solid var(--ibd-taupe);
  outline-offset: 2px;
}

/* Alleen voorleessoftware; blokthema's leveren deze class niet zelf. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ibd-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ibd-warm-white);
  color: var(--ibd-brown);
  font-size: 14px;
  font-weight: 600;
}
.ibd-skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}