/* ============================================================
   BABBO ITALIAN EATERY — babbo.css
   Single custom stylesheet for the redesigned site.
   
   Loads after Tailwind CDN. Use Tailwind utility classes
   for layout. Use these classes for brand-specific components.
   
   Last updated: September 1, 2026

   CHANGELOG:
     9/1/2026 — Mobile drawer now fits on one screen. The Order Online
                and OpenTable CTAs were being pushed off the top of the
                viewport because .nav-drawer centered content that was
                taller than the screen. Fixed by pinning the inner
                container to the top with auto margins and scaling
                padding / type / logo size to viewport height (dvh) so
                the full nav fits without scrolling. Tall viewports are
                visually unchanged. Also consolidated the duplicate
                .drawer-ctas rule (was defined twice, ~line 454 and
                ~line 922; the second silently killed width:100% and
                margin-bottom from the first).
   ============================================================ */

/* ─── CSS CUSTOM PROPERTIES ────────────────────────────────── */
:root {
  /* Brand colors */
  --green:        #53713d;
  --green-dark:   #3a5429;
  --green-light:  #e8f0e3;
  --red:          #d22228;
  --gray:         #636467;
  --dark:         #1f2937;
  --bg:           #f7f6f3;

  /* Fonts */
  --font-display: 'Raleway', Arial, sans-serif;
  --font-ui:      'Nunito Sans', Arial, sans-serif;
  --font-accent:  'IBM Plex Sans', Arial, sans-serif;

  /* Layout */
  --nav-height:         64px;
  --sticky-bottom-h:    56px;
  --max-width:          1200px;
  --gutter:             16px;
}

/* ─── BASE RESET ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--dark);
  background: #fff;
  margin: 0;
  padding: 0;
  /* Reserve space for sticky bottom nav on mobile */
  padding-bottom: var(--sticky-bottom-h);
}
@media (min-width: 768px) { body { padding-bottom: 0; } }

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

a { color: var(--green); text-decoration: none; transition: color .2s; }
a:hover { color: var(--green-dark); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 800;
  color: var(--dark);
  margin-top: 0;
  line-height: 1.2;
}

/* ─── LAYOUT HELPERS ────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: 32px var(--gutter);
}
@media (min-width: 768px) { .section { padding: 48px var(--gutter); } }

/* ─── TYPOGRAPHY ────────────────────────────────────────────── */

/* Display — Raleway 900, campaign headlines */
.text-display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.text-promo-sub {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
}

/* Section label */
.text-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
}

/* Hashtag — IBM Plex Sans Light */
.text-hashtag {
  font-family: var(--font-accent);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* Legal / fine print */
.text-legal {
  font-family: var(--font-accent);
  font-size: 12px;
  line-height: 1.6;
  color: var(--gray);
}

/* ─── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 14px;
  border-radius: 6px;
  padding: 11px 22px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s, color .2s, opacity .2s;
  white-space: nowrap;
  line-height: 1;
}
.btn:hover { text-decoration: none; }

/* Order Online — red, Raleway */
.btn-order {
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}
.btn-order:hover { background: #b81d22; color: #fff; }

/* Primary — green */
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); color: #fff; }

/* Outline */
.btn-secondary {
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
}
.btn-secondary:hover { background: var(--green); color: #fff; }

/* Ghost / text */
.btn-ghost {
  background: transparent;
  color: var(--green);
  border: none;
  padding-left: 0;
  padding-right: 0;
  font-weight: 700;
}
.btn-ghost:hover { color: var(--green-dark); }

/* Small variant */
.btn-sm { font-size: 13px; padding: 8px 16px; }

/* ─── FILTER PILLS ──────────────────────────────────────────── */
.filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 2px solid var(--green);
  border-radius: 20px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  background: transparent;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  text-decoration: none;
}
.filter-pill:hover,
.filter-pill.active {
  background: var(--green);
  color: #fff;
}

/* ─── BADGES ────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
}
.badge-new      { background: var(--red);          color: #fff; }
.badge-popular  { background: var(--green-light);  color: #3a5429; }
.badge-favorite { background: var(--green);        color: #fff; }
.badge-gf       { background: #f5f2e8;             color: #6b6240; }
.badge-veg      { background: #eaf4e0;             color: #3a6627; }
.badge-gfo      { background: #e8f4f8;             color: #2a6b7c; border: 1px solid #a8d4e0; }

/* ─── ANNOUNCEMENT BANNER ───────────────────────────────────── */
.announce-banner {
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 9px 48px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  position: relative;
  z-index: 1100;
  line-height: 1.4;
  display: none; /* shown via PHP when message set */
}
.announce-banner.active { display: block; }

.announce-link { color: #fff; text-decoration: underline; margin-left: 8px; font-weight: 800; }
.announce-link:hover { opacity: .85; color: #fff; }

.announce-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: .8;
  padding: 4px 8px;
  line-height: 1;
}
.announce-close:hover { opacity: 1; }

/* ─── HEADER / NAV ──────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Mobile nav bar */
.nav-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  gap: 12px;
}
.nav-desktop { display: none; }

/* Hamburger */
.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: all .2s;
}
.nav-logo-mobile { display: flex; align-items: center; }
.nav-order-btn-mobile { font-size: 13px !important; padding: 8px 14px !important; flex-shrink: 0; }

/* Desktop nav */
@media (min-width: 768px) {
  .nav-mobile  { display: none; }
  .nav-desktop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
  }
  .nav-links-right { justify-content: flex-end; }

  .nav-link {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    color: var(--dark);
    padding: 8px 10px;
    border-radius: 4px;
    white-space: nowrap;
    transition: color .2s;
    text-decoration: none;
    display: block;
  }
  .nav-link:hover,
  .nav-link.active { color: var(--green); }

  .nav-link-order {
    color: var(--red) !important;
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    font-size: 13px !important;
  }

  .nav-logo-desktop {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0 12px;
  }

  /* Catering "by Nonno" sub-label */
  .nav-sub {
    font-size: 12px;
    font-weight: 400;
    display: block;
    line-height: 1;
    opacity: .7;
  }

  /* Dropdown */
  .nav-dropdown { position: relative; }
  .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    min-width: 190px;
    padding: 6px 0;
    list-style: none;
    margin: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    z-index: 200;
  }
  .nav-dropdown:hover .dropdown-menu { display: block; }
  .dropdown-menu a {
    display: block;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
    transition: background .15s;
  }
  .dropdown-menu a:hover {
    background: var(--green-light);
    color: var(--green);
  }
}

/* Racing stripes */
.racing-stripes { display: none; }
@media (min-width: 768px) {
  .racing-stripes { display: flex; height: 8px; }
  .stripe-red   { flex: 1; background: var(--red); }
  .stripe-green { flex: 1; background: var(--green); }
}

/* ─── OFFCANVAS DRAWER ──────────────────────────────────────── */
/* ─── MOBILE NAV — full-screen overlay ──────────────────────── */
.nav-drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  /* 9/1: dvh accounts for mobile browser chrome. vh line is the
     fallback for any engine without dvh support. */
  height: 100vh;
  height: 100dvh;
  background: rgba(20, 20, 20, 0.96);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 9/1: was `center`. Centering a flex child taller than the
     container pushes its top (the CTAs) off-screen into unreachable
     overflow. flex-start + `margin: auto 0` on .drawer-inner gives us
     centering when it fits and a top-pinned, scrollable drawer when
     it doesn't. */
  justify-content: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  overflow-y: auto;
}
.nav-drawer.open {
  opacity: 1;
  pointer-events: all;
}

/* Close button — top right corner */
.drawer-close {
  position: absolute;
  top: clamp(6px, 1.6vh, 20px);
  top: clamp(6px, 1.6dvh, 20px);
  right: clamp(10px, 3vw, 20px);
  background: none;
  border: none;
  font-size: clamp(26px, 4.4vh, 36px);
  font-size: clamp(26px, 4.4dvh, 36px);
  cursor: pointer;
  color: #fff;
  line-height: 1;
  padding: clamp(4px, .8vh, 8px);
  padding: clamp(4px, .8dvh, 8px);
  opacity: .8;
  transition: opacity .2s;
}
.drawer-close:hover { opacity: 1; }

/* Inner container — centers everything */
.drawer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 400px;
  /* 9/1: padding scales with viewport height so the CTAs + all 13
     links fit on one screen. Tall viewports still get 80px/40px. */
  padding: clamp(42px, 7.5vh, 80px) 24px clamp(12px, 3vh, 40px);
  padding: clamp(42px, 7.5dvh, 80px) 24px clamp(12px, 3dvh, 40px);
  margin: auto 0;   /* centers when it fits, pins to top when it doesn't */
}

/* CTA buttons at top.
   9/1: consolidated here — this rule was previously duplicated further
   down the file, and the later copy silently dropped width:100% and
   margin-bottom while adding a light-gray border that was invisible on
   the dark drawer. Single source of truth now. */
.drawer-ctas {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 0;
  border-bottom: 0;
  margin-bottom: clamp(12px, 2.4vh, 32px);
  margin-bottom: clamp(12px, 2.4dvh, 32px);
}

/* Nav links — large, centered, white, uppercase */
.drawer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}
.drawer-links li a {
  display: block;
  padding: clamp(4px, .9vh, 14px) 0;
  padding: clamp(4px, .9dvh, 14px) 0;
  font-family: var(--font-display);
  /* 6/2 per Charlotte: long labels ("Printable Menu (PDF)",
     "Baseball for Babbo") were wrapping to two lines. Cap the max
     size at 26px and prevent wrap so every label sits on one line.
     The clamp still scales down on narrow viewports. */
  /* 9/1: size is now the smaller of a width-based and a height-based
     value, so long labels never wrap AND the list never outgrows the
     screen. Floor raised from 20px only on very short viewports. */
  font-size: clamp(20px, 5.5vw, 26px);
  font-size: clamp(16px, min(5.5vw, 2.7dvh), 26px);
  line-height: 1.15;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  transition: opacity .2s;
}
.drawer-links li a:hover { opacity: .7; }

/* 6/2 per Amy & Steve: Baseball for Babbo gets a logo-based treatment
   in the drawer to stand out from the other text links. The drawer
   variant of the logo (post-dog-logo-drawer.svg) has the wordmark
   recolored to white so it reads cleanly on the dark drawer background.
   No background card needed — the logo speaks for itself. */
.drawer-link-bfb {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 1.4vh, 18px) 0 !important;
  padding: clamp(8px, 1.4dvh, 18px) 0 !important;
  margin: clamp(2px, .5dvh, 4px) auto;
  transition: opacity .2s, transform .15s;
}
.drawer-link-bfb:hover {
  opacity: 1 !important;
  transform: translateY(-1px);
}
.drawer-link-bfb img {
  display: block;
  width: 240px;
  width: clamp(150px, 52vw, 240px);
  max-width: 100%;
  height: auto;
  /* 9/1: cap the height on short viewports so the logo doesn't eat
     the room the nav links need. */
  max-height: clamp(36px, 6.8dvh, 90px);
  object-fit: contain;
}

.drawer-divider {
  height: 1px;
  background: rgba(255,255,255,.15);
  margin: clamp(2px, .6vh, 8px) auto;
  margin: clamp(2px, .6dvh, 8px) auto;
  width: 60px;
}

/* nav-overlay no longer needed — drawer IS the overlay */
.nav-overlay { display: none !important; }

/* ─── STICKY BOTTOM NAV (mobile only) ──────────────────────── */
.sticky-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  transform: translateY(100%);
  transition: transform .3s ease;
}
.sticky-bottom-nav.visible { transform: translateY(0); }
@media (min-width: 768px) { .sticky-bottom-nav { display: none; } }

.sticky-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
}
.sticky-btn:active { opacity: .85; }
.sticky-btn-order {
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sticky-btn-secondary {
  background: var(--green);
  color: #fff;
  border: 2px solid var(--green);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ─── LOCATION BAR ──────────────────────────────────────────── */
.location-bar {
  background: var(--bg);
  padding: 9px var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
}
.location-bar .loc-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray);
}
.location-bar .loc-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
}
.location-bar .loc-change {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}

/* ─── PROMO HERO ────────────────────────────────────────────── */
.promo-hero {
  position: relative;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media (min-width: 768px) { .promo-hero { min-height: 560px; } }

.promo-hero-content {
  padding: 24px var(--gutter) 32px;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
}

.promo-hero-day {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(14px, 4vw, 18px);
  text-transform: uppercase;
  color: #f5c842;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.promo-hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 10vw, 64px);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: #fff;
  margin-bottom: 8px;
}

.promo-hero-sub {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(16px, 4vw, 22px);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
}

/* ─── FOOD CARDS (horizontal scroll) ───────────────────────── */
.food-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.food-scroll::-webkit-scrollbar { display: none; }

.food-card {
  flex-shrink: 0;
  width: 140px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
}
.food-card-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  background: var(--bg);
}
.food-card-body {
  padding: 8px 10px;
}
.food-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
}
.food-card-action {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  margin-top: 4px;
  display: block;
}

/* ─── MENU ITEM CARDS ───────────────────────────────────────── */
.menu-card {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
  align-items: flex-start;
}
.menu-card-img {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg);
}
.menu-card-body { flex: 1; }
.menu-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}
.menu-card-desc {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.5;
}
.menu-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Wishlist heart */
.wishlist-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  padding: 4px;
  color: #ccc;
  transition: color .2s, transform .15s;
  line-height: 1;
}
.wishlist-btn.active,
.wishlist-btn:hover { color: var(--red); transform: scale(1.1); }

/* ─── SECTION HEADERS ───────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.section-title {
  font-family: var(--font-ui);
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--dark);
  margin: 0;
}
.section-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
}

/* ─── LOCATION CARD ─────────────────────────────────────────── */
.location-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  margin-bottom: 12px;
}
.location-card-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--green);
  margin-bottom: 4px;
}
.location-card-address {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.5;
  margin-bottom: 12px;
}
.location-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── FOOTER ────────────────────────────────────────────────── */
.site-footer {
  background: #1f2937;
  color: rgba(255,255,255,.8);
  padding: 48px var(--gutter) 32px;
}

.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 2fr 1fr; }
}

.footer-heading {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
}

.footer-col p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
  margin: 0 0 8px;
}
.footer-col a { color: rgba(255,255,255,.8); }
.footer-col a:hover { color: var(--green-light); }

.footer-locations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-locations li {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  line-height: 1.4;
}
.footer-locations .loc-name { color: rgba(255,255,255,.9); font-weight: 600; }
.footer-locations .loc-cross { color: rgba(255,255,255,.55); }

.footer-hashtags {
  max-width: var(--max-width);
  margin: 40px auto 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-hashtags .text-hashtag { color: rgba(255,255,255,.4); }

.footer-copyright {
  max-width: var(--max-width);
  margin: 24px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.footer-copyright p {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin: 0 0 6px;
}
.footer-copyright a { color: rgba(255,255,255,.55); }
.footer-copyright a:hover { color: var(--green-light); }

/* ─── FORMS ─────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}
.form-control {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: 15px;
  border: 1.5px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  color: var(--dark);
  transition: border-color .2s;
  appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--green);
}
select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23636467' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* ─── UTILITIES ─────────────────────────────────────────────── */
.text-green      { color: var(--green); }
.text-red        { color: var(--red); }
.text-gray       { color: var(--gray); }
.text-dark       { color: var(--dark); }
.bg-green        { background: var(--green); }
.bg-green-light  { background: var(--green-light); }
.bg-red          { background: var(--red); }
.bg-site         { background: var(--bg); }
.font-display    { font-family: var(--font-display); }
.font-accent     { font-family: var(--font-accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── HEADER DIVIDER (mobile only) ──────────────────────────── */
.header-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 0;
}
@media (min-width: 768px) {
  .header-divider { display: none; }
}

/* ─── DRAWER CTAs (hamburger nav) ─────────────────────────────
   9/1: the duplicate .drawer-ctas rule that lived here has been
   removed — it was overriding the canonical rule above (~line 454)
   and stripping width:100% / margin-bottom. Button styles remain. */
.drawer-cta-order,
.drawer-cta-reserve {
  flex: 1;
  padding: clamp(9px, 1.6vh, 14px) 10px;
  padding: clamp(9px, 1.6dvh, 14px) 10px;
  border-radius: 0;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(13px, 2vh, 15px);
  font-size: clamp(13px, 2dvh, 15px);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity .2s;
}
.drawer-cta-order   { background: var(--green); color: #fff; }
.drawer-cta-reserve { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6); }
.drawer-cta-order:hover,
.drawer-cta-reserve:hover { opacity: .8; }

#userwayAccessibilityIcon {
  bottom: 45px !important;
}

/* ─── USERWAY — hide floating icon, trigger via footer link ──── */
#userwayAccessibilityIcon { display: none !important; }
/* ============================================================
   BABBO ITALIAN EATERY — Accessibility additions
   Append to the bottom of css/babbo.css.
   
   Adds:
   1. Skip link (visible on keyboard focus only)
   2. Site-wide focus ring (replaces stripped browser default)
   3. Keyboard-only focus styles (mouse users won't see rings)
   4. Form-control focus ring (replaces removed outline)
   5. Reduced-motion support (skeleton loaders, smooth scroll)
   ============================================================ */

/* ─── 1. SKIP LINK ──────────────────────────────────────────
   Visually hidden using the standard "clip" technique that
   keeps the element focusable and reachable. When focused via
   Tab, it expands to a visible green pill at top-left. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  background: var(--green);
  color: #fff !important;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  z-index: 10000;
}
.skip-link:focus,
.skip-link:focus-visible {
  width: auto;
  height: auto;
  padding: 12px 20px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border-radius: 0 0 4px 0;
  outline: 3px solid #fff;
  outline-offset: -6px;
}

/* ─── 2. SITE-WIDE FOCUS RING ───────────────────────────────
   :focus-visible only fires for keyboard users (Tab key),
   not mouse clicks. So mouse users keep their clean look,
   keyboard users get a clear ring. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 2px;
}

/* On dark backgrounds (footer, sticky-bottom-nav) — flip to white */
.site-footer a:focus-visible,
.sticky-bottom-nav a:focus-visible,
.drawer-cta-order:focus-visible,
.drawer-cta-reserve:focus-visible {
  outline-color: #fff;
}

/* Order Online CTA in nav has green background — flip to off-white */
.nav-cta-order:focus-visible {
  outline-color: var(--bg);
}

/* ─── 3. FORM CONTROL FOCUS RING ────────────────────────────
   Replace the removed outline with a visible ring.
   The existing border-color change stays for visual continuity. */
.form-control:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 1px;
  border-color: var(--green);
}

/* ─── 4. MAIN ELEMENT — focusable for skip link target ──────
   Adding tabindex="-1" via JS at runtime (see footer-scripts.inc).
   When skip link fires, main receives focus. Don't show ring on
   the main element itself — it's a programmatic focus, not a
   tab-stop, so :focus-visible won't fire here anyway. */
main:focus {
  outline: none;
}

/* ─── 5. REDUCED MOTION ─────────────────────────────────────
   Respects user OS-level "reduce motion" preference.
   Disables: skeleton shimmer, smooth scroll, transitions.
   Keeps: opacity changes (still useful, not vestibular-triggering). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LOCATION PICKER (inc/location-picker.inc)
   "Current location + change it" control. Added 5/27 to fix the
   IP-geo mis-location problem (Amy, 5/18 mgmt presentation).
   ═══════════════════════════════════════════════════════════════ */
.babbo-locpick {
  position: relative;
  font-family: var(--font-ui, 'Nunito Sans', sans-serif);
  max-width: 100%;
}
.babbo-locpick-current {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.babbo-locpick-pin {
  color: var(--red, #d22228);
  flex-shrink: 0;
}
.babbo-locpick-label {
  font-size: 15px;
  color: var(--dark, #1f2937);
}
.babbo-locpick-how {
  color: #6b7280;
}
.babbo-locpick-name {
  font-weight: 800;
  color: var(--dark, #1f2937);
}
.babbo-locpick-toggle {
  background: none;
  border: none;
  color: var(--green, #53713d);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 2px 4px;
}
.babbo-locpick-toggle:hover { color: var(--green-dark, #3a5429); }

/* Dropdown menu */
.babbo-locpick-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  padding: 14px;
  min-width: 280px;
  max-width: 360px;
}
.babbo-locpick-menu-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin: 0 0 10px;
}
.babbo-locpick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.babbo-locpick-option {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .12s;
}
.babbo-locpick-option:hover { background: var(--green-light, #e8f0e3); }
.babbo-locpick-option.is-active {
  background: var(--green-light, #e8f0e3);
  outline: 1px solid var(--green, #53713d);
}
.babbo-locpick-option-name {
  display: block;
  font-weight: 800;
  font-size: 15px;
  color: var(--dark, #1f2937);
}
.babbo-locpick-option.is-active .babbo-locpick-option-name {
  color: var(--green-dark, #3a5429);
}
.babbo-locpick-option-addr {
  display: block;
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
}
.babbo-locpick-reset {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
  font-size: 13px;
  color: var(--green, #53713d);
  text-decoration: none;
  font-weight: 700;
}
.babbo-locpick-reset:hover { text-decoration: underline; }

/* Picker spacing inside the nearest-card (locations page) */
.nearest-card-picker {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* ═══════════════════════════════════════════════════════════════
   LOCATION PROMPT MODAL (inc/location-prompt.inc + js/location-prompt.js)
   v2 added 5/27 — replaces IP-based auto-detect entirely.
   Per Steve: "Airproof and bulletproof for the unwashed masses."
   ═══════════════════════════════════════════════════════════════ */
.babbo-loc-modal {
  position: fixed;
  inset: 0;
  z-index: 10500;          /* above sticky nav + most things */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: var(--font-ui, 'Nunito Sans', sans-serif);
}
.babbo-loc-modal.open { display: flex; }

.babbo-loc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}

.babbo-loc-modal-panel {
  position: relative;
  background: #fff;
  border-radius: 14px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px 24px 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
@media (min-width: 768px) {
  .babbo-loc-modal-panel { padding: 40px 36px 32px; }
}

.babbo-loc-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  padding: 8px 12px;
}
.babbo-loc-modal-close:hover { color: var(--dark, #1f2937); }

.babbo-loc-modal-title {
  font-family: var(--font-display, 'Raleway', sans-serif);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--dark, #1f2937);
  text-align: center;
}
@media (min-width: 768px) {
  .babbo-loc-modal-title { font-size: 30px; }
}

.babbo-loc-modal-lede {
  color: #4b5563;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 22px;
  text-align: center;
}

.babbo-loc-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
@media (min-width: 480px) {
  .babbo-loc-modal-actions {
    flex-direction: row;
  }
  .babbo-loc-modal-actions .babbo-loc-btn { flex: 1; }
}

.babbo-loc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 8px;
  font-family: var(--font-ui, 'Nunito Sans', sans-serif);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none;
}
.babbo-loc-btn-primary {
  background: var(--green, #53713d);
  color: #fff;
  border-color: var(--green, #53713d);
}
.babbo-loc-btn-primary:hover {
  background: var(--green-dark, #3a5429);
  border-color: var(--green-dark, #3a5429);
}
.babbo-loc-btn-ghost {
  background: #fff;
  color: var(--dark, #1f2937);
  border-color: #d1d5db;
}
.babbo-loc-btn-ghost:hover {
  border-color: var(--dark, #1f2937);
  background: #f9fafb;
}

.babbo-loc-modal-note {
  font-size: 13px;
  color: #6b7280;
  text-align: center;
  margin: 0;
}

/* ── List step (the 7 stores) ───────────────────────────────────── */
.babbo-loc-modal-back {
  background: none;
  border: none;
  color: var(--green, #53713d);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  margin: 0 0 6px -8px;
}
.babbo-loc-modal-back:hover { text-decoration: underline; }

.babbo-loc-modal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.babbo-loc-modal-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  font-family: var(--font-ui, 'Nunito Sans', sans-serif);
}
.babbo-loc-modal-option:hover {
  background: var(--green-light, #e8f0e3);
  border-color: var(--green, #53713d);
}
.babbo-loc-modal-option-name {
  display: block;
  font-weight: 800;
  font-size: 16px;
  color: var(--dark, #1f2937);
  margin-bottom: 2px;
}
.babbo-loc-modal-option-addr {
  display: block;
  font-size: 13px;
  color: #6b7280;
}
.babbo-loc-modal-option-dist {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--green-dark, #3a5429);
  background: var(--green-light, #e8f0e3);
  padding: 2px 8px;
  border-radius: 12px;
}

/* ── Locating spinner ──────────────────────────────────────────── */
.babbo-loc-modal-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: var(--green, #53713d);
  border-radius: 50%;
  animation: babbo-loc-spin 0.8s linear infinite;
  margin: 0 auto 20px;
}
@keyframes babbo-loc-spin {
  to { transform: rotate(360deg); }
}

/* ── Confirmed checkmark ───────────────────────────────────────── */
.babbo-loc-modal-checkmark {
  width: 64px;
  height: 64px;
  background: var(--green-light, #e8f0e3);
  color: var(--green, #53713d);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

/* "Pick Your Babbo" prompt panel — shown on locations.php when no
   location has been picked yet. Visually mirrors the .nearest-card
   so the page layout stays consistent in both states. */
.nearest-card-prompt {
  background: var(--green-light, #e8f0e3);
  border: 2px dashed var(--green, #53713d);
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
  margin-bottom: 36px;
}
@media (min-width: 768px) {
  .nearest-card-prompt {
    padding: 48px 32px;
    margin-bottom: 48px;
  }
}
.nearest-card-prompt-eyebrow {
  font-family: var(--font-ui, 'Nunito Sans', sans-serif);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-dark, #3a5429);
  margin: 0 0 8px;
}
.nearest-card-prompt-title {
  font-family: var(--font-display, 'Raleway', sans-serif);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.1;
  color: var(--dark, #1f2937);
  margin: 0 0 12px;
}
@media (min-width: 768px) {
  .nearest-card-prompt-title { font-size: 36px; }
}
.nearest-card-prompt-lede {
  font-size: 16px;
  color: #4b5563;
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto 20px;
}

/* "Choose a different location" link inside the picked-state card */
.nearest-card-change-link {
  font-size: 13px;
  color: var(--green, #53713d);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}
.nearest-card-change-link:hover { color: var(--green-dark, #3a5429); }

/* ─── Homepage location prompt ──────────────────────────────────
   Replaces the location bar when no Babbo has been picked. Tap-to-
   open. Visually consistent with .home-location-bar so the layout
   doesn't jolt when the visitor sets a location.  */
.home-location-prompt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin: 0 16px 16px;
  background: var(--green-light, #e8f0e3);
  border: 2px dashed var(--green, #53713d);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-ui, 'Nunito Sans', sans-serif);
  text-align: left;
  transition: background .15s, transform .1s;
}
.home-location-prompt:hover {
  background: #dde9d4;
}
.home-location-prompt:active {
  transform: scale(0.99);
}
.home-location-prompt:focus-visible {
  outline: 3px solid var(--green, #53713d);
  outline-offset: 2px;
}

.home-location-prompt-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green, #53713d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.home-location-prompt-text {
  flex: 1;
  min-width: 0;
}
.home-location-prompt-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-dark, #3a5429);
  margin-bottom: 2px;
}
.home-location-prompt-title {
  font-weight: 800;
  font-size: 16px;
  color: var(--dark, #1f2937);
  line-height: 1.2;
}

.home-location-prompt-cta {
  flex-shrink: 0;
  font-weight: 800;
  font-size: 14px;
  color: var(--green-dark, #3a5429);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .home-location-prompt {
    margin: 0 24px 24px;
    padding: 20px 24px;
    gap: 18px;
  }
  .home-location-prompt-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  .home-location-prompt-title { font-size: 18px; }
}
@media (min-width: 1024px) {
  .home-location-prompt {
    max-width: 1200px;
    margin: 0 auto 32px;
  }
}