/* ==========================================================================
   Taquería La Hidalguense — styles.css
   1.  Custom properties
   2.  Reset and base styles
   3.  Typography
   4.  Accessibility utilities
   5.  Layout containers
   6.  Buttons and links
   7.  Announcement strip
   8.  Header and navigation
   9.  Hero
   10. Decorative elements
   11. Menu overview cards
   12. Featured menu cards
   13. Saturday special
   14. Full menu image and dialog
   15. Location and hours
   16. Menu page (intro, sticky category nav, item lists)
   17. Delivery areas (hub + city pages)
   18. Order-direct pages (fee breakdown, disclaimer)
   19. Feedback page (review form embed)
   20. Contact page
   21. Map
   22. Social links
   23. Footer
   24. Mobile action bar
   25. Motion and reveal effects
   26. Responsive breakpoints
   27. Reduced-motion overrides
   28. Print-friendly basics
   ========================================================================== */


/* ==========================================================================
   1. CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* Brand palette */
  --gold: #EAAD00;
  --green: #014F0D;
  --white: #FEFEFE;
  --ink: #060909;

  /* Derived surfaces */
  --gold-soft: #F7D468;
  --gold-deep: #C08F00;
  --green-deep: #013708;
  --cream: #FFF6E0;
  --ink-soft: #1B2020;

  /* Content widths */
  --wrap: 74rem;
  --wrap-narrow: 46rem;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.25rem;
  --space-2xl: clamp(3rem, 7vw, 5.5rem);

  /* Borders and radii */
  --bw: 3px;
  --bw-thin: 2px;
  --radius-sm: 0.5rem;
  --radius: 1.1rem;
  --radius-lg: 1.75rem;
  --radius-pill: 999px;

  /* Shadows (hard, sticker-like) */
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow-lg: 10px 10px 0 var(--ink);
  --shadow-gold: 6px 6px 0 var(--gold);

  /* Motion */
  --t-fast: 120ms;
  --t: 200ms;
  --t-slow: 420ms;
  --ease: cubic-bezier(0.22, 0.68, 0.35, 1);

  /* Z-index layers */
  --z-decor: 0;
  --z-content: 1;
  --z-header: 40;
  --z-catnav: 35;
  --z-actionbar: 50;
  --z-dialog: 60;

  /* Header + mobile bar sizing */
  --header-h: 4.75rem;
  --actionbar-h: 4.5rem;

  /* Sticky offsets — main.js overwrites these with measured pixel values so the
     menu category bar and anchor jumps stay correct at any font size. */
  --sticky-top: 4.75rem;
  --catnav-h: 3.9rem;
}


/* ==========================================================================
   2. RESET AND BASE STYLES
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  overflow-x: hidden;
  /* Space so the fixed mobile action bar never sits on top of content */
  padding-block-end: calc(var(--actionbar-h) + env(safe-area-inset-bottom, 0px));
}

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

img { height: auto; }

ul, ol { margin: 0; padding: 0; list-style: none; }

p { margin: 0 0 var(--space-sm); }

address { font-style: normal; }

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

.section--ink :focus-visible,
.site-footer :focus-visible,
.site-header :focus-visible,
.action-bar :focus-visible { outline-color: var(--gold); }


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3 {
  font-family: "Arial Black", "Arial Narrow Bold", "Trebuchet MS", sans-serif;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.4rem + 4.6vw, 4.6rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.6vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem); }

.eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-sm);
  padding: 0.35em 0.9em;
  background: var(--ink);
  color: var(--gold);
  border-radius: var(--radius-pill);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow--light { background: var(--gold); color: var(--ink); }

.section__lede {
  max-width: 46ch;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
}


/* ==========================================================================
   4. ACCESSIBILITY UTILITIES
   ========================================================================== */

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

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100%;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--gold);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-sm);
  font-weight: bold;
  text-decoration: none;
}

.skip-link:focus { top: var(--space-sm); }


/* ==========================================================================
   5. LAYOUT CONTAINERS
   ========================================================================== */

.wrap {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--space-2xl);
}

.section--white { background: var(--white); }
.section--gold  { background: var(--gold); }
.section--ink   { background: var(--ink); color: var(--white); }

.section--gold  { border-block: var(--bw) solid var(--ink); }
.section--ink   { border-block: var(--bw) solid var(--ink); }

.section__head { margin-bottom: var(--space-lg); max-width: 58rem; }
.section__head--light .section__lede { color: var(--cream); }

.section--ink h2,
.section--ink h3 { color: var(--white); }

/* ...but a white card or panel dropped into a dark section keeps ink headings,
   otherwise they render white on white. */
.section--ink .panel h2,
.section--ink .panel h3,
.section--ink .card h2,
.section--ink .card h3 { color: var(--ink); }

.section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}

.section__actions--left { justify-content: flex-start; margin-top: var(--space-md); }

/* Offset for the sticky header when jumping to #full-menu */
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }


/* ==========================================================================
   6. BUTTONS AND LINKS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3rem;
  padding: 0.7em 1.35em;
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}

.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.btn--gold   { background: var(--gold);  color: var(--ink); }
.btn--green  { background: var(--green); color: var(--white); }
.btn--ink    { background: var(--ink);   color: var(--white); }
.btn--outline{ background: var(--white); color: var(--ink); }

.section--ink .btn--outline { background: transparent; color: var(--white); border-color: var(--white); box-shadow: 4px 4px 0 var(--gold); }

.btn--sm { min-height: 2.65rem; padding: 0.5em 1.05em; font-size: 0.9rem; box-shadow: 3px 3px 0 var(--ink); }
.btn--lg { min-height: 3.5rem; padding: 0.85em 1.8em; font-size: 1.1rem; box-shadow: var(--shadow); }

.link {
  color: inherit;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.link:hover { text-decoration-style: wavy; }


/* ==========================================================================
   7. ANNOUNCEMENT STRIP
   ========================================================================== */

.strip {
  overflow: hidden;
  background: var(--green);
  color: var(--white);
  border-bottom: var(--bw) solid var(--ink);
}

.strip__track {
  display: flex;
  width: max-content;
  animation: slide 34s linear infinite;
}

.strip__item {
  margin: 0;
  padding: 0.55rem 1.5rem;
  white-space: nowrap;
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
}

.strip__item span { color: var(--gold); }

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ==========================================================================
   8. HEADER AND NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--ink);
  color: var(--white);
  border-bottom: var(--bw) solid var(--ink);
  transition: box-shadow var(--t) var(--ease);
}

.site-header.is-stuck { box-shadow: 0 4px 0 var(--gold); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-h);
  padding-block: 0.5rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
}

.brand__logo {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: var(--bw-thin) solid var(--gold);
  background: var(--white);
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.brand__text { display: grid; line-height: 1.05; }

.brand__small {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.brand__big {
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  letter-spacing: -0.01em;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.4rem 0.9rem;
  background: transparent;
  color: var(--white);
  border: var(--bw-thin) solid var(--gold);
  border-radius: var(--radius-pill);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle__bars { display: grid; gap: 3px; }
.nav-toggle__bars span {
  display: block;
  width: 18px; height: 3px;
  background: var(--gold);
  border-radius: 2px;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-nav { width: 100%; }

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block: var(--space-2xs) var(--space-sm);
}

.site-nav__link {
  display: block;
  padding: 0.7rem 0.4rem;
  color: var(--white);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: var(--bw-thin) solid rgba(254, 254, 254, 0.18);
}

.site-nav__link:hover { color: var(--gold); }

.site-nav__link[aria-current="page"] { color: var(--gold); }
.site-nav__link[aria-current="page"]::after {
  content: " ★";
  font-size: 0.75em;
}

.site-nav__order { margin-top: var(--space-2xs); }

/* Mobile: nav is collapsed until toggled. Without JS the nav stays visible. */
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }


/* ==========================================================================
   9. HERO
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--gold);
  border-bottom: var(--bw) solid var(--ink);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.hero__inner {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.hero__title span { display: block; }

.hero__title-accent {
  color: var(--green);
  -webkit-text-stroke: 1px var(--ink);
}

.hero__lede {
  max-width: 44ch;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.hero__arrow {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-md);
  color: var(--ink);
}

.hero__arrow-note {
  font-family: "Trebuchet MS", sans-serif;
  font-style: italic;
  font-weight: bold;
  transform: rotate(-3deg);
}

/* Logo badge */
.hero__badge {
  position: relative;
  justify-self: center;
  display: grid;
  place-items: center;
  width: min(82vw, 24rem);
  aspect-ratio: 1 / 1;
  background: var(--ink);
  border-radius: 50%;
  border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow-lg);
}

.hero__logo {
  width: 86%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 50%;
}

.hero__badge-ring {
  position: absolute;
  inset: -14px;
  border: var(--bw) dashed var(--ink);
  border-radius: 50%;
  animation: spin 60s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.sticker {
  position: absolute;
  padding: 0.4rem 0.85rem;
  background: var(--white);
  border: var(--bw-thin) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.sticker--one { top: 4%; right: -4%; transform: rotate(6deg); background: var(--white); }
.sticker--two { bottom: 6%; left: -6%; transform: rotate(-5deg); background: var(--green); color: var(--white); }


/* ==========================================================================
   10. DECORATIVE ELEMENTS
   ========================================================================== */

.hero__sun {
  position: absolute;
  z-index: var(--z-decor);
  top: -22%;
  right: -14%;
  width: min(70vw, 34rem);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--gold-soft);
  opacity: 0.65;
}

.hero__dots {
  position: absolute;
  z-index: var(--z-decor);
  bottom: -2rem;
  left: -2rem;
  width: 16rem;
  height: 10rem;
  background-image: radial-gradient(var(--ink) 2px, transparent 2px);
  background-size: 18px 18px;
  opacity: 0.16;
}

.section__wave {
  position: absolute;
  top: calc(-1 * var(--bw));
  left: 0;
  width: 100%;
  height: 14px;
  background:
    radial-gradient(circle at 12px -4px, transparent 12px, var(--ink) 12px, var(--ink) 15px, transparent 15px);
  background-size: 24px 22px;
  opacity: 0.5;
  pointer-events: none;
}

/* Category marquee / divider */
.marquee {
  overflow: hidden;
  background: var(--ink);
  color: var(--gold);
  border-bottom: var(--bw) solid var(--ink);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: slide 42s linear infinite;
}

.marquee__item {
  margin: 0;
  padding: 0.85rem 1rem;
  white-space: nowrap;
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.25rem);
  letter-spacing: 0.12em;
}

.marquee__item span { color: var(--white); }


/* ==========================================================================
   11. MENU OVERVIEW CARDS
   ========================================================================== */

.cards {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

.card {
  position: relative;
  padding: var(--space-md);
  background: var(--white);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius) var(--radius-lg) var(--radius) var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.card--tilt-a { transform: rotate(-1deg); }
.card--tilt-b { transform: rotate(1deg); }

.card:hover,
.card:focus-within {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card__mark {
  display: inline-grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-bottom: var(--space-2xs);
  background: var(--gold);
  color: var(--ink);
  border: var(--bw-thin) solid var(--ink);
  border-radius: 50%;
}

.card__title { margin-bottom: var(--space-2xs); }
.card__copy { margin: 0; }


/* ==========================================================================
   12. FEATURED MENU CARDS
   ========================================================================== */

.card--fav { padding-top: var(--space-lg); }

.card__num {
  position: absolute;
  top: -0.9rem;
  left: var(--space-md);
  margin: 0;
  padding: 0.15rem 0.7rem;
  background: var(--green);
  color: var(--white);
  border: var(--bw-thin) solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}


/* ==========================================================================
   13. SATURDAY SPECIAL
   ========================================================================== */

.saturday {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg);
  background: var(--green);
  color: var(--white);
  border: var(--bw) solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-gold);
}

.saturday__art { justify-self: center; }
.saturday__art svg { width: min(60vw, 12rem); height: auto; }
.saturday__copy p { color: var(--cream); }
.saturday__copy h2 { color: var(--white); }


/* ==========================================================================
   14. FULL MENU IMAGE AND DIALOG
   ========================================================================== */

.menu-board {
  position: relative;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  background: var(--cream);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.menu-board__tag {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  margin: 0;
  padding: 0.25rem 1rem;
  background: var(--gold);
  color: var(--ink);
  border: var(--bw-thin) solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.menu-board__button {
  display: block;
  width: 100%;
  padding: 0;
  margin-top: var(--space-2xs);
  background: var(--white);
  border: var(--bw-thin) solid var(--ink);
  border-radius: var(--radius-sm);
  cursor: zoom-in;
}

.menu-board__img {
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.menu-board__hint {
  display: block;
  padding: 0.5rem;
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.menu-board__fallback {
  margin-top: var(--space-sm);
  text-align: center;
  font-size: 0.95rem;
}

/* Dialog */
.menu-dialog {
  width: min(96vw, 78rem);
  max-width: 96vw;
  max-height: 92vh;
  padding: 0;
  background: var(--white);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.menu-dialog::backdrop { background: rgba(6, 9, 9, 0.82); }

.menu-dialog__inner { padding: var(--space-sm); }

.menu-dialog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
}

.menu-dialog__title { font-size: 1.2rem; margin: 0; }

.menu-dialog__close {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  background: var(--ink);
  color: var(--white);
  border: var(--bw-thin) solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
}

.menu-dialog__img {
  width: 100%;
  height: auto;
  max-height: 74vh;
  object-fit: contain;
}

.menu-dialog__note { margin: var(--space-2xs) 0 0; font-size: 0.9rem; text-align: center; }
.menu-dialog__note a { color: inherit; }

body.is-locked { overflow: hidden; }


/* ==========================================================================
   15. LOCATION AND HOURS
   ========================================================================== */

.find { display: grid; gap: var(--space-md); }

.panel {
  padding: var(--space-md);
  background: var(--white);
  /* Explicit, so a white panel stays readable inside .section--ink */
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.panel__title { margin-bottom: var(--space-sm); }
.panel__note { margin: var(--space-sm) 0 0; font-size: 0.92rem; }

.hours { margin: 0; }

.hours__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.6rem;
  border-bottom: var(--bw-thin) dashed rgba(6, 9, 9, 0.28);
  border-radius: var(--radius-sm);
}

.hours__row:last-child { border-bottom: 0; }

.hours dt { font-weight: bold; margin: 0; }
.hours dd { margin: 0; font-variant-numeric: tabular-nums; }

.hours__row.is-today {
  background: var(--gold);
  border-bottom-color: var(--ink);
  box-shadow: inset 0 0 0 var(--bw-thin) var(--ink);
}

.hours__today-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.55rem;
  background: var(--ink);
  color: var(--gold);
  border-radius: var(--radius-pill);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Live status pill */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 var(--space-sm);
  padding: 0.5rem 1rem;
  background: var(--white);
  color: var(--ink);
  border: var(--bw-thin) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-size: 0.95rem;
  font-weight: bold;
}

.status--panel { box-shadow: none; }

.status__dot {
  width: 0.7rem;
  height: 0.7rem;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--gold);
}

.status[data-state="open"] .status__dot   { background: var(--green); }
.status[data-state="closed"] .status__dot { background: var(--white); }

.address {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: var(--space-sm);
  font-size: 1.05rem;
  font-weight: bold;
}

.address__pin { flex: none; color: var(--green); }


/* ==========================================================================
   16. MENU PAGE (INTRO, STICKY CATEGORY NAV, ITEM LISTS)
   ========================================================================== */

/* --- Intro banner (shared with the delivery-area pages) --- */
.menu-intro,
.area-hero {
  position: relative;
  overflow: hidden;
  background: var(--gold);
  border-bottom: var(--bw) solid var(--ink);
  /* Kept short on phones so the sticky category bar is reachable right away */
  padding-block: 1.5rem;
}

.menu-intro__inner,
.area-hero__inner {
  position: relative;
  z-index: var(--z-content);
  max-width: 52rem;
}

.menu-intro__title,
.area-hero__title {
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.6rem);
  margin-bottom: var(--space-sm);
}

.menu-intro__title span,
.area-hero__title span { display: block; }

/* Pricing note — sits directly under the sticky category bar, where people
   start scanning items. `.area-note` is the same treatment on the hub page. */
.menu-note,
.area-note {
  margin: 0 0 var(--space-lg);
  padding: 0.7rem 0.95rem;
  background: var(--white);
  border: var(--bw-thin) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-size: 0.9rem;
  max-width: 44rem;
}

/* --- Sticky category bar ---
   Sits directly beneath the sticky header. Below the header in the stack so
   the header always paints on top. Works as plain anchor links with no JS. */
.catnav {
  position: sticky;
  top: var(--sticky-top);
  z-index: var(--z-catnav);
  background: var(--ink);
  color: var(--white);
  border-bottom: var(--bw) solid var(--gold);
}

.catnav__inner {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.catnav__label {
  flex: none;
  margin: 0;
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.catnav__list {
  display: flex;
  gap: var(--space-2xs);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-block: 0.6rem;
  /* Room for the chip focus ring at both ends */
  padding-inline: 2px;
}

.catnav__list::-webkit-scrollbar { height: 6px; }
.catnav__list::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: var(--radius-pill); }

.catnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0.4rem 0.95rem;
  scroll-snap-align: start;
  white-space: nowrap;
  background: transparent;
  color: var(--white);
  border: var(--bw-thin) solid rgba(254, 254, 254, 0.45);
  border-radius: var(--radius-pill);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 0.84rem;
  text-decoration: none;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.catnav__link:hover { background: var(--green); border-color: var(--gold); }

/* Active category: filled + underlined, so it never reads by color alone. */
.catnav__link[aria-current] {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* --- Menu sections --- */
.menu-page {
  background: var(--white);
  padding-block: var(--space-xl);
}

.menu-cat[id] {
  scroll-margin-top: calc(var(--sticky-top) + var(--catnav-h) + 0.75rem);
}

.menu-cat + .menu-cat { margin-top: var(--space-xl); }

.menu-cat__head {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--bw) solid var(--ink);
}

.menu-cat__title {
  display: inline-block;
  margin: 0 0 var(--space-3xs);
  padding: 0.1em 0.5em 0.1em 0;
  font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.4rem);
}

.menu-cat__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 0.15em;
  background: var(--gold);
  border: var(--bw-thin) solid var(--ink);
  border-radius: var(--radius-pill);
}

.menu-cat__note { margin: 0; font-size: 0.95rem; }

.menu-list {
  display: grid;
  gap: 0 var(--space-lg);
  grid-template-columns: 1fr;
}

.menu-item {
  padding: 0.85rem 0.2rem;
  border-bottom: var(--bw-thin) dashed rgba(6, 9, 9, 0.28);
}

.menu-item__name {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  letter-spacing: -0.005em;
}

.menu-item__num {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 0.35rem;
  align-self: center;
  background: var(--gold);
  color: var(--ink);
  border: var(--bw-thin) solid var(--ink);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  line-height: 1;
}

.menu-item__detail {
  margin: 0.3rem 0 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

/* Where an item carries a board number, indent its detail line so it lines up
   under the item name instead of under the number chip. Items without a number
   (and browsers without :has support) keep the flush-left default. */
@supports selector(:has(*)) {
  .menu-item:has(.menu-item__num) .menu-item__detail { padding-left: 2.4rem; }
}

/* Saturday feature inside the menu list */
.menu-item--feature {
  padding: var(--space-md);
  background: var(--green);
  color: var(--white);
  border: var(--bw) solid var(--ink);
  border-bottom: var(--bw) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.menu-item--feature .menu-item__detail { color: var(--cream); padding-left: 0; }
.menu-item__action { margin: var(--space-sm) 0 0; }


/* ==========================================================================
   17. DELIVERY AREAS (HUB + CITY PAGES)
   ========================================================================== */

/* --- Breadcrumb --- */
.breadcrumb {
  background: var(--ink);
  color: var(--white);
  border-bottom: var(--bw-thin) solid var(--gold);
  padding-block: 0.55rem;
  font-size: 0.86rem;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.breadcrumb__list li { display: flex; align-items: center; gap: 0.5rem; }

.breadcrumb__list li + li::before {
  content: "\203A";
  color: var(--gold);
  font-weight: bold;
}

.breadcrumb a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb [aria-current] { color: var(--gold); font-weight: bold; }

/* --- Hub: city cards --- */
.card--area .card__num {
  background: var(--gold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.card__link { color: inherit; text-decoration: none; }
.card__link:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* Whole card is clickable; the link text stays the accessible name. */
.card__link::after { content: ""; position: absolute; inset: 0; }

/* --- City chips (other areas we deliver) --- */
.arealist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.arealist__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.5rem 0.9rem;
  background: var(--white);
  color: var(--ink);
  border: var(--bw-thin) solid var(--ink);
  border-radius: var(--radius-pill);
  font-weight: bold;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease);
}

.arealist__link:hover { transform: translate(-2px, -2px); background: var(--gold); }

.arealist__mi {
  padding: 0.1rem 0.5rem;
  background: var(--green);
  color: var(--white);
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

/* --- City page: copy + facts panel --- */
.area-split { display: grid; gap: var(--space-lg); align-items: start; }

.prose { max-width: 62ch; }
.prose p { font-size: clamp(1rem, 0.97rem + 0.2vw, 1.1rem); }

.area-split__copy p { max-width: 60ch; }

.panel--facts { background: var(--white); }

.factlist { display: grid; gap: var(--space-2xs); }

.factlist__item {
  display: flex;
  gap: 0.6rem;
  padding-bottom: var(--space-2xs);
  border-bottom: var(--bw-thin) dashed rgba(6, 9, 9, 0.28);
  font-weight: bold;
}

.factlist__item:last-child { border-bottom: 0; padding-bottom: 0; }

.factlist__item::before {
  content: "\2605";
  flex: none;
  color: var(--green);
}


/* ==========================================================================
   18. ORDER-DIRECT PAGES (FEE BREAKDOWN, DISCLAIMER)
   ========================================================================== */

.card--fee { padding-top: var(--space-md); }

.fee__pct {
  margin: 0 0 var(--space-2xs);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--green);
}

.fee__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem 0.7rem;
  margin: var(--space-lg) 0 0;
  padding: var(--space-md);
  background: var(--ink);
  color: var(--white);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-gold);
  text-align: center;
}

.fee__total-num {
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  line-height: 1.05;
  color: var(--gold);
}

/* Small print: independent business, industry ranges */
.disclaimer {
  padding-block: var(--space-md);
  background: var(--cream);
  border-top: var(--bw-thin) solid var(--ink);
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.disclaimer p { margin: 0; max-width: 78ch; }


/* ==========================================================================
   19. FEEDBACK PAGE (REVIEW FORM EMBED)
   ========================================================================== */

/* Bordered board that holds the third-party review form. */
.form-panel {
  position: relative;
  padding: clamp(1rem, 3vw, 1.75rem);
  background: var(--white);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.form-panel__tag {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  margin: 0;
  padding: 0.25rem 1rem;
  background: var(--green);
  color: var(--white);
  border: var(--bw-thin) solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The vendor's custom element is unknown to the browser until its script runs,
   so give it block layout plus a small holding height to soften the load-in.
   The widget renders into a shadow root and grows on its own once someone
   picks a rating, so this is a floor, not a fixed height. */
emr-collect-review-form {
  display: block;
  min-height: 6rem;
  margin-top: var(--space-2xs);
}

.form-panel__fallback {
  margin: var(--space-2xs) 0 0;
  padding: var(--space-sm);
  background: var(--cream);
  border: var(--bw-thin) solid var(--ink);
  border-radius: var(--radius-sm);
}

.form-note {
  max-width: 60ch;
  margin: var(--space-md) auto 0;
  text-align: center;
  font-size: 0.92rem;
}


/* ==========================================================================
   20. CONTACT PAGE
   ========================================================================== */

.hero--contact { padding-block: clamp(2.25rem, 5vw, 4rem); }

.hero__pin { justify-self: center; }
.hero__pin svg { width: min(55vw, 13rem); height: auto; }

.cards--contact .card--action { display: flex; flex-direction: column; }
.card__action { margin: auto 0 0; padding-top: var(--space-sm); }


/* ==========================================================================
   21. MAP
   ========================================================================== */

.map-frame {
  padding: 0.6rem;
  background: var(--gold);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.map-frame__iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: var(--bw-thin) solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--white);
}


/* ==========================================================================
   22. SOCIAL LINKS
   ========================================================================== */

.social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
}

.social__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.9rem;
  padding: 0.5rem 0.9rem;
  color: inherit;
  border: var(--bw-thin) solid currentColor;
  border-radius: var(--radius-pill);
  font-weight: bold;
  text-decoration: none;
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease);
}

.social__link:hover { transform: translateY(-2px); background: var(--gold); color: var(--ink); border-color: var(--ink); }

.social--big { justify-content: center; gap: var(--space-sm); }

.social--big .social__link {
  padding: 0.8rem 1.4rem;
  border-width: var(--bw);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  box-shadow: 4px 4px 0 var(--gold);
}

.social--light .social__link { box-shadow: var(--shadow-sm); }

.social__icon { flex: none; }


/* ==========================================================================
   23. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--white);
  border-top: var(--bw) solid var(--gold);
  padding-block: var(--space-xl) var(--space-md);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-lg);
}

.site-footer__brand { display: flex; align-items: center; gap: var(--space-sm); }

.site-footer__logo {
  width: 4.25rem;
  height: 4.25rem;
  flex: none;
  border-radius: 50%;
  border: var(--bw-thin) solid var(--gold);
  background: var(--white);
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.site-footer__name {
  margin: 0;
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 1.15rem;
}

.site-footer__tag { margin: 0; color: var(--cream); font-size: 0.95rem; }

.site-footer__heading {
  margin: 0 0 var(--space-2xs);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.site-footer__links { display: grid; gap: var(--space-3xs); }
.site-footer__links a,
.site-footer .link { color: var(--white); }

.address--footer { margin-bottom: var(--space-2xs); font-weight: normal; }

.site-footer .social { flex-direction: column; align-items: flex-start; }
.site-footer .social__link { color: var(--white); border-color: rgba(254, 254, 254, 0.45); }

.site-footer__legal {
  width: min(100% - 2rem, var(--wrap));
  margin: var(--space-lg) auto 0;
  padding-top: var(--space-sm);
  border-top: var(--bw-thin) solid rgba(254, 254, 254, 0.2);
  font-size: 0.88rem;
  color: var(--cream);
}


/* ==========================================================================
   24. MOBILE ACTION BAR
   ========================================================================== */

.action-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-actionbar);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--ink);
  border-top: var(--bw) solid var(--gold);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.action-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: var(--actionbar-h);
  padding: 0.5rem 0.25rem;
  color: var(--white);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.action-bar__item + .action-bar__item { border-left: var(--bw-thin) solid rgba(254, 254, 254, 0.2); }
.action-bar__item--order { background: var(--gold); color: var(--ink); }
.action-bar__item:hover { background: var(--green); color: var(--white); }
.action-bar__item--order:hover { background: var(--gold-deep); color: var(--ink); }


/* ==========================================================================
   25. MOTION AND REVEAL EFFECTS
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Tilted cards keep their tilt once revealed */
.js .card--tilt-a[data-reveal].is-visible { transform: rotate(-1deg); }
.js .card--tilt-b[data-reveal].is-visible { transform: rotate(1deg); }


/* ==========================================================================
   26. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (min-width: 40em) {
  .cards--3,
  .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .saturday { grid-template-columns: auto minmax(0, 1fr); }

  .menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-item--feature { grid-column: 1 / -1; }

  .menu-intro,
  .area-hero { padding-block: clamp(2rem, 5vw, 3.25rem); }
  .menu-note,
  .area-note {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.95rem;
  }
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .social { flex-direction: row; flex-wrap: wrap; }
  .map-frame__iframe { aspect-ratio: 16 / 9; }
}

@media (min-width: 56em) {
  .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .hero__inner--contact { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .hero__arrow { display: inline-flex; }

  .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .find { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; }

  .site-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Desktop navigation */
  .nav-toggle { display: none; }
  .site-header__inner { flex-wrap: nowrap; }
  .site-nav,
  .js .site-nav { display: block; width: auto; }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    padding-block: 0;
  }

  .site-nav__link { padding: 0.35rem 0.15rem; border-bottom: 0; }
  .site-nav__order { margin-top: 0; }

  .menu-list--sides { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .area-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .catnav__label { font-size: 0.72rem; }

  /* The action bar is mobile-only */
  .action-bar { display: none; }
  body { padding-block-end: 0; }
}

@media (min-width: 75em) {
  .wrap { width: min(100% - 3rem, var(--wrap)); }
  .site-footer__inner { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; }
}


/* ==========================================================================
   27. REDUCED-MOTION OVERRIDES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .strip__track,
  .marquee__track,
  .hero__badge-ring { animation: none; transform: none; }

  /* Static strips: show one copy, hide the duplicate */
  .strip__track,
  .marquee__track { width: 100%; }
  .strip__item + .strip__item,
  .marquee__item + .marquee__item { display: none; }
  .strip__item,
  .marquee__item { white-space: normal; }

  .js [data-reveal] { opacity: 1; transform: none; }
  .btn:hover,
  .card:hover,
  .social__link:hover { transform: none; }
}


/* ==========================================================================
   28. PRINT-FRIENDLY BASICS
   ========================================================================== */

@media print {
  .strip,
  .marquee,
  .catnav,
  .breadcrumb,
  .action-bar,
  .nav-toggle,
  .site-nav,
  .hero__sun,
  .hero__dots { display: none !important; }

  body { padding: 0; background: #fff; color: #000; }
  .section { padding-block: 1rem; break-inside: avoid; }
  .card,
  .panel,
  .menu-board,
  .form-panel,
  .fee__total { box-shadow: none; transform: none; }

  /* The review form cannot be filled in on paper */
  .form-panel { display: none; }
  .menu-cat,
  .menu-item { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; word-break: break-all; }
}