/* ==========================================================================
   Indian Spices — design system
   Colours, type, layout and motion mirror the Airo reference build
   (https://81r7onrco4.preview.c35.airoapp.ai) 1:1 — same HSL tokens,
   same fonts, same card/section/animation language.
   ========================================================================== */

:root {
  color-scheme: only light;

  /* Core palette — HSL triplets, used as hsl(var(--x)) so alpha works via
     hsl(var(--x) / 0.NN). Sampled directly from the reference build. */
  --background:        40 75% 94%;   /* page background (warm cream)   */
  --foreground:         0  0%  4%;   /* body text                      */
  --card:               37 67% 98%;  /* card fill                      */
  --primary:           352 82% 37%;  /* header / hero / crimson bands  */
  --primary-foreground: 0  0% 100%;
  --secondary:          22 82% 37%;  /* burnt orange, sparing use      */
  --muted:              41 52% 88%;  /* pill / chip fill               */
  --muted-foreground:   29 22% 34%;
  --border:             37 52% 81%;

  --brand-charcoal:     28 28% 13%;  /* dark text on gold              */
  --brand-gold:         37 100% 67%; /* buttons, accents, price        */
  --brand-gold-muted:   37 40% 75%;  /* footer body text               */
  --brand-cream-text:    0  0% 99%;  /* headings on dark/red grounds   */
  --brand-footer-bg:    28 28% 13%;
  --brand-veg:         123 47% 34%;
  --brand-nonveg:        0 67% 47%;

  --font-heading: "Playfair Display", Georgia, serif;
  --font-script:  "Dancing Script", cursive;
  --font-sans:    "Lato", system-ui, -apple-system, sans-serif;

  --shadow-card: 0 2px 12px hsl(var(--brand-charcoal) / 0.06);
  --shadow-card-hover: 0 10px 28px hsl(var(--brand-charcoal) / 0.12);

  --wrap: 1180px;
  --radius: 16px;
  /* Fallback only — nav.js measures the real header height on load/resize
     and overwrites this custom property, since the header's actual height
     depends on font metrics (the cursive logo) and can't be guessed reliably. */
  --header-h: 220px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

:focus-visible {
  outline: 3px solid hsl(var(--brand-gold));
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: var(--font-heading);
  color: hsl(var(--brand-charcoal));
  font-weight: 700;
  line-height: 1.12;
  margin: 0;
}
.script {
  font-family: var(--font-script);
  font-weight: 400;
  color: hsl(var(--primary));
  font-size: 1.35rem;
  line-height: 1;
  display: block;
}
/* On dark/crimson grounds the base crimson script reads as near-invisible
   against a same-hue background — swap to gold there for contrast. */
.hero-band .script,
.section-primary .script {
  color: hsl(var(--brand-gold));
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-group .reveal:nth-child(2) { transition-delay: .08s; }
.reveal-group .reveal:nth-child(3) { transition-delay: .16s; }
.reveal-group .reveal:nth-child(4) { transition-delay: .24s; }

/* ---------- page panels (single-shell navigation) ---------- */
/* Every page's content lives in every file (see router.ts) — only the
   panel matching the current "page" is shown, the rest carry the
   `hidden` attribute. `hidden` already computes to display:none in the
   UA stylesheet; this just guarantees it explicitly regardless of any
   other rule that might otherwise apply to `main`. */
.page-panel[hidden] { display: none; }

/* ---------- page transitions ---------- */
/* Cross-document View Transitions: browsers that support it (Chromium
   126+) cross-fade between page loads instead of hard-cutting, and hold
   the old page on screen until the new one has actually finished
   rendering — which reads as the persistent header/nav staying in place
   rather than the whole viewport jumping on every navigation. Browsers
   without support (Firefox/Safari as of writing) just ignore this block
   entirely and keep today's instant navigation — pure progressive
   enhancement, nothing to fall back to manually. */
@view-transition {
  navigation: auto;
}

/* Give the persistent chrome its own stable transition group instead of
   letting it get swept into the whole-page crossfade. */
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }

/* Root (everything except the named header/footer): a plain, snappy
   fade. The browser default (~250ms) reads a little sluggish against
   the rest of the site's motion language (buttons/reveal sit around
   150ms) — match that instead. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease;
}
/* ::view-transition-group(root) also interpolates *size* by default —
   animating its box from the old page's captured dimensions to the
   new page's. Fine between similarly-sized pages, but menu.html runs
   roughly twice the height of most other pages (~8600px vs ~5000px, 63
   dishes across 15 categories), and stretching/resizing a snapshot
   across that big a gap looked like a jarring flicker. Drop the group's
   own animation so its box just settles at its final size with no
   morph — the old/new fade above is unaffected, that's a separate layer. */
::view-transition-group(root) {
  animation: none;
}

/* Header and footer specifically get NO fade at all, unlike root above.
   They're pixel-identical across every page except for which nav link
   is highlighted — and since that link always changes on every single
   navigation (that's the whole point of navigating), giving them the
   same crossfade as root meant two slightly different renders of the
   same header text cross-dissolving on literally every click, which
   read as the header "blinking". With animation:none on every layer,
   the new snapshot (fully opaque by default, stacked on top of the old
   one) just instantly replaces it — an instant swap, not a fade, which
   is the correct look for chrome that isn't supposed to visibly change. */
::view-transition-group(site-header),
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-group(site-footer),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
  animation: none !important;
}

/* Same reduced-motion stance as `.reveal` above: collapse to an instant
   swap rather than leaving the feature half-on. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: hsl(var(--primary));
  box-shadow: 0 4px 24px hsl(var(--brand-charcoal) / 0.3);
  text-align: center;
  padding: 10px 0 0;
  transition: padding .2s ease;
}
/* nav.ts toggles this briefly while pre-measuring the header's expanded
   vs. compact height, so it can read both without the shrink transition
   (here, and separately on .brand-logo/.site-nav below) animating mid
   measurement. */
.site-header.measuring-height,
.site-header.measuring-height * {
  transition: none !important;
}
.brand { display: inline-block; text-decoration: none; }
/* The logo file's own canvas already has a red background matching
   --primary almost exactly (RGB 174,17,38 vs the token's 172,17,38), so it
   sits flush against the header with no visible seam or box. */
.brand-logo {
  display: block;
  height: clamp(112px, 16vw, 160px);
  width: auto;
  margin: 0 auto;
  transition: height .2s ease;
}
.site-nav {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 4px;
  padding: 14px 12px 14px;
  transition: padding .2s ease;
}

/* Once the page has scrolled past the hero, the fixed header + sticky
   filter bar below it (menu.html) permanently eat a big chunk of the
   viewport — shrink the logo/nav down once scrolling starts so more of
   the actual content is visible. syncHeaderHeight() (nav.ts) re-measures
   --header-h on toggle, so body's padding-top and the sticky filter
   bar's `top` offset track the smaller header automatically. */
.site-header.is-compact { padding-top: 4px; }
.site-header.is-compact .brand-logo { height: clamp(52px, 7vw, 68px); }
.site-header.is-compact .site-nav { padding: 6px 12px 8px; }
.site-nav a {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .04em;
  color: hsl(var(--brand-cream-text) / 0.85);
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.site-nav a:hover { background: hsl(0 0% 100% / 0.12); color: #fff; }
.site-nav a[aria-current="page"] { background: hsl(var(--brand-cream-text)); color: hsl(var(--brand-charcoal)); }

.nav-toggle {
  display: none;
  position: absolute;
  top: 14px; right: 14px;
  width: 42px; height: 42px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 24px; height: 24px; }

body { padding-top: var(--header-h); }

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 4px 16px 18px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { text-align: center; }
  /* No hardcoded --header-h override here — nav.js re-measures on resize,
     since the mobile header (hamburger instead of the nav row) is a
     different real height than desktop, not a fixed guessable one. */
}

/* ---------- page hero band (red, above content) ---------- */
.hero-band {
  background: hsl(var(--primary));
  color: #fff;
  text-align: center;
  padding: 24px 0 28px;
}
.hero-band h1 {
  color: hsl(var(--brand-cream-text));
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  margin: 6px 0 0;
}
.hero-band p {
  color: rgba(255, 255, 255, .82);
  max-width: 60ch;
  margin: 20px auto 0;
}

/* gold ornament divider — line ✦ line ◆ line ✦ line */
.divider {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 16px auto 0; max-width: 300px;
}
.divider .ln { height: 1px; flex: 1; background: hsl(var(--brand-gold) / 0.5); }
.divider .ln-sm { flex: 0 0 18px; }
.divider span { color: hsl(var(--brand-gold)); font-size: 1.15rem; line-height: 1; }
.divider span.dot { font-size: .68rem; }
.about-split .divider,
.split-story .divider { margin-left: 0; }

/* ---------- home hero ---------- */
.home-hero {
  position: relative;
  min-height: calc(78vh - var(--header-h));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 60px 20px;
  overflow: hidden;
}
.home-hero img.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.home-hero .hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, hsl(0 0% 0% / 0.9) 0%, transparent 12%, transparent 88%, hsl(0 0% 0% / 0.9) 100%),
    hsl(0 0% 0% / 0.68);
}
/* Card kept light on purpose: a faint tint + slight blur so the photo stays
   the star, with a soft text-shadow doing the legibility work instead of a
   heavy dark panel. */
.home-hero .inner {
  position: relative; z-index: 1;
  max-width: 500px;
  border-radius: 22px;
  padding: clamp(22px, 4vw, 36px) clamp(20px, 4vw, 34px);
  background: hsl(0 0% 4% / 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid hsl(var(--brand-gold) / 0.25);
  text-shadow: 0 1px 8px hsl(0 0% 0% / 0.7), 0 0 2px hsl(0 0% 0% / 0.55);
}
.home-hero h1 {
  color: hsl(var(--brand-cream-text));
  font-size: clamp(2rem, 5.5vw, 3.3rem);
  letter-spacing: -.01em;
  margin: 6px 0 0;
}
.home-hero .lede {
  font-family: var(--font-script);
  color: hsl(var(--brand-gold));
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  margin: 0;
}
.home-hero .tagline {
  font-family: var(--font-script);
  color: hsl(var(--brand-gold));
  font-size: clamp(1rem, 2.1vw, 1.2rem);
  margin: 12px 0 0;
}
.home-hero .place {
  color: rgba(255, 255, 255, .88);
  letter-spacing: .2em;
  font-size: .7rem;
  margin: 8px 0 0;
}
/* ---------- buttons ---------- */
.btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .03em;
  font-size: .92rem;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: opacity .15s ease, transform .1s ease, background-color .15s ease;
}
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.96); }
.btn-gold { background: hsl(var(--brand-gold)); color: hsl(var(--brand-charcoal)); }
.btn-ghost { border-color: rgba(255, 255, 255, .5); color: rgba(255,255,255,.92); }
.btn-outline { border-color: hsl(var(--primary)); color: hsl(var(--primary)); background: transparent; }
.btn-outline:hover { background: hsl(var(--primary) / 0.06); opacity: 1; }
.btn-soft { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: rgba(255,255,255,.92); }
.btn-sm { padding: 11px 22px; font-size: .85rem; }
.btn svg { width: 15px; height: 15px; }

/* ---------- section shell ---------- */
.section { padding: 52px 0; }
.section-muted { background: hsl(var(--muted)); }
.section-primary { background: hsl(var(--primary)); }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.section-head h2 { font-size: clamp(2rem, 4.2vw, 2.8rem); }
.section-head p { margin: 18px 0 0; }
.section-head.on-dark p { color: rgba(255,255,255,.82); }
.section-head.on-dark h2 { color: hsl(var(--brand-cream-text)); }
/* .script is a <p> too, so the rule above would otherwise also catch the
   eyebrow line and wash it out to the same white as the body copy —
   pull it back to gold, matching every other dark-ground eyebrow. */
.section-head.on-dark .script { color: hsl(var(--brand-gold)); }

/* ---------- signature dish / feature cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr; } }

.feature-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease, transform .2s ease;
  display: flex; flex-direction: column; height: 100%;
}
.feature-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.feature-card .thumb { height: 280px; overflow: hidden; }
.feature-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.feature-card .body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.feature-card .top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.feature-card h3 { font-size: 1.2rem; margin-bottom: 0; }
.feature-card p { font-size: .92rem; flex: 1; margin: 0 0 12px; }
.feature-card .price {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  color: hsl(var(--brand-charcoal));
  font-size: 1.05rem;
  background: hsl(var(--brand-gold) / 0.18);
  border-radius: 999px;
  padding: 5px 14px;
  transition: background .18s ease, color .18s ease;
}
.feature-card:hover .price { background: hsl(var(--secondary)); color: hsl(var(--brand-cream-text)); }

.center-cta { text-align: center; margin-top: 46px; }

/* ---------- split section (image + copy, red ground) ---------- */
.split-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
@media (max-width: 900px) { .split-story { grid-template-columns: 1fr; } }
.split-story .media { min-height: 340px; }
.split-story .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-story .copy { display: flex; align-items: center; padding: 56px clamp(24px, 6vw, 72px); }
.split-story .copy > div { max-width: 46ch; }
.split-story h2 { color: hsl(var(--brand-cream-text)); font-size: clamp(2rem, 4vw, 2.7rem); margin: 8px 0 0; }
.split-story p { color: rgba(255,255,255,.85); margin: 18px 0 0; }

/* ---------- category pill row (home menu-cta) ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }
.pill-row span {
  font-size: .78rem; font-weight: 600;
  background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  padding: 7px 15px; border-radius: 999px;
}

/* ---------- home gallery preview grid ---------- */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 700px) { .preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.preview-grid .ph {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
}
.preview-grid .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.preview-grid .ph:hover img { transform: scale(1.06); }

/* ---------- menu filters (sticky) ---------- */
.filters {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border));
  padding: 16px 0;
}
.filter-inner {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
}
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.chip {
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  border: 1.5px solid hsl(var(--border));
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.chip:hover { border-color: hsl(var(--brand-gold)); }
.chip[aria-pressed="true"] { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: #fff; }
.chip-sm { font-size: .76rem; font-weight: 500; padding: 6px 14px; border-width: 1px; }
.chip-sm[aria-pressed="true"] { background: hsl(var(--brand-gold)); border-color: hsl(var(--brand-gold)); color: hsl(var(--brand-charcoal)); }

/* ---------- menu list ---------- */
.menu-list { padding: 52px 0 70px; }
/* Space goes BETWEEN visible categories only. `.cat:first-child` can't do
   this: when a filter hides the categories before one, that one is still
   not the DOM's first child, so it kept its 50px top margin and started
   lower than the unfiltered "Alle" view. */
.cat { margin-top: 0; }
.cat:not(.is-hidden) ~ .cat:not(.is-hidden) { margin-top: 50px; }
.cat.is-hidden { display: none; }
.cat-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.cat-head h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); white-space: nowrap; }
.cat-head .rule { flex: 1; height: 1px; background: hsl(var(--border)); }
.cat-head .star { color: hsl(var(--brand-gold)); font-size: .95rem; }
.cat-head .tages-price {
  font-family: var(--font-sans);
  font-weight: 700;
  color: hsl(var(--brand-charcoal));
  font-size: .92rem;
  white-space: nowrap;
  flex: none;
  background: hsl(var(--brand-gold) / 0.18);
  border-radius: 999px;
  padding: 5px 14px;
  transition: background .18s ease, color .18s ease;
}
.cat-head .tages-price:hover {
  background: hsl(var(--secondary));
  color: hsl(var(--brand-cream-text));
}
.cat-note { margin: -14px 0 22px; color: hsl(var(--muted-foreground)); font-size: .95rem; line-height: 1.7; max-width: 680px; white-space: pre-line; }

.dish-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 800px) { .dish-grid { grid-template-columns: 1fr; } }

.dish {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: box-shadow .18s ease;
}
.dish:hover { box-shadow: var(--shadow-card-hover); }
.dish.is-hidden { display: none; }

.dish .mark {
  margin-top: 5px;
  width: 13px; height: 13px; flex: none;
  border: 2px solid currentColor; border-radius: 3px;
  display: inline-grid; place-items: center;
}
.dish .mark::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dish.veg    .mark { color: hsl(var(--brand-veg)); }
.dish.nonveg .mark { color: hsl(var(--brand-nonveg)); }
.dish.drink  .mark { color: hsl(var(--brand-gold)); } /* drinks: neutral dot, no veg/non-veg meaning */

.dish .dish-body { flex: 1; min-width: 0; }
.dish .dish-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.dish h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
}
.dish .price {
  font-family: var(--font-sans);
  font-weight: 700;
  color: hsl(var(--brand-charcoal));
  font-size: .92rem;
  white-space: nowrap;
  flex: none;
  background: hsl(var(--brand-gold) / 0.18);
  border-radius: 999px;
  padding: 5px 14px;
  transition: background .18s ease, color .18s ease;
}
.dish:hover .price {
  background: hsl(var(--secondary));
  color: hsl(var(--brand-cream-text));
}
.dish p { margin: 0 0 10px; font-size: .89rem; line-height: 1.55; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: 3px 11px; border-radius: 999px;
  border: 1px solid;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag-veg    { background: hsl(var(--brand-veg) / 0.1);    color: hsl(var(--brand-veg));    border-color: hsl(var(--brand-veg) / 0.3); }
.tag-nonveg { background: hsl(var(--brand-nonveg) / 0.1); color: hsl(var(--brand-nonveg)); border-color: hsl(var(--brand-nonveg) / 0.3); }

.menu-note { text-align: center; margin-top: 46px; font-size: .88rem; }
.menu-note.is-hidden { display: none; }

.empty-state {
  display: none;
  text-align: center;
  padding: 48px 0 10px;
  color: hsl(var(--muted-foreground));
}
.empty-state.show { display: block; }
.empty-state.is-hidden { display: none !important; }

/* ---------- Tagesmenü ---------- */
#category-filter.is-hidden,
#menu-root.is-hidden,
.tagesmenu.is-hidden { display: none; }

#day-filter { margin-bottom: 26px; }
.tages-day.is-hidden { display: none; }
.tages-day { margin-top: 36px; }
.tages-day:first-child { margin-top: 0; }
.tages-day-label {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 14px;
  color: hsl(var(--brand-charcoal));
}
.tages-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .tages-grid { grid-template-columns: 1fr; } }
.tages-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: box-shadow .18s ease;
}
.tages-card:hover { box-shadow: var(--shadow-card-hover); }
.tages-card .mark {
  margin-top: 5px;
  width: 13px; height: 13px; flex: none;
  border: 2px solid currentColor; border-radius: 3px;
  display: inline-grid; place-items: center;
}
.tages-card .mark::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tages-card.veg    .mark { color: hsl(var(--brand-veg)); }
.tages-card.nonveg .mark { color: hsl(var(--brand-nonveg)); }
.tages-card .tages-body { flex: 1; min-width: 0; }
.tages-card h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.tages-card p { margin: 0 0 10px; font-size: .92rem; line-height: 1.55; }
.tages-sub { display: block; color: hsl(var(--muted-foreground)); font-size: .85rem; margin-top: 4px; }

/* ---------- info cards (reserve / contact) ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 30px; } }

.info-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  padding: 16px 18px;
  display: flex; gap: 16px; align-items: center;
  text-decoration: none;
  transition: box-shadow .18s ease;
}
.info-card:hover { box-shadow: var(--shadow-card-hover); }
.info-card + .info-card { margin-top: 12px; }
.info-ico {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  display: grid; place-items: center;
  font-size: 1.1rem;
}
.info-ico svg { width: 20px; height: 20px; }
.info-label {
  font-size: .68rem; letter-spacing: .12em;
  color: hsl(var(--muted-foreground)); text-transform: uppercase;
  font-weight: 700;
  display: block; margin-bottom: 3px;
}
.info-card strong, .info-card .info-value { color: hsl(var(--brand-charcoal)); font-size: 1rem; font-weight: 600; }
.info-card a { color: hsl(var(--brand-charcoal)); text-decoration: none; }
.info-card a:hover { color: hsl(var(--primary)); }
.info-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 800px) { .info-grid-3 { grid-template-columns: 1fr; } }
/* Contact page: the (tall) opening-hours card sits in the right column across
   both rows; the other four cards fill the two columns to its left, two per
   row, so there's no empty space under the shorter ones. Stacked again on
   narrow screens. */
.info-grid-3 .info-card-block.info-hours { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 800px) { .info-grid-3 .info-card-block.info-hours { grid-column: auto; grid-row: auto; } }
.info-card-block {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 18px;
  padding: 26px 24px;
}
.info-card-block .info-ico { margin-bottom: 14px; }

/* hours table — reserve.html puts .hours on a wrapper around the <dl>,
   contact.html puts .hours directly on the <dl> itself; both need the
   grid layout so dt/dd line up in two columns instead of falling back
   to the browser's default stacked <dl> rendering. */
.hours { margin-top: 0; }
.hours dl,
dl.hours {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 18px;
}
.hours dt { color: hsl(var(--muted-foreground)); font-size: .92rem; }
.hours dd { margin: 0; color: hsl(var(--brand-charcoal)); font-weight: 700; text-align: right; font-size: .92rem; }
.hours .closed { color: hsl(var(--primary)); }

.map-embed {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  margin-top: 44px;
}
.map-embed iframe { display: block; width: 100%; height: 360px; border: 0; }

/* ---------- reservation layout ---------- */
.reserve-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 52px;
  align-items: start;
}
@media (max-width: 950px) { .reserve-grid { grid-template-columns: 1fr; gap: 36px; } }
.reserve-form-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 20px;
  padding: clamp(24px, 4vw, 38px);
  box-shadow: var(--shadow-card);
}

/* ---------- form ---------- */
.form-grid { display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.field { font: inherit; width: 100%; }
.field input, .field select, .field textarea, .field .date-display {
  font: inherit;
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  transition: border-color .16s ease, box-shadow .16s ease;
  box-sizing: border-box;
  line-height: 1.3;
}
/* A date input's native calendar-icon widget still nudges its intrinsic
   height a couple px past a same-padding text input/select even with
   line-height/box-sizing aligned above — pin every non-textarea field to
   one explicit height so the row is pixel-identical regardless of what
   native chrome a given input type carries. */
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field .date-display {
  height: 50px;
}
/* Browsers pad a <select>'s native arrow inconsistently, so left to the
   UA stylesheet it ends up a few px taller than a same-padding <input>
   sitting right next to it in a .form-row. Draw a matching chevron
   ourselves and drop the native one so every field is pixel-identical. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a5644' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: hsl(var(--muted-foreground) / 0.7); }
.field input:focus, .field select:focus, .field textarea:focus, .field .date-display:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18);
}
.field.invalid input, .field.invalid select, .field.invalid textarea, .field.invalid .date-display { border-color: hsl(var(--brand-nonveg)); }
.field-error { color: hsl(var(--brand-nonveg)); font-size: .82rem; margin-top: 5px; display: none; }
.field.invalid .field-error { display: block; }

/* Date field: a real <input type="date"> holds the actual value (still
   what gets validated/submitted) but is visually and interactively
   hidden — native date inputs can't be given custom placeholder text or
   made typing-only, they always show a literal dd.mm.yyyy segmented
   editor. .date-display is a real <button> standing in for it: shows
   "Datum wählen" until a date is picked (then the formatted date),
   can't be typed into since it's a button not a text field, and opens
   the real input's native picker via showPicker() on click/Enter/Space —
   see app.js. */
.field-has-clear { position: relative; }
.date-real-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.date-display {
  text-align: left;
  cursor: pointer;
  padding-right: 40px;
  color: hsl(var(--muted-foreground) / 0.7);
}
.date-display.has-value { color: hsl(var(--foreground)); }
.field-clear {
  position: absolute;
  right: 8px; top: 8px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.field-clear:hover { background: hsl(var(--muted)); color: hsl(var(--brand-charcoal)); }
.field-clear[hidden] { display: none; }
.captcha-label { display: block; font-size: .88rem; color: hsl(var(--muted-foreground)); margin-bottom: 8px; }
/* Honeypot — invisible and untabbable for real visitors; only a
   scripted filler that blindly fills every field would ever touch it. */
.hp-field {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.btn-submit {
  width: 100%;
  background: hsl(var(--brand-gold));
  color: hsl(var(--brand-charcoal));
  border: none;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: .03em;
  font-size: .96rem;
  padding: 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity .15s ease, transform .1s ease;
}
.btn-submit:hover { opacity: .9; }
.btn-submit:active { transform: scale(.98); }
.btn-submit:disabled { opacity: .6; cursor: default; }
.form-note { text-align: center; font-size: .82rem; margin-top: 14px; }

.form-status {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid hsl(var(--brand-veg) / 0.3);
  background: hsl(var(--brand-veg) / 0.1);
  color: hsl(var(--brand-veg));
}
.form-status.show { display: block; }
.form-status.error {
  border-color: hsl(var(--brand-nonveg) / 0.3);
  background: hsl(var(--brand-nonveg) / 0.1);
  color: hsl(var(--brand-nonveg));
}

/* ---------- gallery ---------- */
.gallery-cat { margin-top: 54px; }
.gallery-cat:first-child { margin-top: 0; }
.gallery-cat.is-hidden { display: none; }
.gallery-cat-head { text-align: center; margin-bottom: 26px; }
.gallery-cat-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
.gallery-cat-head .divider { margin-top: 10px; }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 950px) { .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gal-item {
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
}
.gal-item.is-hidden { display: none; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; cursor: pointer; }
.gal-item:hover img { transform: scale(1.06); }
.gal-item img:focus-visible { outline: 3px solid hsl(var(--brand-gold)); outline-offset: -3px; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: hsl(0 0% 0% / 0.92);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  padding: 32px;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 90vw; max-height: 85vh;
  width: auto; height: auto;
  border-radius: 10px;
  box-shadow: 0 20px 60px hsl(0 0% 0% / 0.5);
}
.lightbox-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: hsl(0 0% 100% / 0.12);
  color: hsl(var(--brand-cream-text));
  border: none; cursor: pointer;
  transition: background .2s ease;
}
.lightbox-close:hover { background: hsl(0 0% 100% / 0.22); }
.lightbox-close svg { width: 22px; height: 22px; }

/* ---------- about ---------- */
/* The muted background is a placeholder: it fills the banner while the (large)
   photo is still arriving, so the space doesn't read as an empty page. */
.about-hero-img { position: relative; height: clamp(240px, 40vw, 540px); overflow: hidden; background: hsl(var(--muted)); }
.about-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.about-hero-img::after {
  content: "";
  position: absolute; right: 24px; bottom: 24px;
  width: 64px; height: 64px;
  border-right: 1px solid hsl(var(--brand-gold) / 0.6);
  border-bottom: 1px solid hsl(var(--brand-gold) / 0.6);
}

.about-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .about-split { grid-template-columns: 1fr; gap: 28px; } }
.about-img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
}
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-split h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 700px) { .values-grid { grid-template-columns: 1fr; } }
.values-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .values-grid-3 { grid-template-columns: 1fr; } }
.value-card.center { text-align: center; }
.value-card.center .value-ico { margin-left: auto; margin-right: auto; }
.value-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 18px;
  padding: 28px 26px;
}
.value-ico {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: hsl(var(--brand-gold) / 0.14);
  color: hsl(var(--brand-gold));
  display: grid; place-items: center;
  margin-bottom: 16px;
  font-size: 1.3rem;
}
.value-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.value-card p { font-size: .9rem; margin: 0; }

/* ---------- footer ---------- */
/* No margin-top here on purpose: on pages that end with a dark
   .section-primary CTA right before the footer, a gap would show a
   sliver of the cream body background between two dark blocks — reads
   as a stray line. The footer's own background/padding give it enough
   separation without one. */
.site-footer { background: hsl(var(--brand-footer-bg)); color: hsl(var(--background)); padding: 58px 0 0; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
@media (max-width: 850px) { .foot-grid { grid-template-columns: 1fr; gap: 30px; } }
.foot-title {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: hsl(var(--brand-gold)); margin-bottom: 16px; font-weight: 700;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer ul a { color: hsl(var(--brand-gold-muted)); text-decoration: none; font-size: .92rem; }
.site-footer ul a:hover { color: #fff; }
/* logo-footer.png has its red background keyed out to transparent (unlike
   logo-header.png in the header), so it reads clean against the dark footer. */
.foot-logo-img { display: block; height: 64px; width: auto; }
.foot-blurb { max-width: 34ch; margin: 14px 0 0; font-size: .92rem; color: hsl(var(--brand-gold-muted)); }
.foot-rule-mark { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.foot-rule-mark span { color: hsl(var(--brand-gold)); }
.foot-rule-mark .ln { height: 1px; flex: 1; background: hsl(var(--brand-gold) / 0.3); }
.foot-visit p { margin: 0; font-size: .92rem; color: hsl(var(--brand-gold-muted)); }
.foot-visit p.lbl { color: hsl(var(--background)); font-weight: 600; margin-top: 14px; }
.foot-visit p.lbl:first-child { margin-top: 0; }
.foot-visit a { color: hsl(var(--brand-gold-muted)); text-decoration: none; }
.foot-visit a:hover { color: #fff; }
.foot-base {
  border-top: 1px solid hsl(var(--brand-gold) / 0.15);
  margin-top: 40px;
  padding: 20px 0;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: .78rem; color: hsl(var(--muted-foreground));
}

/* ---- Notices & closures (Admin › Mitteilungen) ---------------------------- */
/* Popup on the home page */
.closure-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: hsl(0 0% 6% / 0.6);
}
.closure-card {
  width: min(520px, 100%); max-height: calc(100vh - 40px); overflow: auto;
  background: hsl(var(--background)); color: hsl(var(--foreground));
  border-radius: 18px; border: 1px solid hsl(var(--border));
  box-shadow: 0 24px 60px hsl(0 0% 0% / 0.35);
  padding: 30px 28px 26px; text-align: center;
  border-top: 6px solid hsl(var(--primary));
}
.closure-item + .closure-item { margin-top: 22px; padding-top: 22px; border-top: 1px solid hsl(var(--border)); }
.closure-item h2 { font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.2; margin: 0 0 10px; color: hsl(var(--primary)); }
.closure-when { font-weight: 700; margin: 0 0 6px; }
.closure-note { margin: 0 0 10px; color: hsl(var(--muted-foreground)); font-size: .95rem; }
.closure-info { margin: 12px 0 0; white-space: pre-line; text-align: left; }
.closure-close { margin-top: 24px; }
/* Notice above the opening hours (reserve.html, contact.html) */
.hours-notice {
  margin: 8px 0 12px; padding: 10px 12px; border-radius: 10px;
  background: hsl(var(--primary) / 0.08); border: 1px solid hsl(var(--primary) / 0.25);
  font-size: .9rem; color: hsl(var(--brand-charcoal));
}
.hours-notice p { margin: 0; }
.hours-notice p + p { margin-top: 6px; }
.hours-notice strong { color: hsl(var(--primary)); }
dl.is-closed-now dd, .hours dl.is-closed-now dd { color: hsl(var(--primary)); }