/* ==========================================================================
   Crystal Homestay \2014  shared styles
   Calm, warm, credible. Generous whitespace, strong type, large photos.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

:root {
  --sand-50: #FBF7F1;
  --sand-100: #F5EDE1;
  --sand-200: #E9DCC8;
  --terracotta-500: #B5573A;
  --terracotta-600: #9A4630;
  --terracotta-100: #F3DFD6;
  --green-700: #3F5D45;
  --green-800: #324A38;
  --ink-900: #241F19;
  --ink-700: #4A423A;
  --ink-500: #746B60;
  --line: #E3D8C7;
  --white: #FFFFFF;
  --success: #3F5D45;
  --error: #A83A2C;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(36, 31, 25, 0.08);
  --shadow-md: 0 8px 24px rgba(36, 31, 25, 0.10);
  --container: 1120px;

  /* Constants \2014  deliberately NOT themed; used for elements that must
     stay dark-on-light regardless of page theme (footer, floating
     chips, text over photography). */
  --fixed-dark: #241F19;
  --fixed-white: #FFFFFF;

  color-scheme: light;
}

/* Dark mode \2014  same warm identity, inverted ground. Applies when the OS/
   browser prefers dark and no explicit light choice overrides it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sand-50: #1C1815;
    --sand-100: #26211C;
    --sand-200: #342C24;
    --terracotta-100: #3A2A22;
    --ink-900: #F3ECE2;
    --ink-700: #D8CCBC;
    --ink-500: #A89A88;
    --line: #3A322A;
    --white: #29241F;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
    --shadow-md: 0 10px 28px rgba(0,0,0,0.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --sand-50: #1C1815;
  --sand-100: #26211C;
  --sand-200: #342C24;
  --terracotta-100: #3A2A22;
  --ink-900: #F3ECE2;
  --ink-700: #D8CCBC;
  --ink-500: #A89A88;
  --line: #3A322A;
  --white: #29241F;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 10px 28px rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--sand-50);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 72px; /* space for mobile sticky CTA */
}
@media (min-width: 861px) { body { padding-bottom: 0; } }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); line-height: 1.15; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--ink-700); }
a { color: var(--terracotta-600); }
img { max-width: 100%; display: block; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: 56px 0; }
.section--tight { padding: 32px 0; }
.section--alt { background: var(--sand-100); }
.section-head { max-width: 640px; margin: 0 0 32px; }
.section-head p { margin: 0; }
.eyebrow { display: inline-block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta-600); font-weight: 600; margin-bottom: 10px; }

/* Focus states */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--green-700);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.98rem;
  padding: 13px 22px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--terracotta-500); color: var(--fixed-white); }
.btn-primary:hover { background: var(--terracotta-600); }
.btn-secondary { background: var(--green-700); color: var(--fixed-white); }
.btn-secondary:hover { background: var(--green-800); }
.btn-outline { background: transparent; border-color: var(--ink-900); color: var(--ink-900); }
.btn-outline:hover { background: var(--fixed-dark); color: var(--fixed-white); }
.btn-ghost { background: transparent; color: var(--ink-900); border-color: var(--line); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn svg { width: 18px; height: 18px; flex: none; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--sand-50) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink-900); text-decoration: none; }
.brand-mark { height: 32px; width: auto; flex: none; display: block; }
.brand-tag {
  display: inline-block; font-family: var(--font-body); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--terracotta-600);
  background: var(--terracotta-100); border-radius: 999px; padding: 2px 8px; line-height: 1.5;
}
.footer-logo-plate { display: inline-flex; align-items: center; background: var(--sand-50); border-radius: 12px; padding: 8px 14px; margin-bottom: 12px; }
.footer-logo-plate img { height: 34px; width: auto; display: block; }
.tel-link { color: inherit; }
.nav-menu { display: none; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-menu a { color: var(--ink-700); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.nav-menu a:hover { color: var(--terracotta-600); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: inline-flex; background: none; border: none; padding: 8px; cursor: pointer; }
.nav-toggle svg { width: 24px; height: 24px; }
@media (min-width: 861px) {
  .nav-menu { display: flex; }
  .nav-toggle { display: none; }
}
@media (max-width: 640px) {
  .site-header .container { height: 58px; }
  .brand { font-size: 0.94rem; gap: 6px; white-space: nowrap; }
  .brand-mark { height: 24px; }
  .brand-tag { font-size: 0.56rem; padding: 2px 6px; }
  .nav-actions { gap: 2px; }
  /* The header's primary CTA is redundant on mobile \2014  the sticky
     .mobile-cta-bar at the bottom already offers "Check availability"
     and WhatsApp, so drop it here to give the brand/hamburger room and
     avoid overflow at narrow widths (320\2013 360px). */
  .nav-actions .btn-primary { display: none; }
}
.nav-menu.is-open {
  display: flex; position: absolute; top: 68px; left: 0; right: 0; background: var(--sand-50);
  border-bottom: 1px solid var(--line); flex-direction: column; padding: 16px 20px; gap: 14px; box-shadow: var(--shadow-md);
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-media { position: relative; height: 62vh; min-height: 420px; max-height: 620px; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,31,25,0.02) 0%, rgba(36,31,25,0.5) 92%); }
.hero-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 0 36px; color: var(--fixed-white); }
.hero-content h1 { color: var(--fixed-white); max-width: 620px; margin-bottom: 10px; font-size: clamp(1.7rem, 4vw, 2.7rem); }
.hero-sub { color: rgba(255,255,255,0.92); font-size: 1.1rem; max-width: 620px; margin-bottom: 22px; }
.hero-content .cta-row { margin-bottom: 4px; }
.hero-meta { color: rgba(255,255,255,0.9); font-size: 0.85rem; margin: 0 0 14px; max-width: 520px; }

@media (max-width: 640px) {
  .hero-media { height: 46vh; min-height: 320px; max-height: 440px; }
  .hero-scrim { background: linear-gradient(180deg, rgba(36,31,25,0) 55%, rgba(36,31,25,0.7) 100%); }
  .hero-content { padding: 18px 0 20px; }
  .hero-content h1 { font-size: 1.5rem; max-width: 100%; margin-bottom: 6px; }
  .hero-meta { font-size: 0.78rem; margin-bottom: 12px; }
  .hero-content .cta-row { gap: 10px; }
  .hero-content .btn { padding: 11px 18px; font-size: 0.92rem; }
}

/* ---------- Price card ---------- */
/* Pulled up just enough to feel anchored to the hero without ever
   overlapping the hero's own CTA row \2014  the calmer, shorter hero has
   much less clearance below its buttons than the old 76vh version did,
   so this value is deliberately modest at every viewport size (verified
   at 320\2013 1440px: the hero-content-to-hero-bottom gap stays constant
   regardless of hero height, since hero-content is bottom-anchored). */
.price-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 26px; margin-top: -8px; position: relative; z-index: 5;
}
.price-card__badge { display: inline-block; background: var(--terracotta-100); color: var(--terracotta-600); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.price-tile { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; text-align: center; }
.price-tile .room-type { display: block; font-weight: 600; color: var(--ink-700); margin-bottom: 6px; font-size: 0.92rem; }
.price-tile .amount { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--ink-900); font-weight: 600; }
.price-tile .amount small { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--ink-500); }
.price-note { font-size: 0.88rem; color: var(--ink-500); margin: 0 0 16px; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.card-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--green-700); color: var(--fixed-white); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.card-icon svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 8px; }
.card p { margin: 0; font-size: 0.95rem; }

/* ---------- Host section ---------- */
.host-section { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 861px) { .host-section { grid-template-columns: 1fr 1.15fr; } }
.host-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.host-badge { background: var(--sand-100); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 0.85rem; color: var(--ink-700); }

/* ---------- Running strip ---------- */
.running-strip { background: var(--green-700); color: var(--fixed-white); border-radius: var(--radius-lg); padding: 36px; display: grid; gap: 20px; }
@media (min-width: 700px) { .running-strip { grid-template-columns: 1.3fr 1fr; align-items: center; padding: 44px; } }
.running-strip h2 { color: var(--fixed-white); }
.running-strip p { color: rgba(255,255,255,0.9); }
.running-strip .disclaimer { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-top: 10px; }

/* ---------- Who-this-is-for ---------- */
.audience-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.audience-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; background: var(--white); text-decoration: none; color: inherit; display: block; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.audience-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.audience-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.audience-card p { font-size: 0.9rem; margin: 0; }
.audience-card .arrow { font-size: 0.85rem; color: var(--terracotta-600); font-weight: 600; margin-top: 10px; display: inline-block; }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-item { border: none; padding: 0; background: none; cursor: pointer; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gallery-item:hover img { transform: scale(1.04); }

#lightbox { position: fixed; inset: 0; background: rgba(20,17,13,0.92); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
#lightbox[hidden] { display: none; }
#lightbox img { max-width: 100%; max-height: 86vh; border-radius: 8px; }
#lightbox button { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.15); border: none; color: var(--fixed-white); width: 40px; height: 40px; border-radius: 999px; font-size: 1.3rem; cursor: pointer; }

/* ---------- Trust / social proof ---------- */
.trust-strip { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.trust-stat { display: flex; flex-direction: column; }
.trust-stat .num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; }
.trust-stat .lbl { font-size: 0.82rem; color: var(--ink-500); }
.topic-pill { display: inline-block; background: var(--sand-100); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; margin: 0 8px 8px 0; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field--full { grid-column: 1 / -1; }
label { font-size: 0.88rem; font-weight: 600; color: var(--ink-700); }
input, select, textarea {
  font-family: var(--font-body); font-size: 1rem; padding: 12px 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--line); background: var(--white); color: var(--ink-900);
}
input:focus, select:focus, textarea:focus { border-color: var(--green-700); }
textarea { resize: vertical; min-height: 90px; }
.field-error { color: var(--error); font-size: 0.82rem; min-height: 1.1em; }
.form-status { margin-top: 14px; font-size: 0.92rem; padding: 12px 14px; border-radius: var(--radius-md); display: none; }
.form-status--pending, .form-status--success { display: block; background: var(--sand-100); border: 1px solid var(--line); }
.form-status--success { color: var(--success); }
.enquiry-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); }

/* ---------- Trip planner ---------- */
.planner-result { margin-top: 16px; background: var(--sand-100); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; font-size: 0.95rem; }

/* ---------- Footer ---------- */
/* Footer intentionally stays a constant warm charcoal in both themes \2014 
   decoupled from --ink-900, which flips for the rest of the page. */
.site-footer { background: #241F19; color: rgba(255,255,255,0.85); padding: 48px 0 28px; margin-top: 20px; }
.site-footer a { color: rgba(255,255,255,0.85); }
.footer-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 28px; }
.footer-grid h4 { color: var(--fixed-white); font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 12px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 20px; font-size: 0.82rem; color: rgba(255,255,255,0.55); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }

/* ---------- Sticky mobile CTA bar ---------- */
.mobile-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--white); border-top: 1px solid var(--line); display: flex; gap: 10px; padding: 10px 14px; box-shadow: 0 -6px 18px rgba(0,0,0,0.06); }
.mobile-cta-bar .btn { flex: 1; padding: 12px 10px; font-size: 0.92rem; }
@media (min-width: 861px) { .mobile-cta-bar { display: none; } }

/* ---------- AI concierge widget ---------- */
.ai-widget { position: fixed; right: 18px; bottom: 88px; z-index: 60; }
@media (min-width: 861px) { .ai-widget { bottom: 24px; } }
.ai-toggle { width: 56px; height: 56px; border-radius: 999px; background: var(--fixed-dark); color: var(--fixed-white); border: none; box-shadow: var(--shadow-md); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ai-toggle svg { width: 24px; height: 24px; }
.ai-panel { position: absolute; right: 0; bottom: 68px; width: min(340px, 88vw); max-height: 60vh; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; overflow: hidden; }
.ai-panel[hidden] { display: none; }
.ai-panel-head { padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--sand-100); }
.ai-panel-head strong { display: block; font-size: 0.95rem; }
.ai-panel-head span { font-size: 0.78rem; color: var(--ink-500); }
.ai-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.ai-msg { font-size: 0.88rem; padding: 10px 12px; border-radius: 12px; max-width: 90%; }
.ai-msg--assistant { background: var(--sand-100); align-self: flex-start; }
.ai-msg--user { background: var(--green-700); color: var(--fixed-white); align-self: flex-end; }
.ai-panel-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.ai-panel-form input { flex: 1; padding: 10px 12px; }
.ai-panel-form button { border: none; background: var(--fixed-dark); color: var(--fixed-white); border-radius: 999px; width: 40px; height: 40px; flex: none; cursor: pointer; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.muted { color: var(--ink-500); }
.status-note { font-size: 0.8rem; color: var(--ink-500); background: var(--sand-100); border: 1px dashed var(--line); padding: 10px 14px; border-radius: var(--radius-md); }

/* ---------- Location strip ---------- */
.location-strip {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--sand-100); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 16px; margin: 18px 0 10px; font-size: 0.88rem; font-weight: 600; color: var(--ink-700);
  text-align: center;
}
.location-strip span { flex: none; }
.location-strip span:first-child::after,
.location-strip span:nth-child(2)::after {
  content: "\2192 "; display: inline-block; margin-left: 10px; color: var(--ink-500); font-weight: 400;
}
.location-strip__here {
  color: var(--terracotta-600); font-weight: 700; flex: 1 1 auto; min-width: 0;
}
.location-times { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 0.88rem; color: var(--ink-700); font-weight: 600; margin-bottom: 4px; }
.location-times span::before { content: "\2713  "; color: var(--green-700); }
@media (max-width: 480px) {
  .location-strip { flex-direction: column; gap: 6px; padding: 14px; }
  .location-strip span:first-child::after,
  .location-strip span:nth-child(2)::after {
    content: "\2193 "; display: block; margin: 2px 0 0;
  }
  .location-strip__here { font-size: 0.98rem; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--fixed-dark); color: var(--fixed-white); padding: 10px 16px; z-index: 200; }
.skip-link:focus { left: 10px; top: 10px; }