/* ═══════════════════════════════════════════════════════════════════
   Lahbab Desert House — design system
   Palette: limestone #F3EDE3 · sand #D8C2A6 · dune #B85432 ·
            bark #241A16 · clay #332B27 · palm #66745A
   Type: Cormorant Garamond (display) · Inter (body/UI)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-bounce, .animate-pulse { animation: none; }
}
html, body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #F3EDE3;
  color: #332B27;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body { text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
.font-heading { letter-spacing: 0.002em; }
::selection { background: #B85432; color: #fff; }

/* Visible keyboard focus everywhere (AA) */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2.5px solid #B85432;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Editorial helpers ────────────────────────────────────────────── */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.rule-dune { width: 3.5rem; height: 3px; background: #B85432; border-radius: 999px; }

/* Long-form (policy) pages — replaces Tailwind prose plugin */
.richtext > * + * { margin-top: 1.1rem; }
.richtext h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1.5rem; color: #241A16; margin-top: 2.2rem; }
.richtext p, .richtext li { color: #332B27; }
.richtext a { color: #8E3E24; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.richtext a:hover { color: #B85432; }

/* ── Scroll reveal (IntersectionObserver adds .is-visible) ─────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Image treatments ─────────────────────────────────────────────── */
.img-frame img { will-change: transform; }
.img-frame:hover img { transform: scale(1.045); }
.img-frame img { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  .img-frame:hover img { transform: none; }
}

/* ── FAQ accordion (main.js toggles .faq-open + .open) ─────────────── */
.faq-item { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.faq-item:hover { border-color: #D8C2A6; }
.faq-question { cursor: pointer; }
.faq-icon { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: #B85432; color: #fff; border-color: #B85432; }
.faq-answer { overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-item.open .faq-answer { max-height: 40rem; }
@media (prefers-reduced-motion: reduce) {
  .faq-answer { transition: none; }
}

/* ── Footer mobile accordion ──────────────────────────────────────── */
.footer-chevron { transition: transform 0.25s ease; font-size: 0.7rem; }
.footer-col.open .footer-chevron { transform: rotate(180deg); }
@media (max-width: 767px) {
  .footer-col-content { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.35s ease, opacity 0.3s ease; }
  .footer-col.open .footer-col-content { max-height: 600px; opacity: 1; }
}

/* ── Experience finder ────────────────────────────────────────────── */
.finder-step { display: none; }
.finder-step.is-active { display: block; animation: finderIn 0.45s ease; }
@keyframes finderIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .finder-step.is-active { animation: none; }
}
.finder-opt input { position: absolute; opacity: 0; pointer-events: none; }
.finder-opt span.opt-card { transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
.finder-opt:hover span.opt-card { transform: translateY(-2px); }
.finder-opt input:checked + span.opt-card { border-color: #B85432; background: #fff; box-shadow: 0 8px 24px rgba(184, 84, 50, 0.16); }
.finder-opt input:focus-visible + span.opt-card { outline: 2.5px solid #B85432; outline-offset: 3px; }
.finder-progress { transition: width 0.4s ease; }

/* ── Mobile bottom action bar (tour pages) ────────────────────────── */
.tour-actionbar { padding-bottom: env(safe-area-inset-bottom); }

/* ── Anchor offset under sticky bars ──────────────────────────────────── */
section[id], div[id] { scroll-margin-top: 150px; }

/* ── Guide-type cards: calm motion, off when reduced ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .guide-type-card:hover { transform: none; }
  .guide-type-card img { transition: none; }
  .guide-type-card:hover img { transform: none; }
}

/* ── Date input affordance ────────────────────────────────────────── */
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

/* ── Legacy hooks retained for older sections ─────────────────────── */
.lazy { content-visibility: auto; contain-intrinsic-size: 300px; }