/* De Korenschoof Texel — basisstijl */

/* Tekstletter: DM Sans (variabel, gewicht 100–1000; zelf gehost, OFL-licentie) */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-italic-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-italic-latin-ext.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Kopletter: Cormorant Garamond (variabel, gewicht 300–700; zelf gehost, OFL-licentie) */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Huisstijl: donker olijf voor tekst en links, olijfgroen voor knoppen, crème voor vlakken, geel uit het logo als accent */
  --color-green-dark: #33512b;
  --color-text: var(--color-green-dark);
  --color-bg: #ffffff;
  --color-brand: #6a8f3d;
  --color-brand-yellow: #e3a92f;
  --color-yellow-soft: #f7efd7; /* crème vlakken */
  --color-yellow-ink: #33512b;
  --color-accent: var(--color-green-dark);
  /* Tekst in DM Sans, titels in Cormorant Garamond */
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --container: 80rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* De Bootstrap van Tommy zet html { font-size: 10px }, waardoor alle rem-maten krimpen.
     :root weegt zwaarder dan html, dus dit wint ongeacht de laadvolgorde. */
  font-size: 100%;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); font-size: 1rem; color: var(--color-text); background: var(--color-bg); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

/* Typografie hangt aan classes, nooit aan de tag: zo verandert er niets als de redacteur een ander kopniveau kiest */
/* Koppen in Cormorant Garamond, zoals op de homepage */
:where(h1, h2, h3, h4) { font-family: var(--font-heading); font-weight: 600; letter-spacing: -.005em; }
.text-h1 { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 600; line-height: 1.05; margin: 0 0 1rem; }
.text-h2 { font-family: var(--font-heading); font-size: clamp(1.875rem, 3.5vw, 2.75rem); font-weight: 600; line-height: 1.1; margin: 0 0 1rem; }
/* Kort kopje boven een titel: in de titelletter, geen hoofdletters */
.text-eyebrow { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; text-transform: none; color: var(--color-accent); margin: 0 0 .375rem; }

/* Kopniveau kiesbaar in het panel: als kop (h1–h6) blijven deze er hetzelfde uitzien als gewone tekst */
:where(h1, h2, h3, h4, h5, h6):where(.text-eyebrow, .b-text__eyebrow, .b-page-header__eyebrow) { font-size: inherit; font-weight: inherit; }

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.button-row { margin: 1.5rem 0 0; }
.button { display: inline-block; padding: .75rem 1.5rem; border-radius: 999px; background: var(--color-accent); color: #fff; text-decoration: none; font-weight: 600; }

.b-page-header { padding: clamp(2rem, 5vw, 3.5rem) 0 2rem; }
.b-text { padding: clamp(2rem, 6vw, 4rem) 0; }

.b-page-header__grid,
.b-text__grid { display: grid; gap: 2rem; align-items: center; }

@media (min-width: 900px) {
  .b-page-header__grid,
  .b-text__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.text-h3 { font-family: var(--font-heading); font-size: 1.625rem; font-weight: 600; line-height: 1.2; margin: 0 0 .5rem; }
.button--secondary { background: transparent; color: var(--color-accent); box-shadow: inset 0 0 0 2px var(--color-accent); }
/* Een <button class="button"> ziet er hetzelfde uit als een link-knop (geen browserrand, zelfde letter) */
button.button { border: 0; font: inherit; font-weight: 600; line-height: inherit; cursor: pointer; }

.b-apartments { padding: clamp(2rem, 6vw, 4rem) 0; }
.b-apartments__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.b-apartments__card { display: flex; flex-direction: column; }
.b-apartments__img { border-radius: 1rem; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin-bottom: 1rem; }
.b-apartments__title a { color: inherit; text-decoration: none; }
.b-apartments__text { margin: 0 0 1rem; flex: 1; }
.b-apartments__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }

.b-tommy { padding: clamp(2rem, 6vw, 4rem) 0; }
/* Direct onder de paginakop (het stijlblad van Tommy staat er soms als <link> tussen): geen extra ruimte boven de widget */
.b-page-header + .b-tommy,
.b-page-header + link + .b-tommy { padding-top: 0; }

.b-text__figure { margin: 0; }
/* Links in lopende tekst: groen in plaats van standaardblauw */
.prose a { color: var(--color-accent); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s ease-out; }
.prose a:is(:hover, :focus) { color: #6a8f3d; }
/* Meerdere blokken "tekst met foto" na elkaar: de foto wisselt van kant (alleen naast elkaar, vanaf 900px) */
@media (min-width: 900px) {
  .b-text--media:nth-of-type(even) .b-text__figure { order: -1; }
}
.b-text--media + .b-text--media { padding-top: 0; }
/* In zo'n reeks dezelfde fotoverhouding, zodat de blokken even hoog ogen */
:is(.b-text--media + .b-text--media, .b-text--media:has(+ .b-text--media)) .b-text__img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Reviews van gasten (blok Reviews) */
.b-reviews { padding: 0 0 clamp(2.5rem, 6vw, 4.5rem); }
.b-reviews__inner { max-width: 52rem; }
.b-reviews__title { margin: 0 0 1.5rem; }
.b-reviews__stars { display: inline-flex; gap: .125rem; vertical-align: middle; }
.b-reviews__stars svg { fill: #dfe5df; }
.b-reviews__stars svg.is-on { fill: var(--color-brand-yellow); }
.b-reviews__stars--large svg { width: 1.5rem; height: 1.5rem; }
.b-reviews__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: 0 0 1.5rem; }
.b-reviews__score { display: flex; align-items: center; gap: .625rem; margin: 0; }
.b-reviews__score strong { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.b-reviews__count { margin: 0; color: #545e54; }
.b-reviews__filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.b-reviews__filters[hidden] { display: none; }
.b-reviews__filter { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.1rem; border: 0; border-radius: .4rem; background: transparent; box-shadow: inset 0 0 0 1.5px #6a8f3d; color: var(--color-text); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background-color .3s cubic-bezier(.22, 1, .36, 1), color .3s cubic-bezier(.22, 1, .36, 1); -webkit-tap-highlight-color: transparent; }
.b-reviews__filter span { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .375rem; border-radius: .3rem; background: #f7efd7; color: #33512b; font-size: .8125rem; font-weight: 600; }
.b-reviews__filter:is(:hover, :focus-visible) { background-color: #f7efd7; }
.b-reviews__filter[aria-pressed="true"] { background: linear-gradient(90deg, #3f9b45 0%, #6a8f3d 50%, #6a8f3d 100%) 100% 0 / 200% 100% no-repeat; background-color: #6a8f3d; box-shadow: none; color: #fff; }
.b-reviews__filter[aria-pressed="true"] span { background: rgb(255 255 255 / .22); color: #fff; }
.b-reviews__list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.b-reviews__item[hidden] { display: none; }
/* Reviews die er bij "Meer reviews" of een ander filter bij komen, komen zacht in beeld */
.b-reviews__item.is-entering { animation: b-reviews-in .45s cubic-bezier(.22, 1, .36, 1) backwards; }
.b-reviews__item.is-entering:nth-child(even) { animation-delay: .05s; }
@keyframes b-reviews-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .b-reviews__item.is-entering { animation: none; } }
.b-reviews__item article { padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: 1rem; background: #f7efd7; }
.b-reviews__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .375rem 1rem; }
.b-reviews__name { margin: 0; font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.b-reviews__name:focus { outline: none; }
.b-reviews__meta { margin: .25rem 0 .875rem; color: #545e54; font-size: .9375rem; }
.b-reviews__meta a { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.b-reviews__meta a:is(:hover, :focus) { color: #6a8f3d; text-decoration: none; }
.b-reviews__text { line-height: 1.65; overflow-wrap: anywhere; }
.b-reviews__more { margin: 1.5rem 0 0; text-align: center; }
.b-reviews__more[hidden] { display: none; }

/* Formulier "Plaats je review" */
.b-reviews__form { margin-top: clamp(2.5rem, 6vw, 4rem); padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 1rem; background: #f7efd7; color: #312504; scroll-margin-top: 1.5rem; }
.b-reviews__form-title { margin: 0 0 .5rem; }
.b-reviews__intro { margin: 0 0 1.5rem; }
.b-reviews__notice { margin: 0 0 1.5rem; padding: .875rem 1.125rem; border-radius: .75rem; font-weight: 600; }
.b-reviews__notice--ok { margin: 0; background: #fff; color: #6a8f3d; }
.b-reviews__notice--error { background: #fff; color: #9b1c1c; }
.b-reviews__fields { display: grid; gap: 1.25rem; }
.b-reviews__row { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .b-reviews__row { grid-template-columns: 1fr 1fr; } }
.b-reviews__field { display: grid; gap: .375rem; margin: 0; }
.b-reviews__field label, .b-reviews__rating legend { font-weight: 600; }
.b-reviews__field label span { color: #614902; font-weight: 400; }
.b-reviews__field :is(input, select, textarea) { width: 100%; min-height: 3rem; padding: .625rem 1rem; border: 1px solid #ced7cf; border-radius: .75rem; background: #fff; color: var(--color-text); font: inherit; }
/* Keuzelijst met een eigen pijltje, op dezelfde afstand van de rand als de tekst */
.b-reviews__field select { -webkit-appearance: none; appearance: none; padding-right: 3rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23123d1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 1.125rem; cursor: pointer; }
.b-reviews__field textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }
.b-reviews__field :is(input, select, textarea):focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgb(18 61 28 / .18); }
.has-error :is(input, select, textarea) { border-color: #b42318; }
.b-reviews__error { color: #9b1c1c; font-size: .9375rem; font-weight: 600; }
.b-reviews__rating { margin: 0; padding: 0; border: 0; }
.b-reviews__rating legend { margin-bottom: .375rem; padding: 0; }
/* Sterren kiezen: van rechts naar links in de HTML, zodat "deze en alles links ervan" met ~ te kleuren is */
.b-reviews__rating-stars { display: inline-flex; flex-direction: row-reverse; gap: .125rem; }
.b-reviews__rating-stars input { position: absolute; opacity: 0; pointer-events: none; }
.b-reviews__rating-stars label { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; cursor: pointer; }
.b-reviews__rating-stars svg { fill: #fff; stroke: #c9a227; stroke-width: 1.25; transition: fill .15s ease-out, transform .2s cubic-bezier(.22, 1, .36, 1); }
.b-reviews__rating-stars label:hover svg, .b-reviews__rating-stars label:hover ~ label svg,
.b-reviews__rating-stars input:checked ~ label svg { fill: var(--color-brand-yellow); }
.b-reviews__rating-stars label:hover svg { transform: scale(1.12); }
.b-reviews__rating-stars input:focus-visible + label { box-shadow: 0 0 0 3px rgb(18 61 28 / .3); }
.b-reviews__check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .25rem .75rem; margin: 0; }
.b-reviews__check input { width: 1.25rem; height: 1.25rem; margin: .125rem 0 0; accent-color: var(--color-accent); cursor: pointer; }
.b-reviews__check label { cursor: pointer; }
.b-reviews__check a { color: var(--color-accent); font-weight: 600; text-underline-offset: 3px; }
.b-reviews__check .b-reviews__error { grid-column: 2; }
.b-reviews__submit { margin: .25rem 0 0; }
@media (prefers-reduced-motion: reduce) { .b-reviews__rating-stars svg { transition: none; } }

/* Contactgegevens en kaart */
.b-contact { padding: 0 0 clamp(2.5rem, 6vw, 4.5rem); }
.b-contact__grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .b-contact__grid--map { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 4rem; align-items: start; } }
.b-contact__details { padding: 1.75rem; border-radius: 1rem; background: #f7efd7; color: var(--color-text); }
.b-contact__title { margin: 0 0 1rem; }
.b-contact__address { margin: 0 0 1.25rem; font-style: normal; font-size: 1.0625rem; line-height: 1.6; }
.b-contact__address strong { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; }
.b-contact__list { margin: 0; }
.b-contact__list > div { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: .75rem 0; border-top: 1px solid rgb(51 81 43 / .15); }
.b-contact__list dt { min-width: 5.5rem; font-weight: 600; }
.b-contact__list dd { margin: 0; }
.b-contact__list a { color: var(--color-accent); font-weight: 600; text-decoration: none; transition: color .2s ease-out; }
.b-contact__list a:is(:hover, :focus) { color: #6a8f3d; text-decoration: none; }
.b-contact__map { margin: 0; }
.b-contact__frame { position: relative; overflow: hidden; border-radius: 1rem; background: #dce4dd; aspect-ratio: 16 / 9; }
.b-contact__img { width: 100%; height: 100%; object-fit: cover; }
.b-contact__pin { position: absolute; left: 50%; top: 50%; width: 44px; height: 54px; transform: translate(-50%, -100%); filter: drop-shadow(0 3px 3px rgb(10 31 14 / .35)); }
.b-contact__credit { position: absolute; right: .375rem; bottom: .375rem; padding: .125rem .375rem; border-radius: 4px; background: rgb(255 255 255 / .8); color: #2a3d2d; font-size: .6875rem; }
.b-contact__credit a { color: inherit; }
.b-contact__caption { margin-top: 1rem; }
/* Foto in de kop van een pagina in de organische vorm van de homepage (vorm-foto.svg), met de gele swoosh erover */
.b-page-header__media { position: relative; }
.b-page-header__img { width: 100%; aspect-ratio: 484 / 393; object-fit: cover; -webkit-mask: url(../images/vorm-foto.svg) no-repeat center / 100% 100%; mask: url(../images/vorm-foto.svg) no-repeat center / 100% 100%; }
.b-page-header__media::after { content: ""; position: absolute; top: -12%; right: -4%; width: min(42%, 14rem); aspect-ratio: 348 / 277; background: url(../images/aar-swoosh.svg) no-repeat center / contain; pointer-events: none; }
.b-text__img { border-radius: 1rem; width: 100%; }

/* Doel van een ankerlink krijgt focus (voor toetsenbordgebruikers), maar geen zichtbare rand om een hele sectie */
[tabindex="-1"]:focus { outline: none; }

/* Alleen voor schermlezers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


.site-footer p { margin: 0; }

/* ==========================================================================
   Kopbalk: logo en hoofdmenu (snippets/header.php)
   Sticky, maar alleen in beeld na omhoog scrollen door de bezoeker (script in snippets/header.php). Scrollt de pagina
   vanzelf (Tommy naar zijn volgende stap, een ankerlink), dan blijft hij weg, zodat hij niets afdekt.
   ========================================================================== */

.skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 30; padding: .5rem 1rem; border-radius: .5rem; background: var(--color-text); color: #fff; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 1rem; }

.site-header { position: sticky; top: 0; z-index: 20; background: #fff; transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease-out; }
.site-header.is-stuck { box-shadow: 0 2px 10px rgb(27 36 28 / .08); }
.site-header.is-hidden { transform: translateY(calc(-100% - 12px)); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; }
.site-header__logo { display: block; flex: none; padding: .5rem 0; }
.site-header__logo img { width: auto; height: 3rem; }
.site-header__name { font-weight: 700; font-size: 1.25rem; color: var(--color-text); }

.site-nav__list,
.site-nav__sub { margin: 0; padding: 0; list-style: none; }
.site-nav__link,
.site-nav__sublink { color: var(--color-text); font-weight: 500; text-decoration: none; }
/* Ook bij hover geen onderstreping en geen blauw: de Bootstrap-stylesheet van Tommy (boekmodule op de appartementpagina's)
   onderstreept alle links bij hover en kleurt ze blauw */
.site-header a:is(:hover, :focus) { text-decoration: none; }
.site-nav__item:not(.is-active):not(.site-nav__item--button) > .site-nav__link:is(:hover, :focus),
.site-nav__sublink:not([aria-current]):is(:hover, :focus) { color: var(--color-text); }
.site-nav__link:focus-visible,
.site-nav__sublink:focus-visible,
.site-nav__sub-toggle:focus-visible,
.site-nav__toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: .375rem; }
/* "Reserveren" in het menu: logogeel met donkerbruine tekst (8,1:1), net als de Reserveren-knoppen op de appartementpagina */
.site-nav__item--button > .site-nav__link { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; border-radius: 999px; background: var(--color-accent); color: #fff; font-weight: 600; transition: background-color .2s ease-out; }
.site-nav__item--button > .site-nav__link:hover { background: var(--btn-fill-primary); }

.site-nav__sub-toggle { display: none; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: .375rem; background: none; color: inherit; cursor: pointer; }
.site-nav__sub-toggle svg { transition: transform .2s ease-out; }
.site-nav__sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Menu-item zonder eigen link: de tekst is zelf de knop voor het uitklapmenu */
.site-nav__label-toggle { display: inline-flex; align-items: center; gap: .25rem; border: 0; background: none; font: inherit; font-weight: 500; cursor: pointer; }
.site-nav__label-toggle svg { flex: none; transition: transform .2s ease-out; }
.site-nav__label-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Menuknop (mobiel) */
.site-nav__toggle { display: none; align-items: center; gap: .625rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid #ced7cf; border-radius: 999px; background: #fff; color: var(--color-text); font: inherit; font-weight: 600; cursor: pointer; }
.site-nav__toggle-icon,
.site-nav__toggle-icon span,
.site-nav__toggle-icon span::before,
.site-nav__toggle-icon span::after { display: block; width: 1.125rem; height: 2px; border-radius: 2px; }
.site-nav__toggle-icon { position: relative; height: .875rem; }
.site-nav__toggle-icon span { position: absolute; top: 50%; margin-top: -1px; background: currentColor; transition: background-color .2s ease-out; }
.site-nav__toggle-icon span::before,
.site-nav__toggle-icon span::after { content: ""; position: absolute; left: 0; background: currentColor; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.site-nav__toggle-icon span::before { transform: translateY(-6px); }
.site-nav__toggle-icon span::after { transform: translateY(6px); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon span { background: transparent; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon span::before { transform: rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon span::after { transform: rotate(-45deg); }

/* Knop(pen) in de balk naast de menuknop: alleen op mobiel en tablet; zelfde vorm als "Reserveren" in het menu */
.site-header__actions { display: flex; align-items: center; gap: .5rem; }
.site-header__cta { display: none; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.125rem; border-radius: 999px; background: var(--color-accent); color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.site-header__cta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* Desktop: menu naast het logo, subitems in een uitklapmenu */
@media (min-width: 64rem) {
  .site-header__inner { min-height: 5.5rem; }
  .site-header__logo img { height: 3.75rem; }
  .site-nav__list { display: flex; align-items: center; gap: .25rem; }
  .site-nav__item { position: relative; display: flex; align-items: center; }
  .site-nav__item:not(.site-nav__item--button) > .site-nav__link { position: relative; padding: .625rem .75rem; }
  .site-nav__item--parent > .site-nav__link:not(.site-nav__label-toggle) { padding-right: .125rem !important; }
  .site-nav__item--button { margin-left: .75rem; }
  /* Huidige pagina: groene streep onder de tekst */
  .site-nav__item:not(.site-nav__item--button) > .site-nav__link::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .25rem; height: 3px; border-radius: 3px; background: var(--color-brand-yellow); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
  .site-nav__item--parent > .site-nav__link:not(.site-nav__label-toggle)::after { right: .125rem; }
  /* Streep alleen onder de tekst, niet onder het pijltje */
  .site-nav__item--parent > .site-nav__label-toggle::after { right: calc(.75rem + 1.25rem); }
  .site-nav__item--parent:hover > .site-nav__label-toggle::after { transform: scaleX(1); }
  .site-nav__item:not(.site-nav__item--button) > .site-nav__link:hover::after,
  .site-nav__item.is-active:not(.site-nav__item--button) > .site-nav__link::after { transform: scaleX(1); }
  .site-nav__item.is-active:not(.site-nav__item--button) > .site-nav__link { color: var(--color-accent); }

  .has-js .site-nav__sub-toggle { display: inline-flex; }
  .site-nav__sub { position: absolute; top: 100%; left: 0; min-width: 14rem; padding: .5rem; border-radius: .75rem; background: #fff; box-shadow: 0 8px 24px rgb(27 36 28 / .14); opacity: 0; visibility: hidden; transform: translateY(-.25rem); transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s; }
  /* Open met de knop, of met de muis/het toetsenbord (ook zonder JavaScript) */
  .site-nav__sub-toggle[aria-expanded="true"] + .site-nav__sub,
  .site-nav__label-toggle[aria-expanded="true"] + .site-nav__sub,
  .site-nav__item--parent:hover > .site-nav__sub,
  .site-nav__item--parent:focus-within > .site-nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .site-nav__sublink { display: block; padding: .5rem .75rem; border-radius: .5rem; }
  .site-nav__sublink:hover { background: #ebf6ec; }
  .site-nav__sublink[aria-current="page"] { color: var(--color-accent); font-weight: 600; background: #ebf6ec; }

  /* Megamenu (appartementen): over de hele breedte onder de balk, met een kaart per appartement */
  .site-nav__item:has(> .site-nav__sub--mega) { position: static; }
  .site-nav__sub--mega {
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(var(--cards, 3), minmax(0, 1fr));
    gap: 1.25rem 2rem;
    padding: 2rem max(var(--gutter), (100% - var(--container)) / 2) 1.5rem;
    border-top: 1px solid #dce4dd;
    border-radius: 0 0 1.25rem 1.25rem;
    box-shadow: 0 12px 16px -8px rgb(27 36 28 / .14);
    transform: translateY(-.5rem);
    transition: opacity .2s ease-out, transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .2s;
  }
  /* Onzichtbare brug tussen het menu-item en het paneel, zodat het open blijft als de muis omlaag gaat */
  .site-nav__sub--mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.75rem; }
  .site-nav__card-link { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: 0; border-radius: 0; }
  .site-nav__card-link:hover,
  .site-nav__card-link[aria-current="page"] { background: none; }
  .site-nav__card-media { display: block; margin-bottom: .75rem; overflow: hidden; border-radius: .75rem; background: #ebf6ec; aspect-ratio: 16 / 10; }
  .site-nav__card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
  .site-nav__card-link:hover .site-nav__card-media img { transform: scale(1.04); }
  .site-nav__card-title { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--color-text); transition: color .2s ease-out; }
  .site-nav__card-link:hover .site-nav__card-title,
  .site-nav__card-link[aria-current="page"] .site-nav__card-title { color: var(--color-accent); }
  .site-nav__card-meta { font-size: .9375rem; font-weight: 600; color: var(--color-accent); }
  .site-nav__card-text { display: block; margin-top: .125rem; font-size: .9375rem; font-weight: 400; line-height: 1.5; color: #435046; }
  .site-nav__card-all { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding-top: .75rem; border-top: 1px solid #e6eee7; }
  .site-nav__card-all .site-nav__sublink { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem 0; font-weight: 600; color: var(--color-accent); }
  .site-nav__card-all .site-nav__sublink:hover { background: none; color: var(--color-accent); }
  .site-nav__card-all svg { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
  .site-nav__card-all .site-nav__sublink:hover svg { transform: translateX(3px); }
  /* Kaarten komen kort na elkaar binnen */
  .site-nav__sub--mega > li { opacity: 0; transform: translateY(.375rem); transition: opacity .25s ease-out, transform .35s cubic-bezier(.22, 1, .36, 1); }
  .site-nav__item--parent:is(:hover, :focus-within) > .site-nav__sub--mega > li,
  :is(.site-nav__sub-toggle, .site-nav__label-toggle)[aria-expanded="true"] + .site-nav__sub--mega > li { opacity: 1; transform: none; }
  .site-nav__sub--mega > li:nth-child(2) { transition-delay: .04s; }
  .site-nav__sub--mega > li:nth-child(3) { transition-delay: .08s; }
  .site-nav__sub--mega > li:nth-child(n+4) { transition-delay: .12s; }
}

/* Mobiel en tablet: menuknop met een paneel onder de balk */
@media (max-width: 63.99rem) {
  .has-js .site-nav__toggle { display: inline-flex; }
  /* "Reserveren" staat nu in de balk; in het paneel niet nog een keer */
  .has-js .site-header__cta { display: inline-flex; }
  .has-js .site-nav__item--button { display: none; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - 4.5rem); overflow-y: auto; padding: .5rem var(--gutter) 1.5rem; border-radius: 0 0 1.25rem 1.25rem; background: #fff; box-shadow: 0 8px 24px rgb(10 31 14 / .2); }
  /* Openen en sluiten zoals het venster "Boek nu": het paneel schuift omlaag, de pagina erachter wordt donker
     en de menu-items komen er kort daarna in. Sluiten loopt dezelfde weg terug. */
  .has-js .site-nav { visibility: hidden; clip-path: inset(0 0 100% 0 round 0 0 1.25rem 1.25rem); transition: clip-path .4s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .4s; }
  .nav-open .site-nav { visibility: visible; clip-path: inset(0 0 -2rem 0 round 0 0 1.25rem 1.25rem); transition-delay: 0s; }
  .has-js .site-nav__list { opacity: 0; transform: translateY(-.5rem); transition: opacity .3s ease-out, transform .4s cubic-bezier(.22, 1, .36, 1); }
  .nav-open .site-nav__list { opacity: 1; transform: none; transition-delay: .12s; }
  body::after { content: ""; position: fixed; inset: 0; z-index: 19; background: rgb(10 31 14 / .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease-out, visibility 0s linear .3s; }
  .nav-open body::after { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .site-nav__item { border-bottom: 1px solid #e6eee7; }
  /* Grote, rustige items in de serif van de koppen */
  .site-nav__link { display: block; padding: 1rem 0; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
  /* Op mobiel staan de subitems altijd open: de tekst is dan gewoon een kopje boven de lijst */
  .site-nav__label-toggle { display: flex; width: 100%; color: var(--color-text); text-align: left; pointer-events: none; }
  .site-nav__label-toggle svg { display: none; }
  .site-nav__item.is-active:not(.site-nav__item--button) > .site-nav__link,
  .site-nav__sublink[aria-current="page"] { color: var(--color-accent); font-weight: 600; }
  .site-nav__sub { padding: 0 0 1rem 1rem; }
  .site-nav__sublink { display: block; padding: .5rem 0; font-size: 1.1875rem; color: #435046; }
  /* Megamenu op mobiel: gewoon een lijst met de namen (en het aantal personen) */
  .site-nav__card-media, .site-nav__card-text, .site-nav__card-all { display: none; }
  .site-nav__card-meta { margin-left: .5rem; font-size: .875rem; color: #5b675d; }
  /* Appartementen (item zonder eigen link): geen kopje, de appartementen zelf zijn grote menu-items */
  .site-nav__item--parent:has(> .site-nav__label-toggle) { border-bottom: 0; }
  .site-nav__item--parent > .site-nav__label-toggle { display: none; }
  .site-nav__item--parent:has(> .site-nav__label-toggle) > .site-nav__sub { padding: 0; }
  .site-nav__item--parent:has(> .site-nav__label-toggle) > .site-nav__sub > li { border-bottom: 1px solid #e6eee7; }
  .site-nav__item--parent:has(> .site-nav__label-toggle) .site-nav__sublink { display: flex; align-items: baseline; padding: 1rem 0; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; color: var(--color-text); }
  .site-nav__item--parent:has(> .site-nav__label-toggle) .site-nav__card-title { font: inherit; }
  .site-nav__item--parent:has(> .site-nav__label-toggle) .site-nav__card-meta { margin-left: .625rem; font-family: var(--font-body); font-size: .9375rem; font-weight: 500; letter-spacing: 0; }
  .site-nav__item--button { border-bottom: 0; padding-top: 1rem; }
  .site-nav__item--button > .site-nav__link { justify-content: center; width: 100%; padding: .875rem 1.25rem; }
  .site-header__inner { min-height: 4.5rem; }
}
/* Heel smalle schermen: menuknop alleen met icoon (het woord "Menu" blijft voor schermlezers) */
.site-cta-icon { flex: none; }
.site-cta-ring { display: none; }
/* Menuknop: alleen het icoon in een ronde knop; "Menu" blijft voor schermlezers */
.site-nav__toggle { justify-content: center; width: 2.75rem; padding: 0; }
.site-nav__toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  /* Mobiel menu zonder beweging: alleen in- en uitfaden */
  @media (max-width: 63.99rem) {
    .has-js .site-nav { clip-path: none !important; opacity: 0; transition: opacity .2s ease-out, visibility 0s linear .2s !important; }
    .nav-open .site-nav { opacity: 1; transition-delay: 0s !important; }
    .has-js .site-nav__list { transform: none !important; }
  }
  .site-nav__sub, .site-nav__sub--mega > li, .site-nav__label-toggle svg, .site-nav__card-media img, .site-nav__sub-toggle svg, .site-nav__toggle-icon span, .site-nav__toggle-icon span::before, .site-nav__toggle-icon span::after, .site-nav__link::after { transition: none !important; }
}

/* ==========================================================================
   Knoppen: gedeelde basis (de opmaak van de groene en omlijnde knoppen staat onderaan dit bestand).
   Klik: even indrukken. Geen onderstreping, geen focusrand na een muisklik (wel met Tab).
   ========================================================================== */
:root { --btn-ease: cubic-bezier(.22, 1, .36, 1); --btn-fill-primary: #6a8f3d; --btn-fill-soft: #f7efd7; }
body :is(.button, .site-nav__item--button > .site-nav__link, .site-header__cta, .site-nav__toggle, .booking-overlay__close, .apt-card__button, .apt-hero__all, .apt-map__route, .apt-photos__close, .apt-viewer__nav, .apt-viewer__back) {
  position: relative;
  text-decoration: none;
  transition: transform .2s var(--btn-ease), background-color .3s var(--btn-ease), border-color .3s var(--btn-ease), color .3s var(--btn-ease), box-shadow .3s var(--btn-ease);
  -webkit-tap-highlight-color: transparent;
}
body :is(.button, .site-nav__item--button > .site-nav__link, .site-header__cta, .site-nav__toggle, .booking-overlay__close, .apt-card__button, .apt-hero__all, .apt-map__route, .apt-photos__close, .apt-viewer__nav, .apt-viewer__back):hover { text-decoration: none; }
body :is(.site-nav__item--button > .site-nav__link, .site-header__cta):hover { color: #fff; }
body .site-nav__toggle:hover { border-color: #a4b0a6; }
body :is(.button, .site-nav__item--button > .site-nav__link, .site-header__cta, .site-nav__toggle, .booking-overlay__close, .apt-card__button, .apt-hero__all, .apt-map__route, .apt-photos__close, .apt-viewer__nav, .apt-viewer__back):active { transform: scale(.96); transition-duration: .1s; }
/* Pijltjes in knoppen schuiven bij hover mee (vorige naar links) */
body :is(.button, .apt-card__button, .apt-map__route, .apt-viewer__nav) :is(svg, .icon) { transition: transform .35s var(--btn-ease); }
/* Pijltjes schuiven mee bij hover; vaste iconen (zoals de kalender in "Boek nu") niet: class "icon-static" */
body :is(.button, .apt-card__button):hover :is(svg, .icon):not(.icon-static) { transform: translateX(3px); }
body .booking-overlay__close svg { transition: transform .45s var(--btn-ease); }
body .booking-overlay__close:hover svg { transform: rotate(90deg); }
/* Focus: niets na een muisklik, wel een duidelijke rand met het toetsenbord */
body :is(.button, .site-nav__item--button > .site-nav__link, .site-header__cta, .site-nav__toggle, .booking-overlay__close, .apt-card__button, .apt-hero__all, .apt-map__route, .apt-photos__close, .apt-viewer__nav, .apt-viewer__back):focus:not(:focus-visible) { outline: none; }
body :is(.button, .site-nav__item--button > .site-nav__link, .site-header__cta, .site-nav__toggle, .booking-overlay__close, .apt-card__button, .apt-hero__all, .apt-map__route, .apt-photos__close, .apt-viewer__nav, .apt-viewer__back):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  body :is(.button, .site-nav__item--button > .site-nav__link, .site-header__cta, .site-nav__toggle, .booking-overlay__close, .apt-card__button, .apt-hero__all, .apt-map__route, .apt-photos__close, .apt-viewer__nav, .apt-viewer__back), body :is(.button, .site-nav__item--button > .site-nav__link, .site-header__cta, .site-nav__toggle, .booking-overlay__close, .apt-card__button, .apt-hero__all, .apt-map__route, .apt-photos__close, .apt-viewer__nav, .apt-viewer__back):hover { transition: background-color .2s, border-color .2s, color .2s; transform: none !important; }
  body :is(.button, .site-nav__item--button > .site-nav__link, .site-header__cta, .site-nav__toggle, .booking-overlay__close, .apt-card__button, .apt-hero__all, .apt-map__route, .apt-photos__close, .apt-viewer__nav, .apt-viewer__back) :is(svg, .icon), body .apt-map__route::after { transform: none !important; }
}

/* ==========================================================================
   Overlay "Reserveren" (snippets/foot.php): paneel van boven met de zoekbalk van Tommy.
   Geen <dialog>: de datumkiezer van Tommy staat los in <body> en zou dan achter het paneel vallen.
   ========================================================================== */
.booking-overlay { position: fixed; inset: 0; z-index: 40; visibility: hidden; transition: visibility 0s linear .4s; }
.booking-overlay.is-open { visibility: visible; transition-delay: 0s; }
.booking-overlay__backdrop { position: absolute; inset: 0; background: rgb(10 31 14 / .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease-out; }
.booking-overlay.is-open .booking-overlay__backdrop { opacity: 1; }
.booking-overlay__panel {
  position: relative;
  max-height: 100dvh;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(.75rem, 2vw, 1.5rem);
  border-radius: 0 0 1.25rem 1.25rem;
  background: #fff;
  box-shadow: 0 8px 24px rgb(10 31 14 / .2);
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.booking-overlay.is-open .booking-overlay__panel { transform: none; }
.booking-overlay__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.booking-overlay__title { margin: 0; font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.booking-overlay__close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid #ced7cf; border-radius: 50%; background: #fff; color: var(--color-text); cursor: pointer; transition: transform .25s var(--btn-ease), background-color .2s var(--btn-ease), box-shadow .25s var(--btn-ease); }
.booking-overlay__close:focus:not(:focus-visible) { outline: none; }
.booking-overlay__close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.booking-overlay .b-tommy { padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 1.25rem; }
/* Het paneel komt van boven; de inhoud schuift er met een kleine vertraging achteraan */
.booking-overlay .booking-overlay__head,
.booking-overlay .b-tommy { opacity: 0; transform: translateY(-.5rem); transition: opacity .3s ease-out .12s, transform .4s cubic-bezier(.22, 1, .36, 1) .12s; }
.booking-overlay.is-open .booking-overlay__head,
.booking-overlay.is-open .b-tommy { opacity: 1; transform: none; }
.booking-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .booking-overlay__panel, .booking-overlay .booking-overlay__head, .booking-overlay .b-tommy { transform: none !important; transition: opacity .2s ease-out; }
  .booking-overlay__panel { opacity: 0; }
  .booking-overlay.is-open .booking-overlay__panel { opacity: 1; }
}
/* In de overlay duwt de lijst met personen het paneel open (in plaats van eroverheen te zweven en afgesneden te worden) */
/* Alleen als de zoekbalk gestapeld staat (smal scherm, < 600px, zie tommy.css): daar is het paneel scrollbaar en zou hij worden afgesneden */
@media (max-width: 599px) {
  .booking-overlay tommy-person-category-mini { display: flex !important; flex-direction: column; }
  .booking-overlay .tommy-zeb-person-category-list { position: static !important; order: 1; width: auto !important; }
  /* De lijst staat hier in de stroom: hoogte mee laten vouwen, anders springen de velden eronder op het eind omhoog.
     --ks-list-h is de gemeten hoogte (script in snippets/blocks/tommy-search.php). */
  .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list {
    overflow: hidden;
    max-height: var(--ks-list-h, 16rem);
    transition: opacity .2s ease-in, transform .25s ease-in, max-height .3s cubic-bezier(.4, 0, .2, 1), margin-top .3s cubic-bezier(.4, 0, .2, 1), padding .3s cubic-bezier(.4, 0, .2, 1), border-width .3s cubic-bezier(.4, 0, .2, 1), display .3s allow-discrete;
  }
  .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list.ng-hide { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
  .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list:not(.ng-hide) { animation: ks-persons-open .38s cubic-bezier(.22, 1, .36, 1) backwards, ks-persons-grow .4s cubic-bezier(.22, 1, .36, 1) backwards; }
}
@keyframes ks-persons-grow { from { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } }
/* Breder: de lijst zweeft onder het veld, zoals elders op de site; het paneel snijdt dan niets af */
@media (min-width: 600px) {
  .booking-overlay__panel { overflow: visible; max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list { transition: none; animation: none; }
}

/* Geen focusrand om knoppen en links, ook niet bij toetsenbordgebruik (wens van de klant).
   Staat bewust onderaan en met !important, zodat het ook de focusregels van Tommy en de blokken overschrijft. */
:is(a, button, summary, [role="button"], input[type="button"], input[type="submit"], .tbs-btn, .tommy-zeb-btn):is(:focus, :focus-visible) { outline: none !important; }
:is(button, [role="button"], input[type="button"], input[type="submit"], .tbs-btn, .tommy-zeb-btn, .ks-result-info):not(.button--secondary):is(:focus, :focus-visible, :active:focus) { box-shadow: none !important; }

/* ==========================================================================
   Pijltjes in knoppen en links: bij hover schuift het pijltje zacht een stukje in zijn eigen richting
   (schuin ↗ naar rechtsboven, recht → naar rechts), overal met dezelfde rustige overgang.
   ========================================================================== */
:is(body:has(.hvb) :is(.site-nav__item--button > .site-nav__link, .site-header__cta), .hvc-search tommy-confirm-update .tommy-zeb-btn, body .apt-map__route)::after,
.hvb-card__arrow, .hv-trip__ext svg, .hv-link::after,
body :is(.button, .apt-card__button) :is(svg, .icon):not(.icon-static),
.site-nav__card-all .site-nav__sublink svg,
.b-tommy #TommyBookingSupport .tbs-btn :is(.tbs-glyphicon-chevron-right, .tbs-glyphicon-arrow-right, .tbs-glyphicon-chevron-left, .tbs-glyphicon-arrow-left) {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.hv-link::after { display: inline-block; }
/* Pijltjes die als masker (::after) getekend zijn: op een eigen laag, anders verspringen ze per pixel tijdens het schuiven */
:is(body:has(.hvb) :is(.site-nav__item--button > .site-nav__link, .site-header__cta), .hvc-search tommy-confirm-update .tommy-zeb-btn, body .apt-map__route)::after { will-change: transform; backface-visibility: hidden; }
/* Schuine pijltjes (↗) */
body:has(.hvb) :is(.site-nav__item--button > .site-nav__link, .site-header__cta):is(:hover, :focus-visible)::after,
.hvc-search:hover tommy-confirm-update .tommy-zeb-btn::after,
.hvb-card:is(:hover, :focus-visible) .hvb-card__arrow,
.hv-trip__ext:is(:hover, :focus-visible) svg,
body .apt-map__route:is(:hover, :focus-visible)::after { transform: translate(3px, -3px); }
/* Rechte pijltjes (→ en ←) */
body :is(.button, .apt-card__button):is(:hover, :focus-visible) :is(svg, .icon):not(.icon-static),
.site-nav__card-all .site-nav__sublink:is(:hover, :focus-visible) svg,
.hv-link:is(:hover, :focus-visible)::after,
.b-tommy #TommyBookingSupport .tbs-btn:hover :is(.tbs-glyphicon-chevron-right, .tbs-glyphicon-arrow-right) { transform: translateX(4px); }
.b-tommy #TommyBookingSupport .tbs-btn:hover :is(.tbs-glyphicon-chevron-left, .tbs-glyphicon-arrow-left) { transform: translateX(-4px); }
@media (prefers-reduced-motion: reduce) {
  .hvb-card__arrow, .hv-trip__ext svg, body :is(.button, .apt-card__button) :is(svg, .icon), .site-nav__card-all svg, .b-tommy [class*="tbs-glyphicon"],
  body :is(.site-nav__item--button > .site-nav__link, .site-header__cta, .hv-link, .apt-map__route, .tommy-zeb-btn)::after { transition: none !important; }
}

/* Footer op alle pagina's: wit, logo met tekst links, drie kolommen rechts, onderbalk met juridische links */
.site-footer--b { padding: clamp(3.5rem, 7vw, 6rem) 0 2.75rem; background: #fff; color: #33512b; font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1rem; }
.site-footer--b a { color: inherit; text-decoration: none; }
.site-footer--b a:hover { color: #6a8f3d; text-decoration: none; }
.site-footer__top { display: grid; gap: 2.5rem; padding-bottom: clamp(2.5rem, 4vw, 3.25rem); border-bottom: 1px solid rgb(51 81 43 / .18); }
@media (min-width: 900px) { .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.site-footer__logo img { display: block; width: auto; height: 4.75rem; }
.site-footer__brand p { margin: 1.5rem 0 0; line-height: 1.6; }
.site-footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 2rem; }
.site-footer__heading { margin: 0 0 1rem; letter-spacing: normal; line-height: inherit; color: #6a8f3d; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.1875rem; font-weight: 600; }
.site-footer__col ul { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.site-footer--b .site-footer__book { display: inline-flex; align-items: center; gap: 1.5rem; min-height: 3.25rem; padding: .75rem 1.5rem; border-radius: .4rem; background: #74944a; color: #fff; font-size: .9375rem; }
.site-footer--b .site-footer__book::after { content: ""; width: .9rem; height: .9rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.site-footer--b .site-footer__book:is(:hover, :focus-visible) { background: #6a8f3d; color: #fff; }
.site-footer--b .site-footer__book:is(:hover, :focus-visible)::after { transform: translate(3px, -3px); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-top: 2.25rem; font-size: .8125rem; }
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.site-footer--b .site-footer__bottom p a, .site-footer--b .site-footer__legal li:last-child a { text-decoration: underline; text-underline-offset: 2px; }
/* Meer ruimte onder de kopjes in de footer (.site-footer p zette de marge op 0) */
.site-footer .site-footer__heading { margin: 0 0 1.25rem; font-family: "Cormorant Garamond", Georgia, serif; }
/* Tablet en kleine laptop: iets meer ruimte links en rechts */
@media (min-width: 640px) and (max-width: 1199px) { :root { --gutter: clamp(2.5rem, 6.5vw, 4.5rem); } }

/* ==== Knoppen, overal gelijk aan de homepage ====
   Groen: olijf met het groene verloop dat bij hover inschuift; omlijnd: olijfgroene rand, crème bij hover.
   Allebei met het schuine pijltje dat bij hover iets meeschuift. */
:root { --btn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
body :is(.button, .apt-map__route, .b-tommy #TommyBookingSupport .tbs-btn-success) {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 2.75rem; height: auto;
  padding: 0 1.35rem; border: 0; border-radius: .4rem; font-family: var(--font-body); font-size: .9375rem; font-weight: 600; line-height: 1.2; text-decoration: none; }
body :is(.button:not(.button--secondary), .b-tommy #TommyBookingSupport .tbs-btn-success, .b-tommy #TommyBookingSupport .tbs-btn-success:focus) {
  background: linear-gradient(90deg, #3f9b45 0%, #6a8f3d 50%, #6a8f3d 100%) 100% 0 / 200% 100% no-repeat; background-color: #6a8f3d; color: #fff; box-shadow: none;
  transition: background-position .5s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1); }
body :is(.button:not(.button--secondary), .b-tommy #TommyBookingSupport .tbs-btn-success):is(:hover, :focus-visible) { background-position: 0 0; background-color: #6a8f3d; color: #fff; }
body :is(.button--secondary, .apt-map__route) { background: transparent; box-shadow: inset 0 0 0 1.5px #6a8f3d; color: var(--color-text); transition: background-color .3s cubic-bezier(.22, 1, .36, 1); }
body :is(.button--secondary, .apt-map__route):is(:hover, :focus-visible) { background-color: #f7efd7; color: var(--color-text); }
/* Op het groene vlak (appartementen): witte knop met donkere tekst, zoals "Alle ervaringen" op de homepage */
body .apt-band .apt-map__route { background: #fff; box-shadow: none; color: var(--color-text); }
body .apt-band .apt-map__route:is(:hover, :focus-visible) { background: #f7efd7; border-color: transparent; color: var(--color-text); }
body :is(.button, .apt-map__route, .b-tommy #TommyBookingSupport .tbs-btn-success)::before { display: none; }
body :is(.button, .apt-map__route, .b-tommy #TommyBookingSupport .tbs-btn-success)::after {
  content: ""; position: static; display: block; flex: none; width: .85rem; height: .85rem; margin: 0; border: 0; background: currentColor; opacity: 1; transform: none;
  -webkit-mask: var(--btn-arrow) no-repeat center / contain; mask: var(--btn-arrow) no-repeat center / contain; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
body :is(.button, .apt-map__route, .b-tommy #TommyBookingSupport .tbs-btn-success):is(:hover, :focus-visible)::after { transform: translate(3px, -3px); }
/* Tommy's eigen pijltje naar rechts in de groene knoppen weg: het schuine pijltje vervangt hem */
.b-tommy #TommyBookingSupport .tbs-btn-success :is(.tbs-glyphicon-chevron-right, .tbs-glyphicon-arrow-right) { display: none; }
@media (prefers-reduced-motion: reduce) { body :is(.button, .apt-map__route, .b-tommy #TommyBookingSupport .tbs-btn-success), body :is(.button, .apt-map__route, .b-tommy #TommyBookingSupport .tbs-btn-success)::after { transition: none; } }
/* Footer op mobiel compacter */
@media (max-width: 639px) {
  .site-footer.site-footer--b { padding-top: 2.25rem; }
  .site-footer__top { gap: 1.75rem; padding-bottom: 1.75rem; }
  .site-footer__logo img { height: 3.75rem; }
  .site-footer .site-footer__brand p { margin-top: 1rem; }
  .site-footer__nav { gap: 1.5rem; }
  .site-footer .site-footer__heading { margin-bottom: .75rem; }
  .site-footer__col ul { gap: .5rem; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: .75rem; padding-top: 1.5rem; }
  /* Copyright onderaan, onder de juridische links */
  .site-footer__bottom > p { order: 2; }
}
/* Contactgegevens in de paginakop (contact zonder kaart): onder de tekst, naast de foto */
.b-page-header__body .b-contact__details { margin-top: 2rem; max-width: 30rem; }
.b-contact__intro { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgb(51 81 43 / .15); }
.b-contact__intro p { margin: 0; }
/* Paginakop met foto onder elkaar (onder 900 breed): foto eerst, foto en tekstblok even breed en op één lijn */
@media (max-width: 899px) {
  .b-page-header__grid { justify-items: center; }
  .b-page-header__media { order: -1; width: min(100%, 30rem); }
  .b-page-header__grid > .b-page-header__body { width: min(100%, 30rem); }
  .b-page-header__body .b-contact__details { max-width: none; }
}
/* Titel in het contactvlak */
body.theme-b .b-contact__details .b-page-header__title { margin: 0 0 1rem; font-size: clamp(2.5rem, 4.5vw, 3.5rem); }

/* ==== Leespagina (spelregels, privacystatement): crème kop, inhoudsopgave links, tekst in een rustige kolom ==== */
.doc__head .b-page-header { position: relative; overflow: hidden; margin: .75rem clamp(1.25rem, 5.2vw, 5.5rem) 0; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); border-radius: 1rem; background: #f7efd7; }
@media (min-width: 640px) and (max-width: 1199px) { .doc__head .b-page-header { margin-inline: var(--gutter); } }
.doc__head .b-page-header::after { content: ""; position: absolute; top: -1.5rem; right: clamp(1rem, 8vw, 7rem); width: clamp(8rem, 18vw, 15rem); aspect-ratio: 348 / 277; background: url(../images/aar-swoosh.svg) no-repeat center / contain; pointer-events: none; }
.doc__head .b-page-header > .container { width: min(100% - 2 * clamp(1.25rem, 4vw, 3.5rem), 72rem); }
.doc__head .b-page-header__body { max-width: 40rem; }
.doc__head .b-page-header__text { margin-top: .75rem; font-size: 1.0625rem; line-height: 1.7; }
.doc__grid { display: grid; gap: 2rem 4rem; width: min(100% - 2 * var(--gutter), 72rem); padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3.5rem, 7vw, 6rem); }
/* livegang 05-11: smalle schermen — kolom mag niet breder worden dan het scherm (lange woorden in de inhoudsopgave) */
.doc__grid { grid-template-columns: minmax(0, 1fr); } .doc__toc a, .doc a { overflow-wrap: anywhere; }
@media (min-width: 900px) { .doc__grid { grid-template-columns: 15rem minmax(0, 42rem); justify-content: center; } }
/* Inhoudsopgave: loopt mee op desktop, inklapbaar op mobiel */
.doc__toc-box { padding: 1.25rem 1.25rem 1rem; border-radius: .75rem; background: #f7efd7; }
@media (min-width: 900px) { .doc__toc { position: sticky; top: calc(89px + 1.5rem); align-self: start; } .doc__toc-box { padding: 0; background: none; } .doc__toc-title { pointer-events: none; } .doc__toc-title::after { display: none; } }
.doc__toc-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; color: #6a8f3d; font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; list-style: none; cursor: pointer; }
.doc__toc-title::-webkit-details-marker { display: none; }
.doc__toc-title::after { content: ""; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.doc__toc-box[open] .doc__toc-title::after { transform: rotate(180deg); }
.doc__toc ol { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.doc__toc a { display: block; padding: .4rem 0 .4rem .9rem; border-left: 2px solid rgb(51 81 43 / .15); color: var(--color-text); font-size: .9375rem; line-height: 1.35; text-decoration: none; transition: color .2s, border-color .2s; }
.doc__toc a:hover { color: #6a8f3d; }
.doc__toc a.is-current { border-left-color: #6a8f3d; color: #33512b; font-weight: 600; }
/* Tekst */
.doc__part { scroll-margin-top: calc(89px + 1.5rem); }
.doc__part .b-text { padding: 0; }
.doc__part .b-text > .container { width: auto; }
.doc__part + .doc__part { margin-top: clamp(2rem, 4vw, 2.75rem); padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid rgb(51 81 43 / .12); }
.doc__part .b-text__title { margin-bottom: .875rem; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; text-wrap: balance; }
.doc__part .prose { font-size: 1rem; line-height: 1.75; }
.doc__part .prose p { margin: 0 0 1rem; }
.doc__part .prose ul { margin: 0 0 1rem; padding: 0; list-style: none; }
.doc__part .prose li { position: relative; margin: 0 0 .5rem; padding-left: 1.5rem; }
.doc__part .prose li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: .45rem; height: .45rem; border-radius: 50% 0; background: #6a8f3d; transform: rotate(-45deg); }
.doc__part .prose strong { font-weight: 600; }
/* Titel in de kop gelijk met de inhoudsopgave eronder (15rem + 4rem + 42rem) */
@media (min-width: 900px) { .doc__head .b-page-header > .container { width: min(100% - 2 * clamp(1.25rem, 4vw, 3.5rem), 61rem); } }
.doc__toc-box:not([open]) .doc__toc-title { margin-bottom: 0; }
@media (max-width: 899px) { .doc__toc-box { padding-bottom: 1.25rem; } }
/* Leespagina onder 900 breed: kop, inhoudsopgave en tekst precies even breed; binnenmarge in kop en opgave gelijk */
@media (max-width: 899px) {
  .doc__head .b-page-header { margin-inline: var(--gutter); }
  .doc__head .b-page-header > .container { width: auto; margin-inline: 1.25rem; }
}

/* ==== Ervaringen: de paginakop als hero, zoals op de homepage ====
   Foto over de volle breedte in een afgerond vlak, de crème lijn-aar rechts, grote witte titel linksonder op een zacht verloop */
.b-page-header--image:has(+ .b-reviews) { --edge: clamp(1.25rem, 5.2vw, 5.5rem); position: relative; margin: .75rem var(--edge) 0; padding: 0; overflow: hidden; border-radius: 1rem; isolation: isolate; }
@media (min-width: 640px) and (max-width: 1199px) { .b-page-header--image:has(+ .b-reviews) { --edge: var(--gutter); } }
.b-page-header--image:has(+ .b-reviews) .b-page-header__grid { display: flex; align-items: flex-end; width: auto; min-height: clamp(26rem, 68svh, 40rem); margin: 0; padding: clamp(1.75rem, 5vw, 4.5rem); }
.b-page-header--image:has(+ .b-reviews) .b-page-header__media { position: absolute; inset: 0; z-index: -2; order: 0; width: auto; }
.b-page-header--image:has(+ .b-reviews) .b-page-header__media::after { content: ""; position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; background: linear-gradient(20deg, rgb(10 31 14 / .72) 0%, rgb(10 31 14 / .4) 38%, rgb(10 31 14 / .1) 60%, transparent 75%); }
.b-page-header--image:has(+ .b-reviews) .b-page-header__img { width: 100%; height: 100%; aspect-ratio: auto; -webkit-mask: none; mask: none; }
.b-page-header--image:has(+ .b-reviews)::after { content: ""; position: absolute; z-index: -1; top: -4%; right: -3%; height: 108%; aspect-ratio: 625 / 810; background: #f7efd7; opacity: .85; -webkit-mask: url(../images/aar-lijn-dun.svg) no-repeat center / contain; mask: url(../images/aar-lijn-dun.svg) no-repeat center / contain; pointer-events: none; }
.b-page-header--image:has(+ .b-reviews) .b-page-header__body { position: relative; width: auto; max-width: 40rem; color: #fff; }
body.theme-b .b-page-header--image:has(+ .b-reviews) .b-page-header__title { margin: 0 0 1rem; color: #fff; font-size: clamp(3rem, 7vw, 6rem); font-weight: 600; line-height: .98; text-shadow: 0 1px 2px rgb(10 31 14 / .45), 0 2px 28px rgb(10 31 14 / .5); text-wrap: balance; }
.b-page-header--image:has(+ .b-reviews) .b-page-header__text { color: #fff; font-size: 1.0625rem; text-shadow: 0 1px 2px rgb(10 31 14 / .35); }
.b-page-header--image:has(+ .b-reviews) .b-page-header__text :is(p, a) { color: #fff; }
@media (max-width: 639px) {
  .b-page-header--image:has(+ .b-reviews) .b-page-header__grid { min-height: clamp(26rem, 78svh, 36rem); padding: 1.5rem 1.25rem; }
  .b-page-header--image:has(+ .b-reviews) .b-page-header__media::after { background: linear-gradient(0deg, rgb(10 31 14 / .78) 0%, rgb(10 31 14 / .55) 38%, rgb(10 31 14 / .15) 62%, transparent 78%); }
  .b-page-header--image:has(+ .b-reviews)::after { height: 60%; right: -12%; -webkit-mask-image: url(../images/aar-lijn.svg); mask-image: url(../images/aar-lijn.svg); }
}
.b-page-header--image:has(+ .b-reviews) + .b-reviews { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* Ervaringen-hero: iets sterker verloop onderin, zodat de witte tekst ook op een lichte lucht goed leesbaar is */
.b-page-header--image:has(+ .b-reviews) .b-page-header__media::after { background: linear-gradient(to top, rgb(10 31 14 / .7) 0%, rgb(10 31 14 / .45) 35%, rgb(10 31 14 / .12) 62%, transparent 80%), linear-gradient(90deg, rgb(10 31 14 / .25), transparent 60%); }
/* Ervaringen-hero even hoog als de grote foto op de appartementpagina's (apartment.css: .apt-hero__media) */
.b-page-header--image:has(+ .b-reviews) .b-page-header__grid,
.b-page-header--image:has(+ .b-reviews) .b-page-header__grid { min-height: 0; height: clamp(18rem, 52vw, 34rem); }
/* Ervaringen-hero op mobiel: alleen de titel op de foto, de introtekst eronder */
@media (max-width: 639px) {
  .b-page-header--image:has(+ .b-reviews) { --h: clamp(18rem, 52vw, 34rem); overflow: visible; border-radius: 0; }
  .b-page-header--image:has(+ .b-reviews)::after { content: none; }
  .b-page-header--image:has(+ .b-reviews) .b-page-header__grid { position: relative; display: flex; flex-direction: column; align-items: stretch; height: auto; padding: 0; }
  .b-page-header--image:has(+ .b-reviews) .b-page-header__media { order: -1; width: auto; }
  .b-page-header--image:has(+ .b-reviews) .b-page-header__media { position: relative; inset: auto; z-index: auto; height: var(--h); overflow: hidden; border-radius: 1rem; }
  .b-page-header--image:has(+ .b-reviews) .b-page-header__media::before { content: ""; position: absolute; z-index: 1; top: -4%; right: -12%; height: 80%; aspect-ratio: 625 / 810; background: #f7efd7; opacity: .85; -webkit-mask: url(../images/aar-lijn.svg) no-repeat center / contain; mask: url(../images/aar-lijn.svg) no-repeat center / contain; pointer-events: none; }
  .b-page-header--image:has(+ .b-reviews) .b-page-header__body { position: static; max-width: none; color: var(--color-text); }
  body.theme-b .b-page-header--image:has(+ .b-reviews) .b-page-header__title { position: absolute; z-index: 2; left: 1.25rem; right: 1.25rem; top: calc(var(--h) - 1.25rem); margin: 0; transform: translateY(-100%); }
  .b-page-header--image:has(+ .b-reviews) .b-page-header__text { margin-top: 1.25rem; color: var(--color-text); text-shadow: none; }
  .b-page-header--image:has(+ .b-reviews) .b-page-header__text :is(p, a) { color: var(--color-text); }
  .b-page-header--image:has(+ .b-reviews) + .b-reviews { padding-top: 1.5rem; }
}

/* ==== Contact: de paginakop als hero zoals Ervaringen; het crème vlak met de gegevens ligt over de foto ==== */
.b-page-header--image:has(.b-contact__details) { --edge: clamp(1.25rem, 5.2vw, 5.5rem); --h: clamp(18rem, 52vw, 34rem); position: relative; margin: .75rem var(--edge) clamp(2.5rem, 5vw, 4rem); padding: 0; }
@media (min-width: 640px) and (max-width: 1199px) { .b-page-header--image:has(.b-contact__details) { --edge: var(--gutter); } }
.b-page-header--image:has(.b-contact__details) .b-page-header__grid { position: relative; display: flex; align-items: center; width: auto; min-height: var(--h); margin: 0; padding: clamp(1.5rem, 4vw, 3.5rem); }
.b-page-header--image:has(.b-contact__details) .b-page-header__media { position: absolute; inset: 0; z-index: 0; order: 0; width: auto; overflow: hidden; border-radius: 1rem; }
.b-page-header--image:has(.b-contact__details) .b-page-header__media::after { content: ""; position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; background: linear-gradient(90deg, rgb(10 31 14 / .35), transparent 55%); }
.b-page-header--image:has(.b-contact__details) .b-page-header__media::before { content: ""; position: absolute; z-index: 1; top: -4%; right: -3%; height: 108%; aspect-ratio: 625 / 810; background: #f7efd7; opacity: .85; -webkit-mask: url(../images/aar-lijn-dun.svg) no-repeat center / contain; mask: url(../images/aar-lijn-dun.svg) no-repeat center / contain; pointer-events: none; }
.b-page-header--image:has(.b-contact__details) .b-page-header__img { width: 100%; height: 100%; aspect-ratio: auto; -webkit-mask: none; mask: none; border-radius: 0; }
.b-page-header--image:has(.b-contact__details) .b-page-header__body { position: relative; z-index: 1; width: min(100%, 27rem); max-width: none; }
.b-page-header--image:has(.b-contact__details) .b-contact__details { margin: 0; max-width: none; box-shadow: 0 18px 40px -24px rgb(10 31 14 / .55); }
@media (max-width: 639px) {
  /* Mobiel: de foto bovenaan, het vlak schuift er een stuk overheen */
  .b-page-header--image:has(.b-contact__details) .b-page-header__grid { display: block; min-height: 0; padding: 0; }
  .b-page-header--image:has(.b-contact__details) .b-page-header__media { position: relative; height: var(--h); }
  .b-page-header--image:has(.b-contact__details) .b-page-header__media::before { height: 80%; right: -12%; -webkit-mask-image: url(../images/aar-lijn.svg); mask-image: url(../images/aar-lijn.svg); }
  .b-page-header--image:has(.b-contact__details) .b-page-header__body { width: auto; margin: -3.5rem .75rem 0; }
}
/* Vlak rechts (Rina en Mart staan links in de foto), de aar links; verloop vanaf rechts */
@media (min-width: 640px) {
  .b-page-header--image:has(.b-contact__details) .b-page-header__grid { justify-content: flex-end; }
  .b-page-header--image:has(.b-contact__details) .b-page-header__media::before { right: auto; left: -3%; transform: scaleX(-1); }
  .b-page-header--image:has(.b-contact__details) .b-page-header__media::after { background: linear-gradient(270deg, rgb(10 31 14 / .35), transparent 55%); }
}
/* Desktop: de foto vult ~70% van de breedte, het vlak ligt half over de rechterrand, zodat Rina en Mart vrij blijven */
@media (min-width: 900px) {
  .b-page-header--image:has(.b-contact__details) .b-page-header__grid { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
  .b-page-header--image:has(.b-contact__details) .b-page-header__media { right: auto; width: calc(100% - 27rem + 6rem); }
  .b-page-header--image:has(.b-contact__details) .b-page-header__media::after { background: none; }
}
/* Tablet en mobiel: foto bovenaan, het vlak schuift er onderaan een stuk overheen */
@media (max-width: 899px) {
  .b-page-header--image:has(.b-contact__details) .b-page-header__grid { display: block; min-height: 0; padding: 0; }
  .b-page-header--image:has(.b-contact__details) .b-page-header__media { position: relative; height: var(--h); }
  .b-page-header--image:has(.b-contact__details) .b-page-header__body { width: min(100% - 1.5rem, 30rem); margin: -4rem auto 0; }
}
@media (max-width: 899px) {
  .b-page-header--image:has(.b-contact__details) .b-page-header__grid { display: flex; flex-direction: column; align-items: stretch; }
  .b-page-header--image:has(.b-contact__details) .b-page-header__media { order: -1; width: auto; }
}

/* Alle knoppen dezelfde letter: DM Sans, 15px, halfvet (ook de knoppen van Tommy en in de kopbalk/footer) */
body :is(.button, .site-header__cta, .site-nav__item--button > .site-nav__link, .site-footer__book, .hvc-book, .hv-business .hv-link, .hv-trip__ext, .apt-card__button, .apt-map__route, .b-reviews__filter,
  .b-tommy .tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *), .b-tommy .ks-result-info, .b-tommy #TommyBookingSupport .tbs-btn:not(.tbs-calendarPrevious):not(.tbs-calendarNext)) {
  font-family: var(--font-body) !important; font-size: .9375rem !important; font-weight: 600 !important; letter-spacing: 0 !important; }

/* ==== Contactvenster (menulink Contact): het crème contactblok als venster ==== */
.contact-dialog { width: min(100% - 2rem, 30rem); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; overflow: visible; border: 0; border-radius: 1rem; background: transparent; color: var(--color-text); }
.contact-dialog::backdrop { background: rgb(10 31 14 / .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.contact-dialog .b-contact__details { max-height: calc(100dvh - 2rem); margin: 0; overflow: auto; box-shadow: 0 24px 60px -24px rgb(10 31 14 / .5); }
body.theme-b .contact-dialog .b-page-header__title { margin: 0 3rem 1rem 0; font-size: clamp(2.25rem, 6vw, 3rem); }
.contact-dialog__close { position: absolute; z-index: 1; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: .4rem; background: #fff; color: var(--color-text); cursor: pointer; transition: background-color .3s cubic-bezier(.22, 1, .36, 1); }
.contact-dialog__close:hover { background: #fbf7ea; }
.contact-dialog__close svg { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.contact-dialog__close:hover svg { transform: rotate(90deg); }
.contact-dialog__close:focus-visible { outline: 2px solid #6a8f3d; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .contact-dialog[open] { animation: contact-in .4s cubic-bezier(.22, 1, .36, 1); }
  .contact-dialog[open]::backdrop { animation: contact-fade .3s ease-out; }
}
@keyframes contact-in { from { opacity: 0; transform: translateY(1rem) scale(.98); } }
@keyframes contact-fade { from { opacity: 0; } }
/* Mobiel: onderaan het scherm, zoals het boekvenster */
@media (max-width: 639px) {
  .contact-dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: 1rem 1rem 0 0; }
  .contact-dialog .b-contact__details { border-radius: 1rem 1rem 0 0; padding-bottom: calc(1.75rem + env(safe-area-inset-bottom)); }
  @media (prefers-reduced-motion: no-preference) { .contact-dialog[open] { animation-name: contact-up; } }
}
@keyframes contact-up { from { transform: translateY(100%); } }
/* Desktop: rechtsboven, op dezelfde plek en marge als het boekvenster (--edge-b), schuift van boven in */
@media (min-width: 640px) {
  .contact-dialog { --edge-b: clamp(1.25rem, 5.2vw, 5.5rem); width: min(100% - 2 * var(--edge-b), 27rem); max-height: calc(100dvh - 2 * var(--edge-b)); margin: var(--edge-b) var(--edge-b) auto auto; }
  .contact-dialog .b-contact__details { max-height: calc(100dvh - 2 * var(--edge-b)); }
  @media (prefers-reduced-motion: no-preference) { .contact-dialog[open] { animation-name: contact-down; } }
}
@keyframes contact-down { from { opacity: 0; transform: translateY(-1.5rem); } }
/* Contactvenster in dezelfde stijl als het boekvenster: wit paneel, kleine ronding, zachte schaduw, titel 36px, omlijnd kruisje */
.contact-dialog { border-radius: .4rem; }
.contact-dialog::backdrop { background: rgb(10 31 14 / .4); -webkit-backdrop-filter: none; backdrop-filter: none; }
.contact-dialog .b-contact__details { padding: 28px; border-radius: .4rem; background: #fff; box-shadow: 0 8px 24px rgb(10 31 14 / .2); }
body.theme-b .contact-dialog .b-page-header__title { display: flex; align-items: center; min-height: 2.75rem; margin: 0 3.5rem 1.25rem 0; font-size: 2.25rem; font-weight: 500; line-height: 1.1; }
.contact-dialog__close { top: 28px; right: 28px; border: 1px solid #e3dcc6; border-radius: .4rem; background: #fff; }
.contact-dialog__close:hover { background: #f7efd7; }
.contact-dialog .b-contact__intro { border-bottom-color: #e3dcc6; }
.contact-dialog .b-contact__list > div { border-top-color: #e3dcc6; }
@media (max-width: 639px) {
  .contact-dialog, .contact-dialog .b-contact__details { border-radius: 1rem 1rem 0 0; }
  .contact-dialog .b-contact__details { padding: 1.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); }
  .contact-dialog__close { top: 1.75rem; right: 1.25rem; }
}
/* Contactvenster mobiel: greepje bovenin als hint dat je het naar beneden kunt vegen; de achtergrond vervaagt mee */
.contact-dialog::backdrop { opacity: var(--backdrop, 1); }
@media (max-width: 639px) {
  .contact-dialog .b-contact__details { position: relative; padding-top: 2.25rem; overscroll-behavior: contain; }
  .contact-dialog .b-contact__details::before { content: ""; position: absolute; top: .65rem; left: 50%; width: 2.5rem; height: 4px; border-radius: 2px; background: #e3dcc6; transform: translateX(-50%); }
  .contact-dialog__close { top: 2.25rem; }
}
/* Link naar de contactpagina onderin het contactvenster (als tekstlink met pijltje, binnen het witte paneel) */
.contact-dialog { background: #fff; box-shadow: 0 8px 24px rgb(10 31 14 / .2); }
.contact-dialog .b-contact__details { box-shadow: none; padding-bottom: 1.25rem; }
.contact-dialog__page { display: flex; align-items: center; gap: .5rem; margin: 0 28px; padding: 1rem 0 1.5rem; border-top: 1px solid #e3dcc6; color: var(--color-text); font-size: .9375rem; font-weight: 600; text-decoration: none; }
.contact-dialog__page::after { content: ""; width: .85rem; height: .85rem; background: currentColor; -webkit-mask: var(--btn-arrow) no-repeat center / contain; mask: var(--btn-arrow) no-repeat center / contain; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.contact-dialog__page:hover { color: #6a8f3d; }
.contact-dialog__page:hover::after { transform: translate(3px, -3px); }
@media (max-width: 639px) { .contact-dialog__page { margin: 0 1.25rem; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); } .contact-dialog .b-contact__details { padding-bottom: 1rem; } }
/* Hero Ervaringen en Contact: vervagen en licht inzoomen bij scrollen (zoals .apt-hero__img) */
.b-page-header--image:is(:has(+ .b-reviews), :has(.b-contact__details)) .b-page-header__img { filter: blur(calc(var(--hero-p, 0) * 14px)); transform: scale(calc(1 + var(--hero-p, 0) * .08)); will-change: filter, transform; }
@media (prefers-reduced-motion: reduce) { .b-page-header--image .b-page-header__img { filter: none; transform: none; will-change: auto; } }
/* Inhoudsopgave leespagina: meer lucht tussen de onderdelen en onder "Inhoud" */
.doc__toc ol { gap: .5rem; }
.doc__toc a { padding-block: .45rem; line-height: 1.4; }
.doc__toc-box[open] .doc__toc-title { margin-bottom: 1.25rem; }
/* Geen link meer onderin het contactvenster: weer de gewone binnenmarge onderaan */
.contact-dialog .b-contact__details { padding-bottom: 28px; }
@media (max-width: 639px) { .contact-dialog .b-contact__details { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); } }

/* Foutpagina (404): crème vlak met tekst en foto, daaronder de appartementen */
.e404 { padding: .75rem 0 clamp(3.5rem, 8vw, 6rem); }
.e404__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); margin: 0 clamp(1.25rem, 5.2vw, 5.5rem); padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 6vw, 6rem); border-radius: 1rem; background: #f7efd7; overflow: hidden; }
@media (min-width: 640px) and (max-width: 1199px) { .e404__panel { margin-inline: var(--gutter); } }
.e404__body { position: relative; z-index: 1; max-width: 32rem; }
.e404__code { margin: 0 0 1rem; color: #6a8f3d; font-size: .9375rem; font-weight: 600; }
body.theme-b .e404__title { margin: 0; color: var(--color-text); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.75rem, 6vw, 4.75rem); font-weight: 600; line-height: 1; letter-spacing: -.01em; text-wrap: balance; }
.e404__text { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty; }
.e404__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.e404__media { position: relative; z-index: 1; }
.e404__img { display: block; width: 100%; height: auto; aspect-ratio: 484 / 393; object-fit: cover; -webkit-mask: url(../images/vorm-foto.svg) no-repeat center / 100% 100%; mask: url(../images/vorm-foto.svg) no-repeat center / 100% 100%; }
.e404__more { margin-top: clamp(3rem, 6vw, 4.5rem); }
body.theme-b .e404__more-title { margin: 0 0 1.25rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 600; line-height: 1.1; }
.e404__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.e404__list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: .75rem; background: #fff; box-shadow: inset 0 0 0 1.5px rgb(106 143 61 / .35); color: var(--color-text); font-size: 1.0625rem; font-weight: 600; text-decoration: none; transition: background-color .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1); }
.e404__list a span { flex: none; width: .9rem; height: .9rem; background: #6a8f3d; -webkit-mask: var(--btn-arrow) no-repeat center / contain; mask: var(--btn-arrow) no-repeat center / contain; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.e404__list a:is(:hover, :focus-visible) { background: #f7efd7; box-shadow: inset 0 0 0 1.5px #6a8f3d; }
.e404__list a:is(:hover, :focus-visible) span { transform: translate(2px, -2px); }
.e404__list a:focus-visible { outline: 2px solid #6a8f3d; outline-offset: 2px; }
@media (max-width: 899px) {
  .e404__panel { grid-template-columns: 1fr; padding-top: clamp(1.5rem, 5vw, 2.5rem); }
  .e404__media { order: -1; width: min(100%, 26rem); justify-self: center; }
  .e404__body { max-width: 36rem; }
}
@media (max-width: 639px) {
  .e404__panel { margin-inline: var(--gutter, 1.25rem); padding: 1.5rem 1.25rem 2rem; }
  .e404__actions .button { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .e404__list a, .e404__list a span { transition: none; } }