/* ============================================================
   CUSTOM — Per-store theme for Craze Pizza & Cake | Cravours By Craze
   Logo palette: plain WHITE navbar + logo surfaces, deep chocolate
   BROWN (#3B1717), golden OCHRE (#B58E3F) accents, and brown
   gradients on buttons and themed sections.
   Loaded LAST (after global.css, theme.css, style.css) so these
   token + selector overrides win. Re-skins the whole site by
   redefining the theme tokens; a few targeted rules add the
   gradients, fix off-palette borders, and colour the links.
   ============================================================ */

:root {
  /* ===== BACKGROUNDS — plain white where logo sits; warm tint elsewhere ===== */
  --gs-bg:            #ffffff;   /* page background (logo neutral) */
  --gs-bg-alt:        #f5f0e8;   /* alternating sections */
  --gs-cream:         #ffffff;   /* card / panel surfaces */

  /* ===== TEXT — deep chocolate brown on cream ===== */
  --gs-dark:          #3b1717;   /* headings — logo primary brown */
  --gs-text:          #5c4540;   /* body text — warm brown */
  --gs-text-light:    #8a7570;   /* muted / secondary */

  /* ===== PRIMARY — deep chocolate brown (nav, panels, headings accents) ===== */
  --gs-primary:       #3b1717;
  --gs-primary-dark:  #2e1212;
  --gs-primary-deep:  #1f0c0c;
  --gs-primary-light: rgba(59, 23, 23, 0.08);

  /* ===== ACCENT — golden ochre (logo gold) ===== */
  --gs-accent:        #b58e3f;
  --gs-accent-bright: #c9a55a;   /* brighter gold (on dark/brown surfaces) */
  --gs-accent-dark:   #96732e;   /* deep gold (text on light) */
  --gs-accent-light:  rgba(181, 142, 63, 0.15);

  /* ===== EMPHASIS — gold tones (replaces off-logo red) ===== */
  --gs-fire:          #b58e3f;
  --gs-fire-bright:   #c9a55a;

  /* ===== GRADIENTS — chocolate brown tones ===== */
  --gs-nav-gradient:        linear-gradient(100deg, #2e1212 0%, #3b1717 52%, #4a2820 100%);
  --gs-btn-gradient:        linear-gradient(135deg, #3b1717 0%, #4a2e22 45%, #5c3a28 100%);
  --gs-btn-gradient-hover:  linear-gradient(135deg, #2e1212 0%, #3b1717 42%, #4a2820 100%);

  /* ===== BORDERS ===== */
  --gs-white:         #ffffff;
  --gs-border:        rgba(59, 23, 23, 0.14);
  --gs-border-light:  rgba(59, 23, 23, 0.08);
  --gs-border-gold:   rgba(181, 142, 63, 0.42);

  /* ===== ON-DARK TEXT (nav, footer, brown feature panels) ===== */
  --gs-dark-text:       #f5f0e8;   /* light cream text on brown */
  --gs-dark-text-soft:  #d4c4b0;
  --gs-dark-heading:    #fdfbf7;
  --gs-dark-border:     rgba(201, 165, 90, 0.28);

  /* ===== SHADOWS — warm, soft for a light page ===== */
  --gs-shadow:       0 2px 6px rgba(59, 23, 23, 0.06), 0 14px 34px rgba(59, 23, 23, 0.10);
  --gs-shadow-hover: 0 4px 10px rgba(59, 23, 23, 0.08), 0 24px 54px rgba(59, 23, 23, 0.16);
  --gs-shadow-gold:  0 10px 30px rgba(181, 142, 63, 0.28);

  /* ===== HERO — brown-tinted overlay for legible light hero text ===== */
  --gs-hero-overlay: linear-gradient(
      180deg,
      rgba(59, 23, 23, 0.62) 0%,
      rgba(59, 23, 23, 0.44) 45%,
      rgba(59, 23, 23, 0.74) 100%
    );

  /* ===== NAVBAR — plain white (logo sits on white) ===== */
  --gs-nav-bg:        #ffffff;
  --gs-nav-open-bg:   #ffffff;

  /* ===== FOOTER ===== */
  --gs-footer-bg:     #2e1212;
  --gs-footer-bar-bg: #1f0c0c;
  --gs-footer-text:   #d4c4b0;

  /* ===== BRAND GLOW ===== */
  --gs-glow:      rgba(59, 23, 23, 0.30);
  --gs-glow-dark: rgba(59, 23, 23, 0.40);
  --gs-glow-soft: rgba(181, 142, 63, 0.22);

  /* ===== DECORATIVE ===== */
  --gs-star-color:       #b58e3f;
  --gs-faq-section-bg:   #f5f0e8;
  --gs-faq-container-bg: #ffffff;

  /* ===== BACKWARD COMPATIBILITY (legacy variable names) ===== */
  --primary-color:        #3b1717;
  --primary-color-light:  #ffffff;
  --primary-color-dark:   #2e1212;
  --text-dark:            #3b1717;
  --text-light:           #8a7570;
  --main-color:           #b58e3f;
  --bg-shade:             #f5f0e8;
}

/* ------------------------------------------------------------
   NAVBAR — plain white (logo designed for white background)
   ------------------------------------------------------------ */
.nav__container {
  background: #ffffff;
  border-bottom: 1px solid var(--gs-border);
}

.nav__links li a {
  color: var(--gs-primary);
}

.nav__links li a:hover {
  color: var(--gs-dark);
}

.nav__links li a.active {
  color: var(--gs-accent-dark);
}

.nav__menu__btn {
  color: var(--gs-primary);
}

/* Logo plaque — explicit white backing */
.logo__image,
.footer__logo__img {
  background: #ffffff;
}

@media (max-width: 992px) {
  .nav__links {
    border-bottom-color: var(--gs-border);
    box-shadow: 0 30px 50px rgba(59, 23, 23, 0.10);
  }

  .nav__links li a {
    border-bottom-color: var(--gs-border-light);
  }
}

/* ------------------------------------------------------------
   BUTTONS — brown gradient with cream text.
   Covers every solid button + the floating order button.
   ------------------------------------------------------------ */
.btn,
.gs-btn-primary,
.cs-button-solid,
.location-card-btn-primary,
.gs-floating-btn a,
.menu-btn-wrapper a {
  background: var(--gs-btn-gradient);
  border-color: transparent;
  color: #fdfbf7;
}
.btn:hover,
.gs-btn-primary:hover,
.cs-button-solid:hover,
.location-card-btn-primary:hover,
.gs-floating-btn a:hover,
.menu-btn-wrapper a:hover {
  background: var(--gs-btn-gradient-hover);
  border-color: transparent;
  color: #ffffff;
}

/* Order button in the nav → solid gold so it pops on the white bar */
.nav__btn .btn,
.nav__links .nav__btn-mobile .btn {
  background: var(--gs-accent);
  border-color: var(--gs-accent);
  color: #2e1212;
}
.nav__btn .btn:hover,
.nav__links .nav__btn-mobile .btn:hover {
  background: var(--gs-accent-bright);
  border-color: var(--gs-accent-bright);
  color: #2e1212;
}

/* Outline buttons: brown text + warm brown hairline (was off-palette navy) */
.gs-btn-outline,
.location-card-btn,
.btn-directions {
  color: var(--gs-primary);
  border-color: rgba(59, 23, 23, 0.38);
}

/* Gold-surface hover states (style.css hardcodes navy text) */
.cta__container .gs-btn-outline:hover,
.gs-dishes-nav:active,
.gs-contact-list a:hover i,
.social-icons a:hover {
  color: #3b1717;
}

/* ------------------------------------------------------------
   LINK TAGS — gold text with a gold underline; brighter on hover
   ------------------------------------------------------------ */
.gs-inline-link,
.link-primary-light {
  color: var(--gs-accent-dark);
  text-decoration-color: var(--gs-border-gold);
}
.gs-inline-link:hover,
.link-primary-light:hover {
  color: var(--gs-accent);
  text-decoration-color: var(--gs-accent-bright);
}

/* Menu item price → logo gold for emphasis */
.item-price { color: var(--gs-accent); }

/* Feature card icons — SVGs are white; need dark backing to show on light sections */
.gs-value-icon {
  background: var(--gs-primary);
  border-color: var(--gs-accent);
}

/* ------------------------------------------------------------
   SIGNATURE PICKS — portrait promo posters (our-food.html)
   Artwork carries its own headline text, so the frame stays
   quiet: 2:3 boxes, top-anchored crop so no wording is cut.
   ------------------------------------------------------------ */
.gs-poster-showcase {
  background: var(--gs-bg-alt);
  padding: clamp(3.5rem, 7vw, 6rem) 1.5rem;
}

.gs-poster-showcase-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

.gs-poster-showcase-inner h2 {
  font-size: clamp(1.95rem, 3.6vw, 2.75rem);
  margin: 0.4rem 0 0;
}

.gs-poster-showcase-inner .gs-divider {
  justify-content: center;
  margin-inline: auto;
}

.gs-poster-showcase-inner .gs-section-desc {
  max-width: 46rem;
  margin: 0 auto;
}

.gs-poster-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  margin: 2.8rem 0 2.6rem;
}

.gs-poster-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--gs-cream);
  box-shadow: var(--gs-shadow);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s ease;
}

.gs-poster-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--gs-border-gold);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.gs-poster-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--gs-shadow-hover);
}

.gs-poster-card:hover::after {
  opacity: 1;
}

.gs-poster-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 900px) {
  .gs-poster-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}

@media (max-width: 520px) {
  .gs-poster-grid {
    grid-template-columns: 1fr;
    max-width: 24rem;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-poster-card,
  .gs-poster-card::after {
    transition: none;
  }

  .gs-poster-card:hover {
    transform: none;
  }
}