/*
 * theme.css — Ammi's Handi. Warm-craft: a Hyderabadi dum kitchen at 1pm,
 * not a delivery-app menu grid. Terracotta and charcoal on a toasted-cream
 * ground; Fraunces for the big type, Karla for everything read at length.
 */

:root {
  --canvas: #f3ece0;
  --surface: #faf6f1;
  --surface-2: #ece0cb;
  --border: #e1d3ba;
  --border-strong: #c7ad86;
  --ink: #2a2118;
  --muted: #676158;

  --accent: #a6311f;
  --accent-hover: #8a2819;
  --accent-ink: #fbf1e6;
  --accent-text: #845111;
  --accent-strong: #a6311f;
  --accent-soft: #f0ded0;
  --accent-border: #ddb79a;

  --success: #4b6a34;
  --success-ink: #fbf6ec;
  --success-soft: #e6ead9;
  --success-strong: #3d5629;
  --warning: #b8760f;
  --warning-ink: #2a2118;
  --warning-soft: #f2e3c7;
  --warning-strong: #8f5c0c;
  --danger: #9c2b1f;
  --danger-ink: #fbf1e6;
  --danger-soft: #f2ddd6;
  --danger-strong: #832318;

  --chart-1: #a6311f;
  --chart-2: #c98a2c;
  --chart-3: #6b7a3a;
  --chart-4: #845111;
  --chart-5: #8a4a2a;
  --chart-6: #4b6a34;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 0.7rem;
  --radius-card: 1.1rem;
  --radius-input: 0.7rem;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --shadow-card: 0 10px 24px -14px color-mix(in srgb, var(--ink) 45%, transparent);
  --shadow-raised: 0 22px 44px -18px color-mix(in srgb, var(--ink) 50%, transparent);
  --shadow-btn: 0 6px 14px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  --card-pad: 1.75rem;
  --caps: none;
  --caps-tracking: 0.02em;
  --btn-weight: 600;
  --measure: 62ch;

  --x-charcoal: #241a12;
  --x-cream-ink: #f3ece0;
  --x-ticker-bg: #f0d9a8;
  --x-ticker-ink: #6b3a12;
}

html[data-theme="dark"] {
  --canvas: #1c150f;
  --surface: #251c14;
  --surface-2: #2e2317;
  --border: #3b2c1c;
  --border-strong: #58432b;
  --ink: #f3ece0;
  --muted: #b7a992;

  --accent: #c2492e;
  --accent-hover: #d65c3d;
  --accent-ink: #fffaf5;
  --accent-text: #e0a24a;
  --accent-strong: #e8825b;
  --accent-soft: #3a2317;
  --accent-border: #5c3521;

  --success: #7fa065;
  --success-ink: #182210;
  --success-soft: #26301b;
  --success-strong: #a3c187;
  --warning: #d99a34;
  --warning-ink: #241a0c;
  --warning-soft: #3a2c14;
  --warning-strong: #e8b768;
  --danger: #cf5b46;
  --danger-ink: #221109;
  --danger-soft: #3a1e17;
  --danger-strong: #e89482;

  --chart-1: #d1683f;
  --chart-2: #e0a24a;
  --chart-3: #93a35f;
  --chart-4: #d99a34;
  --chart-5: #b06a41;
  --chart-6: #7fa065;

  --x-charcoal: #120d09;
  --x-cream-ink: #f3ece0;
  --x-ticker-bg: #3a2712;
  --x-ticker-ink: #f0d9a8;
}

/*
 * app.css — Ammi's Handi. The one screen this app is: a full-bleed hero
 * under a bar that turns solid on scroll, a saffron ticker of today's dum
 * varieties (the ONE thing that moves), a menu board with dotted leaders
 * instead of cards, and a charcoal closing band. Tokens only.
 */

/* ---- Site bar: transparent over the hero photo, solid once scrolled ---- */
.site-bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  color: var(--x-cream-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--x-charcoal) 46%, transparent), transparent);
  transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
.site-bar.is-scrolled {
  background: color-mix(in srgb, var(--canvas) 94%, transparent);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--border), 0 12px 24px -20px color-mix(in srgb, var(--ink) 40%, transparent);
  backdrop-filter: blur(10px);
}
.site-bar-mark { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: inherit; }
.site-bar-mark:hover { color: inherit; text-decoration: none; }
.site-bar nav a { color: inherit; opacity: 0.92; transition: opacity 0.15s ease; }
.site-bar nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }

/* ---- Hero: full-bleed photo, headline over the lower third ---- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background-color: var(--x-charcoal); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    185deg,
    color-mix(in srgb, var(--x-charcoal) 40%, transparent) 0%,
    color-mix(in srgb, var(--x-charcoal) 15%, transparent) 38%,
    color-mix(in srgb, var(--x-charcoal) 90%, transparent) 100%
  );
}
.hero-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding: 7rem 1.25rem 4rem;
  color: var(--x-cream-ink);
}
@media (min-width: 640px) { .hero-copy { padding-inline: 2rem; padding-bottom: 5rem; } }
.hero-kicker { font-size: 0.95rem; color: color-mix(in srgb, var(--x-cream-ink) 80%, transparent); }
.hero-title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.5rem, 7.5vw, 5.5rem);
  line-height: 0.98;
  text-wrap: balance;
  max-width: 20ch;
}
.hero-sub { margin-top: 1.25rem; max-width: 36rem; font-size: 1.1rem; color: color-mix(in srgb, var(--x-cream-ink) 88%, transparent); }
.hero-outline { border-color: color-mix(in srgb, var(--x-cream-ink) 55%, transparent); background-color: var(--x-charcoal); color: var(--x-cream-ink); }
.hero-outline:hover { background-color: color-mix(in srgb, var(--x-charcoal) 70%, black); border-color: var(--x-cream-ink); color: var(--x-cream-ink); }

/* ---- Ticker: the one moving thing on the page ---- */
.ticker {
  background: var(--x-ticker-bg);
  color: var(--x-ticker-ink);
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--x-ticker-ink) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--x-ticker-ink) 18%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0;
  animation: ticker-scroll 34s linear infinite;
  will-change: transform;
}
.ticker-item { font-family: var(--font-display); font-size: 1.05rem; white-space: nowrap; padding-inline: 0.35rem; }
.ticker-dot { opacity: 0.55; font-size: 0.85rem; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker:hover .ticker-track { animation-play-state: paused; }
html.reduced-motion .ticker-track { animation: none; transform: none; }

/* ---- The dum method: four steps on hairline dividers ---- */
.method-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.method-step { padding-top: 1.5rem; border-top: var(--border-w, 1px) solid var(--border); }
@media (min-width: 768px) {
  .method-grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .method-step { padding-top: 0; padding-inline: 1.75rem; border-top: 0; border-left: var(--border-w, 1px) solid var(--border); }
  .method-step:first-child { padding-left: 0; border-left: 0; }
}
.method-num { display: block; font-family: var(--font-display); font-size: 2.25rem; color: var(--accent-text); }
.method-title { margin-top: 0.5rem; font-family: var(--font-display); font-size: 1.2rem; }
.method-text { margin-top: 0.5rem; color: var(--muted); line-height: 1.65; }

.band-soft { background: var(--surface-2); border-block: var(--border-w, 1px) solid var(--border); }

/* ---- Today's handis: a menu board, not cards ---- */
.menu-board { margin-top: 2.25rem; }
.menu-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1rem;
  row-gap: 0.4rem;
  padding: 1.15rem 0;
  border-bottom: var(--border-w, 1px) solid var(--border);
}
.menu-row:last-child { border-bottom: 0; }
.menu-row-name { flex: 1 1 14rem; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.menu-row-title { font-family: var(--font-display); font-size: 1.15rem; }
.menu-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.menu-row-leader { display: none; flex: 1 1 2rem; align-self: flex-end; margin-bottom: 0.4em; border-bottom: 2px dotted var(--border-strong); }
@media (min-width: 560px) { .menu-row-leader { display: block; } }
.menu-row-status { display: flex; flex: 0 0 auto; align-items: center; gap: 0.6rem; }
.menu-row-price { font-family: var(--font-display); font-size: 1.15rem; white-space: nowrap; }
.menu-row.is-soldout .menu-row-title,
.menu-row.is-soldout .menu-row-price { opacity: 0.5; text-decoration: line-through; text-decoration-color: var(--border-strong); }

/* ---- Packing photograph ---- */
.packing-photo {
  position: relative;
  height: 30rem;
  max-height: 60vh;
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.packing-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.packing-caption { margin-top: 1.25rem; }
.packing-meta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.85rem; row-gap: 0.3rem; }
.packing-name { font-family: var(--font-display); font-size: 1.1rem; }
.packing-sep, .packing-place { color: var(--muted); }
.packing-line { margin-top: 0.5rem; color: var(--muted); max-width: 52ch; }

/* ---- Reviews ---- */
.review blockquote { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.45; color: var(--ink); }
.review figcaption { margin-top: 0.85rem; font-size: 0.95rem; font-weight: 600; }

/* ---- Closing band ---- */
.closing-band { background: var(--x-charcoal); color: var(--x-cream-ink); }
.closing-eyebrow { font-size: 0.95rem; letter-spacing: 0.03em; color: color-mix(in srgb, var(--x-cream-ink) 65%, var(--accent-text) 35%); }
.closing-title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2.4rem, 6.5vw, 4.75rem);
  line-height: 1.05;
  text-wrap: balance;
}
.closing-footer { border-top: 1px solid color-mix(in srgb, var(--x-cream-ink) 16%, transparent); color: color-mix(in srgb, var(--x-cream-ink) 78%, transparent); }