/* Theehuys — afwerking v45
   Gedeelde aanvullingen die op elke pagina NA de pagina-eigen CSS geladen worden,
   zodat ze daar voorrang op krijgen zonder !important. Inhoud:
   - toegankelijkheid (overslaanlink, focus, menu, foto-venster, contrast van links)
   - header op mobiel op één regel
   - mobiele verfijningen (praktische tabel, footer)
   - grotere klikvlakken voor de sliderbolletjes
   - ondersteuning voor "minder beweging"
   Dit bestand is ook de eerste stap om de dubbele pagina-CSS later te centraliseren.
*/

/* ---------- Overslaanlink (alleen zichtbaar bij toetsenbordgebruik) ---------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 1000;
  padding: 10px 16px;
  background: #F1ECDC;
  color: #2A2620;
  font-family: var(--serif);
  font-size: var(--fs-s);
}
.skip-link:focus {
  top: 16px;
}

/* ---------- Zichtbare focus voor toetsenbordgebruikers ---------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
main:focus { outline: none; }

/* ---------- Header: Menu links, Theehuys exact in het midden ---------- */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.header-inner > :first-child { justify-self: start; }
.header-inner > :nth-child(2) { justify-self: center; }
.header-inner > :last-child { justify-self: end; }

.header-spacer { display: block; }

/* Reserveren rechtsboven: dunne, transparante knop */
.header-cta {
  font-family: var(--sans);
  font-size: var(--fs-s);
  letter-spacing: 0.06em;
  color: var(--ink);
  border: 1px solid currentColor;
  padding: 7px 16px;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.header-cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
header.on-hero .header-cta:hover {
  background: #F1ECDC;
  border-color: #F1ECDC;
  color: #2A2620;
  text-shadow: none;
}

@media (max-width: 720px) {
  .header-inner {
    display: grid;
    flex-direction: row;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    padding: 18px 18px 12px;
  }
  .brand-mark { font-size: var(--fs-3xl); }
  .menu-toggle { font-size: var(--fs-s); padding: 6px 4px; }
  .header-cta { font-size: var(--fs-xs); padding: 6px 10px; letter-spacing: 0.04em; }
}
@media (max-width: 360px) {
  .header-inner { padding: 16px 12px 10px; gap: 6px; }
  .brand-mark { font-size: var(--fs-2xl); }
  .menu-toggle { font-size: var(--fs-s); }
  .header-cta { font-size: var(--fs-xs); padding: 5px 8px; }
}

/* ---------- Overlay-menu ---------- */
body.menu-open { overflow: hidden; }


/* ---------- Links in lopende tekst: niet enkel herkenbaar aan kleur ---------- */
.intro-text p a:not([class]),
.practical a:not([class]),
.text-col p a:not([class]),
.terms-content a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------- Praktische tabel op smalle schermen: label boven de waarde ---------- */
@media (max-width: 520px) {
  .practical-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .practical-value { overflow-wrap: anywhere; }
}

/* ---------- Footer op mobiel: contactlinks netjes links uitgelijnd ---------- */
@media (max-width: 720px) {
  .contact-links { align-items: flex-start; }
}

/* ---------- Sliderbolletjes: klikvlak 24x24px, zichtbaar bolletje blijft 8px ---------- */
.slider-dots { gap: 2px; }
.slider-dots button {
  width: 24px;
  height: 24px;
  background: transparent;
  border-radius: 0;
  position: relative;
}
.slider-dots button::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rule);
  transition: background 0.25s ease;
}
.slider-dots button.active { background: transparent; }
.slider-dots button.active::before { background: var(--accent); }

/* ---------- Heritage: foto-links en fotovenster ---------- */
.photo-trigger:focus-visible { outline-offset: 2px; }
.photo-modal-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: 1px solid currentColor;
  color: #F1ECDC;
  font-family: var(--serif);
  font-size: var(--fs-s);
  letter-spacing: 0.04em;
  padding: 8px 16px;
  cursor: pointer;
}

/* ---------- Afbeeldingen met vaste afmetingen: verhouding bewaren ---------- */
:where(img[width][height]) { height: auto; }

/* ---------- Minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .fade-in { opacity: 1 !important; transform: none !important; }
  .custom-cursor { display: none !important; }
  .has-custom-cursor { cursor: auto !important; }
}

/* ---------- Film op Start: knoppen voor afspelen en geluid ---------- */
.film-controls {
  position: absolute;
  right: 28px;
  bottom: max(36px, env(safe-area-inset-bottom));
  z-index: 11;
  display: flex;
  gap: 10px;
}
.film-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(253, 252, 249, 0.7);
  background: rgba(42, 38, 32, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FDFCF9;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.film-btn:hover { background: rgba(42, 38, 32, 0.6); border-color: #FDFCF9; }
.film-btn:focus-visible { outline: 2px solid #FDFCF9; outline-offset: 3px; }
.film-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.film-btn .i-play { fill: currentColor; stroke: none; }
.film-btn .i-muted path:first-child,
.film-btn .i-sound path:first-child { fill: currentColor; stroke: none; }
.film-controls .i-play,
.film-controls .i-sound { display: none; }
.film-controls.is-paused .i-play { display: block; }
.film-controls.is-paused .i-pause { display: none; }
.film-controls:not(.is-muted) .i-sound { display: block; }
.film-controls:not(.is-muted) .i-muted { display: none; }
@media (max-width: 720px) {
  .film-controls { right: 16px; bottom: max(24px, env(safe-area-inset-bottom)); gap: 8px; }
}

/* ---------- Geen horizontale scrollbalk door elementen op 100vw ----------
   Op Windows neemt de verticale scrollbalk ruimte in, waardoor de schermvullende
   film (100vw) net te breed werd en er onderaan een horizontale balk verscheen. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* ---------- Footer: vermelding webdesign ---------- */
@media (max-width: 520px) {
  .footer-credit { display: block; margin-top: 4px; }
  .footer-sep { display: none; }
}

/* ---------- Overlay-menu: vertraging voor de extra menu-items (Geschenkbon) ---------- */
.menu-overlay.open a:nth-child(8) { transition-delay: 0.56s; }
.menu-overlay.open a:nth-child(9) { transition-delay: 0.64s; }


/* v55: tikdoelen, mobiele tekstkolom, nav-landmark */
.menu-nav { display: contents; }
.menu-overlay.open .menu-nav a:nth-child(1) { transition-delay: 0.16s; }
.menu-overlay.open .menu-nav a:nth-child(2) { transition-delay: 0.24s; }
.menu-overlay.open .menu-nav a:nth-child(3) { transition-delay: 0.32s; }
.menu-overlay.open .menu-nav a:nth-child(4) { transition-delay: 0.40s; }
.menu-overlay.open .menu-nav a:nth-child(5) { transition-delay: 0.48s; }
.menu-overlay.open .menu-nav a:nth-child(6) { transition-delay: 0.56s; }
.menu-overlay.open .menu-nav a:nth-child(7) { transition-delay: 0.64s; }
.menu-overlay.open .menu-nav--start a:nth-child(1) { transition-delay: 0.08s; }
.menu-overlay.open .menu-nav--start a:nth-child(2) { transition-delay: 0.16s; }
.menu-overlay.open .menu-nav--start a:nth-child(3) { transition-delay: 0.24s; }
.menu-overlay.open .menu-nav--start a:nth-child(4) { transition-delay: 0.32s; }
.menu-overlay.open .menu-nav--start a:nth-child(5) { transition-delay: 0.40s; }
.menu-overlay.open .menu-nav--start a:nth-child(6) { transition-delay: 0.48s; }
.menu-overlay.open .menu-nav--start a:nth-child(7) { transition-delay: 0.56s; }
.menu-toggle { min-height: 44px; min-width: 44px; }
.header-cta { position: relative; }
.header-cta::after { content: ""; position: absolute; inset: -8px -4px; }
@media (max-width: 720px) {
  html .intro-text { width: 100%; padding: 0 24px; }
  html .intro-text p { font-size: var(--fs-l); line-height: 1.75; }
  html .hero-visual { width: 100%; }
  html .photo-row { width: 100%; padding: 0 24px; }
  html .photo-row .text-col p { font-size: var(--fs-l); line-height: 1.75; }
}

/* v56: leesbreedte desktop (ca. 65-80 tekens), tikdoelen mobiel 44px */
@media (min-width: 721px) {
  html .intro-text:not(.letter-text) { width: min(74vw, 724px); }
  html .intro-text.letter-text { max-width: 700px; }
}
@media (max-width: 720px) {
  .contact-links a, .footer-row a { min-height: 44px; display: inline-flex; align-items: center; }
  .terms-toggle { min-height: 44px; }
  .brand-mark { position: relative; }
  .brand-mark::after { content: ""; position: absolute; inset: -4px 0; }
  .slider-dots button { width: 44px; height: 44px; margin: 0 -6px; }
  .slider-dots button::before { left: 18px; top: 18px; }
}

/* v57: picture-elementen in slider en fotovlakken */
.slide picture, .photo-placeholder picture { display: block; width: 100%; height: 100%; }

/* v58: foto's in fotovlakken en startpagina */
.photo-placeholder { overflow: hidden; }
.photo-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.start-photo picture, .start-photo img { max-width: 100%; }
@media (max-width: 720px) {
  html .start-photo { width: 100%; padding: 0 16px; }
}

/* v58: kleine foto's en begeleidende tekst lijnen links en rechts uit met de bannerfoto */
@media (min-width: 1100px) {
  html .photo-row--text { padding: 0; column-gap: 56px; justify-content: space-between; grid-template-columns: clamp(350px, 33%, 460px) minmax(0, 720px); }
  html .photo-row--text.reverse { grid-template-columns: minmax(0, 720px) clamp(350px, 33%, 460px); }
  html .photo-row--text .photo-placeholder { margin: 0; max-width: none; }
}
@media (min-width: 721px) and (max-width: 1099px) {
  html .photo-row--text { grid-template-columns: 1fr; gap: 24px; padding: 0; }
  html .photo-row--text.reverse .photo-col, html .photo-row--text.reverse .text-col,
  html .photo-row--text .photo-col, html .photo-row--text .text-col { order: initial; }
  html .photo-row--text .photo-placeholder { margin: 0; }
  html .photo-row--text.reverse .photo-placeholder { margin-left: auto; }
  html .photo-row--text .text-col { max-width: 560px; }
  html .photo-row--text .text-col p { text-align: left; }
}
@media (max-width: 720px) {
  html .photo-row--text { padding: 0 16px; }
  html .photo-row--text .text-col { padding: 0 8px; }
  html .photo-row--text .photo-placeholder { max-width: none; }
}

/* v59.2: Geschenkbon, één foto gecentreerd onder de tekst */
.gift-single { display: flex; justify-content: center; margin: 56px 0 0; padding: 0 24px; }
.gift-photo { width: 100%; max-width: 350px; aspect-ratio: 4 / 5; overflow: hidden; }
.gift-photo picture { display: block; width: 100%; height: 100%; }
.gift-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* v59.3: Geschenkbon, tekst gecentreerd zoals de brief op Heritage */
html .intro-text--center, html .intro-text--center p { text-align: center; }

/* v66: kop op mobiel over de volle breedte, zodat "Overzicht" naast het logo past */
@media (max-width: 720px) {
  .header-inner { width: 100%; }
  .menu-toggle { letter-spacing: 0; padding-left: 0; padding-right: 0; }
}

/* v69: openingsweken november (zichtbaar via promo.js tot en met 29 november 2026) */
.promo-bar, .promo-row { display: none; }
html.promo-on .promo-row { display: grid; }
html.promo-on .promo-row .practical-value { font-style: italic; }
html.promo-on .promo-row {
  background: #535F47;
  margin: 0 -18px;
  padding-left: 18px;
  padding-right: 18px;
  border-top-color: transparent;
}
html.promo-on .promo-row + .practical-row { border-top-color: transparent; }
html.promo-on .promo-row .practical-label { color: #F1ECDC; }
html.promo-on .promo-row .practical-value { color: #F1ECDC; }
.promo-row { scroll-margin-top: 24px; }
html.promo-on .promo-bar {
  display: block;
  background: #535F47;
  border-bottom: 1px solid rgba(201, 208, 180, 0.25);
}
.promo-bar a {
  display: block;
  padding: 11px 24px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-m);
  line-height: 1.45;
  color: #F1ECDC;
  text-decoration: none;
}
.promo-bar .promo-more {
  display: inline-block;
  margin-left: 12px;
  font-style: normal;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
.promo-bar a:hover .promo-more, .promo-bar a:focus-visible .promo-more { color: #FFFFFF; }
@media (max-width: 720px) {
  .promo-bar a { padding: 10px 18px; font-size: var(--fs-s); }
  .promo-bar .promo-more { display: block; width: max-content; margin: 6px auto 0; font-size: 12px; }
}
/* einde promo */