/* ==========================================================================
   Luxehotelsboeken.nl - site.css
   Huisstijl v2.0. Mobile first. Geen framework, geen buildstap.

   Drie afwijkingen op het huisstijldocument, met reden:
   1. Burnished Copper (#A5643E) haalt op Warm Ivory een contrast van 4,23:1.
      Dat is onvoldoende voor WCAG AA op bodyformaat. Copper wordt daarom
      alleen gebruikt voor niet-tekstuele accenten en voor tekst vanaf 24px.
   2. Slate (#626A67) op Forest Soft haalt 4,43:1. Binnen Forest Soft-vlakken
      wordt daarom Ink of Deep Forest gebruikt, niet Slate.
   3. Warm Sand (#E5DDD1) haalt op wit 1,35:1. Bruikbaar als decoratieve
      scheidingslijn, niet als rand van een formulierveld. Interactieve
      randen gebruiken --color-border-strong.
   ========================================================================== */

/* ---------- 1. Fonts ------------------------------------------------------ */

@font-face {
    font-family: 'Newsreader';
    src: url('/assets/fonts/newsreader.woff2') format('woff2');
    font-weight: 200 800;
    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: 'Manrope';
    src: url('/assets/fonts/manrope.woff2') format('woff2');
    font-weight: 200 800;
    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;
}

/* ---------- 2. Tokens ----------------------------------------------------- */

:root {
    --color-brand-900: #173A34;
    --color-brand-700: #24554B;
    --color-brand-100: #DDE8E3;

    --color-canvas: #F7F3EC;
    --color-surface: #FFFFFF;
    --color-surface-muted: #F0EEEA;
    --color-text: #202725;
    --color-text-muted: #626A67;
    --color-border: #E5DDD1;
    --color-border-strong: #B9AE9C;

    --color-accent: #A5643E;
    --color-accent-soft: #F1E1D5;

    --color-success: #2F6B4F;
    --color-warning: #9A671D;
    --color-error: #A33A32;

    --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-body: 'Manrope', Inter, Arial, sans-serif;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    --container-wide: 1280px;
    --container-content: 760px;

    --shadow-card: 0 8px 24px rgba(23, 58, 52, .06);
    --shadow-card-hover: 0 12px 32px rgba(23, 58, 52, .10);

    --transition-fast: 180ms ease;
}

/* ---------- 3. Reset ------------------------------------------------------ */

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

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--color-canvas);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

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

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-brand-900);
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2rem, 6vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -.01em;
}

h2 {
    font-size: clamp(1.6rem, 4vw, 2.375rem);
    line-height: 1.15;
}

h3 {
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    line-height: 1.2;
}

h4 {
    font-size: 1.125rem;
    line-height: 1.3;
}

p {
    margin: 0 0 var(--space-4);
}

a {
    color: var(--color-brand-700);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

a:hover {
    color: var(--color-brand-900);
}

ul,
ol {
    margin: 0 0 var(--space-4);
    padding-left: 1.25em;
}

li {
    margin-bottom: var(--space-2);
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- 4. Layout ----------------------------------------------------- */

.container {
    width: min(100% - 2.25rem, var(--container-wide));
    margin-inline: auto;
}

@media (min-width: 48rem) {
    .container {
        width: min(100% - 3rem, var(--container-wide));
    }
}

@media (min-width: 64rem) {
    .container {
        width: min(100% - 4rem, var(--container-wide));
    }
}

.prose {
    max-width: var(--container-content);
}

.prose p,
.prose li {
    font-size: 1.0625rem;
}

.section {
    padding-block: var(--space-16);
}

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

@media (min-width: 64rem) {
    .section {
        padding-block: var(--space-20);
    }

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

.section--soft {
    background: var(--color-brand-100);
}

.section--surface {
    background: var(--color-surface);
}

.section__head {
    max-width: 44rem;
    margin-bottom: var(--space-10);
}

.section__head p {
    color: var(--color-text-muted);
    font-size: 1.0625rem;
    margin-bottom: 0;
}

.section--soft .section__head p {
    color: var(--color-text);
}

.eyebrow {
    overflow-wrap: anywhere;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-brand-700);
    margin: 0 0 var(--space-3);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--color-brand-900);
    color: #fff;
    padding: var(--space-3) var(--space-5);
    border-radius: 0 0 var(--radius-sm) 0;
    font-weight: 600;
}

.skip-link:focus {
    left: 0;
    color: #fff;
}

/* ---------- 5. Header ----------------------------------------------------- */

.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 40;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    min-height: 68px;
    padding-block: var(--space-2);
}

@media (min-width: 64rem) {
    .site-header__inner {
        min-height: 80px;
    }
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    padding-block: var(--space-2);
    min-width: 0;
    max-width: 100%;
}

.brand__mark {
    flex: none;
    width: 30px;
    height: 30px;
}

.brand__name {
    display: block;
    font-family: var(--font-display);
    font-size: min(1.1875rem, 5.2vw);
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1.05;
    color: var(--color-brand-900);
    letter-spacing: -.01em;
}

.brand__tagline {
    display: none;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

@media (min-width: 30rem) {
    .brand__mark {
        width: 34px;
        height: 34px;
    }

    .brand__name {
        font-size: min(1.375rem, 6vw);
    }

    .brand__tagline {
        display: block;
    }
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-brand-900);
    font: 600 .875rem/1 var(--font-body);
    cursor: pointer;
}

.nav-toggle svg {
    width: 20px;
    height: 20px;
}

/* Zonder JavaScript blijft de navigatie gewoon staan. De .js-klasse wordt
   door een inline script in de head gezet, dus voor de eerste paint: er is
   geen flits en geen layout shift. Zie QA-REPORT.md, finding F-002. */
.js .site-nav {
    display: none;
}

html:not(.js) .nav-toggle {
    display: none;
}

html:not(.js) .site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    padding-bottom: var(--space-2);
}

html:not(.js) .site-nav a {
    border-bottom: 0;
    padding: var(--space-2) 0;
    min-height: 0;
}

.site-nav[data-open='true'] {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    padding: var(--space-3) 0 var(--space-5);
}

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Alleen de bovenste lijst. Zonder de directe-kindcombinator kreeg het
   uitklapmenu deze regels ook, en dan gaat het submenu zich als tweede
   navigatiebalk gedragen. */
.site-nav[data-open='true'] > ul {
    width: min(100% - 2.25rem, var(--container-wide));
    margin-inline: auto;
}

.site-nav a {
    display: block;
    padding: var(--space-3) 0;
    min-height: 44px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-brand-900);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
}

.site-nav a[aria-current='page'] {
    color: var(--color-accent);
}

@media (min-width: 64rem) {
    .nav-toggle {
        display: none;
    }

    .site-nav,
    .js .site-nav {
        display: block;
        min-width: 0;
    }

    html:not(.js) .site-nav ul {
        padding-bottom: 0;
    }

    html:not(.js) .site-nav a {
        padding: 0 0 2px;
    }

    .site-nav > ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--space-3) var(--space-6);
    }

    /* Het submenu is een gewone lijst onder elkaar, geen flexrij. */
    .nav-menu {
        display: block;
    }

    .nav-menu li {
        margin: 0;
    }

    .site-nav a {
        padding: 0;
        min-height: 0;
        border: 0;
        border-bottom: 2px solid transparent;
        padding-bottom: 2px;
    }

    .site-nav a:hover {
        border-bottom-color: var(--color-accent);
    }

    .site-nav a[aria-current='page'] {
        border-bottom-color: var(--color-accent);
    }
}

/* ---------- 6. Breadcrumb ------------------------------------------------- */

.breadcrumb {
    padding-block: var(--space-4);
    font-size: .8125rem;
}

.breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
}

.breadcrumb li {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* Flexkinderen krimpen niet vanzelf onder hun langste woord. Zonder dit
       liep het kruimelpad bij een fors vergroot basislettertype buiten de
       viewport. Zie QA-REPORT.md, finding F-003. */
    min-width: 0;
}

.breadcrumb li > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.breadcrumb li + li::before {
    content: '\203A';
    color: var(--color-border-strong);
}

.breadcrumb a {
    color: var(--color-text-muted);
}

.breadcrumb [aria-current='page'] {
    color: var(--color-text);
    font-weight: 600;
}

/* ---------- 7. Hero ------------------------------------------------------- */

.hero {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.hero__grid {
    display: grid;
    gap: var(--space-8);
    padding-block: var(--space-10) var(--space-12);
    align-items: center;
}

.hero__grid > * {
    min-width: 0;
}

@media (min-width: 64rem) {
    .hero__grid {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
        gap: var(--space-16);
        padding-block: var(--space-16) var(--space-20);
    }
}

.hero__lead {
    font-size: 1.0625rem;
    color: var(--color-text-muted);
    max-width: 34rem;
}

@media (min-width: 48rem) {
    .hero__lead {
        font-size: 1.1875rem;
    }
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.hero__media {
    position: relative;
}

.hero__media img {
    width: 100%;
    border-radius: var(--radius-lg);
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--color-surface-muted);
}

@media (min-width: 64rem) {
    .hero__media img {
        aspect-ratio: 16 / 10;
    }
}

.hero__caption {
    margin: var(--space-3) 0 0;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

.hero--compact .hero__grid {
    padding-block: var(--space-10);
    grid-template-columns: minmax(0, 1fr);
}

.hero--compact h1 {
    font-size: clamp(1.875rem, 5vw, 2.75rem);
}

/* De paginahero wordt in 2:1 aangeleverd en blijft 2:1. Bijsnijden naar 3:2 of
   16:10 haalt juist de rustige ruimte weg waar de compositie op gebouwd is. */
/* Zelfde specificiteit als .hero__media img, maar later in het bestand. De
   herhaling in de media query is nodig omdat die daarboven 16/10 zet. */
.hero__media--paginabeeld img {
    aspect-ratio: 2 / 1;
}

@media (min-width: 64rem) {
    .hero__media--paginabeeld img {
        aspect-ratio: 2 / 1;
    }
}

/* Compacte beeldband op merk-, contact- en juridische pagina's. Hier hoort geen
   grote commerciele hero, dus wordt hetzelfde 2:1-bestand door CSS naar een
   bandformaat gesneden. */
.masthead {
    padding-top: var(--space-6);
    background: var(--color-surface);
}

/* Een vaste hoogtestaffel in plaats van een verhouding. Bij 3:1 wordt de band
   op een breed scherm 427 px hoog en duwt hij de H1 bijna van het scherm; dat
   is precies de grote hero die hier niet hoort. De hoogte komt uit CSS en niet
   uit het bestand, dus het beeld kan bij het laden niets verschuiven. */
.masthead img {
    display: block;
    width: 100%;
    height: clamp(160px, 20vw, 260px);
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
}

.masthead + .hero--compact .hero__grid {
    padding-block: var(--space-8) var(--space-10);
}

/* ---------- 8. Buttons ---------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font: 600 .9375rem/1.2 var(--font-body);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast),
        border-color var(--transition-fast), color var(--transition-fast);
}

.btn--primary {
    background: var(--color-brand-900);
    color: #fff;
}

.btn--primary:hover {
    background: var(--color-brand-700);
    color: #fff;
    transform: translateY(-1px);
}

.btn--secondary {
    background: var(--color-surface);
    border-color: var(--color-brand-900);
    color: var(--color-brand-900);
}

.btn--secondary:hover {
    background: var(--color-brand-100);
    color: var(--color-brand-900);
}

.btn--block {
    width: 100%;
}

.btn svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.textlink {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: .9375rem;
    color: var(--color-brand-700);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-strong);
    padding-bottom: 2px;
}

.textlink:hover {
    border-bottom-color: var(--color-accent);
}

.textlink svg {
    width: 14px;
    height: 14px;
}

/* ---------- 9. Badges ----------------------------------------------------- */

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-brand-100);
    color: var(--color-brand-900);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
}

.badge svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.badge--accent {
    background: var(--color-accent-soft);
}

.badge--plain {
    background: var(--color-surface-muted);
    color: var(--color-text);
    font-weight: 500;
}

/* ---------- 10. Hotelcards ------------------------------------------------ */

.card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 40rem) {
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .card-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.card {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
    min-width: 0;
}

.card:hover {
    box-shadow: var(--shadow-card-hover);
}

.card__media {
    position: relative;
    overflow: hidden;
    background: var(--color-surface-muted);
}

.card__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 200ms ease;
}

.card:hover .card__media img {
    transform: scale(1.02);
}

.card__rank {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 8px;
    border-radius: var(--radius-sm);
    background: var(--color-brand-900);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
}

.card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-5);
    gap: var(--space-3);
    min-width: 0;
}

.card__title {
    font-size: 1.1875rem;
    line-height: 1.25;
    margin: 0;
}

.card__title a {
    color: var(--color-brand-900);
    text-decoration: none;
}

.card__title a:hover {
    text-decoration: underline;
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    font-size: .8125rem;
    color: var(--color-text-muted);
    margin: 0;
}

.card__meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-border-strong);
    flex: none;
}

.card__score {
    font-weight: 700;
    color: var(--color-text);
    font-size: .9375rem;
}

.card__text {
    margin: 0;
    font-size: .9375rem;
    color: var(--color-text);
}

.card__foot {
    margin-top: auto;
    padding-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ---------- 11. Luxepaspoort ---------------------------------------------- */

.passport {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
}

.passport__title {
    font-family: var(--font-body);
    overflow-wrap: anywhere;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-brand-700);
    margin: 0 0 var(--space-5);
}

.passport dl {
    margin: 0;
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 48rem) {
    .passport dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5) var(--space-8);
    }

    .passport .passport__wide {
        grid-column: 1 / -1;
    }
}

.passport dl > div {
    min-width: 0;
}

.passport dt {
    overflow-wrap: anywhere;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--color-brand-900);
    margin-bottom: var(--space-2);
}

.passport dd {
    margin: 0;
    font-size: .9375rem;
    color: var(--color-text);
}

.passport dd ul {
    margin: 0;
    padding-left: 1.1em;
}

.passport dd li:last-child {
    margin-bottom: 0;
}

/* ---------- 12. Feiten ------------------------------------------------------ */

.facts {
    display: grid;
    gap: 0;
    margin: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.facts > div {
    display: grid;
    grid-template-columns: minmax(0, min(10rem, 40%)) minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    font-size: .9375rem;
}

.facts > div:last-child {
    border-bottom: 0;
}

.facts dt {
    font-weight: 600;
    color: var(--color-brand-900);
}

.facts dd {
    margin: 0;
}

/* ---------- 13. Vergelijker ----------------------------------------------- */

.compare {
    display: grid;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 48rem) {
    .compare {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.compare li {
    margin: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    min-width: 0;
}

.compare__q {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-brand-700);
    margin-bottom: var(--space-2);
}

.compare p {
    margin: 0;
    font-size: .9375rem;
}

.compare a {
    font-weight: 600;
}

/* ---------- 14. Kompas ---------------------------------------------------- */

.compass {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.compass li {
    margin: 0;
    min-width: 0;
}

.compass__item {
    display: flex;
    gap: var(--space-4);
    height: 100%;
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

a.compass__item:hover {
    border-color: var(--color-brand-900);
    box-shadow: var(--shadow-card);
    color: inherit;
}

.compass__item > div {
    min-width: 0;
}

.compass__icon {
    flex: none;
    width: 32px;
    height: 32px;
    color: var(--color-accent);
}

.compass__icon svg {
    width: 100%;
    height: 100%;
}

.compass h3 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-brand-900);
    margin: 0 0 var(--space-2);
}

.compass p {
    margin: 0;
    font-size: .875rem;
    color: var(--color-text-muted);
}

/* ---------- 15. Linklijsten ----------------------------------------------- */

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.tile-grid li {
    margin: 0;
    min-width: 0;
}

.tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    height: 100%;
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tile:hover {
    border-color: var(--color-brand-900);
    box-shadow: var(--shadow-card);
}

.tile strong {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-brand-900);
}

.tile span {
    font-size: .875rem;
    color: var(--color-text-muted);
}

/* ---------- 16. FAQ ------------------------------------------------------- */

.faq {
    max-width: var(--container-content);
    border-top: 1px solid var(--color-border);
}

.faq details {
    border-bottom: 1px solid var(--color-border);
}

.faq summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-5) var(--space-8) var(--space-5) 0;
    position: relative;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-brand-900);
    min-height: 44px;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: '';
    position: absolute;
    right: var(--space-2);
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-right: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
}

.faq details[open] summary::after {
    transform: rotate(-135deg);
    margin-top: -3px;
}

.faq details > div {
    padding: 0 0 var(--space-5);
    font-size: .9375rem;
}

.faq details > div p:last-child {
    margin-bottom: 0;
}

/* ---------- 17. Notities en trust ----------------------------------------- */

.note {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-brand-700);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    padding: var(--space-4) var(--space-5);
    font-size: .875rem;
    color: var(--color-text);
}

.note p:last-child {
    margin-bottom: 0;
}

.note--accent {
    border-left-color: var(--color-accent);
}

.checked {
    font-size: .8125rem;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.checked svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.editorial {
    background: var(--color-accent-soft);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}

.editorial h2,
.editorial h3 {
    margin-top: 0;
}

.editorial p:last-child {
    margin-bottom: 0;
}

.verdict {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.35;
    font-weight: 500;
    color: var(--color-brand-900);
    margin: 0;
    max-width: 46rem;
}

/* ---------- 18. Formulier ------------------------------------------------- */

.form {
    max-width: 34rem;
    display: grid;
    gap: var(--space-5);
}

.field {
    display: grid;
    gap: var(--space-2);
}

.field label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-brand-900);
}

.field .hint {
    font-size: .8125rem;
    color: var(--color-text-muted);
}

.field input,
.field textarea,
.field select {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    font: 400 1rem/1.5 var(--font-body);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
}

.field textarea {
    min-height: 9rem;
    resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: var(--color-brand-900);
}

.form__status {
    font-size: .9375rem;
    font-weight: 600;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
}

.form__status[data-state='ok'] {
    background: var(--color-brand-100);
    color: var(--color-success);
}

.form__status[data-state='error'] {
    background: var(--color-accent-soft);
    color: var(--color-error);
}

.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- 19. Footer ---------------------------------------------------- */

.site-footer {
    background: var(--color-brand-900);
    color: var(--color-brand-100);
    padding-block: var(--space-16) var(--space-8);
    margin-top: var(--space-16);
}

.site-footer a {
    color: var(--color-brand-100);
    text-decoration: none;
}

.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.site-footer__grid {
    display: grid;
    gap: var(--space-10);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .site-footer__grid {
        grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
        gap: var(--space-12);
    }
}

.site-footer h2 {
    font-family: var(--font-body);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: var(--space-4);
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .9375rem;
}

.site-footer li {
    margin-bottom: var(--space-3);
}

.site-footer__brand .brand__name {
    color: #fff;
}

.site-footer__brand .brand__tagline {
    display: block;
    color: var(--color-brand-100);
}

.site-footer__promise {
    font-size: .9375rem;
    margin: var(--space-5) 0 0;
    max-width: 22rem;
}

.site-footer__bottom {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(221, 232, 227, .2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    justify-content: space-between;
    font-size: .8125rem;
}

/* ---------- 20. Hotelpagina ----------------------------------------------- */

.hotel-head {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-12);
}

.hotel-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    font-size: .9375rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-5);
}

.hotel-head__meta strong {
    color: var(--color-text);
}

.gallery {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: var(--space-8);
}

.gallery img {
    width: 100%;
    border-radius: var(--radius-md);
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--color-surface-muted);
}

.layout {
    display: grid;
    gap: var(--space-10);
    align-items: start;
}

.layout > * {
    min-width: 0;
}

.stack > *,
.passport,
.cta-box,
.note,
.editorial {
    min-width: 0;
}

@media (min-width: 64rem) {
    .layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
        gap: var(--space-16);
    }
}

.layout__aside {
    display: grid;
    gap: var(--space-6);
    min-width: 0;
}

@media (min-width: 64rem) {
    .layout__aside {
        position: sticky;
        top: 100px;
    }
}

.cta-box {
    background: var(--color-brand-900);
    color: #fff;
    border-radius: var(--radius-md);
    padding: var(--space-6);
}

.cta-box h2 {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: var(--space-3);
}

.cta-box p {
    font-size: .875rem;
    color: var(--color-brand-100);
}

.cta-box .btn--primary {
    background: var(--color-accent);
    color: #fff;
}

.cta-box .btn--primary:hover {
    background: #8f5334;
    color: #fff;
}

.cta-box .checked {
    color: var(--color-brand-100);
}

.stack > * + * {
    margin-top: var(--space-10);
}

.stack h2 {
    margin-bottom: var(--space-4);
}

.list-clean {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.list-clean li {
    position: relative;
    padding-left: var(--space-6);
    margin: 0;
    font-size: 1rem;
    /* Gridkinderen krijgen impliciet min-width:auto en krimpen anders niet
       onder hun langste woord. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.list-clean li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .6em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--color-accent);
}

.list-clean--muted li::before {
    background: var(--color-border-strong);
}

/* ---------- 21. Utility --------------------------------------------------- */

.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;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.text-muted {
    color: var(--color-text-muted);
}

.lead {
    font-size: 1.125rem;
    color: var(--color-text-muted);
}

@media print {
    .site-header,
    .site-footer,
    .nav-toggle,
    .cta-box {
        display: none;
    }
}

/* ---------- 22. Uitklapmenu in de hoofdnavigatie -------------------------- */

/* Openen gebeurt in CSS, niet in JavaScript. De bovenliggende link blijft een
   echte link naar een bestaande pagina, dus zonder script blijft alles
   bereikbaar. :focus-within zorgt dat het menu ook opengaat als iemand er met
   de tab-toets in komt. */

/* De reset zet svg op display:block. Zonder deze regel valt de chevron onder
   de linktekst en worden de twee uitklapitems een regel hoger dan de rest van
   de balk. De link wordt daarom zelf een flexrij. */
.nav-heeft-menu > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-chevron {
    width: 13px;
    height: 13px;
    flex: none;
    display: block;
    opacity: .7;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 63.999rem) {
    .nav-heeft-menu > a {
        display: flex;
        justify-content: flex-start;
    }
}

/* Mobiel: het submenu staat gewoon ingesprongen in het opengeklapte paneel. */
.nav-menu a {
    padding-left: var(--space-4);
    font-weight: 500;
    color: var(--color-text-muted);
}

@media (min-width: 64rem) {
    .nav-heeft-menu {
        position: relative;
    }

    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 50;
        min-width: 15rem;
        margin-top: var(--space-3);
        padding: var(--space-2) 0;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-card);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity var(--transition-fast), transform var(--transition-fast),
            visibility var(--transition-fast);
    }

    /* Een onzichtbare brug over de marge, anders valt het menu dicht zodra de
       muis het gat tussen link en paneel kruist. */
    .nav-heeft-menu::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: var(--space-3);
    }

    .nav-heeft-menu:hover > .nav-menu,
    .nav-heeft-menu:focus-within > .nav-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-menu a {
        display: block;
        padding: var(--space-2) var(--space-5);
        min-height: 40px;
        border: 0;
        font-weight: 500;
        color: var(--color-brand-900);
        white-space: nowrap;
    }

    .nav-menu a:hover {
        background: var(--color-brand-100);
        border: 0;
    }
}

/* ---------- 23. Tegels met beeld ----------------------------------------- */

.tile--beeld {
    padding: 0;
    overflow: hidden;
}

.tile__media {
    display: block;
    background: var(--color-surface-muted);
}

.tile__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

.tile__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5);
}

/* ---------- 24. Ruimte tussen de profiellabels en het beeld ---------------- */

/* Het beeld zit in een .gallery-wrapper, dus .badges + img raakt niets. */
.badges + .gallery {
    margin-top: var(--space-6);
}

/* ---------- 25. Luxepaspoort, herziene opmaak ----------------------------- */

/* Het oordeel is de kernzin en krijgt leesformaat. De rubrieklabels volgen het
   eyebrow-idioom van de rest van de site, zodat ze als label lezen en niet als
   een tweede laag koppen. */

.passport__lead {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    line-height: 1.5;
    color: var(--color-brand-900);
    margin: 0 0 var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.passport dt {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-brand-700);
    margin-bottom: var(--space-3);
}

.passport dd ul {
    list-style: none;
    padding-left: 0;
}

.passport dd li {
    position: relative;
    padding-left: var(--space-5);
}

.passport dd li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .6em;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--color-accent);
}

.passport__voet {
    display: grid;
    gap: var(--space-5);
    margin: var(--space-6) 0 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

@media (min-width: 48rem) {
    .passport__voet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-8);
    }
}

.passport__voet dd {
    font-size: .9375rem;
    color: var(--color-text-muted);
}

.muted {
    color: var(--color-text-muted);
    font-size: .9375rem;
}

/* Het mobiele paneel bevat nu ook de twee submenu's en werd daarmee ruim
   1150 px hoog. Het paneel staat absoluut onder de sticky header, dus zonder
   begrenzing valt de onderkant buiten bereik. */
.site-nav[data-open='true'] {
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ---------- 26. Locatiekaartje ------------------------------------------- */

/* Het vlak vult de kolom, het beeld staat gecentreerd op een begrensde hoogte.
   De punt hangt aan .kaart__beeld, dat precies om het beeld sluit; ten opzichte
   van het bredere kader zouden de percentages niet kloppen. */

.kaart {
    margin: var(--space-6) 0 0;
}

.kaart__vlak {
    display: flex;
    justify-content: center;
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.kaart__beeld {
    position: relative;
    display: block;
}

.kaart__beeld img {
    display: block;
    width: auto;
    /* Groter dan de vorige 340 px: de plaatsnamen op de kaart moeten
       leesbaar blijven. */
    height: clamp(260px, 34vw, 430px);
    max-width: 100%;
}

.kaart__punt {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-surface);
}

.kaart figcaption {
    margin-top: var(--space-3);
    font-size: .8125rem;
    color: var(--color-text-muted);
}

/* ---------- 27. Luxepaspoort: plus, min en labels ------------------------- */

.passport__plus dd li::before {
    content: '+';
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    color: var(--color-success);
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.7;
}

/* Het voorbehoud staat in een eigen kader. Lichtrood, niet schreeuwerig: dit
   is geen waarschuwing maar de eerlijke keerzijde. Ink op dit vlak haalt
   13,5:1, de kop in donkerrood 7,6:1. */
.passport__min {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: #FBEFEC;
    border: 1px solid #E8CFC9;
    border-radius: var(--radius-sm);
}

.passport__min-kop {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8A2B24;
}

.passport__min-kop::before {
    content: '‘2';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #8A2B24;
    color: #fff;
    font-size: .8125rem;
    letter-spacing: 0;
}

.passport__min p:last-child {
    margin: 0;
    font-size: .9375rem;
}

/* ---------- 28. Labels ---------------------------------------------------- */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.chip {
    margin: 0;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-text);
    font-size: .8125rem;
    line-height: 1.4;
}

.chip--ja {
    background: var(--color-brand-100);
    color: var(--color-brand-900);
    font-weight: 600;
}

.chip--nee {
    background: transparent;
    border: 1px dashed var(--color-border-strong);
    color: var(--color-text-muted);
}

.chip--leeg {
    background: transparent;
    color: var(--color-text-muted);
    padding-left: 0;
}

/* ---------- 29. Feiten ---------------------------------------------------- */

.feiten {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}

.kerncijfers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-4);
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0 0 var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.kerncijfers li {
    margin: 0;
}

.kerncijfer__waarde {
    display: block;
    font-family: var(--font-display);
    font-size: 1.875rem;
    line-height: 1.1;
    color: var(--color-brand-900);
}

.kerncijfer__label {
    display: block;
    margin-top: 2px;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

.feitenrij + .feitenrij {
    margin-top: var(--space-5);
}

.feitenrij__kop {
    margin: 0 0 var(--space-2);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-brand-700);
}

.feitenrij p:last-child {
    margin: 0;
    font-size: .9375rem;
}

/* ---------- 30. Kaartmeta als labels -------------------------------------- */

.card__chips {
    margin: 0 0 var(--space-3);
}

.card__chips .chip {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: .75rem;
}

.card__chips .chip--ster {
    background: var(--color-accent-soft);
    color: #7A4527;
}

.card__score-regel {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    font-size: .8125rem;
    color: var(--color-text-muted);
}

.card__score-regel .card__score {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-brand-900);
}