/* ==========================================================================
   Kataria's Veggie Hut — Design System
   Palette sampled directly from the shop's own logo and wall mural.
   ==========================================================================

   Contents
     1. Tokens
     2. Reset and base
     3. Layout primitives   .container .split .cardgrid .stripe .divider
     4. Type                .display .gur .eyebrow .prose
     5. Buttons, pills, chips, tags
     6. Placeholders        .ph — every unconfirmed piece of content
     7. Open / closed state
     8. Header and nav
     9. Sections, top to bottom
    10. Footer and sticky order bar
    11. Motion and print
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------
   Three brand colours come straight off the logo — the green script, the
   maroon script, the black stencil — on the cream the shop's menu is printed
   on. Marigold is the one addition: the logo has no fourth colour, and the
   deals and dividers needed something that reads as a Punjabi market stall
   rather than as a fourth brand colour competing with the other three.

   This design is deliberately light-only. The cream ground is doing brand
   work, and a dark-mode inversion would fight the photography.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Brand — sampled from logo.png */
  --green:        #2F6B36;   /* "veggie" script */
  --green-bright: #4F9A4F;   /* lifted green, for text on cream */
  --green-tint:   #E4EFDE;
  --red:          #C0392F;   /* "hut" script — primary action */
  --red-deep:     #8E2B22;   /* hover, and red text on light */
  --rose:         #F6E3E0;
  --rose-deep:    #E0A9A2;
  --ink:          #16150F;   /* "Kataria" stencil */
  --ink-deep:     #0F0E0A;

  /* Marigold / turmeric — the Punjabi-market accent */
  --gold:      #E8A21C;
  --gold-soft: #F2D08A;
  --gold-tint: #FBEBC8;
  --gold-deep: #8A5B08;      /* gold that survives on a light background */
  --on-gold:   #231703;      /* text on a solid marigold button */

  /* Grounds */
  --cream:      #FBF7EE;     /* page */
  --cream-warm: #F6F1E4;     /* text on always-dark surfaces */
  --sand:       #EFE7D6;     /* empty image wells */
  --sand-light: #F7F1E4;
  --white:      #FFFFFF;

  /* RGB triplets, for compositing with alpha */
  --ink-rgb:     22 21 15;
  --on-dark-rgb: 246 241 228;
  --red-rgb:     192 57 47;
  --gold-rgb:    232 162 28;

  /* Roles */
  --open-dot:    #6FC46F;
  --closed-dot:  var(--rose-deep);
  --unknown-dot: rgb(var(--ink-rgb) / .3);

  /* Type */
  /* Font fallback is per-glyph, so Latin headings get Caveat Brush and
     Gurmukhi ones fall through to Baloo Paaji 2 — the display face already
     loaded for this script — rather than to an arbitrary system font. */
  --font-display: "Caveat Brush", "Baloo Paaji 2", "Noto Sans Gurmukhi", "Bradley Hand", cursive;
  --font-body:    "Work Sans", Helvetica, Arial, sans-serif;
  --font-gur:     "Baloo Paaji 2", "Noto Sans Gurmukhi", cursive;   /* display Gurmukhi */
  --font-gur-ui:  "Mukta", "Noto Sans Gurmukhi", sans-serif;        /* UI Gurmukhi */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;   /* placeholders only */

  /* Layout */
  --wrap:   1120px;
  --gutter: 18px;

  /* Shape */
  --r-pill: 999px;
  --r-card: 16px;
  --r-lg:   20px;

  /* The sticky order bar covers the bottom of the viewport at all times. */
  --orderbar-h: 68px;
}


/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Any author `display` rule outranks the UA stylesheet's [hidden] rule, so a
   flex or grid component stays on screen while its hidden attribute says
   otherwise. This puts the attribute back in charge. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--red); }

::selection { background: var(--gold-soft); }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 0 0 10px 10px;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; color: var(--cream); }

/* Punjabi is set in Mukta / Baloo Paaji 2 wherever it appears — including
   inside an otherwise-English sentence, like the hero's greeting. */
[lang="pa"] { font-family: var(--font-gur-ui); }


/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Two columns that collapse to one the moment either would go under 300px —
   no breakpoint needed, and it holds at any zoom level. */
.split {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.split--center { gap: 34px; align-items: center; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.cardgrid { display: grid; gap: 14px; }
.cardgrid--dish  { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cardgrid--deal,
.cardgrid--why   { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cardgrid--order { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Truck-art stripes. The recurring motif of the whole site: a painted band
   between sections, in the three logo colours plus the marigold. */
.stripe--header { height: 6px;  background: repeating-linear-gradient(90deg, var(--red) 0 10px, var(--gold) 10px 20px, var(--green) 20px 30px, var(--rose) 30px 32px); }
.stripe--menu   { height: 16px; background: repeating-linear-gradient(90deg, var(--green) 0 12px, var(--gold) 12px 24px, var(--red) 24px 36px); }
.stripe--order  { height: 12px; background: repeating-linear-gradient(90deg, var(--gold) 0 8px, var(--red) 8px 16px, var(--green) 16px 24px); }
.stripe--footer { height: 10px; background: repeating-linear-gradient(90deg, var(--red) 0 8px, var(--gold) 8px 16px, var(--green) 16px 24px); }

/* The diagonal cross-hatch version, used once under the hero. */
.divider {
  height: 14px;
  margin-top: 34px;
  border-radius: 2px;
  opacity: .55;
  background:
    repeating-linear-gradient(135deg, var(--gold) 0 7px, transparent 7px 14px),
    repeating-linear-gradient(45deg,  var(--red)  0 7px, transparent 7px 14px);
}


/* --------------------------------------------------------------------------
   4. Type
   -------------------------------------------------------------------------- */

/* Caveat Brush echoes the hand-brush script in the logo. It carries every
   heading; nothing else on the page uses it. */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1;
  margin: 0 0 6px;
}
.display--lg { font-size: clamp(36px, 7vw, 58px); }

.hero__title {
  font-size: clamp(44px, 9.4vw, 84px);
  line-height: .96;
  letter-spacing: -.01em;
  margin: 0 0 18px;
}

/* The Gurmukhi sub-heading that sits under most English headings. */
.gur {
  font-family: var(--font-gur);
  font-size: 20px;
  line-height: 1.3;
  color: var(--gold-deep);
  margin: 0 0 16px;
}
.gur--onDark { font-size: 21px; color: var(--gold-soft); margin-bottom: 14px; }
.gur--lg     { font-size: 21px; margin-bottom: 12px; }

.eyebrow {
  font: 600 11px/1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.eyebrow--green { color: var(--green); }   /* not --green-bright: too light at 11px */
.eyebrow--gold  { color: var(--gold); }

.prose {
  font-size: 16.5px;
  line-height: 1.65;
  color: rgb(var(--ink-rgb) / .78);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.prose:last-of-type { margin-bottom: 18px; }

/* The lifted green only clears contrast at display sizes, so it is scoped to
   the hero rather than left as the default for every small label. */
.t-green  { color: var(--green); }
.hero__title .t-green { color: var(--green-bright); }
.t-red    { color: var(--red); }
.t-gold   { color: var(--gold-deep); }
.t-maroon { color: var(--red-deep); }


/* --------------------------------------------------------------------------
   5. Buttons, pills, chips, tags
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  /* Every button clears the 44px minimum touch target on its own. */
  min-height: 44px;
  padding: 12px 22px;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.btn--sm { font-size: 14px; padding: 11px 17px; }
.btn--lg { font-size: 16px; padding: 15px 26px; }

.btn--red   { background: var(--red); color: #fff; box-shadow: 0 6px 14px -6px rgb(var(--red-rgb) / .7); }
.btn--red:hover   { background: var(--red-deep); color: #fff; }

.btn--dark  { background: var(--ink); color: var(--cream); }
.btn--dark:hover  { background: var(--green); color: var(--cream); }

.btn--gold  { background: var(--gold); color: var(--on-gold); font-weight: 700; font-size: 15px; padding: 14px 24px; }
.btn--gold:hover  { background: var(--gold-soft); color: var(--on-gold); }

.btn--green { background: var(--green); color: #fff; font-weight: 650; font-size: 15px; padding: 14px 22px; }
.btn--green:hover { background: var(--ink); color: #fff; }

.btn--ghost { border: 1.5px solid rgb(var(--ink-rgb) / .25); color: var(--ink); padding: 14px 26px; }
.btn--ghost:hover { border-color: var(--red); color: var(--red); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font: 600 11px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: var(--r-pill);
}
.pill--green { color: var(--green);    background: var(--green-tint); }
.pill--rose  { color: var(--red-deep); background: var(--rose); }
.pill--gold  { color: var(--gold-deep); background: var(--gold-tint); }
/* Gurmukhi does not take letterspacing or a case transform gracefully. */
.pill--gur   { font: 700 12px/1 var(--font-gur-ui); letter-spacing: normal; text-transform: none; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 600 12px/1 var(--font-body);
  padding: 9px 13px;
  border-radius: var(--r-pill);
}
.chip--green { color: var(--green);     background: var(--green-tint); }
.chip--gold  { color: var(--gold-deep); background: var(--gold-tint); }
.chip--rose  { color: var(--red-deep);  background: var(--rose); }

.tag {
  align-self: flex-start;
  font: 600 10px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgb(var(--gold-rgb) / .45);
  border-radius: var(--r-pill);
  padding: 6px 10px;
}


/* --------------------------------------------------------------------------
   6. Placeholders
   --------------------------------------------------------------------------
   Everything the owner has not yet confirmed is marked .ph and drawn in a
   dashed, monospaced, deliberately unfinished style, so nobody mistakes a
   guess for a fact while the draft is being reviewed.

   Setting data-placeholders="quiet" on <html> tones them down for a
   screenshot; deleting the element is what actually ships.
   -------------------------------------------------------------------------- */
.ph { font-family: var(--font-mono); color: var(--red-deep); }

.ph--inline {
  display: inline;
  font-size: 13px;
  background: rgb(var(--red-rgb) / .07);
  border: 1px dashed rgb(var(--red-rgb) / .4);
  border-radius: 5px;
  padding: 2px 6px;
}

.ph--note {
  display: inline-block;
  font: 500 12px/1.5 var(--font-mono);
  background: rgb(var(--red-rgb) / .07);
  border: 1px dashed rgb(var(--red-rgb) / .4);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 16px 0 0;
}

.ph--badge {
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: .06em;
  background: rgb(var(--red-rgb) / .07);
  border: 1px dashed rgb(var(--red-rgb) / .4);
  border-radius: 5px;
  padding: 5px 8px;
}

.ph--bare  { font: 500 11.5px/1.5 var(--font-mono); margin: 0 0 18px; }
.ph--draft { font: 500 11px/1.5 var(--font-mono); color: rgb(224 169 162 / .85); margin: 0; }

/* Empty image wells — dish card, gallery tile, map. */
.ph--dish, .ph--tile, .ph--map {
  display: grid;
  place-items: center;
  text-align: center;
}
.ph--dish {
  height: 130px;
  border-radius: 11px;
  border: 1px dashed rgb(var(--on-dark-rgb) / .25);
  background: repeating-linear-gradient(135deg, rgb(var(--on-dark-rgb) / .05) 0 9px, rgb(var(--on-dark-rgb) / .02) 9px 18px);
}
.ph--tile {
  aspect-ratio: 1 / 1;
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed rgb(var(--ink-rgb) / .25);
  background: repeating-linear-gradient(135deg, var(--sand) 0 11px, var(--sand-light) 11px 22px);
}
.ph--map {
  min-height: 280px;
  padding: 20px;
  border-radius: var(--r-lg);
  border: 1px dashed rgb(var(--ink-rgb) / .28);
  background: repeating-linear-gradient(135deg, var(--sand) 0 11px, var(--sand-light) 11px 22px);
}

.ph__label {
  font: 500 10px/1.5 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / .62);
}
.ph--dish .ph__label { line-height: 1.4; color: rgb(var(--on-dark-rgb) / .62); }
.ph--map  .ph__label { font-size: 11px; line-height: 1.6; letter-spacing: .1em; color: rgb(var(--ink-rgb) / .62); }

[data-placeholders="quiet"] .ph { border-style: solid; opacity: .55; }


/* --------------------------------------------------------------------------
   7. Open / closed state
   --------------------------------------------------------------------------
   js/hours.js writes data-open="yes|no" onto <html> before first paint. If it
   never runs, the attribute is absent and the page falls back to stating the
   opening hours rather than claiming a live state it has not checked — a
   wrong "Open now" sends someone to a closed shop.
   -------------------------------------------------------------------------- */
.status-open, .status-closed, .status-unknown { display: none; }
[data-open="yes"] .status-open   { display: inline; }
[data-open="no"]  .status-closed { display: inline; }
html:not([data-open]) .status-unknown { display: inline; }

.statusdot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--unknown-dot);
}
[data-open="yes"] .statusdot { background: var(--open-dot); }
[data-open="no"]  .statusdot { background: var(--closed-dot); }

.statusbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 16px;
  background: var(--ink);
  color: var(--cream-warm);
  font: 500 12px/1.4 var(--font-body);
  letter-spacing: .03em;
  text-align: center;
}

.statusbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 650 12px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: var(--rose);
  color: var(--red-deep);
}
[data-open="yes"] .statusbadge { background: var(--ink); color: var(--cream-warm); }
.statusbadge .statusdot { width: 8px; height: 8px; }


/* --------------------------------------------------------------------------
   8. Header and nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(251 247 238 / .94);
  backdrop-filter: blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 10px;
}

.brand { display: flex; align-items: center; flex: none; min-height: 44px; }
.brand img { height: 38px; width: auto; display: block; }

/* Below 820px the four links give way to the phone button — the one action
   that matters on a phone. Every link they point at is still reachable from
   the page body and the footer. */
.nav { display: none; align-items: center; gap: 22px; font-size: 14px; font-weight: 500; }
@media (min-width: 820px) { .nav { display: flex; } }
/* The negative margin buys each link a 44px-tall hit area without adding a
   single pixel to the header's height. */
.nav a { padding-block: 12px; margin-block: -12px; }

.site-header__utils { display: flex; align-items: center; gap: 10px; flex: none; }

/* On a narrow phone the logo, the language pill and the call button cannot
   share a row.

   On index.html the fixed bar at the bottom of the screen carries the same
   call action at all times, so the header's duplicate is what gives way.
   On menu.html that bottom bar is the ORDER bar, not a call bar — so there
   the call button has to stay and the text back-link goes instead, since the
   logo beside it already links home. */
@media (max-width: 559px) {
  body:not(.menu-page) .site-header__utils > .btn { display: none; }
  .menu-page .backlink { display: none; }
}

.langswitch {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgb(var(--ink-rgb) / .07);
  border-radius: var(--r-pill);
}
.langswitch__btn {
  border: 0;
  cursor: pointer;
  border-radius: var(--r-pill);
  padding: 7px 12px;
  font: 600 12.5px/1 var(--font-body);
  background: transparent;
  color: rgb(var(--ink-rgb) / .68);
  transition: background-color .16s ease, color .16s ease;
}
.langswitch__btn--pa { font: 700 13px/1 var(--font-gur-ui); }
/* The painted pill is 27px tall, as designed. This grows only the hit area,
   to 44px, so it is thumbable without the header growing around it. */
.langswitch__btn { position: relative; }
.langswitch__btn::after {
  content: "";
  position: absolute;
  inset: -9px -2px;
}
.langswitch__btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 2px 6px -2px rgb(var(--ink-rgb) / .5);
}


/* --------------------------------------------------------------------------
   9. Sections, top to bottom
   -------------------------------------------------------------------------- */

/* --- Hero --- */
/* The watermark is positioned to bleed past the right edge. This clips it.
   It has to sit here rather than on <body>, because an overflow value on
   <body> propagates up to the viewport and stops clipping anything.
   Horizontal only, so the -10px top bleed survives. */
.hero { overflow-x: clip; }
.hero .container { position: relative; padding-top: 34px; padding-bottom: 8px; }

/* The Punjab silhouette is traced from the mural on the shop's own wall. It
   sits at 9% so it reads as painted plaster, not as an image. */
.hero__watermark {
  position: absolute;
  top: -10px;
  right: -40px;
  z-index: 0;
  width: min(58vw, 440px);
  height: auto;
  opacity: .09;
  pointer-events: none;
  user-select: none;
}

.hero .pill-row,
.hero__kicker,
.hero__title,
.hero__lede,
.hero .btn-row { position: relative; z-index: 1; }

.hero .pill-row { margin-bottom: 18px; }

.hero__kicker {
  font-family: var(--font-gur-ui);
  font-weight: 600;
  font-size: 19px;
  color: var(--red);
  margin: 0 0 6px;
}

.hero__lede {
  font-size: 17px;
  line-height: 1.6;
  max-width: 54ch;
  color: rgb(var(--ink-rgb) / .75);
  margin: 0 0 26px;
  text-wrap: pretty;
}

.hero .btn-row { margin-bottom: 28px; }

/* The photo sits in a painted border — the same three colours as the stripes,
   blended rather than repeated. */
.hero__frame {
  border-radius: 22px;
  padding: 8px;
  background: linear-gradient(135deg, var(--gold), var(--red) 45%, var(--green));
  box-shadow: 0 26px 50px -32px rgb(var(--ink-rgb) / .6);
}
.hero__frameInner { border-radius: 16px; overflow: hidden; background: var(--ink); }
.hero__frameInner img {
  display: block;
  width: 100%;
  height: clamp(230px, 40vw, 400px);
  object-fit: cover;
}

/* --- About --- */
.about .container { padding-block: 40px 48px; }
.about__media {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
}
.about__media img { display: block; width: 100%; height: 320px; object-fit: cover; }

/* --- Menu highlights --- */
.section--dark { background: var(--ink); color: var(--cream-warm); }
.menu { padding-bottom: 56px; }
.menu .container { padding-top: 46px; }
.menu__lede {
  font-size: 16px;
  color: rgb(var(--on-dark-rgb) / .6);
  margin: 0 0 30px;
  max-width: 52ch;
}

.dish {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgb(var(--on-dark-rgb) / .05);
  border: 1px solid rgb(var(--on-dark-rgb) / .14);
  border-radius: var(--r-card);
  padding: 16px;
  transition: border-color .16s ease;
}
.dish:hover { border-color: rgb(var(--gold-rgb) / .7); }
.dish__media { height: 130px; border-radius: 11px; overflow: hidden; background: var(--ink-deep); }
.dish__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dish__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dish__head h3 { font-size: 17px; font-weight: 650; margin: 0; }
.dish__price { font: 650 15px/1 var(--font-body); color: var(--gold); }
.dish__desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgb(var(--on-dark-rgb) / .62);
  margin: 0;
  flex: 1;
}

.menu__foot { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.menu__footNote { font-size: 13.5px; color: rgb(var(--on-dark-rgb) / .55); }
.menu__allergy {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgb(var(--on-dark-rgb) / .62);   /* raised from .42 — this is safety copy */
  margin: 18px 0 0;
  max-width: 62ch;
}

/* --- Deals --- */
.deals .container { padding-block: 54px 20px; }
.deals .gur { margin-bottom: 22px; }

.deal {
  background: var(--white);
  border: 1px solid rgb(var(--ink-rgb) / .09);
  border-radius: 18px;
  padding: 22px;
}
.deal--feature { background: var(--red); border-color: var(--red); color: #fff; }
.deal__tag { font: 700 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; }
.deal--feature .deal__tag { color: var(--gold-tint); }
.deal__title { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.05; margin: 0 0 8px; }
.deal__desc { font-size: 14.5px; line-height: 1.5; margin: 0; color: rgb(var(--ink-rgb) / .65); }
.deal--feature .deal__desc { color: rgb(255 255 255 / .93); }

/* --- Why order with us --- */
.why .container { padding-block: 34px 54px; }
.why .gur { margin-bottom: 22px; }

.trust {
  background: var(--white);
  border: 1px solid rgb(var(--ink-rgb) / .09);
  border-top: 4px solid;
  border-radius: var(--r-card);
  padding: 22px;
}
.trust--green { border-top-color: var(--green); }
.trust--red   { border-top-color: var(--red); }
.trust--gold  { border-top-color: var(--gold); }
.trust h3 { font-size: 17px; font-weight: 650; margin: 0 0 6px; }
.trust p  { font-size: 14.5px; line-height: 1.55; color: rgb(var(--ink-rgb) / .65); margin: 0; }
.trust__stat { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.trust__num  { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--red); }
.trust__star { font-size: 15px; color: var(--gold-deep); }

/* --- Gallery --- */
.gallery .container { padding-bottom: 54px; }
.gallery__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 18px;
}
.gallery__grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gallery__tile {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--sand);
}
.gallery__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Order now --- */
.order { background: var(--green-tint); padding-bottom: 54px; }
.order .container { padding-top: 40px; }
.order__status { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; }
.order__hours { font-size: 13px; color: rgb(var(--ink-rgb) / .6); }
.order__lede { font-size: 16px; color: rgb(var(--ink-rgb) / .7); margin: 0 0 26px; max-width: 48ch; }

.ordercard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  border: 1px solid rgb(var(--ink-rgb) / .12);
  border-radius: var(--r-card);
  padding: 20px;
  color: var(--ink);
  transition: border-color .16s ease, background-color .16s ease;
}
.ordercard:hover { border-color: var(--red); color: var(--ink); }
.ordercard--dark { background: var(--ink); border-color: var(--ink); color: var(--cream-warm); }
.ordercard--dark:hover { background: var(--green); border-color: var(--green); color: var(--cream-warm); }
.ordercard__name { font-size: 18px; font-weight: 650; }
.ordercard__sub  { font-size: 13.5px; color: rgb(var(--ink-rgb) / .62); }
.ordercard--dark .ordercard__sub { color: rgb(var(--on-dark-rgb) / .62); }

/* --- Reviews --- */
.reviews .container { padding-block: 54px; }
.reviews .display { margin-bottom: 14px; }
.reviews__stat { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.reviews__num   { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--red); }
.reviews__stars { font-size: 16px; color: var(--gold-deep); }
.reviews__sub   { font-size: 15px; color: rgb(var(--ink-rgb) / .65); margin: 0; }
.reviews__quotes { display: grid; gap: 12px; align-content: start; }

.quote {
  margin: 0;
  background: var(--white);
  border: 1px dashed rgb(var(--ink-rgb) / .25);
  border-left: 4px solid;
  border-radius: var(--r-card);
  padding: 20px;
}
.quote--gold  { border-left-color: var(--gold); }
.quote--green { border-left-color: var(--green); }
.quote blockquote {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.25;
  margin: 0 0 10px;
  color: rgb(var(--ink-rgb) / .72);
}
.quote figcaption {
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red-deep);
}

/* --- Find us --- */
.contact { background: var(--white); border-top: 1px solid rgb(var(--ink-rgb) / .08); padding-block: 54px; }
.contact .gur { margin-bottom: 18px; }
.contact__address { font-size: 17px; line-height: 1.5; font-weight: 600; margin: 0 0 6px; }

.contact__list {
  display: grid;
  grid-template-columns: minmax(86px, auto) 1fr;
  gap: 8px 10px;
  font-size: 15px;
  color: rgb(var(--ink-rgb) / .75);
  margin: 0 0 20px;
}
.contact__list dt { font-weight: 600; }
.contact__list dd { margin: 0; }

.contact .ph--bare:last-of-type { font-size: 12px; margin: 10px 0 0; }


/* --------------------------------------------------------------------------
   10. Footer and sticky order bar
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgb(var(--on-dark-rgb) / .6);
  /* Clears the fixed order bar so the last line is never trapped under it. */
  padding-bottom: calc(var(--orderbar-h) + 28px);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 34px;
}
/* The logo is a dark stencil, so it needs its cream back under it here. */
.site-footer__logo {
  display: block;
  height: 34px;
  width: auto;
  background: var(--cream-warm);
  padding: 7px 12px;
  border-radius: 10px;
}
.site-footer__meta { font-size: 13px; line-height: 1.6; margin: 0; }
.site-footer__meta a { color: var(--gold-soft); }
.site-footer__meta a:hover { color: var(--gold); }

.orderbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--orderbar-h);
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgb(var(--ink-rgb) / .96);
  backdrop-filter: blur(8px);
  border-top: 3px solid var(--gold);
}
.orderbar__status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cream-warm);
  font-size: 13px;
}
.orderbar .btn--sm { font-weight: 650; padding: 11px 20px; }


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

@media print {
  .statusbar, .site-header, .orderbar, .skip-link { display: none !important; }
  .section--dark, .site-footer { background: #fff !important; color: #000 !important; }
  .hero__watermark { display: none; }
  body { background: #fff; }
}


/* ==========================================================================
   12. menu.html — the full menu and order builder
   --------------------------------------------------------------------------
   Every dish, price and size is in the markup, so the menu reads and prints
   with JavaScript off. Everything in this section that adds an order is
   enhancement on top of that, and is hidden when the enhancement cannot run.
   ========================================================================== */

/* Set by js/order.js from the real header height, since the tab strip changes
   height as it wraps. The value here is only the pre-script fallback. */
:root { --sticky-h: 150px; }

.menu-page { padding-bottom: calc(var(--orderbar-h) + 24px); }

/* --- Header with the category strip --- */
.site-header--menu { background: rgb(251 247 238 / .96); }
.backlink { font-size: 14px; font-weight: 600; color: rgb(var(--ink-rgb) / .6); }
.backlink:hover { color: var(--red); }

.tabs { background: var(--ink); overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.tabs__inner {
  display: flex;
  gap: 8px;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 10px 14px;
}
.tab {
  flex: none;
  white-space: nowrap;
  font: 600 12.5px/1 var(--font-body);
  letter-spacing: .02em;
  color: var(--cream-warm);
  border: 1px solid rgb(var(--on-dark-rgb) / .22);
  border-radius: var(--r-pill);
  padding: 9px 13px;
  /* Nudged out to a 44px hit area without changing the pill. */
  position: relative;
}
.tab::after { content: ""; position: absolute; inset: -8px -2px; }
.tab:hover, .tab:focus-visible { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }

/* --- Intro --- */
.menu-intro { max-width: var(--wrap); margin-inline: auto; padding: 30px var(--gutter) 10px; }
.menu-intro__kicker {
  font-family: var(--font-gur-ui);
  font-weight: 600;
  font-size: 17px;
  color: var(--red);
  margin: 0 0 4px;
}
.menu-intro .display--lg { font-size: clamp(40px, 8vw, 68px); margin-bottom: 12px; }
.menu-intro__lede {
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 56ch;
  color: rgb(var(--ink-rgb) / .75);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.menu-intro .pill { letter-spacing: .12em; }
.menu-intro__langNote {
  font-family: var(--font-gur-ui);
  font-size: 14.5px;
  color: var(--gold-deep);
  background: var(--gold-tint);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 14px 0 0;
  max-width: 62ch;
}

/* --- Categories --- */
.cat {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 26px var(--gutter) 6px;
  /* Clears the sticky header when a tab jumps to this category. */
  scroll-margin-top: calc(var(--sticky-h) + 12px);
}
.cat__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.display--cat { font-size: clamp(30px, 5.4vw, 44px); margin: 0; }
.gur--cat { font-size: 19px; color: var(--gold-deep); }
.cat__note { font-size: 14px; color: rgb(var(--ink-rgb) / .62); margin: 0 0 16px; }

.itemgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }

/* --- Dish card --- */
.item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white);
  border: 1px solid rgb(var(--ink-rgb) / .09);
  border-radius: var(--r-card);
  padding: 16px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.item.is-inOrder {
  border-color: var(--green);
  box-shadow: 0 8px 20px -14px rgb(47 107 54 / .8);
}
.item__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.item__head h3 { font-size: 16.5px; font-weight: 650; line-height: 1.25; margin: 0; }
.item__price { font: 650 15.5px/1 var(--font-body); color: var(--red); white-space: nowrap; }
.item__desc { font-size: 14px; line-height: 1.5; color: rgb(var(--ink-rgb) / .62); margin: 0; flex: 1; }
.item__action { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.item__add { flex: 1; font: 650 14px/1 var(--font-body); padding: 12px 16px; }

/* --- Size picker --- */
.sizes { display: flex; gap: 6px; }
.size {
  flex: 1;
  cursor: pointer;
  border: 1px solid rgb(var(--ink-rgb) / .15);
  background: var(--white);
  color: rgb(var(--ink-rgb) / .75);
  border-radius: 10px;
  padding: 9px 4px;
  font: 600 12px/1.3 var(--font-body);
  min-height: 44px;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.size[aria-checked="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* --- Quantity stepper --- */
.stepper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--green-tint);
  border-radius: var(--r-pill);
  padding: 4px;
}
.stepper__btn {
  cursor: pointer;
  border: 0;
  background: var(--white);
  color: var(--ink);
  width: 40px; height: 40px;
  border-radius: 50%;
  font: 700 19px/1 var(--font-body);
  display: grid;
  place-items: center;
}
.stepper__btn--add { background: var(--green); color: #fff; }
.stepper__qty { font: 700 16px/1 var(--font-body); color: var(--ink); }

.menu-allergy { max-width: var(--wrap); margin-inline: auto; padding: 34px var(--gutter) 20px; }
.menu-allergy p { font-size: 12.5px; line-height: 1.6; color: rgb(var(--ink-rgb) / .62); margin: 0; max-width: 70ch; }

/* --- Running order bar --- */
.orderbar--menu { display: block; padding-block: 10px; }
.orderbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.orderbar__count { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.orderbar__items { font: 650 14px/1.2 var(--font-body); color: var(--cream-warm); }
.orderbar__total { font: 500 12px/1.2 var(--font-body); color: rgb(var(--on-dark-rgb) / .68); }
.orderbar--menu .btn--gold { font: 700 14.5px/1 var(--font-body); padding: 14px 22px; min-height: 48px; }

/* --- Review sheet --- */
.sheet {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 620px;
  width: 100%;
  max-height: 92vh;
  /* Pin to the bottom of the viewport — a bottom sheet, thumb-first. */
  margin: auto auto 0;
}
.sheet::backdrop { background: rgb(var(--ink-rgb) / .55); }
.sheet__inner {
  background: var(--cream);
  border-radius: 22px 22px 0 0;
  padding: 20px 18px calc(28px + env(safe-area-inset-bottom));
  max-height: 92vh;
  overflow-y: auto;
}
.sheet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.sheet__head .display { font-size: 36px; margin: 0; }
.sheet__head .gur { font-size: 18px; margin: 2px 0 0; }
.sheet__close {
  flex: none;
  cursor: pointer;
  border: 0;
  background: rgb(var(--ink-rgb) / .08);
  color: var(--ink);
  width: 44px; height: 44px;
  border-radius: 50%;
  font: 600 17px/1 var(--font-body);
}
.sheet__close:hover { background: rgb(var(--red-rgb) / .12); color: var(--red-deep); }
.sheet__empty { font-size: 15.5px; line-height: 1.6; color: rgb(var(--ink-rgb) / .7); margin: 14px 0 0; }

.lines { list-style: none; display: grid; gap: 8px; margin: 14px 0 18px; padding: 0; }
.line {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid rgb(var(--ink-rgb) / .09);
  border-radius: 14px;
  padding: 12px 14px;
}
.line__info { flex: 1; min-width: 0; }
.line__name { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0 0 2px; }
.line__each { font-size: 13px; color: rgb(var(--ink-rgb) / .62); margin: 0; }
.line__step { display: flex; align-items: center; gap: 6px; flex: none; }
.line__step .stepper__btn { width: 36px; height: 36px; font-size: 17px; border: 1px solid rgb(var(--ink-rgb) / .15); }
.line__step .stepper__btn--add { border-color: var(--green); }
.line__qty { font: 700 15px/1 var(--font-body); min-width: 18px; text-align: center; }
.line__total { font: 650 15px/1 var(--font-body); flex: none; min-width: 56px; text-align: right; }

.sheet__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  margin: 0 0 18px;
  border-top: 1px dashed rgb(var(--ink-rgb) / .2);
  border-bottom: 1px dashed rgb(var(--ink-rgb) / .2);
  font: 650 16px/1 var(--font-body);
}
.sheet__totalValue { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1; color: var(--red); }

.sheet__fields { display: grid; gap: 12px; margin-bottom: 16px; }
.fieldlabel {
  display: block;
  font: 650 12px/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / .62);
  margin: 0 0 8px;
}
.field { display: block; }
.field input, .field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  /* 16px exactly — anything smaller makes iOS Safari zoom on focus. */
  font-size: 16px;
  padding: 13px 14px;
  border: 1px solid rgb(var(--ink-rgb) / .18);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--green); }

.modeswitch { display: flex; gap: 8px; }
.mode {
  flex: 1;
  cursor: pointer;
  border: 1px solid rgb(var(--ink-rgb) / .18);
  background: var(--white);
  color: rgb(var(--ink-rgb) / .75);
  border-radius: 12px;
  padding: 13px 10px;
  font: 650 14px/1 var(--font-body);
  min-height: 46px;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.mode[aria-checked="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.preview {
  background: var(--white);
  border: 1px solid rgb(var(--ink-rgb) / .12);
  border-radius: 14px;
  padding: 14px;
  margin: 0;
  font: 400 13.5px/1.6 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: rgb(var(--ink-rgb) / .85);
  max-height: 200px;
  overflow-y: auto;
}

.sheet__send { width: 100%; margin-top: 14px; padding: 17px; font: 700 16px/1 var(--font-body); min-height: 54px; }
.ph--block { display: block; }

.sent {
  margin-top: 12px;
  background: var(--green-tint);
  border: 1px solid rgb(47 107 54 / .3);
  border-radius: 14px;
  padding: 14px;
}
.sent__title { font: 650 14.5px/1.4 var(--font-body); color: #22521F; margin: 0 0 4px; }
.sent__body { font-size: 13.5px; line-height: 1.55; color: rgb(var(--ink-rgb) / .75); margin: 0; }

/* --------------------------------------------------------------------------
   No JavaScript: the menu still reads, but nothing that cannot work is shown.
   -------------------------------------------------------------------------- */
.menu-intro__nojs {
  display: none;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--red-deep);
  background: rgb(var(--red-rgb) / .07);
  border: 1px solid rgb(var(--red-rgb) / .25);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0 0;
  max-width: 62ch;
}
.no-js .menu-intro__nojs { display: block; }
.no-js .item__action,
.no-js .sizes,
.no-js .orderbar--menu,
.no-js .sheet { display: none; }
/* With no picker, a pizza has to show its whole price range instead. */
.no-js .menu-page { padding-bottom: 24px; }

@media print {
  .tabs, .orderbar--menu, .sheet, .item__action, .menu-intro__nojs { display: none !important; }
  .item { break-inside: avoid; border-color: #999; }
  .itemgrid { grid-template-columns: repeat(2, 1fr); }
}

/* Without the picker a sized dish would show one price and hide the other two,
   so the full range replaces the single figure. */
.item__sizeList { display: none; font: 600 13px/1.5 var(--font-body); color: var(--red); margin: 0; }
.no-js .item__sizeList { display: block; }
.no-js .item--sized [data-price-label] { display: none; }


/* --------------------------------------------------------------------------
   menu.html on a phone
   --------------------------------------------------------------------------
   Logo, language and call will not share one row under about 700px, so the
   row is allowed to wrap. That would make a fully-sticky header eat a quarter
   of a phone screen, so below the desktop breakpoint only the category strip
   stays stuck — which is the part you actually need while scrolling a menu
   this long. js/order.js measures whichever element is sticky, so the anchor
   offset follows automatically.
   -------------------------------------------------------------------------- */
@media (max-width: 819px) {
  .site-header--menu { position: static; }
  .site-header--menu .site-header__inner { flex-wrap: wrap; justify-content: center; }
  .site-header--menu .tabs { position: sticky; top: 0; z-index: 40; }
}