/* Hide the vertical decorative lines that the typographic hero
   (.page-hero-type, defined in components.css) paints via its ::before /
   ::after pseudos. Scoped to /menu only via the body[data-page] hook so
   /blog keeps its lines. */
body[data-page='menu'] .page-hero-type::before,
body[data-page='menu'] .page-hero-type::after {
  display: none;
}

/* ========== MENU PAGE — EDITORIAL TREATMENT ==========
   Paired with the typographic hero on /menu. Two-column item flow with a
   centred column-rule, chapter headings with a dropped capital, dotted
   leader between dish name and price (tabular-nums so decimals stack),
   quiet uppercase dietary tags underneath. No search / no button filter —
   just italic category links. */

.menu-section {
  position: relative;
  padding: 5rem 0 8rem;
}

[data-theme='light'] .menu-section {
  background: linear-gradient(to bottom, #ffffff, #fafafa);
}

[data-theme='light'] .menu-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: image-set(
    url('/images/textures/subtle-texture.webp') type('image/webp'),
    url('/images/textures/subtle-texture.jpg') type('image/jpeg')
  );
  background-repeat: repeat;
  background-size: 600px 600px;
  opacity: 0.1;
  mix-blend-mode: multiply;
}

.menu-section > .container {
  position: relative;
  z-index: 1;
}

/* ---------- Category filter (pill style, shared with /order + /packages) ---------- */
.menu-tabs {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 5rem;
}

.menu-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  background: transparent;
  color: var(--accent-text);
  border: 1px solid #c9a96e63;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.menu-tab:hover,
.menu-tab:focus-visible {
  background: var(--accent);
  color: #1a1a1a;
}

.menu-tab.active {
  background: var(--accent);
  color: #ffffff;
}

/* ---------- Chapters (one per category) ---------- */
.menu-grid {
  max-width: 1100px;
  margin: 0 auto;
}

.menu-chapter {
  margin-bottom: 5.5rem;
}

.menu-chapter:last-child {
  margin-bottom: 0;
}

/* ---------- Chapter heading with drop cap ---------- */
.menu-category-heading {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: none;
  margin: 0 0 1.25rem;
  text-align: center;
  color: var(--text-primary);
  padding: 0;
  border: none;
}

/* Olive-branch divider placement inside each chapter — tightens the gap to
   the heading (already close) and gives a deliberate pause before the items. */
.menu-chapter .olive-branch-divider {
  margin-bottom: 2.5rem;
}

.menu-chapter-end {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
  color: var(--accent-text);
  opacity: 0.65;
}

.menu-chapter-end svg {
  height: 18px;
  width: auto;
  display: block;
}

.menu-grid > .menu-chapter:last-child .menu-chapter-end {
  display: none;
}

.menu-category-heading .drop-cap {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.35em;
  line-height: 0.85;
  color: inherit; /* match the rest of the heading — no gold */
  margin-right: 1px;
}

/* ---------- Two-column item flow ---------- */
.menu-chapter-items {
  columns: 1;
  column-gap: 4rem;
}

@media (min-width: 768px) {
  .menu-chapter-items {
    columns: 2;
    column-rule: 1px solid var(--bg-tertiary);
  }
}

.menu-item {
  break-inside: avoid;
  padding: 0.9rem 0 1.1rem;
  /* No hover shift or bg change — the column rule + leader are doing the visual work. */
}

/* ---------- Dish name (prices deliberately hidden — menu is prose, not price list) ---------- */
.menu-item-name {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0 0 0.35rem;
}

/* ---------- Description + dietary marks ---------- */
.menu-item-desc {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

.menu-item-pills {
  display: inline-flex;
  gap: 0.65rem;
  margin-top: 0.45rem;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  line-height: 1;
}

.menu-pill {
  color: var(--accent-text);
  text-transform: uppercase;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}

/* ---------- Empty state ---------- */
.menu-no-results {
  text-align: center;
  padding: 4rem 0;
  color: var(--text-secondary);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.1rem;
  display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .menu-section {
    padding: 3rem 0 5rem;
  }
  .menu-tabs {
    gap: 1.25rem;
    margin-bottom: 3rem;
    font-size: 0.95rem;
  }
  .menu-category-heading {
    margin: 0 0 2rem;
  }
  .menu-chapter {
    margin-bottom: 3.5rem;
  }
}