/* menu-base.css — guest-facing menu: structure, layout, vertical rhythm.
 *
 * Black (#000) on white (#fff) only. No color, no images, no icons, no JS.
 * The whole hierarchy is carried by size, weight, case, italic, letter-spacing
 * and thin black rules (Public Menu Design Rule + design/DESIGN-GUEST-MENU.md).
 *
 * Web px type scale (the per-theme sizes/weights/tracking live in the theme files):
 *   masthead 34–36 · section head 13–15 · item name / price 14.5–18
 *   description 13–15 · allergens 12–12.5 · attribution 11
 *
 * Vertical rhythm — base unit u = 8px:
 *   name → description 1u · description → allergens 0.75u · item → next item 2u
 *   last item → next section head 4u (Compact) · masthead → first section 4u
 */

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Document base ──────────────────────────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  color: #000;
  background: #fff;
  min-height: 100vh;
  /* Mobile-first: comfortable 24px side margins (design doc §4). Theme css sets font. */
  padding: 40px 24px 56px;
  text-rendering: optimizeLegibility;
}

/* ── Single readable column (desktop centers at ~640px measure) ──────────────── */
article,
.menu-lang-switcher,
.menu-attribution {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Premium custom logo (T-485a/b) ───────────────────────────────────────────── */
/* Restrained, size-capped mark above the masthead name — the one deliberate
 * exception to the typography-only rule (design/DESIGN-GUEST-MENU.md). No border,
 * no shadow, no background: it must not read as a colored panel on the page. */
.menu-logo {
  display: block;
  max-height: 56px;
  max-width: 100%;
  width: auto;
  margin: 0 auto 20px;
}

/* ── Masthead (restaurant name) — the only centered element ──────────────────── */
/* A single full-width hairline rule sits under it; the rule IS the ornament.     */
h1 {
  text-align: center;
  line-height: 1.1;
  /* hairline rule below the masthead (0.75px) */
  padding-bottom: 16px;
  border-bottom: 0.75px solid #000;
  /* masthead → first section head = 4u */
  margin-bottom: 32px;
}

/* ── Section ────────────────────────────────────────────────────────────────── */
.menu-section {
  /* last item of a section → next section head = 4u (Compact default) */
  margin-bottom: 32px;
  /* print: keep a section together when possible */
  break-inside: avoid;
}

/* Section head — voice (case/tracking/weight) is set per theme. */
h2 {
  line-height: 1.2;
  /* section head → first item = 2u */
  margin-bottom: 16px;
}

/* ── Menu item ──────────────────────────────────────────────────────────────── */
.menu-item {
  /* item block → next item = 2u */
  margin-bottom: 16px;
  break-inside: avoid;
}

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

/* Featured dish (Premium-only, T-486): a vertical hairline rule on the left of the whole
 * item block + a small indent — same hairline weight as every other rule on the page
 * (0.75px). The price column is untouched: .menu-item-header's flex right edge doesn't
 * move when only the LEFT inset changes, so the price stays flush with its column. */
.menu-item--featured {
  border-left: 0.75px solid #000;
  padding-left: 8px;
}

/* Name (flex grow) + price (flex none, right-aligned tabular column). Real column
 * gutter between them — never filled with leader dots. Baseline-aligned. */
.menu-item-header {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

h3 {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
  /* let long Polish words break rather than overflow the row at 320px */
  overflow-wrap: anywhere;
}

/* Price block: never shrinks; its contents are right-aligned so PLN and the
 * secondary currency line share one clean right edge. flex:none means a long name
 * pushes the price onto its own right-aligned line instead of overflowing. */
.menu-item-price {
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.menu-item-price-pln {
  display: block;
  white-space: nowrap;
}

/* Secondary currencies ("5.00 € · 6.00 $") — one step smaller, right-aligned,
 * sits directly under the PLN amount. */
.menu-item-price-alt {
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  font-size: 0.72em;   /* relative to the price size set per theme */
  font-weight: 400;
}

/* ── Description — full-width under the name (not indented) ───────────────────── */
.menu-item-description {
  /* name baseline → description ≈ 1u */
  margin-top: 6px;
}

/* ── Allergens — own quiet line, prefixed, smallest text on the page ─────────── */
.menu-item-allergens {
  /* description → allergens ≈ 0.75u */
  margin-top: 5px;
  line-height: 1.4;
}

/* ── Unavailable item (web only) — shown, not hidden ─────────────────────────── */
/* Name in REGULAR weight (others are at their theme weight) + a quiet italic note.
 * No price, no strikethrough, no gray — "exists, not today" within one ink. */
.menu-item-name-unavailable {
  font-weight: 400;
}

.menu-item-unavailable-note {
  font-style: italic;
}

/* ── Allergen legend mode (T-157) ───────────────────────────────────────────── */
/* Superscript reference markers after a dish name. One ink, quiet and subordinate:
 * smaller size + raised, never a chip/color/icon. */
.allergen-marker {
  font-size: 0.62em;
  vertical-align: super;
  line-height: 0;
  font-weight: 400;
  font-style: normal;
  /* a hair of space from the name */
  margin-left: 0.15em;
}

/* End-of-card legend — quiet block of "N — label" rows. Subordinate type, one ink,
 * sits between the last section and the attribution footer. */
.menu-allergen-legend {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
}

.menu-allergen-legend > h2 {
  /* smallest-but-present head; allergens are the quietest content on the page */
  font-size: 0.8125rem;   /* 13px */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.menu-allergen-legend ul {
  list-style: none;
}

.menu-allergen-legend li {
  font-size: 0.75rem;     /* 12px — matches the allergen role on the scale */
  line-height: 1.5;
}

.menu-allergen-legend .allergen-legend-number {
  font-variant-numeric: tabular-nums;
}

/* ── Section layout: Divided ────────────────────────────────────────────────── */
/* A hairline <hr> + extra spacing separates sections; head sits under the rule.  */
.section-layout-divided .menu-section,
.section-layout-page .menu-section {
  /* the rule + its own margins carry the gap, so trim the section's own bottom */
  margin-bottom: 0;
}

.section-rule {
  border: none;
  border-top: 0.75px solid #000;
  /* 5u rhythm around the Divided rule */
  margin: 40px 0;
}

/* ── Section layout: PagePerSection ─────────────────────────────────────────── */
/* Strong top break; each head reads as a mini-masthead (centered, spaced). */
.section-layout-page .section-rule {
  margin-top: 56px;     /* big break before each new section */
  margin-bottom: 0;
  border: none;         /* the break is whitespace + the centered head below */
}

.section-layout-page .menu-section > h2 {
  text-align: center;
  margin-bottom: 28px;
}

/* short centered hairline beneath the mini-masthead head */
.section-layout-page .menu-section > h2::after {
  content: "";
  display: block;
  width: 120px;
  margin: 14px auto 0;
  border-top: 0.5px solid #000;
}

/* ── Language switcher ──────────────────────────────────────────────────────── */
/* Plain-text anchors, no JS, no color. Current language is plain text; the other  */
/* language is an underlined link. Top, tracked small caps.                        */
.menu-lang-switcher {
  margin-bottom: 24px;
  text-align: right;
  font-size: 0.6875rem;   /* 11px */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-lang-switcher a,
.menu-lang-switcher span {
  color: #000;
  text-decoration: none;
}

.menu-lang-switcher a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Current language: plain, slightly muted via the one allowed relaxation (still one ink) */
.menu-lang-switcher span[aria-current] {
  opacity: 0.5;
}

.menu-lang-switcher a + span,
.menu-lang-switcher span + a {
  margin-left: 0.5em;
}

/* ── Attribution footer ─────────────────────────────────────────────────────── */
.menu-attribution {
  margin-top: 48px;
  text-align: center;
}

.menu-attribution small {
  font-size: 0.6875rem;   /* 11px */
  letter-spacing: 0.04em;
}

.menu-attribution a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Print (browser Cmd-P) ──────────────────────────────────────────────────── */
@media print {
  @page {
    margin: 1.5cm 2cm;
  }

  body {
    padding: 0;
    color: #000 !important;
    background: #fff !important;
  }

  article {
    max-width: none;
  }

  /* Hide the on-screen chrome: language switcher + attribution footer. */
  .menu-lang-switcher,
  .menu-attribution {
    display: none !important;
  }

  /* Keep dishes and section heads from stranding across page breaks. */
  .menu-section,
  .menu-item {
    break-inside: avoid;
  }

  h2 {
    break-after: avoid;   /* head never sits alone at the foot of a page */
  }

  /* Widows/orphans on descriptions: a single trailing word never lands alone. */
  .menu-item-description {
    orphans: 2;
    widows: 2;
  }
}

/* ── Desktop ────────────────────────────────────────────────────────────────── */
/* Same single column, simply centered at the ~640px measure; margins grow.        */
@media (min-width: 768px) {
  body {
    padding-top: 64px;
    padding-bottom: 80px;
  }
}