:root {
  --red: #a3232c;
  --red-dark: #7a1a21;
  --gold: #d4a24c;
  --gold-dark: #8a6215;
  --dark: #000000; /* matches the logo's baked-in black exactly (public/images/logo.jpg
                       has no transparency, its background is real 0,0,0 pixels) so it
                       sits on the header/footer with no visible seam */
  --dark-soft: #1b1b1b;
  --cream: #fbf6ee;
  --ink: #2a2019;
  --radius: 10px;
}

* { box-sizing: border-box; }

/* Smooth cross-fade between page loads (Home -> Menu -> Deals -> ...)
   instead of the default instant hard-navigation jump. This is a plain
   multi-page site (each link is a real page load, not a JS router), so
   this relies on the browser's native cross-document View Transitions
   support -- no JavaScript needed. Browsers that don't support it yet
   just navigate instantly as before; nothing breaks either way. */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}
/* Replace the browser's default plain cross-fade with a slight slide, same
   language as the mobile nav's fade/slide (see .nav-links.open). New page
   rises in from just below as it fades in; old page eases up and out. Only
   defined here -- the reduced-motion block above disables @view-transition
   entirely, so these never run for that preference. */
@keyframes fx-page-out {
  to { opacity: 0; transform: translateY(-14px); }
}
@keyframes fx-page-in {
  from { opacity: 0; transform: translateY(14px); }
}
::view-transition-old(root) {
  animation: fx-page-out 0.28s ease both;
}
::view-transition-new(root) {
  animation: fx-page-in 0.28s ease both;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
}

h1, h2, h3, .brand {
  font-family: "Georgia", "Times New Roman", serif;
  letter-spacing: 0.3px;
}

a { color: inherit; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- accessibility --- */
/* Visible keyboard-focus ring on every interactive element. Browsers ship a
   default one, but it's inconsistent and easy to lose against our custom
   pill buttons and no-underline nav links -- this makes it deliberate and
   consistent everywhere instead. :focus-visible (not :focus) so it only
   shows for keyboard/switch users, not on every mouse click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--gold-dark);
  outline-offset: 2px;
}
/* Screen-reader-only text: present in the accessibility tree, invisible on
   screen. Used for column headers/labels that would be visual clutter if
   shown but are needed for anyone navigating by table/heading structure. */
.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;
}
/* "Skip to main content" link -- first focusable thing on every page, off
   -screen until a keyboard user tabs to it, so nav/header links don't have
   to be tabbed through on every single page load to reach the content. */
.skip-link {
  position: absolute;
  top: -60px;
  left: 8px;
  z-index: 100;
  background: var(--dark);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 8px;
}

/* --- header/nav --- */
.site-header {
  background: var(--dark);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}
.brand { display: block; line-height: 0; }
/* height-constrained, not width-constrained: the default is a wide wordmark,
   but an admin-uploaded replacement could be any shape, so cap width too and
   scale to fit within it rather than stretching. */
.brand img { height: 52px; width: auto; max-width: 220px; object-fit: contain; }
/* Text stand-in while there's no header-sized logo image (see header.ejs) --
   overrides .brand's img-only line-height:0 so the text actually renders. */
.brand-text { line-height: 1.3; color: var(--gold); font-size: 1.4rem; font-weight: 700; text-decoration: none; }
.nav-links { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; color: var(--gold); font-weight: 600; font-size: 0.95rem; }
.nav-links a:hover { color: #f3d68a; }
.nav-toggle { display: none; background: none; border: none; color: #fff; padding: 4px; cursor: pointer; }
/* Hamburger -> X morph: each bar rotates/slides into place around the
   icon's own centre (24x24 viewBox, bars 6 units apart) so the three
   lines read as a close icon once .nav-links is open. Purely CSS/attribute
   -driven off the aria-expanded state site.js already sets -- no extra JS. */
.nav-toggle-line { transform-box: fill-box; transform-origin: center; transition: transform 0.25s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-line-top { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-line-mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-line-bot { transform: translateY(-6px) rotate(-45deg); }

/* --- hero --- */
.hero {
  /* --hero-img is set inline per-page (see home.ejs) as a custom property,
     not as background-image directly -- an inline background-image would
     win the cascade over this whole rule and silently drop the dark
     overlay gradient underneath it. Falls back to plain var(--dark) when
     no hero photo is set. */
  background-image: linear-gradient(rgba(10, 8, 6, 0.65), rgba(10, 8, 6, 0.65)), var(--hero-img, none);
  background-color: var(--dark);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 90px 20px;
  text-align: center;
}
/* Hero badge: optional mark shown above the h1 (see settings.heroImage note
   above -- this is a separate, page-specific image, not that one). alt=""
   on the <img> because it's decorative next to the h1 text right below it;
   a screen reader announcing both would say the restaurant name twice. */
.hero-badge { display: block; width: 209px; max-width: 55vw; height: auto; margin: 0 auto 18px; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45)); }
.hero h1 { font-size: 2.8rem; margin: 0 0 10px; }
.hero p { font-size: 1.2rem; color: #f1e2c8; margin: 0 0 26px; }
.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
.btn:hover { background: #e6b662; }
.btn-outline {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  margin-left: 12px;
}
.btn-outline:hover { background: rgba(255,255,255,0.15); }

/* --- promo banner --- */
.promo-banner {
  background: var(--dark-soft);
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  font-weight: 600;
}
.promo-banner-item { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.promo-banner-item:hover { opacity: 0.8; }
.promo-banner .tag { background: var(--gold); color: var(--ink); padding: 2px 10px; border-radius: 20px; font-size: 0.85rem; }

/* --- sections --- */
section { padding: 60px 0; }
/* Pulls "A Familiar Face" closer to "Welcome" above it on the home page --
   both are plain cream about-box sections continuing the same intro, so
   the full 60px+60px default gap between sections read as a big empty
   break rather than two paragraphs of one story. Only used there. */
.section-tight-top { padding-top: 16px; }
.section-title { text-align: center; margin-bottom: 8px; font-size: 2rem; color: var(--gold-dark); }
.section-title::before { content: "\2726"; display: block; color: var(--gold); font-size: 1rem; letter-spacing: 6px; margin-bottom: 10px; }
.section-sub { text-align: center; color: #6b5c4d; margin-bottom: 40px; }

/* --- about --- */
.about-box { max-width: 720px; margin: 0 auto; text-align: center; font-size: 1.1rem; }

/* --- menu --- */
.category-block { margin-bottom: 44px; }

/* Category heading: name with a trailing gold rule (echoes .section-title's
   ::before diamond above the page title, so the two heading styles read as
   one family). */
.menu-cat-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-dark);
  margin: 0 0 4px;
}
.menu-cat-heading::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--gold), transparent 85%);
  margin-left: 4px;
}

/* Text-forward dish list (Mantanah-style dotted price leaders) instead of
   a photo-per-dish card grid -- most dishes don't have a real photo (see
   the placeholder-images memory note), so a card grid just meant a stock
   photo on almost everything. A dish keeps its photo here if one is set,
   shown as a small thumbnail rather than forcing a placeholder on the rest. */
.menu-list { margin-top: 14px; }
.menu-row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #ece4d4; }
.menu-row:last-child { border-bottom: none; }
.menu-row-photo { width: 64px; height: 64px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; }
.menu-row-body { flex: 1; min-width: 0; }
.menu-row-name { margin: 0; font-size: 1.05rem; }
.menu-row-name .badge { margin-left: 6px; vertical-align: middle; }
.spice-level { margin-left: 6px; font-size: 0.85rem; vertical-align: middle; }
.menu-row-desc { margin: 4px 0 0; font-size: 0.9rem; color: #6b5c4d; }
.menu-row.sold-out { opacity: 0.55; }
.menu-row.sold-out .menu-row-photo { filter: grayscale(1); }

/* Per-variant price lines (Chicken/Prawn/Beef/Veg …), each its own dotted
   leader from label to price -- the classic printed-menu look. A dish with
   just one price still gets this same treatment (.price-line-plain: no
   label, no bullet) so every item matches regardless of how many price
   options it has. */
.menu-row-variants { margin-top: 6px; }
.price-line { display: flex; align-items: baseline; gap: 6px; font-size: 0.92rem; }
.price-line::before { content: "\25C6"; color: var(--gold); font-size: 0.6rem; }
.price-line-plain::before { content: none; }
.price-label { color: var(--ink); }
.price-dots { flex: 1; border-bottom: 1px dotted #b8a98c; margin-bottom: 3px; }
.price-amt { color: var(--gold-dark); font-weight: 700; white-space: nowrap; }

.category-note { margin-top: 18px; padding: 14px 18px; background: #fbf1d9; border-left: 4px solid var(--gold); border-radius: var(--radius); color: #5c4a1f; font-size: 0.92rem; }
/* Sits after a full menu-list of dishes (the true vegetarian ones) rather
   than right under the heading like a normal .category-note -- more
   breathing room above it so the "also available with a swap" group reads
   as clearly separate from the list it follows. */
.veg-option-note { margin-top: 28px; }

/* Allergen notice: centred callout with a rule above/below the heading,
   matching the printed "ALLERGEN GUIDE" strip on Mantanah's menu. */
.allergen-guide { margin-bottom: 32px; padding: 16px 20px; background: #fbf1d9; border-radius: var(--radius); color: #5c4a1f; text-align: center; }
.allergen-guide-title { margin: 0 0 6px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; font-size: 0.85rem; }
.allergen-guide p:last-child { margin: 0; font-size: 0.92rem; }

/* --- deals --- */
.deal-card { background: #fff; border-left: 6px solid var(--gold); border-radius: var(--radius); margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); overflow: hidden; }
.deal-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.deal-card-body { padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.deal-card .discount { background: var(--gold); color: var(--dark); padding: 10px 18px; border-radius: 8px; font-weight: 700; white-space: nowrap; }
.empty-state { text-align: center; color: #6b5c4d; padding: 40px 0; }

/* --- contact --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.contact-card { background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.contact-card h4 { margin-top: 0; color: var(--gold-dark); }

/* --- footer --- */
.site-footer { background: var(--dark); color: #e6dccb; padding: 30px 0; text-align: center; font-size: 0.9rem; }
.site-footer a { color: var(--gold); text-decoration: none; }
.link-quiet { text-decoration: underline; text-underline-offset: 2px; }
.social-row { display: flex; justify-content: center; gap: 14px; }
.social-icon { color: var(--gold); display: inline-flex; opacity: 0.85; }
.social-icon:hover { opacity: 1; }
.social-row-large { justify-content: flex-start; }
.social-icon-large { color: var(--gold-dark); }
.social-icon-large svg { width: 26px; height: 26px; }

/* Order-online buttons -- brand colours read at well over AA contrast
   against the footer's near-black background, so each platform stays
   visually distinct without relying on the (fairly generic) icon shape
   alone; the visible "Order on <platform>" text is the real identifier. */
.delivery-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 12px; }
.delivery-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; opacity: 0.92; }
.delivery-link:hover { opacity: 1; }
.delivery-link-justeat { color: #ff8c00; }
.delivery-link-deliveroo { color: #00ccbc; }

/* --- admin --- */
.admin-body { background: #f2f0ec; }
.admin-header { background: var(--ink); color: #fff; padding: 14px 0; }
.admin-header .container { display: flex; justify-content: space-between; align-items: center; }
.admin-header a { color: #fff; text-decoration: none; margin-left: 16px; font-size: 0.9rem; }
.admin-wrap { max-width: 900px; margin: 30px auto; padding: 0 20px; }
.admin-card { background: #fff; border-radius: var(--radius); padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { text-align: left; padding: 10px; border-bottom: 1px solid #e5e0d8; vertical-align: middle; }
.admin-table img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
/* The Vegetarian/Vegan summary rows on Manage Sections -- visually set apart
   from real, editable categories (a top rule + faint tint) since they're
   auto-built from item flags rather than something you add/reorder/delete. */
.summary-section-row { background: #faf7f2; }
.summary-section-row td { border-top: 2px solid #e5e0d8; }
.summary-section-row .badge { margin-left: 8px; vertical-align: middle; }
.badge { padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.badge.on { background: #dcf3e3; color: #1f7a3f; }
.badge.off { background: #f3dcdc; color: #a3232c; }
.badge.warn { background: #fbf1d9; color: #5c4a1f; }
.badge.veg { background: #dcf3e3; color: #1f7a3f; }
.badge.veg-option { background: #dde8f5; color: #1a4971; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; border-radius: 6px; }
.btn-secondary { background: #e5e0d8; color: var(--ink); }
.btn-danger { background: var(--red); color: #fff; }
.stat-row { display: flex; gap: 20px; }
.menu-filter-bar { margin-bottom: 18px; }
.filter-toggle { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); border: 2px solid #e5e0d8; border-radius: 20px; padding: 7px 16px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.filter-toggle:hover { border-color: var(--gold); }
.filter-toggle-status { color: var(--gold-dark); }
/* In-flow, not a floating overlay -- it used to be position:absolute, which
   sat directly on top of the item rows/Edit-Delete buttons underneath
   while open. Static instead, so opening it pushes the list down rather
   than covering it. */
.filter-panel { display: none; margin-top: 8px; max-width: 100%; background: #fff; border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,0.18); padding: 16px; }
.filter-panel.open { display: block; }
.filter-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filter-btn { background: #fff; color: var(--ink); border: 2px solid #e5e0d8; border-radius: 20px; padding: 7px 16px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.filter-btn:hover { border-color: var(--gold); }
.filter-btn.is-active { background: var(--gold); border-color: var(--gold-dark); }
.filter-search input { width: 100%; box-sizing: border-box; border: 2px solid #e5e0d8; border-radius: 20px; padding: 7px 16px; font-size: 0.9rem; font-family: inherit; color: var(--ink); }
.filter-search input:hover { border-color: var(--gold); }
.stat { flex: 1; background: #fff; border-radius: var(--radius); padding: 20px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.stat .num { font-size: 2rem; font-weight: 700; color: var(--red); }
.admin-nav { display: flex; gap: 14px; margin-bottom: 24px; }
.admin-nav a { background: #fff; padding: 10px 18px; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

form.styled label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: 0.9rem; }
form.styled input[type="text"],
form.styled input[type="number"],
form.styled input[type="password"],
form.styled input[type="date"],
form.styled textarea,
form.styled select {
  width: 100%; padding: 10px; border: 1px solid #d8d2c6; border-radius: 6px; font-size: 1rem; font-family: inherit;
}
form.styled textarea { min-height: 80px; resize: vertical; }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.checkbox-row input { width: auto; }
.checkbox-row label { margin: 0; }
.form-actions { margin-top: 22px; display: flex; gap: 10px; }
.login-box { max-width: 360px; margin: 100px auto; }
.error-msg { background: #f3dcdc; color: var(--red-dark); padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; }

/* --- utilities --- */
.text-center { text-align: center; }
.text-muted { color: #7d6f5c; }
.field-hint { margin: 4px 0 0; font-size: 0.82rem; color: #7d6f5c; }
.row-desc { color: #7d6f5c; font-size: 0.85rem; }
.disclaimer { opacity: 0.6; font-size: 0.8rem; }
.inline-form { display: inline; }
.page-header { display: flex; justify-content: space-between; align-items: center; }
.thumb-preview { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; margin-top: 10px; }
.thumb-preview-lg { width: 160px; height: 90px; object-fit: cover; border-radius: 8px; margin-top: 10px; }
/* Logo preview: shown on the site's own dark header background so a
   transparent PNG previews the way it'll actually look, and "contain"
   (not "cover") so the whole mark is visible instead of cropped. */
.thumb-preview-logo { height: 60px; width: auto; max-width: 260px; object-fit: contain; background: var(--dark); border-radius: 8px; padding: 10px 14px; margin-top: 10px; }
.btn-block { width: 100%; }
.btn-link { background: none; border: none; color: #fff; cursor: pointer; font-size: 0.9rem; padding: 0; margin-left: 16px; }
.heading-alert { color: var(--red); }
.section-white { background: #fff; }
.admin-nav-top { margin-top: 26px; }
.notfound-box { text-align: center; padding: 100px 20px; }

/* --- deal card text (see .deal-card in menu section above) --- */
.deal-info h3 { margin: 0 0 6px; }
.deal-info p { margin: 0; color: #6b5c4d; }
.deal-info .deal-note { margin: 6px 0 0; font-size: 0.85rem; color: #7d6f5c; }

@media (max-width: 700px) {
  .nav-toggle { display: inline-flex; }
  .brand img { max-width: 160px; }
  .brand-text { font-size: 1.15rem; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--dark);
    padding: 10px 20px;
    /* Closed state: kept in the DOM (not display:none) so opacity/transform
       can transition, but visibility:hidden drops it from the tab order and
       screen-reader flow until it's actually open -- same "hidden until
       needed" intent as .skip-link above, just via visibility instead of
       off-screen positioning since this panel needs to fade rather than
       slide from off-canvas. The visibility transition is delayed on the
       way in (0s) and only delayed on the way out, so it disappears from
       the a11y tree right as the fade finishes, not before. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
  }
  .nav-links li { border-top: 1px solid rgba(255,255,255,0.15); }
  .nav-links li:first-child { border-top: none; }
  .nav-links a { display: block; padding: 12px 0; }
  /* Staggered reveal: each link fades/slides in slightly after the last,
     matching the Siam Wellness-style menu-open effect. Transition only
     runs on the way in (.open) -- closing just fades the whole panel via
     the rule above, so links don't visibly stagger-exit and get cut off
     mid-transition by the panel's own fade. */
  .nav-links li { opacity: 0; transform: translateY(-6px); }
  .nav-links.open li {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .nav-links.open li:nth-child(1) { transition-delay: 0.05s; }
  .nav-links.open li:nth-child(2) { transition-delay: 0.1s; }
  .nav-links.open li:nth-child(3) { transition-delay: 0.15s; }
  .nav-links.open li:nth-child(4) { transition-delay: 0.2s; }
  .site-header .container { position: relative; }
  .hero h1 { font-size: 2rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .deal-card-body { flex-direction: column; align-items: flex-start; }
}

/* Respect reduced-motion the same way @view-transition does above: no
   slides, fades, morphs, or stagger delays -- the menu just appears/
   disappears instantly. */
@media (prefers-reduced-motion: reduce) {
  .nav-toggle-line,
  .nav-links,
  .nav-links li {
    transition: none !important;
    transform: none !important;
  }
}

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
.cookie-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
}
.cookie-banner-inner p { margin: 0; font-size: 0.9rem; max-width: 60ch; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner .btn-secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); }
@media (max-width: 640px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-banner-actions { justify-content: center; }
}

/* --- Admin: printable menu (views/admin/menu-print.ejs) --- */
/* On screen this looks like a sheet of paper on the admin's cream ground;
   .no-print (the back-link/print-button bar) disappears entirely once
   actually printed or saved as PDF, leaving just the letterhead + menu. */
.print-menu-body { background: #e8e2d6; }
.print-toolbar { position: sticky; top: 0; z-index: 10; background: var(--dark); padding: 12px 0; }
.print-toolbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.print-menu {
  max-width: 900px;
  margin: 24px auto 60px;
  background: #fff;
  padding: 48px 56px;
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}
.print-menu-header { text-align: center; margin-bottom: 32px; }
.print-menu-mark { color: var(--gold-dark); font-size: 1.4rem; margin: 0 0 6px; }
.print-menu-header h1 { margin: 0; font-size: 2.2rem; }
.print-menu-tagline { margin: 4px 0 0; font-style: italic; color: #7d6f5c; }
.print-menu-meta { margin: 4px 0 0; font-size: 0.9rem; color: #7d6f5c; }
.print-menu-columns { column-count: 2; column-gap: 44px; }
/* `avoid-column` alone only stops a split across the two on-screen columns --
   it does nothing for the *page* breaks that happen when this is printed to
   multi-page A4, so a category or dish could still get cut in half across a
   page boundary. `avoid` covers both fragmentation contexts. A category block
   taller than a single page still has to break somewhere (nothing can avoid
   that), so the heading also gets its own break-after rule to stop it sitting
   orphaned alone at the bottom of a page, separated from its first item. */
.print-menu-columns .category-block { break-inside: avoid; margin-bottom: 22px; }
.print-menu-columns .menu-row { break-inside: avoid; }
.print-menu-columns .menu-cat-heading { break-after: avoid; }
.print-allergen {
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px solid #d8d2c6;
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: #7d6f5c;
}
.print-footer { margin-top: 24px; text-align: center; font-size: 0.8rem; color: #7d6f5c; }
@media (max-width: 700px) {
  .print-menu { padding: 32px 20px; }
  .print-menu-columns { column-count: 1; }
}
@media print {
  @page { size: A4; margin: 14mm; }
  .no-print { display: none !important; }
  .print-menu-body { background: #fff; }
  .print-menu { max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; }
  /* Keeps the gold accents and badge colours in the PDF/printout instead of
     silently flattening to black-and-white, which is what browsers do by
     default unless the print dialog's own "Background graphics" option is
     also ticked -- this covers most Chromium/Firefox cases either way. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}