/* =========================================================================
   Santiago Pizza Palace — styles.css
   1.  Custom properties
   2.  Reset and base styles
   3.  Typography
   4.  Accessibility utilities
   5.  Layout utilities
   6.  Announcement / information bar
   7.  Header and navigation
   8.  Buttons
   9.  Homepage hero
   10. Intro section
   11. Benefit cards
   12. Location and hours
   13. CTA section
   14. Ordering page
   15. OrderChop embed wrapper
   16. Footer
   17. Animation states
   18. Responsive media queries
   19. Reduced-motion rules
   ========================================================================= */


/* =========================================================================
   1. CUSTOM PROPERTIES
   ========================================================================= */
:root {
  /* Brand */
  --brand-green: #009247;
  --brand-red: #E00023;
  --white: #FFFFFF;

  /* Supporting rustic neutrals */
  --cream: #F7F0E3;
  --cream-deep: #EFE4CE;
  --charcoal: #211C18;
  --tan: #C8A46A;

  /* Derived tones (accessible variants of the brand colors) */
  --green-deep: #00713A;
  --green-darkest: #0B3F27;
  --red-deep: #B8001C;
  --ink-soft: #4A413A;
  --rule: rgba(33, 28, 24, 0.14);

  /* Type */
  --font-display: "Bitter", "Georgia", "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Spacing and shape */
  --container: 1160px;
  --gutter: clamp(1rem, 4vw, 2.25rem);
  --section-y: clamp(3rem, 7vw, 5.5rem);
  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(33, 28, 24, 0.08), 0 2px 8px rgba(33, 28, 24, 0.06);
  --shadow-md: 0 10px 30px rgba(33, 28, 24, 0.12);

  /* Reusable rustic textures (CSS only — no image files) */
  --paper-texture:
    radial-gradient(circle at 18% 22%, rgba(200, 164, 106, 0.16) 0 1.5px, transparent 2px),
    radial-gradient(circle at 72% 64%, rgba(33, 28, 24, 0.05) 0 1.5px, transparent 2px),
    radial-gradient(circle at 44% 88%, rgba(200, 164, 106, 0.12) 0 1px, transparent 2px);
  --paper-texture-size: 120px 120px, 170px 170px, 90px 90px;
}


/* =========================================================================
   2. RESET AND BASE STYLES
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background-color: var(--cream);
  background-image: var(--paper-texture);
  background-size: var(--paper-texture-size);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  min-height: 100vh;
  overflow-wrap: break-word;
}

body.is-nav-open { overflow: hidden; }

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

svg { display: block; }

a { color: var(--green-deep); }

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

hr { border: 0; border-top: 1px solid var(--rule); }


/* =========================================================================
   3. TYPOGRAPHY
   ========================================================================= */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--charcoal);
  margin: 0 0 0.6em;
  letter-spacing: -0.005em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 0.75rem;
}

.eyebrow--light { color: var(--tan); }

.section-heading {
  font-size: clamp(1.75rem, 4vw, 2.6rem);
}

.section-heading--center {
  text-align: center;
  max-width: 28ch;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.text-link {
  color: var(--green-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.text-link:hover { color: var(--brand-red); }

.text-link--light { color: var(--cream); }
.text-link--light:hover { color: var(--tan); }


/* =========================================================================
   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;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--brand-red);
  color: var(--white);
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top 0.15s ease-in;
}

.skip-link:focus { top: 0; }

[tabindex="-1"]:focus { outline: none; }


/* =========================================================================
   5. LAYOUT UTILITIES
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Thin Italian tricolor rule used under the header and above the footer */
.tricolor {
  height: 4px;
  background: linear-gradient(
    to right,
    var(--brand-green) 0 33.333%,
    var(--white) 33.333% 66.666%,
    var(--brand-red) 66.666% 100%
  );
}

.flourish {
  width: min(240px, 70%);
  height: auto;
  margin: 0 auto 1.25rem;
}

/* Small tile-inspired band */
.checker-strip {
  height: 14px;
  background-image:
    linear-gradient(45deg, rgba(0, 146, 71, 0.18) 25%, transparent 25% 75%, rgba(0, 146, 71, 0.18) 75%),
    linear-gradient(45deg, rgba(0, 146, 71, 0.18) 25%, transparent 25% 75%, rgba(0, 146, 71, 0.18) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  background-color: var(--cream-deep);
  border-top: 1px solid var(--rule);
}


/* =========================================================================
   6. ANNOUNCEMENT / INFORMATION BAR
   ========================================================================= */
.infobar {
  background: var(--green-darkest);
  color: var(--cream);
  font-size: 0.9375rem;
}

.infobar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: 0.5rem;
}

.infobar p { margin: 0; }

.infobar__hours { letter-spacing: 0.01em; }

.infobar__dot { color: var(--tan); padding-inline: 0.25rem; }

.infobar__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.status-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--tan);
  border: 1px solid rgba(255, 255, 255, 0.6);
  flex: none;
}

.infobar__status.is-open .status-dot { background: #2FD07C; }
.infobar__status.is-closed .status-dot { background: #FF6B6B; }


/* =========================================================================
   7. HEADER AND NAVIGATION
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  background-image: var(--paper-texture);
  background-size: var(--paper-texture-size);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.site-header.is-stuck { box-shadow: var(--shadow-md); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
  padding-block: 0.5rem;
}

/* --- Brand lockup --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  min-height: 48px;
}

.brand__plaque {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  flex: none;
  background: var(--white);
  border: 2px solid var(--tan);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.brand__logo {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: contain;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.1; }

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  color: var(--green-darkest);
}

.brand__tag {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

/* --- Toggle button (mobile) --- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.5rem 0.9rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-darkest);
  background: var(--white);
  border: 2px solid var(--brand-green);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle:hover { background: var(--cream-deep); }

.nav-toggle__bars {
  display: grid;
  gap: 4px;
  width: 20px;
}

.nav-toggle__bars span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--green-darkest);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0.35; }

/* --- Navigation --- */
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--charcoal);
  text-decoration: none;
  border-radius: var(--radius);
  border-bottom: 3px solid transparent;
}

.site-nav__link:hover {
  color: var(--green-deep);
  background: rgba(0, 146, 71, 0.08);
}

.site-nav__link[aria-current="page"] {
  color: var(--green-darkest);
  border-bottom-color: var(--brand-green);
}

.site-nav__cta { margin-left: 0.4rem; }


/* =========================================================================
   8. BUTTONS
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0.7rem 1.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.btn--primary {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: var(--white);
}

.btn--green {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--white);
}

.btn--green:hover { background: var(--green-darkest); border-color: var(--green-darkest); }

.btn--outline {
  background: var(--white);
  border-color: var(--brand-green);
  color: var(--green-darkest);
}

.btn--outline:hover { background: var(--cream-deep); border-color: var(--green-darkest); }

.btn--sm { min-height: 44px; padding: 0.45rem 1.1rem; font-size: 0.9375rem; }
.btn--lg { min-height: 56px; padding: 0.85rem 2rem; font-size: 1.0625rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}


/* =========================================================================
   9. HOMEPAGE HERO
   ========================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--cream-deep);
  background-image:
    radial-gradient(ellipse at 82% 8%, rgba(0, 146, 71, 0.10), transparent 55%),
    radial-gradient(ellipse at 6% 92%, rgba(224, 0, 35, 0.08), transparent 50%),
    var(--paper-texture);
  background-size: auto, auto, var(--paper-texture-size);
  border-bottom: 1px solid var(--rule);
}

.hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.hero__heading {
  font-size: clamp(2.25rem, 7vw, 4rem);
  margin-bottom: 0.5rem;
  color: var(--green-darkest);
}

.hero__body {
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  max-width: 54ch;
  color: var(--ink-soft);
}

.hero__support {
  margin-top: 1.1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-deep);
}

/* --- Arched brand panel (a restrained nod to palace architecture) --- */
.hero__brand { display: flex; justify-content: center; }

.arch-panel {
  position: relative;
  width: min(420px, 100%);
  padding: 0.75rem;
  background: linear-gradient(160deg, var(--tan), #B08D52);
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.arch-panel__inner {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem) clamp(2.75rem, 6vw, 3.5rem);
  background: var(--white);
  background-image: var(--paper-texture);
  background-size: var(--paper-texture-size);
  border-radius: 999px 999px var(--radius) var(--radius);
  border: 1px solid rgba(33, 28, 24, 0.08);
}

.hero__logo {
  width: min(300px, 78%);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.arch-panel__ribbon {
  position: absolute;
  left: 50%;
  bottom: -0.9rem;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--green-darkest);
  color: var(--cream);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 2px solid var(--tan);
}


/* =========================================================================
   10. INTRO SECTION
   ========================================================================= */
.intro { padding-block: var(--section-y); }

.intro__inner {
  max-width: 46rem;
  text-align: center;
}

.intro__body {
  font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
  color: var(--ink-soft);
  margin-inline: auto;
  max-width: 62ch;
}

.intro__body + .intro__body { margin-top: 1.1rem; }


/* =========================================================================
   11. BENEFIT CARDS
   ========================================================================= */
.benefits {
  padding-block: var(--section-y);
  background: var(--white);
  border-block: 1px solid var(--rule);
}

.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--cream);
  background-image: var(--paper-texture);
  background-size: var(--paper-texture-size);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--brand-green);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 50%;
}

.card__icon svg { width: 1.9rem; height: 1.9rem; }

.card__heading {
  font-size: 1.25rem;
  margin-bottom: 0.4rem;
}

.card__body {
  color: var(--ink-soft);
  margin: 0;
}


/* =========================================================================
   12. LOCATION AND HOURS
   ========================================================================= */
.location { padding-block: var(--section-y); }

.location__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.location__body {
  color: var(--ink-soft);
  max-width: 54ch;
}

.detail { margin-top: 1.75rem; }

.detail__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 0.3rem;
}

.detail__value {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-style: normal;
  line-height: 1.5;
  margin: 0;
}

/* --- Hours card (stamped-label styling) --- */
.hours-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--white);
  border: 2px solid var(--green-darkest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.hours-card__label {
  font-family: var(--font-display);
  font-size: 1.35rem;
  text-align: center;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px dashed var(--tan);
  color: var(--green-darkest);
}

.hours { margin: 0; }

.hours__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--rule);
}

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

.hours dt {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hours dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* Current day: colour + a text badge + a left rule, never colour alone */
.hours__row.is-today {
  background: rgba(0, 146, 71, 0.09);
  border-left: 4px solid var(--brand-green);
  border-radius: var(--radius);
  padding-left: 0.75rem;
}

.hours__row.is-today dd { color: var(--charcoal); }

.today-badge {
  display: inline-block;
  background: var(--green-deep);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}

.hours-card__note {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-align: center;
}


/* =========================================================================
   13. CTA SECTION
   ========================================================================= */
.cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5rem);
  background-color: var(--green-darkest);
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 0 2px,
      transparent 2px 7px,
      rgba(0, 0, 0, 0.06) 7px 9px,
      transparent 9px 16px
    );
  color: var(--cream);
  border-block: 4px solid var(--tan);
}

.cta__inner {
  text-align: center;
  max-width: 44rem;
}

.cta__heading {
  color: var(--white);
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  margin-bottom: 0.5rem;
}

.cta__body {
  color: rgba(247, 240, 227, 0.9);
  font-size: 1.0625rem;
  margin-bottom: 1.75rem;
}


/* =========================================================================
   14. ORDERING PAGE
   ========================================================================= */
.order-hero {
  background-color: var(--cream-deep);
  background-image:
    radial-gradient(ellipse at 88% 0%, rgba(0, 146, 71, 0.10), transparent 55%),
    var(--paper-texture);
  background-size: auto, var(--paper-texture-size);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.order-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}

.order-hero__plaque {
  display: grid;
  place-items: center;
  width: 7rem;
  height: 7rem;
  flex: none;
  background: var(--white);
  border: 2px solid var(--tan);
  border-radius: 999px 999px var(--radius) var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 0.6rem;
}

.order-hero__plaque img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.order-hero__copy { min-width: min(100%, 18rem); flex: 1 1 22rem; }

.order-hero__heading {
  font-size: clamp(2rem, 5.5vw, 3rem);
  color: var(--green-darkest);
  margin-bottom: 0.4rem;
}

.order-hero__body {
  color: var(--ink-soft);
  max-width: 58ch;
  margin-bottom: 0.6rem;
}

.order-hero__support { font-size: 0.9375rem; margin: 0; }

/* --- Information strip --- */
.info-strip {
  background: var(--green-darkest);
  color: var(--cream);
  border-bottom: 4px solid var(--tan);
}

.info-strip__list {
  list-style: none;
  /* margin-block only — a blanket `margin: 0` would cancel the
     `margin-inline: auto` this element inherits from `.container`. */
  margin-block: 0;
  padding-block: 1.1rem;
  display: grid;
  gap: 0.9rem clamp(1rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.info-strip__item { display: flex; flex-direction: column; gap: 0.15rem; }

.info-strip__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tan);
}

.info-strip__value {
  font-style: normal;
  font-size: 1rem;
  line-height: 1.45;
}

.info-strip__value .text-link { color: var(--cream); }
.info-strip__value .text-link:hover { color: var(--tan); }

/* --- Ordering section --- */
.ordering { padding-block: clamp(2rem, 5vw, 3.5rem); }

.ordering__intro {
  max-width: 46rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.ordering__lede { color: var(--ink-soft); margin: 0; }


/* =========================================================================
   15. ORDERCHOP EMBED WRAPPER
   Deliberately free of fixed heights, overflow clipping and transforms so
   the component can size and scroll itself.
   ========================================================================= */
.embed-frame {
  /* Transparent and borderless so the menu reads as part of the page.
     No explicit width: a block element already fills its container, and
     leaving width auto lets the negative margins below widen it on small
     screens instead of merely shifting it. */
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.embed-frame orderchop-store {
  display: block;
  width: 100%;
}

.embed-loading {
  margin: 0 0 1rem;
  padding: 1rem;
  text-align: center;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--cream);
  border: 1px dashed var(--tan);
  border-radius: var(--radius);
}

.embed-loading[hidden] { display: none; }

.embed-noscript {
  margin: 0;
  padding: 1.25rem;
  background: var(--cream);
  border: 2px solid var(--brand-red);
  border-radius: var(--radius);
  font-weight: 600;
}

/* --- Order help panel --- */
.order-help {
  padding-block: clamp(2rem, 5vw, 3.25rem);
  background: var(--white);
  border-top: 1px solid var(--rule);
}

.order-help__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--cream);
  background-image: var(--paper-texture);
  background-size: var(--paper-texture-size);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--brand-green);
  border-radius: var(--radius-lg);
}

.order-help__heading { font-size: 1.5rem; margin-bottom: 0.35rem; }
.order-help__body { color: var(--ink-soft); margin: 0; max-width: 52ch; }


/* =========================================================================
   16. FOOTER
   ========================================================================= */
.site-footer {
  background-color: var(--green-darkest);
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0 2px,
      transparent 2px 8px,
      rgba(0, 0, 0, 0.07) 8px 10px,
      transparent 10px 18px
    );
  color: var(--cream);
}

.site-footer .tricolor { margin-bottom: clamp(2rem, 5vw, 3rem); }

.site-footer__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.site-footer__brand { display: flex; flex-direction: column; gap: 0.9rem; }

.footer-plaque {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  padding: 0.4rem;
  background: var(--white);
  border: 2px solid var(--tan);
  border-radius: 50%;
}

.footer-plaque img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.site-footer__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}

.site-footer__heading {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tan);
  margin: 0 0 0.6rem;
}

.site-footer__address {
  font-style: normal;
  margin: 0 0 0.5rem;
  line-height: 1.6;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.site-footer__legal {
  border-top: 1px solid rgba(247, 240, 227, 0.18);
  padding-block: 1.25rem;
  font-size: 0.875rem;
  color: rgba(247, 240, 227, 0.85);
}

.site-footer__legal p { margin: 0; }


/* =========================================================================
   17. ANIMATION STATES
   ========================================================================= */
.reveal.is-revealable {
  opacity: 0;
  transform: translateY(14px);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}


/* =========================================================================
   18. RESPONSIVE MEDIA QUERIES
   ========================================================================= */

/* --- Mobile navigation panel (below the desktop breakpoint) --- */
@media (max-width: 899px) {
  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    background: var(--cream);
    background-image: var(--paper-texture);
    background-size: var(--paper-texture-size);
    border-bottom: 4px solid var(--brand-green);
    box-shadow: var(--shadow-md);
    padding: 0.75rem var(--gutter) 1.25rem;
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
  }

  .site-nav.is-open { display: block; }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    max-width: var(--container);
    margin-inline: auto;
  }

  .site-nav__link {
    min-height: 52px;
    padding-inline: 0.75rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
  }

  .site-nav__link[aria-current="page"] {
    border-bottom-color: var(--brand-green);
    border-bottom-width: 3px;
    background: rgba(0, 146, 71, 0.08);
  }

  .site-nav__cta { margin: 0.75rem 0 0; }
  .site-nav__cta .btn { width: 100%; min-height: 52px; font-size: 1.0625rem; }

  .site-header__inner { position: relative; }
}

/* --- Desktop navigation --- */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; }
}

/* --- Two-column layouts --- */
@media (min-width: 860px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; }
  .location__inner { grid-template-columns: 1.1fr 0.9fr; }
}

/* --- Ordering embed breakout ---------------------------------------------
   The menu is wide media, so it steps outside the text measure while the
   copy around it stays on the page grid.

   Every step is deliberately smaller than the slack available at its
   breakpoint, leaving room for a classic (non-overlay) scrollbar. At 1440px,
   for example, the slack per side is (1440 - 17 - 1160) / 2 ≈ 131px, well
   clear of the 80px taken here — so the breakout can never cause a
   horizontal scrollbar.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  /* Phones: reclaim the container gutter so the menu runs to within
     0.5rem of the viewport edge. */
  .embed-frame { margin-inline: calc(0.5rem - var(--gutter)); }
}

@media (min-width: 1320px) { .embed-frame { margin-inline: -2.5rem; } }
@media (min-width: 1440px) { .embed-frame { margin-inline: -5rem; } }
@media (min-width: 1620px) { .embed-frame { margin-inline: -8.75rem; } }

/* --- Very small screens --- */
@media (max-width: 400px) {
  .brand__tag { display: none; }
  .brand__plaque { width: 3.35rem; height: 3.35rem; }
  .brand__logo { width: 2.85rem; height: 2.85rem; }
  .nav-toggle__label { display: none; }
  .nav-toggle { padding-inline: 0.75rem; }
  .btn-row .btn { width: 100%; }
  .infobar { font-size: 0.875rem; }
}


/* =========================================================================
   19. REDUCED-MOTION RULES
   ========================================================================= */
@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;
    scroll-behavior: auto !important;
  }

  .reveal.is-revealable {
    opacity: 1;
    transform: none;
  }
}