/* ============================================================
   CUSTOM — Per-store overrides for Template AR
   Add store-specific tweaks here. Loaded last so it wins
   over theme.css and style.css.
   e.g. keep a full-colour logo on the dark header:
   .brand img, .foot-brand img { filter: none; }
   ============================================================ */

/* ------------------------------------------------------------
   MAP BOX — Google Maps iframe (left) + address/contact (right)
   Shared by index, city page, tags/ landing, dish and place pages.
   ------------------------------------------------------------ */
.map-box {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
}
.map-box__map {
  position: relative;
  min-height: 22rem;
}
.map-box__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map-box__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.map-box__info h3 {
  margin: 0;
}
.map-box__info address {
  font-style: normal;
  line-height: 1.6;
}
.map-box__info address a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-underline-offset: 0.2em;
}
.map-box__info address strong {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 0.15rem;
}
.map-box__hours {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.7;
}
.map-box__actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: flex-end;
  align-self: flex-end;
}
@media (max-width: 47.9375rem) {
  .map-box {
    grid-template-columns: minmax(0, 1fr);
  }
  .map-box__map {
    min-height: 16rem;
  }
  .map-box__actions {
    justify-content: flex-start;
    align-self: stretch;
  }
}

/* ------------------------------------------------------------
   BRAND LOGO — Harvest Garden's mark has its own lime field and
   red lettering, so keep it full colour (the template recolours
   logos to cream on dark bands) and size it by height.
   ------------------------------------------------------------ */
.brand img,
.foot-brand img {
  filter: none;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   NAV BAR — the header takes the lime-green field from the logo
   in every state (top of page, sticky bar, mobile), so the bar and
   the mark read as one block. Foreground flips to ink (10.3:1 on
   the lime) with the logo red as the accent; the CTA becomes a
   solid red fill, since the template's cream outline button all
   but vanishes on lime.
   ------------------------------------------------------------ */
:root {
  --nav-lime: #a9ce4f;
}
.site-header,
.site-header.is-fixed,
.site-header.is-fixed.is-shown {
  --cream-line: color-mix(in srgb, var(--ink) 15%, transparent);
  background: var(--nav-lime);
  color: var(--ink);
}
.site-header.is-fixed,
.site-header.is-fixed.is-shown {
  box-shadow: 0 10px 30px rgba(63, 90, 28, 0.25);
}
.site-header .site-nav a {
  color: var(--ink);
}
.site-header .site-nav a:hover,
.site-header .site-nav a.active {
  color: var(--brand);
}
.site-header .site-nav a::before {
  background: var(--brand);
}
.site-header .header-cta__order {
  --btn-c: #ffffff;
  --btn-bd: var(--brand);
  background: var(--brand);
}
/* the template's offset "ghost" frame reads as a black rectangle behind the
   red fill on lime — drop it for this button only */
.site-header .header-cta__order::before {
  display: none;
}
.site-header .header-cta__order:hover {
  --btn-bd: var(--ink);
  background: var(--ink);
}

/* ------------------------------------------------------------
   LIGHT BANDS — the template's near-black (.band-dark) and deep
   olive (.band-olive) section backgrounds become creamy white.
   The band's "light-on-dark" variables are remapped to ink tones
   so every component inside flips with them; the few hard-coded
   #fff rules the template scopes to these bands are overridden
   below. Photo overlays and the olive hero card stay dark.
   ------------------------------------------------------------ */
:root {
  --cream-band: #fbf7ec;
}
.band-dark,
.band-olive {
  --cream-75: var(--ink-75);
  --cream-55: var(--ink-55);
  --cream-line: var(--line);
  --cream-30: color-mix(in srgb, var(--ink) 20%, transparent);
  --cream-text: var(--olive);
  background: var(--cream-band);
  color: var(--ink-75);
}

/* dark islands inside a band keep the original cream-on-dark values */
.band-dark :is(.hero-card__panel, .service-card__overlay, .link-card:hover),
.band-olive :is(.hero-card__panel, .service-card__overlay, .link-card:hover) {
  --cream-75: color-mix(in srgb, #ffffff 75%, transparent);
  --cream-55: color-mix(in srgb, #ffffff 55%, transparent);
  --cream-line: color-mix(in srgb, #ffffff 15%, transparent);
  --cream-text: var(--brand-3);
  --cream-30: color-mix(in srgb, var(--brand-3) 30%, transparent);
}

/* text the template forces to white on these bands (plain selectors so each
   keeps the specificity of the template rule it replaces) */
.band-dark :is(h1, h2, h3, h4, h5, .display),
.band-olive :is(h1, h2, h3, h4, h5, .display),
.band-dark strong,
.band-olive strong,
.band-dark .lede a,
.band-olive .lede a,
.band-dark .link-arrow,
.band-olive .link-arrow,
.band-dark .arrow-btn,
.band-olive .arrow-btn,
.band-dark .chip,
.band-olive .chip,
.band-dark .link-card,
.band-olive .link-card,
.band-dark .counter-block__num,
.band-olive .counter-block__num,
.band-dark .stat__num,
.band-olive .stat__num,
.band-dark .q-by strong,
.band-olive .q-by strong,
.band-dark .quote-card blockquote,
.band-olive .quote-card blockquote,
.band-dark .service-card__name,
.band-dark .qa summary,
.band-dark .qa-body a,
.band-dark .label-grid > div,
.band-dark .dish-meta__no,
.band-olive .dish-meta__no,
.band-dark .dish-card__no,
.band-olive .dish-card__no,
.band-dark .page-title__crumb a:hover,
.band-dark .marquee--text .marquee__item:nth-child(odd),
.band-olive .marquee--text .marquee__item:nth-child(odd),
.band-dark .hero-home__meta a:hover {
  color: var(--ink);
}
.band-olive h2 em {
  color: var(--gold);
}
/* labels that are gold in the template (the generic strong rule above
   would otherwise flatten them to ink) */
.band-dark .hero-home__meta strong,
.band-dark .label-grid strong {
  color: var(--gold);
}
.band-dark .page-title__crumb,
.band-olive .page-title__crumb {
  text-shadow: none;
}
.band-dark .arrow-btn:hover,
.band-olive .arrow-btn:hover,
.band-dark .link-card:hover,
.band-olive .link-card:hover {
  color: #fff;
}
/* dark islands keep white type */
.band-dark .hero-card__panel strong,
.band-dark .hero-card__tel,
.band-dark .service-card__overlay h4,
.band-olive .service-card__overlay h4 {
  color: #fff;
}
.band-dark .hero-card__tel:hover {
  color: var(--brand-3);
}

/* outline buttons: the template's light-on-dark variant becomes the ink one */
.band-dark .btn:not(.btn--fill):not(.btn--dark),
.band-olive .btn:not(.btn--fill):not(.btn--dark),
.band-dark .btn-line,
.band-olive .btn-line {
  --btn-c: var(--ink);
  --btn-bd: var(--olive);
  --btn-ghost: var(--olive-30);
}

/* stacked photo borders and review-card hover match the new ground */
.band-dark .split__media--stack .frame + .frame,
.band-olive .split__media--stack .frame + .frame {
  border-color: var(--cream-band);
}
.band-dark .quote-card:hover,
.band-olive .quote-card:hover {
  background: var(--gold-tint);
}

/* outline buttons site-wide fill with the logo's deep green on hover
   (the header CTA keeps its red → ink hover, and the solid .btn--fill
   keeps its own green → red swap) */
.btn:not(.btn--fill):not(.header-cta__order):hover,
.btn-line:hover {
  --btn-c: #ffffff;
  --btn-bd: var(--olive);
  background: var(--olive);
}