/* =============================================================
   HDS Homestay Collections — shared core CSS
   Loaded by every collection, BEFORE its own collection-specific
   stylesheet. Contains only what DESIGN-BIBLE.md fixes as system
   law (§4 type, §9 WhatsApp CTA, §10 accessibility) — nothing here
   is a Four Dials differentiator. A collection's own stylesheet
   may layer on top (color balance, photography grammar, signature
   moment) but must never override what's defined here.
   ============================================================= */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Skip-to-content link (§10 Accessibility Rules) */
.skip-link { position: absolute; top: -100%; left: 0; z-index: 9999; }
.skip-link:focus { top: 0; }

/* Sticky nav shadow on scroll */
#site-nav.scrolled {
  background: rgba(250, 247, 242, 0.97);
  box-shadow: 0 1px 0 0 #e8e0d4;
}

/* Inline trust-strip separators */
.trust-item + .trust-item::before {
  content: "·";
  margin: 0 0.75rem;
  color: #b8a898;
}

/* FAQ chevron (§7 Component Library) */
details[open] > summary .chevron { transform: rotate(180deg); }
.chevron { transition: transform 200ms ease; }

/* =============================================================
   WhatsApp CTA — one visual treatment, everywhere (§9).
   Fixed brand law. A collection stylesheet must never restyle this.
   ============================================================= */
.hds-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.375rem;
  background: #25D366;
  /* Dark forest text/icon (not white) — the official WhatsApp green measures
     ~1.98:1 against white text, failing WCAG AA (needs 4.5:1). #121f1a on
     #25D366 measures ~8.5:1. Background stays the exact official brand
     green per DESIGN-BIBLE §9/§6 — only the foreground changed. */
  color: #121f1a;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 0.75rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25);
}
.hds-wa-btn:hover {
  background: #1db954;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.38);
  transform: translateY(-1px);
  color: #121f1a;
  text-decoration: none;
}
.hds-wa-btn:active { transform: translateY(0); }
.hds-wa-btn:focus-visible { outline: 2px solid #25D366; outline-offset: 3px; }
.hds-wa-btn--sm { padding: 0.5rem 1rem; font-size: 0.8125rem; border-radius: 0.625rem; }
.hds-wa-btn--lg { padding: 0.9375rem 2rem; font-size: 1rem; border-radius: 1rem; }
.hds-wa-btn--full { width: 100%; justify-content: center; }
.hds-wa-btn--outline {
  background: transparent;
  color: #1a9e4e;
  border: 2px solid #25D366;
  box-shadow: none;
}
.hds-wa-btn--outline:hover { background: #25D366; color: #121f1a; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.32); }

/* =============================================================
   Thumb-friendly tap targets (DESIGN-BIBLE.md §10 — every
   tappable element ≥44×44px on mobile).
   ============================================================= */
.hd-tap-min {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* =============================================================
   Photo placeholder frame — structural base (§5 Photography
   Principles): never a bare grey box, never stock photography.
   A collection stylesheet may override background/border/icon
   color to match its own Color Balance and Photography Grammar,
   but must keep this dashed-frame + icon + caption structure.
   ============================================================= */
.hd-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #faf7f2;
  border: 1.5px dashed #d4c9b8;
  color: #4a7c6f;
  text-align: center;
  padding: 1.25rem;
}
.hd-photo svg { opacity: 0.8; }
.hd-photo__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2d4a3e;
  max-width: 14rem;
  line-height: 1.4;
}
@media (min-width: 1024px) {
  .hd-photo svg { width: 34px; height: 34px; }
  .hd-photo__label { font-size: 0.75rem; max-width: 16rem; }
}

/* =============================================================
   Room comparison — mobile horizontal swipe, desktop static grid.
   Used by every homestay's rooms.html comparison section.
   ============================================================= */
.compare-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.compare-scroll::-webkit-scrollbar { display: none; }
.compare-card { scroll-snap-align: start; flex: 0 0 84%; }
@media (min-width: 768px) {
  .compare-scroll { overflow-x: visible; display: grid; grid-template-columns: repeat(3, 1fr); }
  .compare-card { flex: none; }
}

/* Devanagari font stack when Hindi is active (§4 typography parity) */
html[lang="hi"] { font-family: "Noto Sans Devanagari", "Noto Sans", "Mangal", system-ui, sans-serif; }
html[lang="hi"] .font-display { font-family: "Noto Sans Devanagari", "Noto Sans", sans-serif; }

/* Language toggle active/inactive states */
.hds-lang-active { color: #2d4a3e; font-weight: 600; }
.hds-lang-inactive { color: #8db5a8; font-weight: 400; cursor: pointer; }
.hds-lang-inactive:hover { color: #4a7c6f; }

/* Hindi disabled site-wide until full content-parity translation ships —
   hides the EN/हिन्दी toggle everywhere (see shared/i18n.js HINDI_ENABLED). */
[data-lang-toggle] { display: none !important; }

/* Language-switch fade (§8 Animation Rules — confirm, never impress) */
body { transition: opacity 120ms ease; }
body.hds-switching { opacity: 0.82; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}