/*
 * theme.css — Haveli Rasoi... wait, this app is a Jaipur banquet hall.
 * Palette: clay-warm sandstone & ivory, oxblood-maroon accent, marigold gold
 * in the chart ramp. Carved-serif display over a soft sans body. Opens light.
 */

:root {
  --canvas: #faf4ec;
  --surface: #fdfaf6;
  --surface-2: #f2e3cc;
  --border: #e6d6ba;
  --border-strong: #cba97a;
  --ink: #2b1810;
  --muted: #6b5f58;

  --accent: #7a1e2b;
  --accent-hover: #611723;
  --accent-ink: #fdf6ec;
  --accent-text: #a44b3f;
  --accent-soft: #f2ded4;
  --accent-strong: #7a1e2b;
  --accent-border: color-mix(in srgb, var(--accent) 38%, transparent);

  --success: #3f6b3f;
  --success-ink: #ffffff;
  --success-soft: #e4ecdd;
  --success-strong: #2f5230;
  --warning: #a3701f;
  --warning-ink: #ffffff;
  --warning-soft: #f3e7cf;
  --warning-strong: #7c5416;
  --danger: #9b2c2c;
  --danger-ink: #ffffff;
  --danger-soft: #f4dede;
  --danger-strong: #7c2222;

  --chart-1: #7a1e2b;
  --chart-2: #c98a2e;
  --chart-3: #5c7a52;
  --chart-4: #6b5f58;
  --chart-5: #a44b3f;
  --chart-6: #2b1810;

  --font-display: "Fraunces", ui-serif, Georgia, 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: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 500;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.05em;

  --radius-btn: 10px;
  --radius-card: 18px;
  --radius-input: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 8px 20px -12px color-mix(in srgb, var(--ink) 22%, transparent);
  --shadow-raised: 0 10px 32px -14px color-mix(in srgb, var(--ink) 32%, transparent);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --caps: none;
  --caps-tracking: 0.04em;
  --btn-weight: 600;
  --measure: 62ch;

  /* this app's own tokens */
  --x-band-bg: #f2e3cc;
  --x-band-ink: #2b1810;
  --x-hairline: #d9c39a;
  --x-marigold: #c98a2e;
  --x-cardstock: #fdf8ef;
}

html[data-theme="dark"] {
  --canvas: #201410;
  --surface: #2a1c16;
  --surface-2: #34241b;
  --border: #4a3527;
  --border-strong: #6b4f3a;
  --ink: #f3e6d6;
  --muted: #c2ac95;

  --accent: #d38b4a;
  --accent-hover: #e29c5c;
  --accent-ink: #241209;
  --accent-text: #e2a06b;
  --accent-soft: #3a2415;
  --accent-strong: #e2a06b;
  --accent-border: color-mix(in srgb, var(--accent) 45%, transparent);

  --success: #7fae76;
  --success-ink: #10210f;
  --success-soft: #1f3320;
  --success-strong: #a6cd9d;
  --warning: #d1a052;
  --warning-ink: #241705;
  --warning-soft: #3a2c14;
  --warning-strong: #e0b876;
  --danger: #d17a6a;
  --danger-ink: #250f0b;
  --danger-soft: #3a201b;
  --danger-strong: #e29b8d;

  --chart-1: #d38b4a;
  --chart-2: #e2a06b;
  --chart-3: #93b184;
  --chart-4: #c2ac95;
  --chart-5: #cf7a63;
  --chart-6: #f3e6d6;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
  --shadow-raised: 0 16px 36px -16px rgba(0, 0, 0, 0.7);

  --x-band-bg: #2a1c16;
  --x-band-ink: #f3e6d6;
  --x-hairline: #4a3527;
  --x-marigold: #e2a06b;
  --x-cardstock: #2a1c16;
}

/*
 * app.css — Kesar Mahal's own screens: the sandstone ground, the wordmark,
 * the hero collage mosaic, the swipeable gallery strip, the printed menu
 * card, the pull-quote strip and the accordion's footer. Tokens only.
 */

/* ---- Ground ---------------------------------------------------------- */
.page-ground {
  background:
    radial-gradient(ellipse 60rem 30rem at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    var(--canvas);
  min-height: 100vh;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wordmark:hover { color: var(--ink); text-decoration: none; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.eyebrow-on-accent { color: color-mix(in srgb, var(--accent-ink) 78%, transparent); }

.icon-sm { width: 1rem; height: 1rem; }

.stack > * + * { margin-top: 1.375rem; }
.stack-lg > * + * { margin-top: 1.5rem; }

/* ---- Hero collage ------------------------------------------------------
   A mosaic of five photographs with the headline set into its own cell.
   Rows and columns are fractional so the whole thing scales with the
   narrow column, no breakpoints needed. Only this section animates. */
.collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
    "hl hl p1 p1"
    "hl hl p2 p3"
    "p4 p4 p2 p3"
    "p4 p4 p5 p5";
  gap: 0.5rem;
  aspect-ratio: 4 / 4.5;
}
.collage-cell {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface-2);
}
.collage-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.collage-headline {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  background: linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 78%, var(--ink)));
  color: var(--accent-ink);
}
.collage-headline .eyebrow-on-accent { font-family: var(--font-mono); }
.collage-headline h1 { color: var(--accent-ink); font-weight: 500; }

.collage .collage-cell { opacity: 1; }
.collage.is-revealed .collage-cell {
  animation: mosaic-in 760ms var(--ease-out, ease) both;
}
.collage.is-revealed .collage-cell:nth-child(2) { animation-delay: 60ms; }
.collage.is-revealed .collage-cell:nth-child(3) { animation-delay: 120ms; }
.collage.is-revealed .collage-cell:nth-child(4) { animation-delay: 180ms; }
.collage.is-revealed .collage-cell:nth-child(5) { animation-delay: 240ms; }
.collage.is-revealed .collage-cell:nth-child(6) { animation-delay: 300ms; }
@keyframes mosaic-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
html.reduced-motion .collage.is-revealed .collage-cell { animation: none; }

/* ---- Halls --------------------------------------------------------------- */
.hall-card { border-color: var(--x-hairline); }
.hall-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
  white-space: nowrap;
  align-self: center;
}

/* ---- Gallery strip --------------------------------------------------------
   A horizontal, swipeable strip of full-height photographs — never a small
   image boxed beside a text list. Scroll-snapped for a thumb on a phone. */
.gallery-strip {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  scrollbar-width: none;
}
@media (min-width: 40rem) {
  .gallery-strip { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (min-width: 64rem) {
  .gallery-strip { padding-left: 3rem; padding-right: 3rem; }
}
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(74vw, 22rem);
}
.gallery-media {
  height: 30rem;
  max-height: 60vh;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-2);
}
.gallery-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-caption {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  text-align: right;
}
.gallery-names { font-family: var(--font-display); font-size: 1.0625rem; color: var(--ink); }
.gallery-meta { font-size: 0.8125rem; color: var(--muted); margin-top: 0.125rem; }

/* ---- From Our Kitchen: a segmented switch over a printed menu card ------- */
.menu-switch {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.25rem;
  gap: 0.25rem;
  background: var(--surface);
}
.menu-tab {
  border: 0;
  background: transparent;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}
.menu-tab:hover { color: var(--ink); }
.menu-tab.is-active { background: var(--accent); color: var(--accent-ink); }

.menu-card {
  background: var(--x-cardstock);
  border: 1px solid var(--x-hairline);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-card);
}
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--x-hairline);
  color: var(--ink);
}
.menu-list li:last-child { border-bottom: 0; }

/* ---- Testimonials: pull quotes on cardstock, horizontally strung -------- */
.quote-strip {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 1.5rem 0.5rem;
  scrollbar-width: none;
}
@media (min-width: 40rem) {
  .quote-strip { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (min-width: 64rem) {
  .quote-strip { padding-left: 3rem; padding-right: 3rem; }
}
.quote-strip::-webkit-scrollbar { display: none; }
.quote-card {
  flex: 0 0 auto;
  width: min(82vw, 24rem);
  scroll-snap-align: start;
  background: var(--x-cardstock);
  border: 1px solid var(--x-hairline);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
}
.quote-text {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.4;
  color: var(--ink);
  font-style: italic;
}
.quote-foot {
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--x-hairline);
  display: flex;
  flex-direction: column;
}
.quote-name { font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.quote-meta { font-size: 0.8125rem; color: var(--muted); margin-top: 0.125rem; }

/* ---- Footer --------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--x-hairline);
  padding: 2.5rem 0 3rem;
}
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  width: fit-content;
}
.footer-link:hover { color: var(--accent-text); text-decoration: none; }
.footer-link .icon { color: var(--muted); }

/* ---- Small screens --------------------------------------------------------- */
@media (max-width: 26rem) {
  .collage { aspect-ratio: 4 / 5.6; }
  .collage-headline { padding: 1rem; }
  .collage-headline h1 { font-size: 1.625rem; }
  .collage-headline p:last-child { display: none; }
}