/* ============================================================
   CUSTOM — Per-Store Overrides
   Keep this file under 30 lines. Only store-specific tweaks go here.
   Do NOT add layout, grid, or structural CSS — that belongs in style.css.
   Do NOT add theme design tokens — that belongs in theme.css.

   Examples of what belongs here:
   - A promotional banner color unique to this store
   - A section hidden for this location (display: none)
   - A logo size tweak specific to this store
   ============================================================ */

/* New Pizza Factory logo is near-square (1088x929); size by HEIGHT so it
   fits the fixed nav bar instead of overflowing. */
.logo__image {
  height: 96px;
  width: auto;
  max-height: 100px;
  padding: 3px;
  object-fit: contain;
}
@media (max-width: 768px) {
  /* Mobile nav bar is ~85px tall; the template forces the logo to 120px wide
     (~110px tall) which overflows the bar. Constrain by height so it fits. */
  .nav__header .logo__wrapper img.logo__image {
    width: auto;
    height: 56px;
    max-height: 58px;
    padding: 3px;
  }
  /* Hamburger icon: brand red, clearly visible on the white mobile bar. */
  .nav__menu__btn { color: var(--gs-red); }
}

/* Hero heading/body sit on a busy food photo with a light overlay — add a
   strong text-shadow so white text stays readable, and use gold (logo colour)
   for the accent word so it pops on the dark hero instead of dark-red. */
.gs-hero h1,
.gs-hero-text,
.gs-hero-badge span,
.gs-hero-stat-label {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.7);
}
.gs-hero h1 .accent {
  color: var(--gs-star-color);
}

/* Hero "Order Online" button sits on a busy food photo — add a solid
   shadow + subtle border so it separates clearly from the background. */
.gs-hero .gs-btn-primary {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  border-color: var(--gs-white);
}

/* Navbar "Order Now" button: red instead of the default green .btn. */
.nav__btn .btn,
.nav__btn-mobile a {
  background-color: var(--gs-red);
  border-color: var(--gs-red);
  color: #fff;
}
.nav__btn .btn:hover,
.nav__btn-mobile a:hover {
  background-color: var(--gs-red-dark);
  border-color: var(--gs-red-dark);
  color: #fff;
}