/* Dar Salam Souss — aanpassingen v6
   · leesbare bijschriften (wit + donkere verloop in de foto)
   · foto's vullen hun kader, bijschrift blijft altijd op de foto
   · stabielere foto's op mobiel (geen parallax)
   · taalknop FR / EN */

/* ── Foto's vullen hun kader volledig ── */
.house-scape figure img,
.gcol figure img { display: block; }
.house-scape figure img { width: 100%; object-fit: cover; }
@media (min-width: 901px) {
  /* de foto ligt over het hele kader; zo blijft er nooit zand onder de foto zichtbaar */
  .house-scape figure { align-self: stretch; }
  .house-scape figure img { position: absolute; inset: 0; height: 100%; }
}

/* ── Donker verloop onderin elke foto, zodat tekst leesbaar blijft ── */
.house-scape figure::after,
.gcol figure::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg, transparent 50%, rgba(18, 13, 8, .74) 100%);
}

/* ── Bijschriften: wit, iets steviger, altijd boven het verloop ── */
.house-scape figcaption,
.gcol figcaption {
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  z-index: 2;
  color: #fff;
  font-size: 1.06rem;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 14px rgba(0, 0, 0, .45);
}

/* ── Kaders overlappen elkaar niet meer ── */
.hs-3 { margin-top: 0; }
.hs-stat { margin-bottom: -34px; margin-right: -14px; }
/* kleine foto rechts: bijschrift rechts, zodat de witte kaart het nooit afdekt */
.hs-3 figcaption { left: 112px; right: 16px; text-align: right; }

@media (min-width: 901px) and (max-width: 1020px) {
  .hs-stat { grid-column: 7 / 10; }
}

/* ── Mobiel & tablet: rustig en stabiel ── */
@media (max-width: 900px) {
  /* geen scroll-effect en geen extra GPU-lagen: voorkomt kapotte foto's op iPhone */
  .parallax,
  .house-scape figure,
  .gcol figure,
  .split-media { transform: none !important; will-change: auto !important; }
  .hs-3 figcaption { left: 16px; text-align: left; }
  .house-scape figure img { position: static; height: auto; }
  .hs-stat { margin: 0 0 22px 0; width: auto; }
}

/* ── Taalknop ── */
.lang-switch {
  display: flex; align-items: center; gap: 2px;
  margin-left: 8px;
  position: relative; z-index: 71;
}
/* vlaggen: groot genoeg om te tikken, actieve taal vol, andere taal gedimd */
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; min-height: 32px;
  border-radius: 4px;
  opacity: .55;
  transition: opacity .25s ease;
}
.lang-switch a:hover { opacity: .9; }
.lang-switch a[aria-current] { opacity: 1; }
.lang-switch a:focus-visible { outline: 2px solid var(--mud, #B06E4B); outline-offset: 0; opacity: 1; }
.lang-switch svg {
  width: 22px; height: 15px; display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 1px 3px rgba(0, 0, 0, .25);
}
.site-header.scrolled .lang-switch svg { box-shadow: 0 0 0 1px rgba(43, 36, 27, .18), 0 1px 3px rgba(0, 0, 0, .12); }
@media (max-width: 900px) {
  .nav-row { gap: 16px; }
  .lang-switch { margin-left: auto; margin-right: 0; gap: 0; }
  .lang-switch a { min-width: 30px; min-height: 44px; }
}

/* ── Boekingswidget (Octorate) ── */
.booking-widget {
  display: block; min-height: 0;
  border: 0; background: transparent;
  padding: 8px 0;
}
.booking-widget::before,
.booking-widget::after { content: none !important; display: none; }

/* ── Logo in het menu ── */
.wordmark { flex-direction: row; align-items: center; gap: 12px; }
.wordmark-txt { display: flex; flex-direction: column; gap: 5px; }
.wordmark-logo { width: 46px; height: 46px; display: block; flex: none; transition: width .35s ease, height .35s ease; }
.site-header.scrolled .wordmark-logo { width: 38px; height: 38px; }
@media (max-width: 420px) { .wordmark-logo { width: 38px; height: 38px; } .wordmark { font-size: 1.3rem; } }
.wordmark-sub { white-space: nowrap; }
@media (max-width: 420px) { .wordmark-sub { letter-spacing: .12em; font-size: 9px; } }

/* ── Veelgestelde vragen ── */
.faq-list { max-width: 760px; margin: 0 auto; border-top: 1px solid rgba(43, 36, 27, .16); }
.faq-item { border-bottom: 1px solid rgba(43, 36, 27, .16); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 40px 20px 0;
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.4rem; line-height: 1.25; color: var(--ink, #2B241B);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: "Jost", sans-serif; font-size: 1.5rem; font-weight: 300; transition: transform .25s ease;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:focus-visible { outline: 2px solid var(--mud, #B06E4B); outline-offset: 2px; }
.faq-item p { margin: 0 0 22px; max-width: 62ch; line-height: 1.7; }

/* menu blijft op één regel */
.site-nav a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1180px) {
  .nav-row { gap: 16px; }
  .site-nav { gap: 14px; }
  .site-nav a { letter-spacing: .06em; }
  .site-nav .nav-cta { padding: 10px 16px; letter-spacing: .12em; }
  .lang-switch { margin-left: 0; }
}
/* smalle laptops/tablets liggend: 'Welkom' valt weg zodat menu, taalknop en logo op één regel passen */
@media (min-width: 901px) and (max-width: 1060px) {
  .site-nav a[href$="#welcome"] { display: none; }
}

/* geen zijwaarts scrollen door elementen die nog moeten verschijnen */
html { overflow-x: clip; }

/* Sticky Reserve button (mobile) */
.reserve-sticky{display:none}
@media (max-width:900px){
  .reserve-sticky{display:block;position:fixed;left:84px;right:84px;bottom:16px;height:50px;line-height:50px;text-align:center;
    background:var(--olive,#5c6b4a);color:#fff;border-radius:999px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
    text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.28);z-index:90;opacity:0;transform:translateY(20px);pointer-events:none;
    transition:opacity .3s,transform .3s}
  .reserve-sticky.show{opacity:1;transform:none;pointer-events:auto}
}

/* ── Mobile polish (v8) ── */
@media (max-width:620px){
  /* hero: leesbaarder */
  .hero-overlay{background:linear-gradient(180deg,rgba(24,19,12,.55) 0%,rgba(24,19,12,.25) 35%,rgba(24,19,12,.45) 60%,rgba(24,19,12,.78) 100%)}
  .hero h1{text-shadow:0 2px 24px rgba(0,0,0,.45)}
  .hero-tagline{font-size:1.35rem;text-shadow:0 1px 16px rgba(0,0,0,.5)}
  .hero-meta{font-size:11px;letter-spacing:.2em;color:#fff}

  /* kleinere sectie-ruimte */
  .section{padding-block:4rem}
  .section-head{margin-bottom:2rem}

  /* kamerkaarten: compacter, geen zweven */
  .room-card{padding:24px 20px 22px;animation:none}
  .room-feats{margin-block:14px 10px;padding-top:12px}
  .room-feats li{font-size:11px;letter-spacing:.06em}
  .room-note{margin-bottom:12px}

  /* labels: groter en leesbaarder */
  .eyebrow{font-size:12px}
  .badge-line{font-size:12px;letter-spacing:.14em;color:var(--ink)}

  /* review-badges passen binnen het scherm */
  .badges{grid-template-columns:1fr;gap:12px}
  .badge{padding:22px 18px}

  /* fotostapels → horizontaal swipen */
  .gallery{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gcol,.gcol-offset{display:contents;margin:0}
  .gcol figure,.gcol figure:nth-child(2){flex:0 0 78%;aspect-ratio:4/5;scroll-snap-align:center;transform:none!important}
  .house-scape{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
  .house-scape::-webkit-scrollbar{display:none}
  .house-scape .hs-main,.house-scape .hs-2,.house-scape .hs-3{flex:0 0 78%;margin:0;scroll-snap-align:center}
  .house-scape .hs-stat{flex:0 0 78%;margin:0;width:auto;scroll-snap-align:center}
  .parallax{transform:none!important}
}
@media (max-width:620px){
  .hero-actions{flex-direction:column;align-items:flex-start;gap:14px;margin-top:28px}
  .hero-actions a:not(.btn){padding-left:0}
}

/* Hero video (v9) */
.hero-media{position:absolute;inset:0}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s}
.hero-video.playing{opacity:1}
/* Strata band: zellige (herringbone border, SVG) */
.strata-mud{
  height:clamp(84px,9.6vw,150px);
  background:url(../img/zellige-band.svg?v=1) repeat-x center / auto 100%;
}
.strata-cedar,.strata-gold{display:none}

/* ── Foto-collages: geen scroll-verschuiving meer, zodat de randen nooit over elkaar heen lopen ── */
.house-scape figure,
.gcol figure { transform: none !important; will-change: auto !important; }
.house-climb { margin-top: 56px; }

/* ── v19: leesbaarheid ── */
/* iets donkerdere lopende tekst: voldoet nu ook op de zandkleurige secties aan de leesbaarheidsnorm (4,5:1) */
:root { --ink-soft: #625847; }
/* kamerbeschrijvingen stonden crème op een crème kaart en waren onzichtbaar */
.room-card > p,
.room-card .room-note { color: var(--ink-soft); }
.section-sand .eyebrow,
.section-alt .eyebrow { color: var(--olive-deep); }

/* ── v19: mobiel menu is niet bereikbaar met toetsenbord/schermlezer zolang het dicht is ── */
@media (max-width: 900px) {
  .site-nav { visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
  .site-nav.open { visibility: visible; transition: opacity .45s var(--ease), visibility 0s linear 0s; }
}

/* ── v19: lichtere foto's (AVIF met JPEG als terugval) ── */
picture { display: contents; }
.garden > picture > img,
.tourband > picture > img,
.page-hero > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* virtuele-tourband: nieuwe (zonnige) dakterrasfoto, iets donkerdere schaduw zodat de tekst leesbaar blijft */
.tourband-shade { background: linear-gradient(100deg, rgba(24, 19, 12, .76) 0%, rgba(24, 19, 12, .52) 50%, rgba(24, 19, 12, .2) 100%); }
@media (max-width: 620px) {
  .tourband-shade { background: linear-gradient(180deg, rgba(24, 19, 12, .38) 0%, rgba(24, 19, 12, .66) 30%, rgba(24, 19, 12, .66) 80%, rgba(24, 19, 12, .45) 100%); }
}

/* Scores op de review-badges + privacypagina */
.badge-score{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--olive-deep)}
.badge-score small{font-size:1rem;color:var(--ink-soft);margin-left:2px}
.badge{align-items:center;text-align:center}
.legal{padding:clamp(7.5rem,14vw,10rem) 0 clamp(3rem,6vw,5rem)}
.legal h1{margin-bottom:.4em}
.legal h2{font-size:1.5rem;margin:2.2em 0 .5em}
.legal p,.legal li{line-height:1.7;color:var(--ink)}
.legal ul{padding-left:1.2em;margin:.6em 0}
.legal .legal-date{color:var(--ink-soft);font-style:italic}
.legal ul{list-style:disc}
.legal li{margin:.4em 0}
.legal strong{font-weight:500}
.legal a{text-decoration:underline;text-underline-offset:3px}
.room-price{margin:.2em 0 .6em;color:var(--olive-deep);font-size:1rem}
.room-price strong{font-family:var(--serif);font-size:1.5rem;font-weight:500}
.badge-super{display:inline-flex;align-items:center;gap:8px;font-size:1.6rem}
.badge-super svg{color:#B4452E}

/* Mobiel menu (donkere overlay): links, kruisje en logo altijd leesbaar, ook als de pagina gescrold is */
@media (max-width: 900px) {
  .site-header .site-nav a:not(.nav-cta),
  .site-header.scrolled .site-nav a:not(.nav-cta),
  .site-header.scrolled .site-nav a:not(.nav-cta):hover { color: var(--cream); }
  .site-header .site-nav .nav-cta,
  .site-header.scrolled .site-nav .nav-cta { border-color: var(--cream); color: var(--cream); background: transparent; }
  .site-header .nav-toggle.active span,
  .site-header.scrolled .nav-toggle.active span { background: var(--cream); }
  body.nav-locked .site-header .wordmark,
  body.nav-locked .site-header.scrolled .wordmark { color: var(--cream); }
  body.nav-locked .site-header .wordmark-sub,
  body.nav-locked .site-header.scrolled .wordmark-sub { color: rgba(246,240,227,.7); }
  /* backdrop-filter maakt de header tot "vaste ruimte": het menu bleef daardoor maar even hoog als de balk */
  body.nav-locked .site-header,
  body.nav-locked .site-header.scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; box-shadow: none; border-bottom-color: transparent; }
}