@charset "utf-8";
/* ==========================================================================
   HotelNuevaYork.net - site.css
   Implementatie van het huisstijlhandboek v1.0.
   Mobile-first. Geen framework. Geen buildstap.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Lokaal gehost. Inter en Playfair Display worden door Google als variabele
   font geleverd: een bestand per subset dekt alle gewichten.             */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-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;
}

/* --- Design tokens ------------------------------------------------------- */

:root {
  /* Merkkleuren, letterlijk uit het huisstijlhandboek par. 70 */
  --hny-navy:  #0C1D33;
  --hny-slate: #38526E;
  --hny-teal:  #4FA7A0;
  --hny-gold:  #C9A24E;
  --hny-ivory: #F7F4EE;
  --hny-white: #FFFFFF;
  --hny-ink:   #142033;
  --hny-muted: #6B7280;
  --hny-line:  #D9D5CB;

  /* Afgeleide tekstkleuren.
     --text-muted is bewust donkerder dan --hny-muted: #6B7280 haalt op
     ivoor 4,40:1 en blijft daarmee onder de WCAG AA-grens van 4,5:1 voor
     normale tekst. #5B6270 haalt 5,59:1 en leest als dezelfde grijstoon. */
  --text-muted: #5B6270;
  --navy-hover: #16304F;
  --teal-soft:  #EAF4F3;
  --gold-soft:  #FAF4E6;

  /* Typografie */
  --font-display: "Playfair Display", Georgia, serif;
  --font-ui: "Inter", Arial, sans-serif;

  /* Spacing, 8px-grid (par. 28) */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 2.5rem; --s-8: 3rem;
  --s-9: 4rem;   --s-10: 5rem;  --s-11: 6rem;  --s-12: 7.5rem;

  /* Radius (par. 31) */
  --radius-card: 18px;
  --radius-button: 10px;
  --radius-chip: 999px;
  --radius-image: 14px;

  /* Shadows (par. 32) */
  --shadow-card: 0 6px 20px rgba(12, 29, 51, .08);
  --shadow-elevated: 0 12px 32px rgba(12, 29, 51, .12);

  /* Breedtes (par. 30) */
  --w-main: 1200px;
  --w-prose: 760px;
  --w-wide: 1280px;

  --header-h: 64px;
}

/* --- Reset --------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--hny-ivory);
  color: var(--hny-ink);
  font: 400 1rem/1.55 var(--font-ui);
  /* break-word en niet anywhere: 'anywhere' brak ook gewone woorden af zodra
     het krap werd, waardoor in tabellen 'Manhatta / n' verscheen. break-word
     grijpt alleen in als een woord echt niet past, zoals bij een lange URL. */
  overflow-wrap: break-word;
  word-break: normal;
}

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

a { color: var(--hny-navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy-hover); }

:where(button, input, select, textarea) { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--hny-teal);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Typografie (par. 10 en 11) ------------------------------------------ */

h1, h2, h3 { font-family: var(--font-display); color: var(--hny-navy); margin: 0 0 var(--s-4); }
h4, h5, h6 { font-family: var(--font-ui); color: var(--hny-navy); margin: 0 0 var(--s-3); }

h1 { font-weight: 700; font-size: 2.25rem; line-height: 1.12; letter-spacing: -.5px; max-width: 24ch; }
h2 { font-weight: 600; font-size: 1.875rem; line-height: 1.18; letter-spacing: -.3px; }
h3 { font-weight: 600; font-size: 1.5rem;  line-height: 1.25; }
h4 { font-weight: 600; font-size: 1.125rem; line-height: 1.35; }

p, ul, ol { margin: 0 0 var(--s-4); }
li { margin-bottom: var(--s-2); }

.lead { font-size: 1.0625rem; line-height: 1.6; }
.small { font-size: .875rem; line-height: 1.45; }
.micro { font-size: .75rem; line-height: 1.4; font-weight: 500; letter-spacing: .02em; }
.muted { color: var(--text-muted); }

@media (min-width: 48rem) {
  h1 { font-size: 3rem; max-width: 780px; }
  h2 { font-size: 2.25rem; line-height: 1.2; }
  h3 { font-size: 1.75rem; }
  h4 { font-size: 1.25rem; }
  .lead { font-size: 1.125rem; }
}

/* --- Layout -------------------------------------------------------------- */

.container { width: min(100% - 2rem, var(--w-main)); margin-inline: auto; }
.container--wide { width: min(100% - 2rem, var(--w-wide)); margin-inline: auto; }
.prose { max-width: var(--w-prose); }
.prose h2 { margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-6); }
.prose > :first-child { margin-top: 0; }

section { margin-block: var(--s-10); }

/* Een tussenkop hoort visueel bij wat eronder komt, niet bij wat erboven
   staat. Zonder extra ruimte erboven plakt hij aan de vorige alinea vast en
   leest de pagina als een blok. */
h2 { margin-top: var(--s-9); }
h3 { margin-top: var(--s-7); }
h4 { margin-top: var(--s-6); }
section > h2:first-child,
section > :first-child h2,
h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }

@media (min-width: 64rem) { section { margin-block: var(--s-12); } }

.section-head { margin-bottom: var(--s-6); }
.section-head p { max-width: var(--w-prose); margin-bottom: 0; }
.section-head h2 { margin-bottom: var(--s-3); }

.stack > * + * { margin-top: var(--s-4); }

/* --- Skip link ----------------------------------------------------------- */

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--hny-navy); color: var(--hny-white);
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-button);
  font-weight: 600; text-decoration: none;
  transition: top 150ms ease;
}
.skip-link:focus { top: var(--s-3); color: var(--hny-white); }

/* --- Header (par. 46, 47) ------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--hny-white);
  border-bottom: 1px solid var(--hny-line);
}

.header-inner {
  display: flex; align-items: center; gap: var(--s-6);
  min-height: var(--header-h);
  padding-block: var(--s-2);
}

.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { width: 170px; height: 57px; }
@media (min-width: 64rem) { .brand img { width: 200px; height: 67px; } }

.nav-toggle {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-3);
  background: transparent; border: 1px solid var(--hny-navy);
  border-radius: var(--radius-button);
  color: var(--hny-navy); font-weight: 600; font-size: .9375rem;
  cursor: pointer;
}
.nav-toggle .bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after  { top: 6px; }

.site-nav { display: none; }
.site-nav.is-open {
  display: block;
  position: fixed; inset: var(--header-h) 0 0 0;
  background: var(--hny-ivory);
  overflow-y: auto;
  padding: var(--s-5) 0 var(--s-9);
  border-top: 1px solid var(--hny-line);
}
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav > ul a {
  display: block; padding: var(--s-3) var(--s-4);
  min-height: 44px;
  font-weight: 600; text-decoration: none; color: var(--hny-navy);
  border-bottom: 1px solid var(--hny-line);
}
.site-nav > ul a:hover,
.site-nav > ul a[aria-current="page"] { background: var(--hny-white); }
.site-nav .nav-cta { margin: var(--s-4); }


@media (min-width: 64rem) {
  .nav-toggle { display: none; }
  /* Linklijst en CTA horen op een rij naast het logo. Met display:block viel
     de CTA op een tweede regel onder de navigatie. */
  .site-nav {
    display: flex; align-items: center; gap: var(--s-5);
    margin-left: auto;
  }
  .site-nav > ul { display: flex; align-items: center; gap: var(--s-2); }
  /* De globale li-marge maakte de lijst 8 px hoger dan de links zelf, waardoor
     de CTA vier pixel lager uitkwam dan de menu-items. */
  .site-nav > ul > li { margin-bottom: 0; }
  .site-nav > ul a {
    border: 0; padding: var(--s-2) var(--s-3);
    font-size: .9375rem; border-radius: var(--radius-button);
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .site-nav > ul a[aria-current="page"] { background: var(--hny-ivory); }
  .site-nav .nav-cta { margin: 0 0 0 var(--s-2); }
}


/* --- Uitklapmenu (par. 46, 48) -------------------------------------------
   Gebouwd op <details>, dus het werkt ook zonder JavaScript en is met het
   toetsenbord te bedienen. JS sluit alleen andere panelen en reageert op
   Escape en op een klik buiten het menu. */

.nav-drop summary {
  display: flex; align-items: center; gap: var(--s-2);
  cursor: pointer; list-style: none;
  padding: var(--s-3) var(--s-4); min-height: 44px;
  font-weight: 600; color: var(--hny-navy);
  border-bottom: 1px solid var(--hny-line);
}
.nav-drop summary::-webkit-details-marker { display: none; }
.nav-drop .caret {
  width: 0; height: 0; margin-left: auto; flex: 0 0 auto;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .5;
  transition: transform 180ms ease;
}
.nav-drop[open] > summary .caret { transform: rotate(180deg); }
.nav-drop summary:hover { background: var(--hny-white); }

.nav-drop__panel ul { list-style: none; margin: 0; padding: 0; }
.nav-drop__panel a {
  display: block; padding: var(--s-2) var(--s-4) var(--s-2) var(--s-6);
  min-height: 40px; font-size: .9375rem; font-weight: 500;
  color: var(--hny-ink); text-decoration: none;
  border-bottom: 1px solid var(--hny-line);
}
.nav-drop__panel a:hover { background: var(--hny-white); color: var(--hny-navy); }
.nav-drop__all { margin: 0; }
.nav-drop__all a { font-weight: 600; color: var(--hny-navy); }

@media (min-width: 64rem) {
  .site-nav > ul > li { position: relative; }
  .nav-drop summary {
    border: 0; border-radius: var(--radius-button);
    padding: var(--s-2) var(--s-3); font-size: .9375rem;
  }
  .site-nav > ul > li.is-active > .nav-drop > summary,
  .site-nav > ul > li.is-active > a { background: var(--hny-ivory); }
  .nav-drop .caret { margin-left: 0; opacity: .6; }

  .nav-drop__panel {
    position: absolute; top: calc(100% + var(--s-2)); left: 0; z-index: 60;
    min-width: 17rem; max-width: 22rem;
    max-height: min(70vh, 30rem); overflow-y: auto;
    background: var(--hny-white);
    border: 1px solid var(--hny-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-elevated);
    padding: var(--s-2);
  }
  /* Het laatste menu-item mag niet buiten het scherm vallen. */
  .site-nav > ul > li:nth-last-child(-n+3) .nav-drop__panel { left: auto; right: 0; }

  .nav-drop__panel a {
    padding: var(--s-2) var(--s-3); border: 0;
    border-radius: var(--radius-button); min-height: 38px;
  }
  .nav-drop__all { margin-top: var(--s-2); padding-top: var(--s-2);
                   border-top: 1px solid var(--hny-line); }
}

/* --- Sorteerbare tabellen ------------------------------------------------- */

.table-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5) 0;
}
.table-filter label { font-size: .875rem; font-weight: 500; color: var(--hny-navy); }
.table-filter input {
  flex: 1 1 14rem; min-height: 44px; padding: var(--s-2) var(--s-4);
  border: 1px solid var(--hny-line); border-radius: var(--radius-button);
  background: var(--hny-white); font-size: .9375rem;
}
.table-filter input:focus-visible {
  outline: 3px solid var(--hny-teal); outline-offset: 1px; border-color: var(--hny-teal);
}
.table-filter__count { font-size: .8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.th-sort {
  display: inline-flex; align-items: center; gap: var(--s-2);
  width: 100%; padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
}
.th-sort:hover .th-label { text-decoration: underline; }
.th-arrow { width: 0; height: 0; opacity: .45; flex: 0 0 auto;
            border-left: 4px solid transparent; border-right: 4px solid transparent;
            border-top: 5px solid currentColor; }
thead th[aria-sort="ascending"] .th-arrow {
  opacity: 1; border-top: 0; border-bottom: 5px solid currentColor;
}
thead th[aria-sort="descending"] .th-arrow { opacity: 1; }
.table-wrap tbody tr[hidden] { display: none; }

/* --- Winnaar-iconen in een vergelijking ----------------------------------- */
/* Kleur is nooit de enige drager: elk teken heeft een aria-label. */

/* Het teken staat naast de tekst en lijnt op de eerste regel uit, ook als
   die tekst over twee regels loopt. */
.cell-win { display: flex; align-items: center; gap: var(--s-3); }
.win {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: 0 0 auto;
  border-radius: 50%;
  font: 700 16px/1 var(--font-ui);
}
.win--yes { background: var(--hny-teal); color: var(--hny-navy); border: 1px solid #3E8B85; }
.win--no  { background: var(--hny-ivory); color: var(--hny-slate); border: 1px solid var(--hny-slate); }
.win--tie { background: var(--hny-white); color: var(--text-muted); border: 1px dashed var(--hny-line); }

/* --- Breadcrumbs (par. 50) ----------------------------------------------- */

.breadcrumb { padding-block: var(--s-4) 0; font-size: .875rem; }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
}
.breadcrumb li { margin: 0; color: var(--text-muted); display: flex; align-items: center; gap: var(--s-2); }
.breadcrumb li + li::before { content: "›"; color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb [aria-current="page"] { color: var(--hny-navy); font-weight: 500; }

/* --- Hero (par. 26, 27, 57) ---------------------------------------------- */

.hero { margin-block: var(--s-5) var(--s-9); }
.hero-media {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  background: var(--hny-navy);
}
.hero-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 70% 50%; }
.hero-body { padding: var(--s-6) 0 0; }
.hero-body h1 { margin-bottom: var(--s-4); }
.hero-body .lead { color: var(--hny-ink); max-width: 62ch; }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* De cijfers dragen het bewijs onder de belofte van de pagina. Als losse
   regel tekst vielen ze weg, dus staan ze nu in eigen kaartjes. */
.hero-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3); margin: var(--s-6) 0 0; padding: 0;
  list-style: none;
}
.hero-facts li {
  margin: 0; padding: var(--s-4);
  background: var(--hny-white);
  border: 1px solid var(--hny-line);
  border-top: 3px solid var(--hny-gold);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-card);
}
.hero-facts b {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.75rem; line-height: 1.05; letter-spacing: -.5px;
  color: var(--hny-navy);
  font-variant-numeric: tabular-nums;
}
.hero-facts span {
  display: block; margin-top: var(--s-2);
  font-size: .75rem; font-weight: 500; letter-spacing: .02em;
  line-height: 1.3; color: var(--text-muted);
}
@media (min-width: 64rem) {
  .hero-facts li { padding: var(--s-5); }
  .hero-facts b { font-size: 2.25rem; }
  .hero-facts span { font-size: .8125rem; }
}

@media (min-width: 64rem) {
  .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
  .hero-body { padding: 0; order: 1; }
  .hero-media { order: 2; }
  .hero-media img { aspect-ratio: 16 / 9; }
}

/* --- Buttons (par. 34-37, 71) -------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5);
  border-radius: var(--radius-button); border: 1px solid transparent;
  font: 600 .9375rem/1 var(--font-ui);
  text-decoration: none; cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn-primary { background: var(--hny-navy); color: var(--hny-white); }
.btn-primary:hover { background: var(--navy-hover); color: var(--hny-white); box-shadow: inset 0 -2px 0 var(--hny-gold); }
.btn-secondary { background: transparent; color: var(--hny-navy); border-color: var(--hny-navy); }
.btn-secondary:hover { background: var(--hny-ivory); color: var(--hny-navy); }
.btn-teal { background: var(--hny-teal); color: var(--hny-navy); }
.btn-teal:hover { background: #46958F; color: var(--hny-navy); }
.btn-block { width: 100%; }

/* --- Card grids (par. 64, 65) -------------------------------------------- */

.grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 48rem) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Hotelcard (par. 38, 39) --------------------------------------------- */

.hotel-card {
  display: flex; flex-direction: column;
  background: var(--hny-white);
  border: 1px solid var(--hny-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--s-5);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.hotel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); }

.hotel-card__media {
  border-radius: var(--radius-image); overflow: hidden;
  margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-4);
  background: var(--hny-ivory);
}
.hotel-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Geen geverifieerd beeld beschikbaar. Een branded blok houdt het raster
   gelijk en is eerlijker dan de foto van een ander hotel. Zelfde verhouding
   als een echte kaartfoto, zodat de kaarten even hoog blijven. */
.hotel-card__media--none {
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 10px,
      rgba(12, 29, 51, .035) 10px 11px),
    var(--hny-ivory);
}
.hotel-card__media--none .ph {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--hny-white);
  border: 1px solid var(--hny-line);
  color: var(--hny-slate);
}
.hotel-card__media--none .ph-icon { width: 26px; height: 26px; }
.hotel-card__media--none .ph-note {
  margin: var(--s-3) 0 0; font-size: .75rem; font-weight: 500;
  letter-spacing: .02em; color: var(--text-muted);
}

/* Het rangnummer is de uitkomst van onze ordening en mag dat laten zien.
   Als klein grijs cijfertje viel het volledig weg. */
.hotel-card__rank {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin: 0 0 var(--s-3);
  border-radius: 50%;
  background: var(--hny-navy); color: var(--hny-white);
  font: 700 1rem/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.hotel-card h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: var(--s-2); }
.hotel-card h3 a { text-decoration: none; }

.hotel-card__where {
  font-size: .875rem; color: var(--text-muted); margin-bottom: var(--s-4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
}
.hotel-card__why { font-size: .9375rem; margin-bottom: var(--s-4); }
.hotel-card__tradeoff {
  font-size: .875rem; color: var(--hny-ink);
  background: var(--gold-soft);
  border-left: 3px solid var(--hny-gold);
  padding: var(--s-3) var(--s-4);
  border-radius: 0 var(--radius-button) var(--radius-button) 0;
  margin-bottom: var(--s-4);
}
.hotel-card__foot { margin-top: auto; padding-top: var(--s-4); }
.hotel-card__disclosure { font-size: .75rem; color: var(--text-muted); margin: var(--s-2) 0 0; }

/* --- Reviewbadge (par. 40) ----------------------------------------------- */
/* Teal met navy tekst: 5,95:1. Wit op teal haalt 2,85:1 en is niet gebruikt. */

.score { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.score__value {
  display: grid; place-items: center;
  min-width: 48px; min-height: 48px; padding: var(--s-2);
  background: var(--hny-teal); color: var(--hny-navy);
  border-radius: var(--radius-button);
  font: 700 1.25rem/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.score__meta { font-size: .8125rem; color: var(--text-muted); line-height: 1.35; }
.score__meta b { display: block; color: var(--hny-navy); font-size: .875rem; font-weight: 600; }

/* --- Sterren (par. 41) ---------------------------------------------------- */
/* Kleur is nooit de enige betekenisdrager: de tekstlabel staat er altijd bij. */

.stars { display: inline-flex; align-items: center; gap: 2px; color: var(--hny-gold); }
.stars svg { width: 14px; height: 14px; }

/* --- Badges (par. 42) ----------------------------------------------------- */

.badges { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); list-style: none; padding: 0; }
.badges li { margin: 0; }
.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-chip);
  font-size: .75rem; font-weight: 600; line-height: 1.5;
  background: var(--hny-ivory); color: var(--hny-navy);
  border: 1px solid var(--hny-line);
}
.badge--primary { background: var(--teal-soft); border-color: var(--hny-teal); }
.badge svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* --- Feature-lijst -------------------------------------------------------- */

.features { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; padding: 0; margin: 0 0 var(--s-4); font-size: .875rem; }
.features li { margin: 0; display: inline-flex; align-items: center; gap: var(--s-2); color: var(--hny-ink); }
.features svg { width: 16px; height: 16px; color: var(--hny-slate); flex: 0 0 auto; }

/* --- Zone- en categoriecards (par. 54, 55) -------------------------------- */

.tile {
  display: flex; flex-direction: column;
  background: var(--hny-white); border: 1px solid var(--hny-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); color: inherit; }
.tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tile__body { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; flex: 1; }
.tile__body h3 { font-size: 1.1875rem; margin-bottom: var(--s-2); }
.tile__body p { font-size: .875rem; color: var(--hny-ink); margin-bottom: var(--s-3); }
.tile__meta { margin-top: auto; font-size: .8125rem; color: var(--text-muted); display: flex; align-items: center; gap: var(--s-2); }
.tile__meta .arrow { margin-left: auto; color: var(--hny-navy); font-weight: 600; transition: transform 180ms ease; }
.tile:hover .arrow { transform: translateX(3px); }

.tile--compact { flex-direction: row; align-items: center; gap: var(--s-4); padding: var(--s-4); }
.tile--compact .icon-box {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--hny-ivory); border-radius: var(--radius-button); color: var(--hny-navy);
}
.tile--compact .icon-box svg { width: 24px; height: 24px; }
.tile--compact .tile__body { padding: 0; }
.tile--compact h3 { font-size: 1rem; margin-bottom: 2px; }
.tile--compact p { font-size: .8125rem; margin: 0; color: var(--text-muted); }

/* --- Keuzehulp ------------------------------------------------------------ */

.chooser {
  background: var(--hny-white); border: 1px solid var(--hny-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--s-5);
}
@media (min-width: 64rem) { .chooser { padding: var(--s-7); } }
.chooser h2 { font-size: 1.5rem; margin-bottom: var(--s-2); }
.chooser > p { color: var(--text-muted); max-width: 60ch; }
.chooser__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 40rem) { .chooser__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .chooser__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.chooser__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); min-height: 56px;
  border: 1px solid var(--hny-line); border-radius: var(--radius-button);
  text-decoration: none; color: var(--hny-navy); font-weight: 600; font-size: .9375rem;
  background: var(--hny-ivory);
  transition: border-color 180ms ease, background-color 180ms ease;
}
.chooser__item:hover { border-color: var(--hny-navy); background: var(--hny-white); color: var(--hny-navy); }
.chooser__item svg { width: 22px; height: 22px; color: var(--hny-slate); flex: 0 0 auto; }

/* --- Tabellen (par. 43) --------------------------------------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--hny-line); border-radius: var(--radius-card); background: var(--hny-white); }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .9375rem; }
caption { text-align: left; padding: var(--s-4) var(--s-5); color: var(--text-muted); font-size: .875rem; }
th, td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--hny-line); vertical-align: top; }
thead th { background: var(--hny-navy); color: var(--hny-white); font-weight: 600; font-size: .875rem; white-space: nowrap; }
thead th:first-child { border-top-left-radius: var(--radius-card); }
thead th:last-child { border-top-right-radius: var(--radius-card); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: #FCFBF8; }
td .num { font-variant-numeric: tabular-nums; }

/* De eerste twee kolommen dragen de naam en de plaats. Die moeten breed
   genoeg blijven om niet af te breken; de rest mag krimpen. */
/* De naamkolom draagt de langste tekst en is de ingang van de rij; die mag
   ruim. De cijferkolommen hebben aan hun inhoud genoeg en werden alleen breed
   omdat de koptekst langer is dan het getal eronder. Door de kop te laten
   afbreken krimpen ze naar wat ze nodig hebben. */
th, td { overflow-wrap: normal; }
tbody th[scope="row"] { min-width: 13rem; width: 26%; }
tbody td:first-of-type { min-width: 8rem; width: 14%; }
thead th { white-space: normal; hyphens: none; }
thead th:first-child, thead th:nth-child(2) { white-space: nowrap; }
/* width:1% laat de browser de kolom naar zijn minimale inhoudsbreedte
   krimpen. Omdat de kop mag afbreken is dat het langste woord, niet de hele
   kop; daar zat de verspilde ruimte. */
thead th[data-narrow] { width: 1%; }

th[scope="row"] { font-weight: 600; color: var(--hny-navy); }

/* --- Vergelijking --------------------------------------------------------- */

.versus { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 48rem) { .versus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
.versus__side {
  background: var(--hny-white); border: 1px solid var(--hny-line);
  border-radius: var(--radius-card); padding: var(--s-5); box-shadow: var(--shadow-card);
}
.versus__side h3 { margin-bottom: var(--s-3); }
.versus__side ul { list-style: none; padding: 0; margin: 0; }
.versus__side li { display: flex; gap: var(--s-3); font-size: .9375rem; }
.versus__side li svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; }

/* Pros en cons (par. 75): teal voor voordelen, slate voor nadelen. Niet rood. */
.pro svg  { color: var(--hny-teal); }
.con svg  { color: var(--hny-slate); }

/* --- Informatieblok / methodologie ---------------------------------------- */

.note {
  background: var(--teal-soft);
  border: 1px solid var(--hny-teal);
  border-radius: var(--radius-card);
  padding: var(--s-5);
}
.note--gold { background: var(--gold-soft); border-color: var(--hny-gold); }
.note h2, .note h3 { margin-bottom: var(--s-3); }
.note > :last-child { margin-bottom: 0; }
.note p { font-size: .9375rem; }

.panel {
  background: var(--hny-white); border: 1px solid var(--hny-line);
  border-radius: var(--radius-card); padding: var(--s-5); box-shadow: var(--shadow-card);
}
.panel > :last-child { margin-bottom: 0; }

/* --- FAQ ------------------------------------------------------------------ */

.faq { border: 1px solid var(--hny-line); border-radius: var(--radius-card); background: var(--hny-white); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--hny-line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--s-4) var(--s-5); min-height: 44px;
  font-weight: 600; color: var(--hny-navy);
  display: flex; align-items: center; gap: var(--s-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; font-size: 1.375rem; line-height: 1;
  color: var(--hny-slate); font-weight: 400; transition: transform 180ms ease;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { background: var(--hny-ivory); }
.faq .faq__body { padding: 0 var(--s-5) var(--s-5); }
.faq .faq__body > :last-child { margin-bottom: 0; }

/* --- Afstandsbanden -------------------------------------------------------- */

.bands { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.bands li { margin: 0; }
.bands span {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border-radius: var(--radius-chip);
  background: var(--hny-white); border: 1px solid var(--hny-line);
  font-size: .875rem; font-weight: 500;
}
.bands b { color: var(--hny-navy); font-variant-numeric: tabular-nums; }

/* --- Verwante links -------------------------------------------------------- */

.linklist { list-style: none; padding: 0; margin: 0; columns: 1; }
@media (min-width: 40rem) { .linklist { columns: 2; column-gap: var(--s-6); } }
@media (min-width: 64rem) { .linklist--3 { columns: 3; } }
.linklist li { margin: 0 0 var(--s-2); break-inside: avoid; }
.linklist a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 32px; font-size: .9375rem; }

/* --- Formulier (par. 51) --------------------------------------------------- */

.field { margin-bottom: var(--s-4); }
.field label { display: block; font-weight: 500; font-size: .9375rem; margin-bottom: var(--s-2); color: var(--hny-navy); }
.field .hint { font-size: .8125rem; color: var(--text-muted); margin: 0 0 var(--s-2); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 44px; padding: var(--s-3) var(--s-4);
  background: var(--hny-white); color: var(--hny-ink);
  border: 1px solid var(--hny-line); border-radius: var(--radius-button);
  font-size: 1rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 3px solid var(--hny-teal); outline-offset: 1px; border-color: var(--hny-teal);
}
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: var(--s-4); }
.form-status:empty { display: none; }
.form-status p { border-radius: var(--radius-button); padding: var(--s-3) var(--s-4); margin: 0; font-size: .9375rem; }
.form-status .ok { background: var(--teal-soft); border: 1px solid var(--hny-teal); color: var(--hny-ink); }
.form-status .err { background: #FBEDEC; border: 1px solid #A6453C; color: #7A2F28; }

/* --- Footer (par. 49) ------------------------------------------------------ */

.site-footer {
  background: var(--hny-navy); color: var(--hny-ivory);
  margin-top: var(--s-11); padding-block: var(--s-9) var(--s-6);
}
.site-footer a { color: var(--hny-ivory); text-decoration: none; }
.site-footer a:hover { color: var(--hny-gold); text-decoration: underline; }
.footer-top {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding-bottom: var(--s-7); margin-bottom: var(--s-7);
  border-bottom: 1px solid rgba(247, 244, 238, .18);
}
.footer-top img { width: 220px; height: 74px; }
.footer-top p {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: 1.125rem; color: var(--hny-gold);
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-7); }
@media (min-width: 40rem) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
@media (min-width: 64rem) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-footer h2 { color: var(--hny-white); font-family: var(--font-ui); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s-4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--s-2); font-size: .9375rem; }
.footer-bottom {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid rgba(247, 244, 238, .18);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center;
  font-size: .8125rem; color: #C9CFD8;
}
.footer-bottom p { margin: 0; }
.footer-disclosure { flex-basis: 100%; max-width: 76ch; }
@media (min-width: 64rem) {
  /* Copyright links, de afhankelijkheidsverklaring vlak tegen de rechterrand. */
  .footer-bottom {
    flex-wrap: nowrap; align-items: flex-start;
    justify-content: space-between; gap: var(--s-8);
  }
  .footer-disclosure {
    flex: 0 1 46rem; max-width: none; margin-left: 0; text-align: right;
  }
}

/* --- Diversen -------------------------------------------------------------- */

.updated { font-size: .8125rem; color: var(--text-muted); }
.icon { width: 1em; height: 1em; fill: none; vertical-align: -.125em; }
.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;
}

.error-page { text-align: center; padding-block: var(--s-10); }
.error-page h1 { margin-inline: auto; }
.error-page .lead { margin-inline: auto; max-width: 52ch; }

/* --- Print ----------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .hero-media, .nav-toggle { display: none; }
  body { background: #fff; }
  .hotel-card, .panel, .tile { box-shadow: none; }
}

/* --- Reduced motion (par. 117 techdoc, par. 67 huisstijl) ------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hotel-card:hover, .tile:hover { transform: none; }
}