/*
 * theme.css — Kesar Haveli. Deep espresso-maroon night, one antique-gold
 * accent, frosted glass over courtyard photography. Opens in dark mode;
 * the light set is a warm ivory day version, not an inversion.
 */

:root {
  color-scheme: dark;

  --canvas: #1a0f0c;
  --surface: #312724;
  --surface-2: #3c302b;
  --border: #4a3931;
  --border-strong: #62483e;
  --ink: #f3e9dd;
  --muted: #b0a59a;

  --accent: #8a2432;
  --accent-hover: #9e2c3b;
  --accent-ink: #f6ece1;
  --accent-text: #d3ae3f;
  --accent-strong: #d9a7ac;
  --accent-soft: #3a2420;
  --accent-border: #6b3a3f;

  --success: #4f8f63;
  --success-ink: #142016;
  --success-soft: #1f2f22;
  --success-strong: #9ecca9;
  --warning: #c68f2f;
  --warning-ink: #1a0f0c;
  --warning-soft: #33260f;
  --warning-strong: #e5bd6c;
  --danger: #c0483f;
  --danger-ink: #f6ece1;
  --danger-soft: #331714;
  --danger-strong: #e29a90;

  --chart-1: #8a2432;
  --chart-2: #d3ae3f;
  --chart-3: #d9a7ac;
  --chart-4: #6b5548;
  --chart-5: #b0a59a;
  --chart-6: #e5bd6c;

  --font-display: "Marcellus", "Iowan Old Style", ui-serif, serif;
  --font-body: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 400;
  --display-tracking: 0.01em;
  --eyebrow-tracking: 0.14em;

  --radius-btn: 999px;
  --radius-card: 1.25rem;
  --radius-input: 0.85rem;
  --radius-lg: 1.25rem;
  --border-w: 1px;
  --border-strong-w: 1px;
  --card-pad: 2rem;
  --caps: none;
  --caps-tracking: 0.02em;
  --btn-weight: 500;
  --measure: 64ch;

  --shadow-card: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
  --shadow-raised: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  --shadow-btn: 0 10px 24px -10px color-mix(in srgb, var(--accent) 65%, transparent);

  --x-glass-bg: color-mix(in srgb, var(--surface) 62%, transparent);
  --x-glass-border: color-mix(in srgb, var(--accent-text) 45%, transparent);
  --x-hairline: color-mix(in srgb, var(--accent-text) 38%, transparent);
  --x-scrim-top: color-mix(in srgb, black 55%, transparent);
  --x-scrim-bottom: color-mix(in srgb, black 78%, transparent);
  --x-bar-bg: color-mix(in srgb, var(--canvas) 82%, transparent);
}

html[data-theme="light"] {
  color-scheme: light;

  --canvas: #f8f0e6;
  --surface: #fffaf3;
  --surface-2: #f1e4d3;
  --border: #e2cfb8;
  --border-strong: #c7ab8a;
  --ink: #2b1a14;
  --muted: #5c4a42;

  --accent: #8a2432;
  --accent-hover: #741e2a;
  --accent-ink: #f6ece1;
  --accent-text: #7d5e10;
  --accent-strong: #7a3d43;
  --accent-soft: #f3e0e2;
  --accent-border: #d9b3ac;

  --success: #3f7d52;
  --success-ink: #f8f0e6;
  --success-soft: #e2ecdf;
  --success-strong: #2e5d3d;
  --warning: #92620f;
  --warning-ink: #f8f0e6;
  --warning-soft: #f1e2c6;
  --warning-strong: #714a09;
  --danger: #a1352e;
  --danger-ink: #f8f0e6;
  --danger-soft: #f1dcd6;
  --danger-strong: #832a24;

  --chart-1: #8a2432;
  --chart-2: #7d5e10;
  --chart-3: #7a3d43;
  --chart-4: #5c4a42;
  --chart-5: #8a7568;
  --chart-6: #92620f;

  --shadow-card: 0 20px 46px -22px rgba(43, 26, 20, 0.28);
  --shadow-raised: 0 26px 60px -20px rgba(43, 26, 20, 0.32);
  --shadow-btn: 0 10px 22px -10px color-mix(in srgb, var(--accent) 45%, transparent);

  --x-glass-bg: color-mix(in srgb, var(--surface) 78%, transparent);
  --x-glass-border: color-mix(in srgb, var(--accent-text) 35%, transparent);
  --x-hairline: color-mix(in srgb, var(--accent-text) 40%, transparent);
  --x-scrim-top: color-mix(in srgb, black 35%, transparent);
  --x-scrim-bottom: color-mix(in srgb, black 55%, transparent);
  --x-bar-bg: color-mix(in srgb, var(--canvas) 88%, transparent);
}

/*
 * app.css — Kesar Haveli's own page: the night ground, the hero-overlay bar,
 * the halls list, the gallery strip, the thali frame, testimonials, the
 * enquiry panel and the footer. Everything here reads theme.css tokens only.
 *
 * Motion is deliberately narrow: only the hero photograph parallaxes as the
 * page scrolls (app.js). Nothing else on this page moves on its own.
 *
 * The bar turns solid using behavior.js's own hook: `.topbar` gets its
 * height measured into --bar-h, and html[data-scrolled] is set once the
 * page has moved — both read below with no app.js of our own needed for it.
 * The mobile panel is the checkbox-hack behavior.js already closes on a
 * same-page link or Escape (`.navopen` + `.drawer`).
 */

html:not(.reduced-motion) { scroll-behavior: smooth; }

body { background: var(--canvas); }

/* ---- Bar: transparent over the hero, solid once past it -------------- */
.site-bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 280ms ease, backdrop-filter 280ms ease, border-color 280ms ease;
}
html[data-scrolled] .site-bar {
  background: var(--x-bar-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--border);
}
.site-bar-inner { @apply mx-auto flex max-w-6xl items-center justify-between gap-6 px-6 py-5 md:px-10; }
.site-word {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
}
.site-nav { @apply hidden items-center gap-8 md:flex; }
.site-nav-link {
  font-size: 0.92rem;
  text-decoration: none;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  transition: color 150ms ease;
}
.site-nav-link:hover { color: var(--accent-text); }
.site-bar-actions { @apply flex items-center gap-2 md:gap-3; }
.site-cta { @apply hidden sm:inline-flex; }
.site-menu-btn { @apply md:hidden; }

/* The drawer checkbox is functional, never visible. */
.navopen { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.site-menu {
  @apply flex flex-col gap-1 px-6 md:hidden;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background: var(--x-bar-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: max-height 280ms ease, opacity 220ms ease, border-color 280ms ease;
}
.navopen:checked ~ .site-menu { max-height: 26rem; opacity: 1; padding-bottom: 1.25rem; border-bottom-color: var(--border); }
.site-menu-link {
  border-radius: 0.75rem;
  padding: 0.85rem 0.75rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
}
.site-menu-link:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }

/* ---- Hero: full-bleed night courtyard, parallax on the photo only ----- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 38rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hero-media { position: absolute; inset: -12% 0; height: 124%; will-change: transform; }
.hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--x-scrim-top) 0%, transparent 45%, var(--x-scrim-bottom) 100%);
  pointer-events: none;
}
/* The column of hero copy stays left-aligned, but it sits inside a
   page-width container centred in the pane (like every other section) so a
   wide screen splits its spare width evenly instead of piling it all up on
   the right. The copy itself still wraps at a readable measure (.hero-line). */
.hero-content { position: relative; z-index: 1; margin-inline: auto; max-width: 90rem; width: 100%; padding: 0 1.5rem 4rem; }
@media (min-width: 768px) { .hero-content { padding: 0 3rem 5.5rem; } }
.hero-word {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  font-size: clamp(2.6rem, 7vw, 4.75rem);
  color: var(--ink);
  text-shadow: 0 4px 32px color-mix(in srgb, black 55%, transparent);
}
.hero-line {
  margin-top: 1.1rem;
  max-width: 32rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
  text-shadow: 0 2px 18px color-mix(in srgb, black 60%, transparent);
}
@media (min-width: 768px) { .hero-line { font-size: 1.2rem; } }

/* ---- Section rhythm ---------------------------------------------------- */
.section-inner { @apply mx-auto max-w-6xl px-6 py-24 md:px-10 md:py-32; }
.section-inner-narrow { @apply max-w-3xl; }
.section-inner-flush { @apply px-0 md:px-0; }
/* The enquiry panel and the closing line sit either side of one seam: each
   .section-inner already carries a full py-24/py-32, so trimming just the
   shared edge here (rather than stacking two full paddings) keeps the two
   sections apart without the space between them reading as a gap left by
   mistake. */
.section-inner-tight-bottom { padding-bottom: 4rem; }
.section-inner-tight-top { padding-top: 2rem; }
.section-heading {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.9rem);
  color: var(--ink);
  margin: 0 0 2.75rem;
}
.section-gallery .section-heading { margin-bottom: 2rem; }

/* ---- The Halls: a divided list, never a card -------------------------- */
.hall-list { border-bottom: 1px solid var(--x-hairline); }
.hall-row {
  display: flex;
  align-items: baseline;
  gap: 1.75rem;
  padding-block: 1.85rem;
  border-top: 1px solid var(--x-hairline);
}
.hall-num { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--accent-text); min-width: 2ch; }
.hall-info { flex: 1; min-width: 0; }
.hall-name { margin: 0; font-size: 1.55rem; letter-spacing: 0.005em; color: var(--ink); }
.hall-note { margin: 0.4rem 0 0; max-width: 40ch; color: var(--muted); }
.hall-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.hall-price { color: var(--accent-text); }
@media (max-width: 640px) {
  .hall-row { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .hall-stats { flex-direction: row; align-items: baseline; gap: 1rem; text-align: left; }
}

/* ---- Gallery: a horizontal scroll-snap strip, captions beneath -------- */
.gallery-strip {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 1.5rem 0.5rem;
  scrollbar-width: none;
}
.gallery-strip::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .gallery-strip { padding: 0 2.5rem 0.5rem; gap: 1.85rem; } }
.gallery-item { flex: 0 0 auto; width: 76vw; max-width: 21rem; scroll-snap-align: start; }
@media (min-width: 768px) { .gallery-item { width: 24rem; } }
.gallery-caption { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.2rem; }
.gallery-event { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--accent-text); }
.gallery-couple { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.gallery-month { font-size: 0.82rem; color: var(--muted); }

/* ---- Menu: one gold-bordered thali, three columns ---------------------- */
.thali {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  border: 1px solid var(--x-glass-border);
  border-radius: 1.5rem;
  padding: 2.75rem;
  background: var(--x-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (max-width: 768px) { .thali { grid-template-columns: 1fr; gap: 2rem; padding: 2rem; } }
.thali-col + .thali-col { border-left: 1px solid var(--x-hairline); padding-left: 2.5rem; }
@media (max-width: 768px) {
  .thali-col + .thali-col { border-left: none; border-top: 1px solid var(--x-hairline); padding-left: 0; padding-top: 2rem; }
}
.thali-title { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.1rem; font-size: 1.3rem; color: var(--ink); }
.thali-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block; flex: none; }
.thali-dot-veg { background: var(--success); }
.thali-dot-jain { background: var(--warning); }
.thali-dot-nonveg { background: var(--danger); }
.thali-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; color: var(--muted); }
.thali-note { margin: 1.1rem 0 0; font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-text); }

/* ---- Testimonials: stacked quotes, credit carries the trust ----------- */
.testimonial-list { border-bottom: 1px solid var(--x-hairline); }
.testimonial { margin: 0; border-top: 1px solid var(--x-hairline); padding-block: 2.5rem; }
.testimonial-quote { margin: 0; font-size: 1.35rem; line-height: 1.5; color: var(--ink); }
@media (min-width: 768px) { .testimonial-quote { font-size: 1.6rem; } }
.testimonial-credit { margin-top: 1.25rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); }
.testimonial-sep { color: var(--accent-text); margin: 0 0.4rem; }

/* ---- Enquiry: one frosted glass panel on the dark ground --------------- */
.enquiry-panel {
  position: relative;
  border: 1px solid var(--x-glass-border);
  border-radius: 1.75rem;
  padding: 2.25rem;
  background: var(--x-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) { .enquiry-panel { padding: 3.25rem; } }
.enquiry-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: var(--eyebrow-tracking);
  color: var(--accent-text);
}
.enquiry-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
  color: var(--accent-text);
  text-decoration: none;
  font-size: 0.95rem;
}
.enquiry-call:hover { text-decoration: underline; }
.enquiry-success { text-align: center; padding: 1.5rem 0; }
.enquiry-success-mark {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
}

/* ---- Closing statement, as large as the opener ------------------------ */
.section-closing { text-align: center; }
.closing-line {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  font-size: clamp(2.75rem, 8vw, 6rem);
  line-height: 1.05;
  color: var(--ink);
  text-wrap: balance;
}

/* ---- Footer: quiet, three facts, nothing else -------------------------- */
.site-footer { border-top: 1px solid var(--border); }
.site-footer-inner {
  @apply mx-auto flex max-w-6xl flex-col items-center gap-3 px-6 py-10 text-center md:flex-row md:justify-between md:px-10 md:text-left;
}
.site-footer-word { margin: 0; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--ink); }
.site-footer-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; color: var(--muted); font-size: 0.9rem; }
.site-footer-meta a { color: var(--accent-text); text-decoration: none; }
.site-footer-meta a:hover { text-decoration: underline; }
.site-footer-sep { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}