/* ============================================================
   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
   ============================================================ */

/* --- Readability: use brand GOLD for accents on the dark hero ---
   The green primary is readable on white sections but too dark to read
   on the dark hero overlay, where the template intended a bright accent. */
.gs-hero h1 .accent,
.gs-hero-badge i,
.gs-hero .gs-divider-icon,
.gs-hero-stat-value {
  color: var(--gs-accent);
}

.gs-hero .gs-divider-line {
  background: var(--gs-accent);
}

/* Footer link hover: green is too dark on the near-black footer -> gold */
.footer__links a:hover {
  color: var(--gs-accent);
}

/* "Order Now" nav button: template used dark-brown text meant for a GOLD
   button; on our green button that text is invisible. Force white text. */
.nav__btn .btn,
.nav__btn-mobile a,
.nav__btn-mobile .btn {
  color: #fff;
}
.nav__btn .btn:hover {
  color: var(--primary-color-dark);
}

/* --- Logo: keep it a clean circular badge, sized to fit the header --- */
.logo__image {
  border-radius: 50%;
}
@media (max-width: 768px) {
  /* The template forced the logo to 120px wide; our square badge then
     overflowed the 85px mobile bar. Size by height and keep it circular. */
  .nav__header .logo__wrapper img {
    height: 58px;
    width: auto;
    border-radius: 50%;
    margin-top: 0;
  }
}

/* Mobile open menu is dark green: the active/hover link colour (green)
   is unreadable there. Use brand gold so it stands out and is legible. */
.nav__links.open a.active,
.nav__links.open a:hover {
  color: var(--gs-accent);
}
.nav__links.open a.active::after {
  background: var(--gs-accent);
}