/* ============================================
   Jamjar — brand tokens & base styles
   Bold red / black / white. Built to match the real
   JamJar logo (assets/logo-badge.png) and menu boards:
   heavy condensed display type, flat blocky red tags,
   numbered menu lists, zero soft-pastel decoration.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Palette — sampled directly from the real JamJar logo */
  --ink: #141414;
  --ink-soft: #57534E;
  --paper: #FFFFFF;
  --paper-dim: #F3F2F0;
  --line: #E4E2DF;
  --line-strong: #141414;
  --red: #CE2836;
  --red-deep: #A31F2B;
  --red-tint: #FBE7E8;
  --cream: #F5F2EB;

  /* Type */
  --font-display: 'Anton', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Shape — sharper than a typical soft SaaS site, on purpose */
  --radius-lg: 10px;
  --radius-md: 6px;
  --radius-sm: 3px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.8rem, 6vw, 5.2rem); }
h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 16px; color: var(--ink-soft); }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--red);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn-red {
  background: var(--red);
  color: var(--paper);
}
.btn-red:hover { background: var(--red-deep); }

.btn-ink {
  background: var(--ink);
  color: var(--paper);
}
.btn-ink:hover { background: #000; }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--paper); }

.btn-outline-light {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}
.btn-outline-light:hover { background: var(--paper); color: var(--ink); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--ink);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(20,20,20,.10);
}

.nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.02em;
}
.logo .dot { color: var(--red); }
.logo-lockup-img {
  height: 60px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer-logo-lockup {
  display: block;
  height: 62px;
  width: auto;
  margin-bottom: 18px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.24rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav-links a {
  position: relative;
  padding: 6px 0;
  color: var(--ink);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 3px;
  background: var(--red);
  transition: right .25s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--red); }

.nav-cta { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px;
  height: 3px;
  background: var(--ink);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Mobile secondary panel (Phase B) ----------
   Opened by the hamburger on mobile only. Holds the destinations that
   moved out of the top nav once HOME | ORDER | REWARDS | ACCOUNT became
   the persistent bottom nav — see partials/header.php + bottom-nav.php. */
.mobile-panel { display: none; }
.mobile-panel a {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Dimming scrim shown behind the open mobile panel — see main.js for the
   open/close wiring (tap, outside tap, scroll, Escape all dismiss it). */
.mobile-panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(20,20,20,.4);
  border: 0;
  padding: 0;
}

/* ---------- Bottom navigation (Phase B) ----------
   App-style persistent tab bar: HOME | ORDER | REWARDS | ACCOUNT.
   Mobile-only — see the 720px breakpoint below. Auth-agnostic: always
   links to the same four destinations, the destination pages resolve
   logged-in/out state themselves (see partials/bottom-nav.php). */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 110;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  border-top: 3px solid var(--ink);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px 7px;
  min-height: 48px;
  color: var(--ink-soft);
  font-family: var(--font-body, inherit);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.bottom-nav-btn svg { width: 22px; height: 22px; }
.bottom-nav-btn[aria-current="page"] { color: var(--red); }
.bottom-nav.bn-hidden { display: none; }

/* ---------- Sections ---------- */
.section { padding: 100px 0; }
.section-tight { padding: 64px 0; }

.section-head {
  max-width: 620px;
  margin: 0 0 48px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.bg-dim { background: var(--paper-dim); }
.bg-ink { background: var(--ink); color: var(--paper); }
.bg-ink p { color: rgba(255,255,255,.68); }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4 { color: var(--paper); }
.bg-red { background: var(--red); color: var(--paper); }
.bg-red p { color: rgba(255,255,255,.85); }
.bg-red h1, .bg-red h2, .bg-red h3 { color: var(--paper); }

/* ---------- Photo frame (swappable-photo system) ----------
   Every real-world photo on the site uses this pattern:
     <div class="photo-frame">
       <img class="real-photo" src="assets/photos/FILENAME.jpg" alt="...">
       <div class="photo-fallback"><span>Item Name</span><small>assets/photos/FILENAME.jpg</small></div>
     </div>
   If the file at that path doesn't exist yet, main.js adds
   .no-photo to .photo-frame and the bold placeholder shows
   instead — so nothing ever looks broken. Swap a photo by
   dropping a same-named file into assets/photos/, no code edits.
------------------------------------------------------------- */
.photo-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
}
.photo-frame .real-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-frame .photo-fallback {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--ink) 0%, #2A2320 100%);
}
.photo-frame.no-photo .real-photo { display: none; }
.photo-frame.no-photo .photo-fallback { display: flex; }
.photo-fallback span {
  font-family: var(--font-display);
  color: var(--paper);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  max-width: 90%;
}
.photo-fallback .fallback-mark {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--red);
  margin-bottom: 12px;
}
.photo-fallback small {
  display: block;
  margin-top: 10px;
  font-family: 'Courier New', monospace;
  font-size: 0.68rem;
  color: rgba(255,255,255,.4);
  word-break: break-all;
}

/* ---------- Hero ---------- */
.hero {
  padding: 56px 0 0;
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero-copy p.lede {
  font-size: 1.12rem;
  max-width: 460px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.hero-media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 3px solid var(--ink);
  border-bottom: none;
}
.hero-tag {
  position: absolute;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(20,20,20,.18);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.hero-tag.tag-accent { background: var(--red); }
.hero-tag .swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.hero-tag.tag-accent .swatch { background: var(--paper); }

/* ---------- Marquee ---------- */
.marquee-strip {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 48px;
  animation: marquee 26s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 14px;
}
.marquee-track span::after { content: '•'; color: var(--red); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Cards / grids ---------- */
.card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0 var(--red);
}

.item-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.item-card { padding: 0; overflow: hidden; }
.item-media {
  aspect-ratio: 4/3;
  border-bottom: 2px solid var(--ink);
}
.item-body { padding: 22px; }
.item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.item-top h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: none;
  font-size: 1.15rem;
  letter-spacing: 0;
}
.item-price {
  font-family: var(--font-display);
  color: var(--red);
  white-space: nowrap;
  font-size: 1.1rem;
}
.item-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tag {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--paper-dim);
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.tag.tag-red { background: var(--red); border-color: var(--red); color: var(--paper); }

.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.value-card { padding: 32px; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.stat-box {
  background: var(--paper);
  padding: 34px 24px;
  text-align: center;
  border: none;
  border-radius: 0;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--red);
  line-height: 1;
}
.stat-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* ---------- Split layout ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split-media {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  border: 3px solid var(--ink);
  overflow: hidden;
}

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: 72px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner h2 { color: var(--paper); }
.cta-banner p { color: rgba(255,255,255,.68); max-width: 520px; margin-left: auto; margin-right: auto; }
.cta-banner .cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.cta-banner .ring {
  position: absolute;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
}

/* ---------- Icon badge strip (replaces emoji everywhere) ----------
   Minimal single-color line icons, drawn as plain inline SVG in the
   markup — no illustrations, no gradients, no emoji.
------------------------------------------------------------- */
.icon-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.icon-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}
.icon-circle {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-circle svg { width: 20px; height: 20px; stroke: var(--ink); }
.value-card .icon-circle { width: 48px; height: 48px; }
.value-card .icon-circle svg { width: 22px; height: 22px; }
.icon-badge span {
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Info list (contact page etc.) ---------- */
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.info-list li:last-child { border-bottom: none; }
.info-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.info-icon svg { width: 20px; height: 20px; stroke: var(--paper); }
.info-list h4 { margin: 0 0 4px; font-size: 1rem; text-transform: none; font-family: var(--font-body); font-weight: 700; }
.info-list p { margin: 0; font-size: 0.94rem; }

/* ---------- Timeline ---------- */
.timeline { border-left: 3px solid var(--ink); padding-left: 32px; }
.timeline-item { position: relative; padding-bottom: 40px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -39px; top: 4px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--ink);
}
.timeline-item .year {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
.timeline-item h4 { text-transform: none; font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-card { padding: 28px 22px; text-align: center; }
.team-avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  background: var(--ink);
  color: var(--paper);
}
.team-card h4 { text-transform: none; font-family: var(--font-body); font-weight: 700; font-size: 1rem; }
.team-card span { font-size: 0.86rem; color: var(--ink-soft); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
input, select, textarea {
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: var(--paper-dim);
  color: var(--ink);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--red);
  background: var(--paper);
}
textarea { min-height: 130px; resize: vertical; }
.form-card { padding: 40px; }

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

.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;
}

/* ---------- Page header ---------- */
.page-header {
  padding: 56px 0 44px;
  border-bottom: 3px solid var(--ink);
  background: var(--paper-dim);
}
.page-header .container { max-width: 760px; }
.page-header p { font-size: 1.05rem; }
/* Desktop-only "Order Now" CTA on page headers (currently just Menu) —
   desktop has no persistent nav to Order/Rewards/Account the way mobile
   does via bottom-nav, so a page whose whole job is upstream of ordering
   gets its own explicit push toward checkout. Hidden at <=720px (see
   the .page-header-cta rule alongside .nav-cta below) since the bottom
   nav's Order tab already covers that job on mobile, with no forced
   login — showing this login-aware button there too would just be a
   second, inconsistent entry point. */
.page-header-cta { margin-top: 28px; }

/* ---------- Menu system ---------- */
.menu-jump {
  position: sticky;
  top: 65px;
  z-index: 90;
  background: var(--ink);
  overflow-x: auto;
  white-space: nowrap;
  border-bottom: 3px solid var(--red);
}
.menu-jump-track {
  display: inline-flex;
  gap: 4px;
  padding: 0 28px;
}
.menu-jump a {
  display: inline-block;
  padding: 14px 16px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
  border-bottom: 3px solid transparent;
}
.menu-jump a:hover { color: var(--paper); }

.menu-cat { padding: 64px 0; scroll-margin-top: 130px; }
.menu-cat:nth-child(even) { background: var(--paper-dim); }
.menu-cat-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 20px;
}
.menu-cat-head h2 { margin: 0; }
.menu-cat-head .menu-cat-note { max-width: 380px; margin: 0; font-size: 0.96rem; }

.menu-tier { margin-bottom: 36px; }
.menu-tier:last-child { margin-bottom: 0; }
.menu-tag {
  display: inline-block;
  background: var(--red);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.menu-tag.tag-ink { background: var(--ink); }

.menu-list { border-top: 2px solid var(--ink); }
.menu-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.menu-row.featured { background: var(--cream); padding-left: 14px; padding-right: 14px; margin: 0 -14px; border-bottom-color: var(--cream); }
.menu-num {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--red);
  flex-shrink: 0;
  width: 26px;
}
.menu-row-body { flex: 1; min-width: 0; }
.menu-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.menu-row-top h4 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.menu-row-top h4 .star { color: var(--red); font-size: 0.85em; }
.menu-row-price {
  font-family: var(--font-display);
  color: var(--red);
  font-size: 1rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.menu-row p { margin: 4px 0 0; font-size: 0.9rem; }
.menu-row-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-left: 8px;
  vertical-align: middle;
}

.menu-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--ink);
  color: var(--paper);
  padding: 18px 24px;
  border-radius: var(--radius-md);
  margin-bottom: 28px;
}
.menu-banner strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.menu-banner .menu-banner-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--red);
  background: var(--paper);
  padding: 4px 16px;
  border-radius: var(--radius-sm);
}

/* Spotlight = featured items with real/swappable photos, mirrors
   the hero callouts on the physical menu boards. */
.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.spotlight-card {
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper);
}
.spotlight-photo-wrap { aspect-ratio: 1/1; border-bottom: 2px solid var(--ink); }
.spotlight-body { padding: 18px 20px 20px; }
.spotlight-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.spotlight-body h3 {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: none;
  font-size: 1.1rem;
  letter-spacing: 0;
}
.spotlight-body p { margin: 0 0 10px; font-size: 0.9rem; }
.spotlight-price {
  font-family: var(--font-display);
  color: var(--red);
  font-size: 1.15rem;
}

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}
.faq-item h4 { margin: 0 0 8px; text-transform: none; font-family: var(--font-body); font-weight: 700; }
.faq-item p { margin: 0; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 72px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 14px;
  color: var(--paper);
  letter-spacing: 0.02em;
}
.footer-grid p { color: rgba(255,255,255,.6); font-size: 0.92rem; }
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  color: rgba(255,255,255,.82);
  padding: 6px 0;
  font-size: 0.94rem;
  transition: color .2s var(--ease);
}
.footer-col a:hover { color: var(--red); }
.social-row { display: flex; gap: 10px; margin-top: 18px; }
.social-row a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
}
.social-row a svg { width: 17px; height: 17px; stroke: var(--paper); fill: none; }
.social-row a:hover { background: var(--red); border-color: var(--red); }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.84rem;
  color: rgba(255,255,255,.5);
}

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
.reveal-init { opacity: 0; transform: translateY(24px); }
.reveal.in-view {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-delay-1.in-view { transition-delay: .08s; }
.reveal-delay-2.in-view { transition-delay: .16s; }
.reveal-delay-3.in-view { transition-delay: .24s; }
.reveal-delay-4.in-view { transition-delay: .32s; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* Hero: on mobile the signature photo moves up to sit between the
     headline and the lede paragraph. hero-copy becomes a layout-
     transparent wrapper (display:contents) so its children can be
     placed independently via named grid areas alongside hero-media —
     no HTML changes needed, and desktop (this rule only applies
     <=900px) is completely untouched. */
  .hero .container {
    grid-template-columns: 1fr;
    grid-template-areas: "heading" "media" "lede" "actions";
    row-gap: 0;
  }
  .hero-copy { display: contents; }
  .hero-copy h1 { grid-area: heading; }
  .hero-copy p.lede { grid-area: lede; }
  .hero-copy .hero-actions { grid-area: actions; }
  .hero-media {
    grid-area: media;
    max-width: 460px;
    margin: 24px auto;
    aspect-ratio: 4/4;
    /* The photo now sits mid-page (between the headline and the lede)
       instead of flush against the end of the .hero section, so it
       needs a complete border/radius on all sides rather than the
       desktop top-only treatment. */
    border-radius: var(--radius-lg);
    border-bottom: 3px solid var(--ink);
  }
  /* .hero has no bottom padding by design on desktop (the photo used to
     be the last element and sat flush against the section edge). On
     mobile the reordered grid ends with .hero-actions instead, so give
     the section real breathing room before the Results Day banner. */
  .hero { padding-bottom: 40px; }
  /* Four full-width stacked pills read as a wall of buttons and pushed
     the banner far down the page. Lead with the primary CTA, then pair
     the two secondary actions, then close with Find Us on its own row —
     more compact and considerably tidier than a single stacked column. */
  .hero-copy .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .hero-copy .hero-actions .btn-red,
  .hero-copy .hero-actions .btn-outline:last-child {
    grid-column: 1 / -1;
  }
  .hero-copy .hero-actions .btn {
    padding: 14px 12px;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .split { grid-template-columns: 1fr; }
  .split-media { order: -1; }
  .item-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: 1fr 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .icon-strip { grid-template-columns: 1fr 1fr; }
  .spotlight-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav-links, .nav-cta, .page-header-cta { display: none; }
  .nav-toggle { display: flex; }
  /* The logo is now a single badge+wordmark lockup image. It's shrunk
     (not hidden) on mobile so both the mark and "JAMJAR" stay visible
     next to the hamburger — sized well within budget even at the
     narrowest real phone widths (~320px). */
  .nav { padding: 12px 16px; }
  .logo-lockup-img { height: 39px; }
  .mobile-panel.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--paper);
    flex-direction: column;
    padding: 20px 28px;
    gap: 18px;
    border-bottom: 3px solid var(--ink);
  }
  .mobile-panel-backdrop.open { display: block; }
  .bottom-nav { display: flex; }
  body.has-bottom-nav { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
  .field-row { grid-template-columns: 1fr; }
  .item-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .icon-strip { grid-template-columns: 1fr; }
  .spotlight-grid { grid-template-columns: 1fr; }
  .menu-cat-head { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   Tenant footer (partials/footer.tenant.php)

   Only a tenant deployment renders these classes, so nothing here changes how
   the base site looks: no element on a Jamjar page carries .tenant-footer.
   Colours come from the same tokens as the rest of the sheet, so a tenant that
   rethemes its palette gets a footer that follows.
--------------------------------------------------------------------------- */
.tenant-footer {
  padding: 2rem 1.25rem 3rem;
  text-align: center;
}
.tenant-footer-inner {
  margin: 0 auto;
  max-width: 42rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.tenant-footer-name {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.tenant-footer-legal,
.tenant-footer-address,
.tenant-footer-hours,
.tenant-footer-registration,
.tenant-footer-copyright {
  font-size: 0.875rem;
  opacity: 0.8;
}
.tenant-footer-contact a,
.tenant-footer-website a,
.tenant-footer-legal-links a {
  text-decoration: underline;
}
.tenant-footer-copyright {
  margin-top: 0.6rem;
}