@charset "utf-8";
/* Vegan-Hotels.nl  |  huisstijl v1.0  |  mobile-first, geen framework */

:root {
  --color-primary: #1E3D2F;
  --color-primary-hover: #2E7D5B;
  --color-sage: #A8C5A2;
  --color-sage-soft: #DDE9D8;
  --color-sand: #F2E9DB;
  --color-offwhite: #FAF7F2;
  --color-terracotta: #D9794A;
  --color-gold: #C9A15A;
  --color-text: #2B2B2B;
  --color-muted: #5A5A55;
  --color-border: #D8D3C8;
  --color-options-text: #795C35;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius-button: 8px;
  --radius-card: 10px;
  --radius-hero: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 16px rgba(30, 61, 47, .08);
  --shadow-card-hover: 0 8px 24px rgba(30, 61, 47, .12);

  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 40px; --space-6: 48px; --space-7: 64px; --space-8: 80px; --space-9: 96px;

  --content: 1240px;
}

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

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

body {
  margin: 0;
  background: var(--color-offwhite);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: normal;
}

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

a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--color-primary-hover); }

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

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; color: var(--color-primary); margin: 0 0 var(--space-2); }
h1 { font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 4.2vw, 2.5rem); line-height: 1.15; letter-spacing: -.015em; margin-top: var(--space-6); }
h3 { font-size: clamp(1.3rem, 3vw, 1.875rem); line-height: 1.2; margin-top: var(--space-4); }
h4 { font-family: var(--font-body); font-size: 1.15rem; font-weight: 600; line-height: 1.3; color: var(--color-primary); margin: var(--space-3) 0 var(--space-1); }
p { margin: 0 0 var(--space-2); }

.container { width: min(100% - 2rem, var(--content)); margin-inline: auto; }
.prose { max-width: 70ch; }
.lead { font-size: 1.125rem; }
.muted { color: var(--color-muted); }
.small { font-size: .875rem; line-height: 1.5; }
.caption { font-size: .75rem; line-height: 1.45; font-weight: 500; }
.center { text-align: center; }

.eyebrow {
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-primary-hover);
  margin: 0 0 var(--space-1);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-primary); color: #fff; padding: var(--space-1) var(--space-2);
  border-radius: 0 0 var(--radius-button) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------------ header */
.site-header {
  background: var(--color-offwhite);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 40;
}
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  min-height: 64px;
}
.site-header__logo img { width: 168px; height: auto; }
.site-header__spacer { flex: 1; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: 0 var(--space-2);
  background: transparent; border: 1px solid var(--color-primary);
  border-radius: var(--radius-button); color: var(--color-primary);
  font: 600 .9rem/1 var(--font-body); cursor: pointer;
}
.site-nav { display: none; }
/* Op mobiel valt de navigatie onder de logoregel, over de volle breedte.
   Zonder dit blijft hij een smal flex-item en breken de pulldownpanelen. */
.site-nav.is-open { display: block; flex-basis: 100%; }
.site-nav ul { list-style: none; margin: 0; padding: 0 0 var(--space-2); }
.site-nav a {
  display: block; padding: .75rem .25rem; min-height: 44px;
  font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--color-border);
}

@media (min-width: 62rem) {
  .site-header__inner { min-height: 78px; }
  .site-header__logo img { width: 200px; }
  .nav-toggle { display: none; }
  .site-nav { display: block !important; flex-basis: auto; }
  .site-nav ul { display: flex; gap: var(--space-3); align-items: center; padding: 0; }
  .site-nav a { border: 0; padding: .5rem 0; }
  .site-nav a:hover { color: var(--color-primary-hover); }
}

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: 0 24px;
  background: var(--color-primary); color: #fff;
  border: 1px solid var(--color-primary); border-radius: var(--radius-button);
  font: 600 1rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; }
.btn--ghost { background: transparent; color: var(--color-primary); }
.btn--ghost:hover { background: var(--color-sand); color: var(--color-primary); border-color: var(--color-primary); }
.btn--block { width: 100%; }
/* Op de donkergroene sectie kleurt .section--green a alle links wit. Zonder een
   eigen regel wordt deze knop dus witte tekst op een gebroken witte vlak. */
.btn--licht,
.section--green a.btn--licht {
  background: var(--color-offwhite); border-color: var(--color-offwhite);
  color: var(--color-primary);
}
.btn--licht:hover,
.section--green a.btn--licht:hover {
  background: #fff; border-color: #fff; color: var(--color-primary);
}
@media (min-width: 48rem) { .btn { min-height: 48px; } }

.link-arrow { font-weight: 600; text-decoration: none; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- hero */
.hero { padding: var(--space-4) 0 var(--space-2); }
.hero__grid { display: grid; gap: var(--space-3); }
.hero__media img {
  width: 100%; border-radius: var(--radius-hero);
  aspect-ratio: 16 / 7; object-fit: cover;
}
.hero__text > p:last-child { margin-bottom: 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

@media (min-width: 62rem) {
  .hero { padding: var(--space-6) 0 var(--space-3); }
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--space-6); }
  .hero__media img { aspect-ratio: 3 / 2; }
  .hero--wide .hero__grid { grid-template-columns: 1fr; }
  .hero--wide .hero__media img { aspect-ratio: 21 / 6; }
}

/* ------------------------------------------------------------ breadcrumbs */
.breadcrumb { padding: var(--space-2) 0 0; font-size: .8125rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.breadcrumb li::after { content: "/"; margin-left: .35rem; color: var(--color-muted); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--color-muted); }

/* ---------------------------------------------------------------- badges */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: var(--radius-pill);
  font-size: .8125rem; font-weight: 600; line-height: 1.3;
}
.badge--100 { background: var(--color-primary); color: #fff; }
.badge--friendly { background: var(--color-sage-soft); color: var(--color-primary); }
.badge--options { background: var(--color-sand); color: var(--color-options-text); }
.badge--plain { background: var(--color-offwhite); border: 1px solid var(--color-border); color: var(--color-text); font-weight: 500; }
.badge svg { width: 15px; height: 15px; flex: none; }

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

/* ----------------------------------------------------------- vegan score */
.score { display: inline-flex; align-items: center; gap: .6rem; }
.score__ring { position: relative; width: 62px; height: 62px; flex: none; }
.score__ring svg { display: block; transform: rotate(-90deg); }
.score__ring span {
  position: absolute; inset: 0; display: grid; place-content: center;
  font: 600 1.15rem/1 var(--font-body); color: var(--color-primary);
}
.score__label { font-size: .8125rem; line-height: 1.35; }
.score__label b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--color-primary); }

/* ----------------------------------------------------------- hotelkaart */
.cards { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
@media (min-width: 48rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--space-3);
  box-shadow: var(--shadow-card);
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }

.card__head { display: flex; gap: var(--space-2); align-items: flex-start; }
.card__title { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; margin: 0 0 .15rem; }
.card__title a { text-decoration: none; }
.card__title a:hover { text-decoration: underline; }
.card__place { font-size: .875rem; color: var(--color-muted); margin: 0; }
.card__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .875rem; }
.card__facts li { display: flex; gap: .5rem; align-items: flex-start; }
.card__facts svg { width: 17px; height: 17px; flex: none; margin-top: .18rem; color: var(--color-primary-hover); }
.card__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; }
.card__rating { font-size: .8125rem; color: var(--color-muted); margin: 0; }
.card__rating b { color: var(--color-text); }

/* -------------------------------------------------------------- secties */
.section { padding: var(--space-5) 0; }
.section--sand { background: var(--color-sand); }
.section--green { background: var(--color-primary); color: var(--color-offwhite); }
.section--green h2, .section--green h3 { color: var(--color-offwhite); }
.section--green a { color: #fff; }
.section__intro { max-width: 70ch; }
@media (min-width: 62rem) { .section { padding: var(--space-7) 0; } }

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

.panel {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--space-3);
}
.panel--sand { background: var(--color-sand); border-color: transparent; }
.panel > :last-child { margin-bottom: 0; }
/* Koppen hebben een marge naar boven voor het ritme in lopende tekst. Binnen een
   kader stapelt die op de padding, waardoor er boven de kop bijna dubbel zoveel
   ruimte staat als onder de tekst. Het eerste kind krijgt daarom geen marge. */
.panel > :first-child,
.sidecard > :first-child,
.card__body > :first-child { margin-top: 0; }

/* ------------------------------------------------------------- tabellen */
.table-wrap { overflow-x: auto; margin: var(--space-3) 0; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: #fff; }
table { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: .875rem; }
caption { text-align: left; padding: var(--space-2) var(--space-3) 0; font-size: .8125rem; color: var(--color-muted); }
th, td { text-align: left; padding: .7rem var(--space-2); border-bottom: 1px solid var(--color-border); vertical-align: top; }
thead th { background: var(--color-sand); color: var(--color-primary); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td a { font-weight: 500; }

/* ------------------------------------------------------------- kenmerken */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 40rem) { .facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.facts li { display: flex; gap: .6rem; align-items: flex-start; }
.facts svg { width: 19px; height: 19px; flex: none; margin-top: .22rem; color: var(--color-primary-hover); }

.deflist { margin: 0; display: grid; gap: .1rem; }
.deflist dt { font-weight: 600; font-size: .8125rem; color: var(--color-muted); }
.deflist dd { margin: 0 0 var(--space-2); }

/* --------------------------------------------------------------- hotelkop */
.hotel-head { background: var(--color-sand); padding: var(--space-4) 0 var(--space-5); }
.hotel-head__grid { display: grid; gap: var(--space-3); }
@media (min-width: 62rem) { .hotel-head__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-6); align-items: start; } }
.hotel-head h1 { margin-bottom: var(--space-1); }
.verdict { font-size: 1.0625rem; }
.sidecard { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-3); box-shadow: var(--shadow-card); }
.sidecard > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- faq */
.faq { display: grid; gap: var(--space-2); }
.faq details {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--space-2) var(--space-3);
}
.faq summary { font-weight: 600; cursor: pointer; color: var(--color-primary); min-height: 32px; }
.faq summary::marker { color: var(--color-primary-hover); }
.faq p { margin: var(--space-1) 0 0; }

/* -------------------------------------------------------------- formulier */
.form { display: grid; gap: var(--space-2); max-width: 34rem; }
.form label { font-weight: 600; font-size: .9rem; display: block; margin-bottom: .25rem; }
.form input, .form select, .form textarea {
  width: 100%; padding: .7rem .8rem; font: 400 1rem/1.4 var(--font-body);
  color: var(--color-text); background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius-button);
}
.form textarea { min-height: 9rem; resize: vertical; }
.form .hp { position: absolute; left: -9999px; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--color-primary); color: var(--color-offwhite); padding: var(--space-6) 0 var(--space-3); margin-top: var(--space-8); }
.site-footer a { color: var(--color-offwhite); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__grid { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h2 { font-family: var(--font-body); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-sage); margin: 0 0 var(--space-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .9375rem; }
.site-footer__logo img { width: 190px; margin-bottom: var(--space-2); }
.site-footer__legal { border-top: 1px solid rgba(250, 247, 242, .22); margin-top: var(--space-5); padding-top: var(--space-3); font-size: .8125rem; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }

/* ------------------------------------------------------------- disclosure */
.disclosure {
  background: var(--color-sage-soft); color: var(--color-primary);
  border-radius: var(--radius-card); padding: var(--space-2) var(--space-3);
  font-size: .875rem; margin: var(--space-3) 0;
}
.disclosure p { margin: 0; }

.checked-line { font-size: .8125rem; color: var(--color-muted); display: flex; gap: .45rem; align-items: center; }
.checked-line svg { width: 16px; height: 16px; color: var(--color-primary-hover); flex: none; }

/* ---------------------------------------------------------------- 404 etc */
.pagehead { padding: var(--space-5) 0 var(--space-2); }
.pagehead .prose { margin-top: var(--space-2); }

/* ------------------------------------------------------- navigatie pulldown */
/* Gebouwd op <details>, dus hij werkt ook zonder JavaScript. JS sluit hem
   alleen extra bij Escape of een klik buiten het paneel. */
.nav-drop { position: relative; }
.nav-drop > details > summary {
  display: flex; align-items: center; gap: .3rem;
  padding: .75rem .25rem; min-height: 44px;
  font-weight: 500; color: var(--color-primary);
  cursor: pointer; list-style: none;
  border-bottom: 1px solid var(--color-border);
}
.nav-drop > details > summary::-webkit-details-marker { display: none; }
.nav-drop > details > summary:hover { color: var(--color-primary-hover); }
.nav-drop__pijl { width: 16px; height: 16px; flex: none; transition: transform .18s ease; }
.nav-drop > details[open] > summary .nav-drop__pijl { transform: rotate(180deg); }

/* Expliciet verbergen. Een absoluut gepositioneerd kind van een gesloten
   <details> blijft in sommige browsers gewoon zichtbaar, omdat het uit de flow
   staat en daarmee aan het verbergmechanisme van het element ontsnapt. */
.nav-drop > details:not([open]) .nav-drop__paneel { display: none; }

.nav-drop__paneel { padding: var(--space-2) 0 var(--space-2) var(--space-2); }
.nav-drop__kolommen { display: grid; gap: var(--space-3); }
.nav-drop__kop {
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-muted);
  margin: 0 0 .4rem;
}
.nav-drop__paneel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.nav-drop__paneel a {
  display: flex; align-items: baseline; gap: .4rem;
  padding: .45rem .5rem; border: 0; min-height: 0;
  border-radius: var(--radius-button); text-decoration: none; font-weight: 400;
}
.nav-drop__paneel a:hover { background: var(--color-sage-soft); color: var(--color-primary); }
.nav-drop__paneel a > span:first-child { flex: 1; }
.nav-drop__aantal { font-size: .75rem; color: var(--color-muted); flex: none; }
.nav-drop__meer { margin: var(--space-2) 0 0; padding-left: .5rem; font-size: .875rem; }

@media (min-width: 62rem) {
  .nav-drop > details > summary { border: 0; padding: .5rem 0; }
  .nav-drop__paneel {
    position: absolute; top: calc(100% + .6rem); left: 50%; transform: translateX(-50%);
    z-index: 50; padding: var(--space-3);
    max-width: calc(100vw - 2rem);
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover);
  }
  .nav-drop:last-of-type .nav-drop__paneel { left: auto; right: 0; transform: none; }
  /* Kolommen zo breed als hun langste regel, zodat geen enkel menupunt afbreekt. */
  .nav-drop__kolommen { grid-auto-flow: column; grid-auto-columns: max-content; }
  .nav-drop__paneel a { white-space: nowrap; }
  .nav-drop__paneel a > span:first-child { padding-right: var(--space-2); }
}

/* --------------------------------------------------------- kaartafbeelding */
.card { padding: 0; overflow: hidden; gap: 0; }
.card__body {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); flex: 1;
}
.card__media { position: relative; margin: 0; }
.card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card__media-note {
  position: absolute; left: .6rem; bottom: .6rem;
  background: rgba(30, 61, 47, .78); color: var(--color-offwhite);
  font-size: .6875rem; font-weight: 500; letter-spacing: .02em;
  padding: .2rem .5rem; border-radius: var(--radius-pill);
}

/* ----------------------------------------------------------- hotelbeeld */
.hotel-beeld { margin: 0; padding: var(--space-4) 0 0; }
.hotel-beeld img { width: 100%; border-radius: var(--radius-hero); aspect-ratio: 21 / 8; object-fit: cover; }
.hotel-beeld--locatie { padding-top: 0; margin-bottom: var(--space-3); }
.hotel-beeld--locatie img { aspect-ratio: 21 / 7; }
.hotel-beeld figcaption {
  margin-top: var(--space-1); font-size: .8125rem; color: var(--color-muted);
}

/* --------------------------------------------------------------- kenmerken */
.kenmerken {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.kenmerk {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: .875rem; font-weight: 500; color: var(--color-primary);
}
.kenmerk svg { width: 17px; height: 17px; flex: none; color: var(--color-primary-hover); }

/* --------------------------------------------------------- tabelbediening */
.tabel-bediening {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  margin: 0 0 var(--space-2);
}
.tabel-bediening label { font-size: .875rem; font-weight: 600; color: var(--color-primary); }
.tabel-bediening input {
  flex: 1 1 14rem; min-width: 0; max-width: 22rem;
  padding: .55rem .75rem; font: 400 .9375rem/1.4 var(--font-body);
  border: 1px solid var(--color-border); border-radius: var(--radius-button); background: #fff;
}
.tabel-bediening output { font-size: .8125rem; color: var(--color-muted); }

thead th button {
  display: inline-flex; align-items: center; gap: .3rem;
  width: 100%; padding: 0; background: none; border: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
thead th button svg { width: 14px; height: 14px; flex: none; opacity: .45; }
thead th button:hover svg { opacity: 1; }
thead th[aria-sort] button svg { opacity: 1; color: var(--color-primary-hover); }
thead th[aria-sort="descending"] button svg { transform: scaleY(-1); }
tbody tr[hidden] { display: none; }

/* Lege waarde in een tabel. Een streepje leest rustiger dan de tekst
   'niet vastgelegd' in elke cel; het aria-label houdt de betekenis overeind. */
.leeg { color: var(--color-muted); }