/* ============================================================
   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: March 2026
   ============================================================ */

/* ─── 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%;
  height: 100%;
  background: rgba(20, 20, 20, 0.96);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  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: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 36px;
  cursor: pointer;
  color: #fff;
  line-height: 1;
  padding: 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;
  padding: 80px 24px 40px;
}

/* CTA buttons at top */
.drawer-ctas {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 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: 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. */
  font-size: clamp(20px, 5.5vw, 26px);
  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: 18px 0 !important;
  margin: 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;
  max-width: 100%;
  height: auto;
}

.drawer-divider {
  height: 1px;
  background: rgba(255,255,255,.15);
  margin: 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) ───────────────────────────── */
.drawer-ctas {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}
.drawer-cta-order,
.drawer-cta-reserve {
  flex: 1;
  padding: 14px 10px;
  border-radius: 0;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 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;
  }
}