/* Les Deux Canards Perdus — tokens uit het ontwerp */
:root {
  --kalk: #F3EADB;
  --champagne: #E4CFA3;
  --bordeaux: #8E322C;
  --lucht: #9CC3DC;
  --olijf: #5E6B4A;
  --dak: #6E5240;
  --inkt: #2B2420;
  --lijn: #DCCFB6;
  --lijn-warm: #C9B48A;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --breed: 1200px;
  --marge: 40px;
  --balk: 66px;
}

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/eb-garamond-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/work-sans.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

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

body {
  margin: 0;
  background: var(--kalk);
  color: var(--inkt);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.62;
}

/* height:auto hoort hierbij: zonder dat blijft het height-attribuut uit de HTML
   staan en wordt een foto uitgerekt zodra de CSS alleen de breedte zet. */
img { max-width: 100%; height: auto; }

a { color: var(--bordeaux); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--inkt); }

:is(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 3px;
}

#bovenaan { position: absolute; top: 0; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--kalk);
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 15px;
  padding: 14px 20px;
}
.skip:focus { left: 0; }

.wrap { max-width: var(--breed); margin: 0 auto; padding-inline: var(--marge); }

/* ---------- Header ---------- */

.hero { position: relative; background: var(--champagne); }

.hero__image {
  display: block;
  width: 100%;
  /* Laag genoeg dat de naam van het huis boven de vouw blijft, en niet hoger dan
     de foto zelf breed is, zodat er weinig hoeft te worden weggesneden. */
  /* Drie grenzen: de verhouding van de foto, een deel van de schermhoogte, en
     genoeg ruimte eronder zodat de naam van het huis altijd boven de vouw valt. */
  height: min(94vh, calc(100vw / 2.05), calc(100vh - 130px));
  min-height: 320px;
  object-fit: cover;
  /* Onderaan verankerd: de voordeur en het afstapje blijven in beeld. */
  object-position: 50% 100%;
}

/* Omgekeerde parallax en de naam die in de balk verschijnt, worden door site.js
   aangestuurd. Zonder script blijft de foto op zijn verankerde uitsnede staan en
   staat de naam gewoon in de balk; dat zijn allebei bruikbare staten. */
.wordmark--fade { transition: opacity 0.35s ease, visibility 0.35s ease; }
.wordmark--stil { opacity: 0; visibility: hidden; }

.hero__veil {
  position: absolute;
  inset: 0 0 auto 0;
  height: 190px;
  background: linear-gradient(to bottom, rgba(243, 234, 219, 0.72), rgba(243, 234, 219, 0));
}

.badge {
  border-radius: 50%;
  background: var(--kalk);
  object-fit: contain;
  padding: 19px;
}

.hero__badge { position: absolute; top: 26px; left: var(--marge); width: 204px; height: 204px; padding: 23px; }

/* ---------- Vaste balk met navigatie en taalkeuze ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--kalk);
  border-bottom: 1px solid var(--lijn);
}

/* Op de home ligt de balk doorschijnend over de headerfoto. */
.topbar--overlay { background: rgba(243, 234, 219, 0.86); border-bottom: none; }
.topbar--overlay + .hero { margin-top: calc(-1 * var(--balk)); }
.topbar--overlay + .hero .hero__badge { top: calc(26px + var(--balk)); }

.topbar__inner {
  position: relative;
  max-width: var(--breed);
  margin: 0 auto;
  padding: 0 var(--marge);
  height: var(--balk);
  display: flex;
  align-items: center;
  gap: 24px;
}

.wordmark {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  color: var(--inkt);
  text-decoration: none;
  white-space: nowrap;
}

/* De hamburger en het sluitlinkje horen alleen bij de mobiele balk. */
.menu-toggle, .menu-close { display: none; }

.menu { display: flex; gap: 26px; margin-left: auto; font-family: var(--sans); font-size: 15px; }
.menu a { color: var(--inkt); text-decoration: none; padding-bottom: 2px; }
.menu a[aria-current] { border-bottom: 2px solid var(--bordeaux); }

.langs {
  display: flex;
  gap: 2px;
  font-family: var(--sans);
  font-size: 13px;
  background: rgba(243, 234, 219, 0.9);
  border: 1px solid var(--lijn);
  padding: 3px;
}
.langs a, .langs span { padding: 4px 9px; text-decoration: none; color: var(--inkt); }
.langs [aria-current] { background: var(--bordeaux); color: var(--kalk); }

.titlecard {
  max-width: var(--breed);
  margin: -40px auto 0;
  /* Links geen marge: de tekst erin lijnt zo uit met de koppen daaronder. */
  padding-inline: 0 var(--marge);
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
}

.titlecard__text {
  background: var(--kalk);
  padding: 40px var(--marge) 36px;
  animation: rise 0.7s ease-out both;
}

.titlecard h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

.titlecard p { font-size: 21px; line-height: 1.5; margin: 16px 0 28px; max-width: 34ch; }

.titlecard__second { display: block; width: 100%; height: 320px; object-fit: cover; background: var(--champagne); }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Knoppen ---------- */

.button {
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  padding: 14px 26px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.button--primary { background: var(--bordeaux); color: var(--kalk); }
.button--primary:hover { background: var(--inkt); color: var(--kalk); }
.button--secondary { background: var(--kalk); color: var(--inkt); border-color: var(--dak); }
.button--secondary:hover { background: var(--champagne); color: var(--inkt); }

/* ---------- Secties ---------- */

.section { padding-top: 96px; }
.section--tight { padding-top: 72px; }

.section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.15;
  margin: 0 0 24px;
  text-wrap: balance;
}

/* De welkomstkop is het enige koptekstelement dat als beeld mag werken. */
.section h2.opener {
  font-size: clamp(30px, 3.4vw, 42px);
  margin-bottom: 28px;
  max-width: 22ch;
}

/* Volledig uitgeschreven, zodat de regel voor subpagina's (main h2) hier niet
   doorlekt met een bovenmarge en een afwijkende regelafstand. */
.section--band h2,
.book h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.15;
  margin: 0 0 28px;
}

/* In het reserveerblok volgt direct een alinea; die heeft zelf al ruimte eronder. */
.book h2 { margin-bottom: 18px; }

.label,
.section h2.label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dak);
  margin: 0 0 20px;
  max-width: none;
}

.prose { max-width: 68ch; }
.prose p { margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.prose .closing { font-style: italic; }

/* ---------- Het huis in het kort ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
}

.facts div { background: var(--kalk); padding: 22px 20px; }
.facts dt { font-family: var(--sans); font-size: 13px; color: var(--dak); margin-bottom: 8px; }
.facts dd { margin: 0; font-size: 20px; line-height: 1.3; }
.facts dd.is-number { font-size: 26px; font-variant-numeric: tabular-nums; }

/* ---------- Voorzieningen en tarieven ---------- */

.band { background: var(--champagne); margin-top: 88px; }
.band > .wrap { padding-block: 72px; }

.amenities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

.amenities h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--dak);
}

.amenities ul { margin: 0; padding: 0; list-style: none; font-size: 17px; line-height: 1.5; }
.amenities li + li { margin-top: 9px; }

.datatable { width: 100%; max-width: 360px; border-collapse: collapse; font-size: 17px; margin-bottom: 8px; }
.datatable tr { border-bottom: 1px solid var(--lijn); }
.datatable tr:last-child { border-bottom: none; }
.datatable th {
  text-align: left;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  padding: 13px 12px 13px 0;
  vertical-align: top;
}
.datatable td { text-align: right; padding: 13px 0; font-variant-numeric: tabular-nums; }
.note { font-size: 15px; line-height: 1.5; color: var(--dak); margin: 18px 0 0; }

/* ---------- Fototeaser ---------- */

.teasers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.teasers img { display: block; width: 100%; height: 300px; object-fit: cover; }
.teasers + p { margin: 20px 0 0; font-family: var(--sans); font-size: 15px; }

/* ---------- Reserveren ---------- */

.book { margin-top: 88px; border-top: 1px solid var(--lijn); }
.book > .wrap { padding-block: 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
.book p { font-size: 19px; line-height: 1.6; margin: 0 0 28px; max-width: 44ch; }

.platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 420px; }
.platforms a { padding: 15px 18px; }

.form h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 22px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.field { font-family: var(--sans); font-size: 13px; color: var(--dak); display: flex; flex-direction: column; gap: 6px; }
.field--wide { grid-column: 1 / -1; }

.field input, .field textarea {
  font-family: var(--serif);
  font-size: 17px;
  padding: 11px 12px;
  border: 1px solid var(--dak);
  background: var(--kalk);
  color: var(--inkt);
}
.field input[type="date"], .field input[type="number"] { font-family: var(--sans); font-size: 16px; padding: 10px 12px; }
.field textarea { resize: vertical; }
.form button { margin-top: 18px; }
.honeypot { position: absolute; left: -9999px; }

/* ---------- Footer ---------- */

.footer { background: var(--inkt); color: var(--kalk); margin-top: 96px; }
/* Op de home sluit het reserveerblok met 72px padding al af; daar hoeft geen
   extra marge bij. De footer staat buiten <main>, vandaar :has(). */
main:has(.book) + .footer { margin-top: 0; }
.footer > .wrap {
  padding-block: 56px;
  display: grid;
  /* Kolombreedtes volgen de inhoud: adres en copyright zijn lang, de
     platformnamen kort. Zo hoeft er niets af te breken. */
  grid-template-columns: 1.3fr 1.05fr 0.65fr 1fr;
  gap: 36px;
}

/* Eén ritme in de hele footer: elke regel 15px op 1,5, met 6px ertussen. */
.footer .col { font-family: var(--sans); font-size: 15px; line-height: 1.5; }
.footer .stapel { display: grid; gap: 6px; justify-items: start; }
.footer h2 { font-family: var(--sans); font-weight: 400; font-size: 15px; opacity: 0.6; margin: 0 0 12px; }
.footer a { color: var(--champagne); }
.footer .muted { opacity: 0.8; }
.footer__logo { display: block; width: 148px; height: 148px; padding: 17px; margin-bottom: 20px; }

/* ---------- Mobiel ---------- */

@media (max-width: 900px) {
  body { font-size: 17px; }
  :root { --marge: 20px; }

  :root { --balk: 58px; }

  .hero__image { height: 58vh; min-height: 320px; object-position: 52% 100%; }
  .hero__badge { width: 124px; height: 124px; top: 16px; left: var(--marge); padding: 14px; }
  .topbar--overlay + .hero .hero__badge { top: calc(16px + var(--balk)); }
  .wordmark { font-size: 18px; }

  /* Het menu klapt open op :target, dus zonder JavaScript. Het valt onder de
     balk uit, zodat de balk zelf zijn hoogte houdt. */
  .menu { display: none; }
  .menu:target,
  .menu--open {
    position: absolute;
    top: 100%;
    right: var(--marge);
    z-index: 60;
    display: grid;
    gap: 10px;
    min-width: 220px;
    background: var(--kalk);
    border: 1px solid var(--dak);
    padding: 16px 20px;
    text-align: right;
  }
  .menu:target a { padding: 8px 0; }
  .menu-close { display: block; font-size: 14px; color: var(--dak); }
  /* Balk op mobiel: hamburger links, naam ernaast, taalkeuze rechts. */
  .topbar__inner { gap: 10px; }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 44px;
    margin-left: -6px;
    color: var(--inkt);
    text-decoration: none;
  }
  .menu-toggle svg { width: 22px; height: 15px; }
  .menu-toggle[aria-expanded="true"] { color: var(--bordeaux); }
  .menu-close { display: block; }

  /* Meeschalend, zodat de taalkeuze er altijd naast past. */
  .wordmark { font-size: clamp(14px, 4.2vw, 19px); }

  .langs { margin-left: auto; flex: 0 0 auto; padding: 2px; }
  .langs a, .langs span { padding: 4px 6px; }


  .titlecard { grid-template-columns: 1fr; margin-top: -32px; gap: 20px; padding-inline: 0; }
  .titlecard__text { padding: 24px var(--marge) 26px; }
  .titlecard h1 { font-size: 34px; }
  .titlecard p { font-size: 18px; margin: 12px 0 20px; }
  .titlecard .button { display: block; text-align: center; font-size: 16px; padding: 16px; }
  .titlecard__second { height: 240px; }

  .section { padding-top: 48px; }
  .section h2 { font-size: 27px; margin-bottom: 16px; }
  .section--band h2, .book h2 { font-size: 27px; }

  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div { padding: 16px; }
  .facts dt { font-size: 12px; }
  .facts dd { font-size: 17px; }
  .facts dd.is-number { font-size: 22px; }

  .band { margin-top: 48px; }
  .band > .wrap { padding-block: 40px; }
  .amenities { grid-template-columns: 1fr; gap: 24px; }

  .teasers { grid-template-columns: 1fr; gap: 12px; }
  .teasers img { height: 210px; }

  .book { margin-top: 48px; }
  .book > .wrap { grid-template-columns: 1fr; gap: 40px; padding-block: 40px; }
  .platforms { grid-template-columns: 1fr; max-width: none; }
  .platforms a { text-align: center; font-size: 16px; padding: 16px; }
  .form__grid { grid-template-columns: 1fr; }
  .form button { width: 100%; font-size: 16px; padding: 16px; }

  .footer { margin-top: 48px; }
  .footer > .wrap { grid-template-columns: 1fr; gap: 28px; padding-block: 36px; }
  .footer__logo { width: 116px; height: 116px; padding: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .topbar, .skip { display: none; }
}

/* ---------- Gedeelde paginaonderdelen ---------- */

/* Subpagina's gebruiken .page in plaats van .section, zodat de koppenregels van
   de home er niet overheen vallen. */
.page { padding-top: 56px; padding-bottom: 80px; }

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  margin: 0 0 10px;
  text-wrap: balance;
}

.lead { font-size: 19px; line-height: 1.6; margin: 0 0 28px; max-width: 56ch; }
.backlink { font-family: var(--sans); font-size: 15px; margin: 0 0 28px; }

main h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  margin: 44px 0 14px;
}

/* ---------- Galerij ---------- */

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }

.chip {
  font-family: var(--sans);
  font-size: 15px;
  padding: 10px 18px;
  min-height: 44px;
  border: 1px solid var(--dak);
  background: var(--kalk);
  color: var(--inkt);
  cursor: pointer;
}
.chip:hover { background: var(--champagne); }
.chip--on { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--kalk); }
.chip--on:hover { background: var(--bordeaux); }

.masonry { column-count: 3; column-gap: 16px; }
.tile { break-inside: avoid; margin: 0 0 16px; }
.tile[hidden] { display: none; }

.tile__open {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--lucht);
  cursor: zoom-in;
}
.tile__open img { display: block; width: 100%; height: auto; }
.tile__open:hover img { opacity: 0.92; }

.empty { font-family: var(--sans); font-size: 15px; color: var(--dak); }

/* ---------- Lightbox ---------- */

.lightbox {
  border: none;
  padding: 40px 24px;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  background: rgba(43, 36, 32, 0.96);
  color: var(--kalk);
}
.lightbox::backdrop { background: rgba(43, 36, 32, 0.96); }

.lightbox[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.lightbox__image { max-width: 100%; max-height: 72vh; object-fit: contain; }
.lightbox__bar { display: flex; align-items: center; gap: 24px; }

.lightbox__nav {
  background: none;
  border: 1px solid var(--kalk);
  color: var(--kalk);
  font-family: var(--sans);
  font-size: 14px;
  padding: 12px 18px;
  min-height: 44px;
  cursor: pointer;
}
.lightbox__nav:hover { background: var(--kalk); color: var(--inkt); }

.lightbox__count { font-family: var(--sans); font-size: 14px; font-variant-numeric: tabular-nums; opacity: 0.75; }
.lightbox__caption { font-size: 17px; margin: 0; max-width: 60ch; text-align: center; opacity: 0.85; }

.lightbox__close {
  position: absolute;
  top: 18px;
  right: 20px;
  background: none;
  border: none;
  color: var(--kalk);
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 16px;
  min-height: 44px;
  cursor: pointer;
}
.lightbox__close:hover { text-decoration: underline; }

/* ---------- Nieuws ---------- */

.newsband { background: var(--champagne); }
.newsband .page { padding-top: 56px; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }

.card {
  display: block;
  background: var(--kalk);
  border: 1px solid var(--dak);
  text-decoration: none;
  color: var(--inkt);
}
.card:hover { border-color: var(--bordeaux); }
.card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__body { padding: 20px; }

.card__date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--dak);
  margin-bottom: 8px;
}

.tag {
  font-family: var(--sans);
  font-size: 12px;
  border: 1px solid var(--dak);
  padding: 3px 8px;
  color: var(--dak);
}

.card__title { font-family: var(--serif); font-size: 25px; line-height: 1.2; margin: 0; font-weight: 400; }

.article-title { max-width: 24ch; margin-bottom: 32px; }
.article-cover { display: block; width: 100%; max-height: 520px; object-fit: cover; margin-bottom: 36px; }
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.strip img { display: block; width: 100%; height: 220px; object-fit: cover; }

/* ---------- Contact ---------- */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; margin-top: 40px; }
.address { font-style: normal; font-size: 19px; line-height: 1.6; margin: 0 0 28px; }
.contactlines { font-family: var(--sans); font-size: 16px; line-height: 1.7; margin: 0 0 36px; }

.map { margin: 0 0 14px; }
.map a { display: block; border: 1px solid var(--dak); }
.map a:hover { border-color: var(--bordeaux); }
.map img { display: block; width: 100%; }
.map figcaption { font-family: var(--sans); font-size: 13px; color: var(--dak); margin-top: 8px; }

.formheading { margin-top: 44px; }
.form--stacked { display: grid; gap: 16px; max-width: 460px; justify-items: stretch; }
.form--stacked button { justify-self: start; margin-top: 2px; }

/* ---------- Mobiel, aanvullend ---------- */

@media (max-width: 1000px) {
  .masonry { column-count: 2; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .page { padding-top: 32px; padding-bottom: 56px; }
  .masonry { column-count: 1; }
  .cards { grid-template-columns: 1fr; }
  .strip { grid-template-columns: 1fr; }
  .strip img { height: 200px; }
  .split { grid-template-columns: 1fr; gap: 40px; margin-top: 28px; }
  .lead { font-size: 17px; }
  main h2 { font-size: 23px; margin-top: 36px; }
  .article-title { margin-bottom: 24px; }
  .article-cover { margin-bottom: 24px; }
  .lightbox { padding: 20px 12px; }
  .lightbox__image { max-height: 62vh; }
  .lightbox__bar { gap: 14px; }
  .form--stacked { max-width: none; }
  .form--stacked button { justify-self: stretch; }
}