/* Zwembadhotels.nl - site.css
   Huisstijl v1.0. Tokens komen uit brand-tokens.css van de brand kit; geen
   eigen bijna-gelijke varianten. Mobile-first: basisregels gelden voor de
   kleinste viewport, grotere layouts komen uit min-width media queries. */

/* ---------- 1. Fonts (lokaal gehost, geen externe fontrequest) ---------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  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: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-latin.woff2') format('woff2');
  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: 'Playfair Display';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/playfair-latin-ext.woff2') format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens ---------- */
:root {
  --zh-navy: #0B1D36;
  --zh-teal: #0FA3A3;
  --zh-aqua: #78D7E5;
  --zh-sand: #E4D2A6;
  --zh-gold: #C9A24B;
  --zh-offwhite: #F7F6F2;
  --zh-light: #F4F6F8;
  --zh-white: #FFFFFF;
  --zh-ink: #152236;
  --zh-muted: #607087;
  --zh-line: #D9E1E8;
  --zh-soft-teal: #E8F8F8;
  --zh-soft-gold: #F8F0DD;
  --zh-soft-aqua: #DDF4FA;

  --zh-font-display: "Playfair Display", Georgia, serif;
  --zh-font-body: "Manrope", Arial, sans-serif;

  --zh-radius-sm: 10px;
  --zh-radius-md: 16px;
  --zh-radius-lg: 28px;
  --zh-radius-pill: 999px;

  --zh-shadow-card: 0 10px 30px rgba(11, 29, 54, .10);
  --zh-shadow-card-hover: 0 16px 42px rgba(11, 29, 54, .14);

  --zh-section: 48px;
}

/* ---------- 3. Reset en basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zh-offwhite);
  color: var(--zh-ink);
  font-family: var(--zh-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: normal;
}

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

h1, h2, h3, h4 { margin: 0 0 16px; color: var(--zh-navy); }

h1 {
  font-family: var(--zh-font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  line-height: 1.0;
  letter-spacing: -.03em;
}
h2 {
  font-family: var(--zh-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
h3 { font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; }
h4 { font-weight: 800; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.3; }

p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 20px; }
li { margin-bottom: 8px; }

/* Zeegroen #0FA3A3 haalt op wit en off-white een contrast van 3,09 en zakt
   daarmee onder de AA-eis van 4,5 voor normale tekst. Het huisstijlhandboek
   schrijft teal als hoverkleur voor, maar stelt toegankelijk contrast ook
   verplicht (Sec 69 en regel 16). Die tweede eis wint. Teal blijft hier het
   interactieaccent, alleen als lijn en vlak in plaats van als tekstkleur. */
a {
  color: var(--zh-navy);
  text-decoration: underline;
  text-decoration-color: var(--zh-teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--zh-navy); text-decoration-thickness: 4px; }

:focus-visible {
  outline: 3px solid rgba(15, 163, 163, .85);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 4. Layout ---------- */
.zh-container { width: min(100% - 32px, 1200px); margin-inline: auto; }

.zh-section { padding-block: var(--zh-section); }
.zh-section--tight { padding-block: 32px; }
.zh-section--offwhite { background: var(--zh-offwhite); }
.zh-section--light { background: var(--zh-light); }
.zh-section--white { background: var(--zh-white); }
.zh-section--navy { background: var(--zh-navy); color: var(--zh-white); }
.zh-section--navy h2, .zh-section--navy h3 { color: var(--zh-white); }
.zh-section--navy a { color: var(--zh-aqua); text-decoration-color: var(--zh-aqua); }
.zh-section--navy a:hover { color: var(--zh-white); }

.zh-prose { max-width: 720px; }
/* Artikeltekst. De regellengte blijft gelijk aan de rest van de site; alleen
   de kopafstand is ruimer, omdat een artikel meer koppen achter elkaar heeft
   dan een bestemmingspagina. */
.zh-prose--artikel h2 { margin-top: 40px; font-size: 1.5rem; }
.zh-prose--artikel > h2:first-child { margin-top: 0; }

/* "In het kort" boven het artikel: de conclusies, niet een samenvatting van
   de tekst eronder. */
.zh-kern { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.zh-kern li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.zh-kern .zh-icon { color: var(--zh-teal); margin-top: 3px; }
.zh-intro { max-width: 820px; font-size: 1.125rem; line-height: 1.6; }

.zh-eyebrow {
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--zh-muted);
  margin: 0 0 12px;
}
.zh-section--navy .zh-eyebrow { color: var(--zh-aqua); }

.zh-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--zh-navy);
  color: var(--zh-white);
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 var(--zh-radius-sm) 0;
}
.zh-skip-link:focus { left: 0; }

/* ---------- 5. Iconen ---------- */
.zh-icon { width: 24px; height: 24px; flex: none; color: currentColor; }
.zh-icon--sm { width: 20px; height: 20px; }
.zh-icon--lg { width: 32px; height: 32px; }
.zh-icon--xl { width: 48px; height: 48px; }
.zh-icon--xl { width: 48px; height: 48px; }

/* ---------- 6. Header en navigatie ---------- */
/* De header zweeft mee. position: sticky en niet fixed: sticky houdt de
   header in de normale flow, dus de pagina eronder hoeft geen compenserende
   marge te krijgen die bij elke wijziging van de balkhoogte weer verkeerd
   staat. */
.zh-header {
  background: var(--zh-white);
  border-bottom: 1px solid var(--zh-line);
  position: sticky;
  top: 0;
  z-index: 60;
}
/* Zodra de pagina onder de header doorloopt, komt er een lichte schaduw bij.
   Zonder die scheiding schuift een witte sectie visueel de balk in. Het
   script zet dit attribuut; zonder JavaScript blijft de rand de scheiding. */
.zh-header[data-zwevend="ja"] { box-shadow: 0 6px 20px rgba(11, 29, 54, .10); }

/* Een anker of de skip-link mag niet onder de balk landen. */
html { scroll-padding-top: 88px; }
.zh-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}
.zh-logo { display: inline-flex; align-items: center; text-decoration: none; }
.zh-logo svg { width: 256px; height: auto; display: block; }
.zh-logo:focus-visible { outline-offset: 4px; }

.zh-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--zh-white);
  border: 1px solid var(--zh-line);
  border-radius: var(--zh-radius-pill);
  color: var(--zh-navy);
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 700;
  cursor: pointer;
}
.zh-nav-toggle[aria-expanded="true"] { background: var(--zh-soft-teal); border-color: var(--zh-teal); }

.zh-nav { display: none; }
.zh-nav[data-open="true"] { display: block; }
@media (max-width: 63.999rem) {
  .zh-nav[data-open="true"] {
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
.zh-nav__list { list-style: none; margin: 0; padding: 0 0 24px; }
.zh-nav__list > li { margin: 0; border-top: 1px solid var(--zh-line); }
.zh-nav__link {
  display: block;
  padding: 12px 0;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--zh-navy);
  text-decoration: none;
}
.zh-nav__link:hover, .zh-nav__link:focus-visible {
  color: var(--zh-navy);
  box-shadow: inset 0 -3px 0 var(--zh-teal);
}
.zh-nav__link--sectie { color: var(--zh-navy); }
.zh-nav__link[aria-current="page"] {
  color: var(--zh-navy);
  background: var(--zh-soft-teal);
  box-shadow: inset 0 -3px 0 var(--zh-teal);
  border-radius: var(--zh-radius-sm) var(--zh-radius-sm) 0 0;
}
.zh-nav__sub { list-style: none; margin: 0 0 12px; padding: 0; }
.zh-nav__sub a {
  display: block;
  padding: 8px 0 8px 16px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--zh-ink);
  text-decoration: none;
  border-left: 2px solid var(--zh-line);
}
.zh-nav__sub a:hover { color: var(--zh-navy); background: var(--zh-soft-teal); border-left-color: var(--zh-teal); }

@media (min-width: 64rem) {
  .zh-nav-toggle { display: none; }
  .zh-nav { display: block; }
  .zh-nav__list { display: flex; gap: 4px; padding: 0; align-items: center; }
  .zh-nav__list > li { border-top: 0; position: relative; }
  .zh-nav__link { padding: 26px 12px; }
  .zh-nav__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 232px;
    margin: 0;
    padding: 8px;
    background: var(--zh-white);
    border: 1px solid var(--zh-line);
    border-radius: var(--zh-radius-md);
    box-shadow: var(--zh-shadow-card);
  }
  .zh-nav__list > li:hover .zh-nav__sub,
  .zh-nav__list > li:focus-within .zh-nav__sub { display: block; }
  .zh-nav__sub a { border-left: 0; padding: 8px 12px; border-radius: var(--zh-radius-sm); }
  .zh-nav__sub a:hover { background: var(--zh-soft-teal); }
}

/* ---------- 7. Buttons ---------- */
.zh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--zh-radius-pill);
  font-family: var(--zh-font-body);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.zh-btn--primary { background: var(--zh-navy); color: var(--zh-white); }
.zh-btn--primary:hover { background: var(--zh-teal); color: var(--zh-navy); }
.zh-btn--secondary {
  background: transparent;
  color: var(--zh-navy);
  border-color: var(--zh-navy);
}
.zh-btn--secondary:hover { background: var(--zh-light); color: var(--zh-navy); }
.zh-btn--teal { background: var(--zh-teal); color: var(--zh-navy); }
.zh-btn--teal:hover { background: var(--zh-navy); color: var(--zh-white); }
.zh-btn--block { width: 100%; }
.zh-section--navy .zh-btn--secondary { color: var(--zh-white); border-color: var(--zh-white); }
.zh-section--navy .zh-btn--secondary:hover { background: var(--zh-white); color: var(--zh-navy); }

.zh-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 8. Breadcrumbs ---------- */
.zh-breadcrumb { padding-block: 16px 0; font-size: .875rem; }
.zh-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
}
.zh-breadcrumb li { margin: 0; color: var(--zh-muted); }
.zh-breadcrumb li + li::before { content: "\203A"; margin-right: 8px; color: var(--zh-line); }
/* Breadcrumblinks stonden op 19 px hoog. De spacing-uitzondering van
   WCAG 2.2 SC 2.5.8 werd wel gehaald, maar op een telefoon blijft het een
   klein doel; met deze padding komt het op 31 px zonder de rij te verhogen. */
.zh-breadcrumb a { display: inline-block; padding-block: 6px; color: var(--zh-muted); text-decoration: none; }
.zh-breadcrumb a:hover { color: var(--zh-ink); text-decoration: underline; text-decoration-color: var(--zh-teal); }
.zh-breadcrumb [aria-current="page"] { color: var(--zh-ink); font-weight: 600; }

/* ---------- 9. Hero ---------- */
.zh-hero { padding-block: 40px 8px; }
.zh-hero__grid { display: grid; gap: 32px; align-items: center; }
/* Zonder min-width groeit de tekstkolom mee met het langste woord in de
   H1, en dan past 'Zwembadhotels.nl' op 320 px niet meer in het scherm.
   Met min-width 0 mag de kolom krimpen en breekt het woord af. */
.zh-hero__grid > * { min-width: 0; }
.zh-hero__grid h1 { overflow-wrap: anywhere; }
.zh-hero__lede { max-width: 640px; font-size: 1.1875rem; line-height: 1.6; color: var(--zh-ink); }

/* Hero-beeld naast de tekst, niet eronder. De aangeleverde hero's zijn
   hooggesleuteld; tekst eroverheen zou een donkere sluier van meer dan de
   helft vragen en dan is het beeld weg waarvoor je hem overlegt. */
.zh-hero__beeld {
  border-radius: var(--zh-radius-lg);
  overflow: hidden;
  background: var(--zh-light);
  aspect-ratio: 2 / 1;
}
.zh-hero__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zh-hero__grid--tekst { grid-template-columns: minmax(0, 1fr); }
.zh-hero__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--zh-radius-lg);
  background: linear-gradient(135deg, #0B1D36 0%, #0e5f74 55%, #0FA3A3 100%);
  color: var(--zh-white);
  padding: 28px 24px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.zh-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/brand/wave-lines.svg');
  background-size: 620px auto;
  background-repeat: repeat;
  opacity: .18;
  pointer-events: none;
}
.zh-hero__panel > * { position: relative; }
.zh-hero__panel p { margin: 0; font-size: 1.0625rem; }
.zh-hero__panel strong { display: block; font-family: var(--zh-font-display); font-size: 1.5rem; margin-bottom: 8px; }

@media (min-width: 64rem) {
  .zh-hero { padding-block: 64px 16px; }
  .zh-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; }
  .zh-hero__grid--tekst { grid-template-columns: minmax(0, 1fr); }
  .zh-hero__panel { min-height: 340px; padding: 40px 32px; }
}

/* ---------- 10. Kaartraster ---------- */
.zh-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 48rem) { .zh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .zh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .zh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zh-grid > * { min-width: 0; }

/* ---------- 11. Hotelkaart ---------- */
.zh-hotel-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--zh-white);
  border: 1px solid var(--zh-line);
  border-radius: var(--zh-radius-md);
  box-shadow: var(--zh-shadow-card);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.zh-hotel-card:hover { transform: translateY(-4px); box-shadow: var(--zh-shadow-card-hover); }
@media (prefers-reduced-motion: reduce) {
  .zh-hotel-card, .zh-btn { transition: none; }
  .zh-hotel-card:hover { transform: none; }
}

/* Typetegel in plaats van een hotelfoto. De brand kit bevat geen
   hotelspecifieke beelden en een gedeeld gebiedsbeeld zou suggereren dat
   het om dit zwembad gaat. De tegel toont het zwembadtype, niet het hotel. */
.zh-pool-tile { position: relative; }

/* Met foto: het beeld vult de 4:3 bovenkant van de kaart, met het
   zwembadtype als label erop. De vaste verhouding reserveert de ruimte al
   voor het beeld binnen is, zodat er niets verschuift. */
.zh-pool-tile--foto { display: block; aspect-ratio: 4 / 3; background: var(--zh-light); }
.zh-pool-tile--foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zh-pool-tile--foto .zh-pool-tile__label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--zh-radius-pill);
  background: rgba(11, 29, 54, .92);
  color: var(--zh-white);
}

/* Zonder foto: de gekleurde typetegel. */
.zh-pool-tile--leeg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--zh-soft-teal);
  border-bottom: 1px solid var(--zh-line);
  color: var(--zh-navy);
}
.zh-pool-tile--buiten.zh-pool-tile--leeg { background: var(--zh-soft-aqua); }
.zh-pool-tile--recreatief.zh-pool-tile--leeg { background: var(--zh-soft-gold); }
.zh-pool-tile--wellness.zh-pool-tile--leeg { background: var(--zh-light); }
.zh-pool-tile--onbekend.zh-pool-tile--leeg { background: var(--zh-light); }
.zh-pool-tile__label { font-size: .9375rem; font-weight: 800; line-height: 1.2; }

/* Beeld boven aan de hotelpagina. */
.zh-hotel-beeld .zh-pool-tile--foto {
  aspect-ratio: 3 / 2;
  border-radius: var(--zh-radius-lg);
  overflow: hidden;
}
.zh-hotel-beeld .zh-pool-tile__label { left: 20px; bottom: 20px; }

.zh-hotel-card__body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
/* line-height 1.25 gaf een regelhoogte van 21 px, waardoor de hotelnaam als
   link onder de 24 px van SC 2.5.8 bleef. 1.35 lost dat op en leest bij een
   naam van twee regels ook prettiger. */
.zh-hotel-card__name { margin: 0; font-family: var(--zh-font-body); font-weight: 800; font-size: 1.1875rem; line-height: 1.35; }
.zh-hotel-card__name a { text-decoration: none; }
.zh-hotel-card__name a:hover { text-decoration: underline; }
.zh-hotel-card__place {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: .875rem;
  color: var(--zh-muted);
}
.zh-hotel-card__reason { margin: 0; font-size: .9375rem; line-height: 1.6; }
.zh-hotel-card__foot { margin-top: auto; padding-top: 4px; }

/* ---------- 12. Labels en badges ---------- */
.zh-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.zh-labels li { margin: 0; }
.zh-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--zh-radius-pill);
  background: var(--zh-soft-teal);
  color: var(--zh-navy);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
}
.zh-label--premium { background: var(--zh-soft-gold); }
.zh-label--family { background: var(--zh-soft-aqua); }
.zh-label--match { background: var(--zh-navy); color: var(--zh-white); }

.zh-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  color: var(--zh-muted);
}
.zh-rating__score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 4px 8px;
  border-radius: var(--zh-radius-sm);
  background: var(--zh-navy);
  color: var(--zh-white);
  font-weight: 800;
  font-size: .875rem;
}

/* ---------- 13. Zwembadprofiel ---------- */
.zh-pool-profile {
  background: var(--zh-white);
  border: 1px solid var(--zh-line);
  border-radius: var(--zh-radius-md);
  padding: 24px 20px;
}
.zh-pool-profile__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 48rem) { .zh-pool-profile__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zh-pool-profile__list > li { display: flex; gap: 12px; margin: 0; align-items: flex-start; }
.zh-pool-profile__list .zh-icon { color: var(--zh-navy); margin-top: 2px; }
.zh-pool-profile dt, .zh-pool-profile__term {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--zh-muted);
  margin-bottom: 2px;
}
.zh-pool-profile__value { font-weight: 600; line-height: 1.45; }

/* ---------- 14. Let hierop en verified ---------- */
.zh-note {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: var(--zh-soft-gold);
  border: 1px solid var(--zh-sand);
  border-radius: var(--zh-radius-md);
  color: var(--zh-ink);
  font-size: .9375rem;
  line-height: 1.6;
}
.zh-note .zh-icon { color: var(--zh-navy); margin-top: 2px; }
.zh-note p { margin: 0; }
.zh-note strong { display: block; }

.zh-verified {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--zh-soft-teal);
  border-radius: var(--zh-radius-pill);
  color: var(--zh-navy);
  font-size: .875rem;
  font-weight: 600;
}
.zh-verified .zh-icon { color: var(--zh-navy); }

/* ---------- 15. Tabellen ---------- */
.zh-table-wrap { overflow-x: auto; border: 1px solid var(--zh-line); border-radius: var(--zh-radius-md); background: var(--zh-white); }
.zh-table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 640px; }
.zh-table caption { text-align: left; padding: 16px 20px 0; color: var(--zh-muted); font-size: .875rem; }
.zh-table th, .zh-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--zh-line); }
.zh-table thead th { background: var(--zh-light); color: var(--zh-navy); font-weight: 700; white-space: nowrap; }
/* Ook de hotelnaam in de vergelijkingstabel is een link in een lijst en
   geen lopende tekst, dus 24 px is hier het minimum. */
.zh-table tbody th { font-weight: 700; color: var(--zh-navy); }
.zh-table a { display: inline-block; padding-block: 3px; }
.zh-table tbody tr:last-child th, .zh-table tbody tr:last-child td { border-bottom: 0; }
.zh-table td[data-yes="ja"] { color: var(--zh-navy); font-weight: 700; }
.zh-table td[data-yes="onbekend"] { color: var(--zh-muted); }

/* Sorteren en filteren.
   De koppen zijn knoppen. Zonder JavaScript blijven het gewone koppen: de
   tabel staat compleet in de HTML en houdt de volgorde van de pagina. De
   filterbalk wordt pas door het script toegevoegd, zodat er nooit een
   bedieningselement staat dat niets doet. */
.zh-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.zh-table thead th:not([data-sorteerbaar]) .zh-th-sort { cursor: default; }
.zh-th-sort__pijl { width: 8px; height: 12px; flex: none; opacity: 0; }
.zh-table thead th[data-sorteerbaar] .zh-th-sort__pijl { opacity: .35; }
.zh-th-sort__pijl::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-top: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.zh-table thead th[aria-sort] { background: var(--zh-soft-teal); }
.zh-table thead th[aria-sort] .zh-th-sort__pijl { opacity: 1; }
.zh-table thead th[aria-sort="ascending"] .zh-th-sort__pijl::before {
  border-top: 0;
  border-bottom: 5px solid currentColor;
}

.zh-table-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}
.zh-table-filter__veld { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 15rem; }
.zh-table-filter label { font-size: .875rem; font-weight: 700; color: var(--zh-navy); }
.zh-table-filter select,
.zh-table-filter input {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--zh-line);
  border-radius: var(--zh-radius-sm);
  background: var(--zh-white);
  font: inherit;
  color: var(--zh-ink);
  max-width: 100%;
}
.zh-table-filter__telling {
  flex: 0 0 auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: .875rem;
  color: var(--zh-muted);
}
.zh-table-leeg { padding: 16px 20px; color: var(--zh-muted); }

/* ---------- 16. Featurekaart, linklijst ---------- */
.zh-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px;
  background: var(--zh-white);
  border: 1px solid var(--zh-line);
  border-radius: var(--zh-radius-md);
  text-decoration: none;
  color: var(--zh-ink);
  box-shadow: var(--zh-shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.zh-tile:hover { transform: translateY(-4px); box-shadow: var(--zh-shadow-card-hover); color: var(--zh-ink); }
@media (prefers-reduced-motion: reduce) { .zh-tile { transition: none; } .zh-tile:hover { transform: none; } }
.zh-tile .zh-icon { color: var(--zh-teal); }
.zh-tile__title { font-weight: 800; font-size: 1.0625rem; color: var(--zh-navy); line-height: 1.3; }
.zh-tile__text { font-size: .9375rem; color: var(--zh-ink); margin: 0; }
.zh-tile__count { font-size: .8125rem; color: var(--zh-muted); }

.zh-linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 48rem) { .zh-linklist--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .zh-linklist--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zh-linklist li { margin: 0; }
.zh-linklist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 16px;
  background: var(--zh-white);
  border: 1px solid var(--zh-line);
  border-radius: var(--zh-radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: .9375rem;
}
.zh-linklist a:hover { border-color: var(--zh-teal); background: var(--zh-soft-teal); }
/* Flexkinderen krimpen niet vanzelf onder hun inhoudsbreedte. Zonder deze
   min-width duwt een lange hotelnaam als "Boutique Hotel Blendin Bloemendaal
   aan Zee" de hele pagina breder dan het scherm op 320 px. */
/* min-width geldt op elk niveau: het li is een gridkind, het a een
   flexcontainer en de spans zijn flexkinderen. Blijft er een niveau op auto
   staan, dan duwt de langste hotelnaam de hele kolom breder dan het raster. */
.zh-linklist > li { min-width: 0; }
.zh-linklist a > * { min-width: 0; }
.zh-linklist > li > a { min-width: 0; overflow-wrap: anywhere; }
.zh-linklist span { font-weight: 500; color: var(--zh-muted); font-size: .8125rem; }
/* De metatekst mag afbreken. Een plaats als "Hollum (Ameland)" past bij
   nowrap niet naast een lange hotelnaam en duwde de pagina breder dan het
   scherm; met wrap valt hij op een tweede regel. */
.zh-linklist > li > a { flex-wrap: wrap; row-gap: 2px; }

/* ---------- 16b. Compacte hotelvermelding ---------- */
.zh-mini-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 48rem) { .zh-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .zh-mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zh-mini {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 10px;
  background: var(--zh-white);
  border: 1px solid var(--zh-line);
  border-radius: var(--zh-radius-md);
}
.zh-mini__foto {
  flex: none;
  width: 84px;
  height: 63px;
  object-fit: cover;
  border-radius: var(--zh-radius-sm);
  background: var(--zh-light);
}
.zh-mini__foto--leeg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zh-navy);
}
.zh-mini__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.zh-mini__naam { font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.zh-mini__plaats { font-size: .8125rem; color: var(--zh-muted); }
.zh-mini .zh-rating { margin: 2px 0 0; font-size: .75rem; }
.zh-mini .zh-rating__score { min-width: 34px; padding: 2px 6px; font-size: .8125rem; }
.zh-mini__cta { flex: none; min-height: 40px; padding: 0 16px; font-size: .875rem; }
@media (max-width: 30rem) {
  .zh-mini { flex-wrap: wrap; }
  .zh-mini__cta { width: 100%; }
}

/* ---------- 16c. Verwijzend paneel met hero-beeld ---------- */
.zh-panel-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 40rem) { .zh-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .zh-panel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zh-panel-grid > * { min-width: 0; }

.zh-panel-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--zh-white);
  border: 1px solid var(--zh-line);
  border-radius: var(--zh-radius-md);
  box-shadow: var(--zh-shadow-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--zh-ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.zh-panel-card:hover { transform: translateY(-4px); box-shadow: var(--zh-shadow-card-hover); color: var(--zh-ink); }
@media (prefers-reduced-motion: reduce) {
  .zh-panel-card { transition: none; }
  .zh-panel-card:hover { transform: none; }
}
.zh-panel-card__foto {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: var(--zh-light);
}
.zh-panel-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
}
.zh-panel-card__title { font-weight: 800; font-size: 1.0625rem; line-height: 1.3; color: var(--zh-navy); }
.zh-panel-card__meta { font-size: .8125rem; color: var(--zh-muted); }
.zh-panel-card__tekst { font-size: .875rem; line-height: 1.5; color: var(--zh-ink); }
.zh-panel-card--tekst .zh-panel-card__body { padding: 20px; min-height: 84px; justify-content: center; }

/* Doelpagina zonder eigen hero: een vlak met het icoon van die pagina, in
   dezelfde verhouding als een foto. Nooit het beeld van een andere pagina. */
.zh-panel-card__foto--icoon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--zh-soft-teal), var(--zh-soft-aqua));
  border-bottom: 1px solid var(--zh-line);
}
.zh-panel-card__foto--icoon .zh-icon { color: var(--zh-teal); }

/* ---------- 17. Panelen ---------- */
.zh-panel {
  background: var(--zh-white);
  border: 1px solid var(--zh-line);
  border-radius: var(--zh-radius-md);
  padding: 24px 20px;
}
.zh-panel--sand { background: var(--zh-soft-gold); border-color: var(--zh-sand); }
/* Keuzehulp: kaarten naast elkaar met een icoon dat het onderwerp aanduidt.
   Het icoon is decoratief; de kop zegt hetzelfde in woorden. */
.zh-panel--keuze { display: flex; flex-direction: column; gap: 4px; }
.zh-panel--keuze .zh-icon { color: var(--zh-teal); margin-bottom: 4px; }
.zh-panel--keuze h3 { margin-bottom: 8px; font-size: 1.125rem; }
.zh-panel--keuze p { margin-bottom: 0; }
.zh-panel--teal { background: var(--zh-soft-teal); border-color: var(--zh-aqua); }
.zh-panel > :last-child { margin-bottom: 0; }

.zh-split { display: grid; gap: 32px; }
@media (min-width: 64rem) { .zh-split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; align-items: start; } }

/* ---------- 18. FAQ ---------- */
.zh-faq { display: grid; gap: 12px; }
.zh-faq details {
  background: var(--zh-white);
  border: 1px solid var(--zh-line);
  border-radius: var(--zh-radius-md);
  padding: 4px 20px;
}
.zh-faq summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--zh-navy);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.zh-faq summary::-webkit-details-marker { display: none; }
.zh-faq summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--zh-teal);
  line-height: 1;
}
.zh-faq details[open] summary::after { content: "\2013"; }
.zh-faq details > :not(summary) { margin-bottom: 16px; }

/* ---------- 19. Formulier ---------- */
.zh-form { display: grid; gap: 16px; max-width: 640px; }
.zh-field { display: grid; gap: 6px; }
.zh-field label { font-weight: 700; font-size: .9375rem; color: var(--zh-navy); }
.zh-field input, .zh-field textarea, .zh-field select {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--zh-line);
  border-radius: var(--zh-radius-sm);
  background: var(--zh-white);
  color: var(--zh-ink);
  font-family: inherit;
  font-size: 1rem;
  width: 100%;
}
.zh-field textarea { min-height: 160px; resize: vertical; }
.zh-field input:focus, .zh-field textarea:focus, .zh-field select:focus {
  border-color: var(--zh-teal);
  outline: 3px solid rgba(120, 215, 229, .65);
  outline-offset: 1px;
}
.zh-field__hint { font-size: .8125rem; color: var(--zh-muted); }
.zh-form__status { font-size: .9375rem; font-weight: 700; }
.zh-form__status[data-state="error"] { color: #9b2226; }
.zh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 20. Footer ---------- */
.zh-footer {
  position: relative;
  background: var(--zh-navy);
  color: var(--zh-white);
  padding-block: 48px 24px;
  overflow: hidden;
}
.zh-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/brand/wave-lines.svg');
  background-size: 720px auto;
  opacity: .10;
  pointer-events: none;
}
.zh-footer > * { position: relative; }
.zh-footer__grid { display: grid; gap: 32px; }
@media (min-width: 48rem) { .zh-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .zh-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.zh-footer h2 { font-family: var(--zh-font-body); font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--zh-sand); margin-bottom: 12px; }
.zh-footer ul { list-style: none; margin: 0; padding: 0; }
.zh-footer li { margin-bottom: 2px; }
/* De footerlinks stonden op 21 px hoog. Dat is een lijst en geen lopende
   tekst, dus de uitzondering van WCAG 2.2 SC 2.5.8 geldt hier niet en 24 px
   is het minimum. Met deze padding komt het doel op 37 px. */
.zh-footer a {
  display: inline-block;
  padding-block: 8px;
  color: var(--zh-white);
  text-decoration: none;
  font-size: .9375rem;
}
.zh-footer a:hover { color: var(--zh-aqua); text-decoration: underline; }
.zh-footer__logo svg { width: 244px; height: auto; display: block; margin-bottom: 16px; }
.zh-footer__tag { color: var(--zh-sand); font-size: .9375rem; max-width: 34ch; }
.zh-footer__bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: .8125rem;
  color: var(--zh-sand);
}

/* ---------- 21. Losse hulpklassen ---------- */
.zh-stack > * + * { margin-top: 16px; }
.zh-stack-lg > * + * { margin-top: 32px; }
.zh-measure { max-width: 70ch; }
.zh-muted { color: var(--zh-muted); }
.zh-small { font-size: .875rem; }
.zh-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.zh-sprite { display: none; }
.zh-gtm { display: none; visibility: hidden; }
.zh-spaced { margin-top: 24px; }
.zh-divider { height: 1px; background: var(--zh-line); border: 0; margin-block: 32px; }

/* ---------- 22. Responsive sectieafstanden ---------- */
@media (min-width: 48rem) { :root { --zh-section: 64px; } }
@media (min-width: 64rem) { :root { --zh-section: 96px; } }