/* Grandma's Secret — theme overrides (loaded after base.css). */

/* ---------------------------------------------------------------- header */

/* Subtle glass bar over the hero — solid burgundy on scroll. */
.site-header {
  background: var(--header-glass);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: var(--header-glass-border);
}

.site-header.is-scrolled,
.site-header.is-solid {
  background: rgba(69, 16, 30, 0.96);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(243, 237, 226, 0.16);
}

.logo__word {
  text-shadow: none;
}

.logo__word em {
  color: var(--fg-on-dark-2);
}

/* Brand mark — inline SVG uses currentColor from the logo link. */
.site-header .logo,
.site-footer .logo {
  color: var(--bone-50);
}

.logo__mark {
  display: block;
  width: auto;
  height: 42px;
  max-width: min(10.75rem, 44vw);
}

.site-footer .logo__mark {
  height: 38px;
}

/* Contact — burgundy form fields (template default is near-black). */
#contact .form {
  --surface-sunken: var(--ink-900);
}

#contact .field__input:focus,
#contact .field__textarea:focus {
  border-color: var(--bone-200);
  box-shadow: 0 0 0 3px rgba(243, 237, 226, 0.14);
}

.contact__status {
  margin-bottom: var(--space-md);
}

/* Breathing room between facts list and any actions below. */
.contact__facts {
  margin-bottom: var(--space-lg);
}

.form__footer {
  margin-top: var(--space-lg);
}

.nav__list a {
  color: var(--bone-50);
  font-weight: 600;
  text-shadow: none;
}

.nav__list a:hover,
.nav__list a[aria-current="page"],
.nav__list a.is-active {
  color: var(--white);
}

.header__actions .btn--ghost {
  color: var(--bone-50);
  border-color: rgba(243, 237, 226, 0.8);
  background: transparent;
  box-shadow: none;
}

.header__actions .btn--ghost:hover {
  background: rgba(243, 237, 226, 0.16);
  border-color: var(--bone-50);
  color: var(--white);
}

.site-header.is-scrolled .header__actions .btn--ghost,
.site-header.is-solid .header__actions .btn--ghost {
  background: transparent;
  box-shadow: none;
}

/* ------------------------------------------------------------------ hero */

/* Storefront sits right; keep the facade visible on wide screens. */
.hero .hero__media img {
  object-position: 68% 42%;
  filter: saturate(1.05) contrast(1.03);
}

/* Photography-forward scrims — heavier left anchor for headline contrast. */
.hero .hero__media::after {
  background:
    linear-gradient(
      to bottom,
      rgba(18, 5, 10, 0.62) 0%,
      transparent 20%
    ),
    linear-gradient(
      to top,
      var(--scrim-burgundy) 0%,
      rgba(69, 16, 30, 0.62) 24%,
      transparent 54%
    ),
    linear-gradient(
      to right,
      rgba(18, 5, 10, 0.9) 0%,
      rgba(18, 5, 10, 0.62) 38%,
      rgba(69, 16, 30, 0.28) 58%,
      transparent 72%
    );
}

/* Soft panel behind hero copy — readable without a full-width header bar. */
.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -1.5rem;
  right: 8%;
  top: -0.75rem;
  bottom: -1.25rem;
  background: radial-gradient(
    ellipse 88% 85% at 0% 42%,
    rgba(18, 5, 10, 0.82) 0%,
    rgba(69, 16, 30, 0.5) 52%,
    transparent 100%
  );
  pointer-events: none;
}

.hero__eyebrow {
  color: rgba(243, 237, 226, 0.9);
  text-shadow: 0 1px 14px rgba(18, 5, 10, 0.75);
}

.hero__title,
.hero__title-line {
  color: var(--white);
  text-shadow:
    0 2px 28px rgba(18, 5, 10, 0.75),
    0 1px 4px rgba(18, 5, 10, 0.55);
}

.hero__title-line--accent {
  color: var(--white);
}

.hero__lead {
  color: rgba(243, 237, 226, 0.96);
  text-shadow: 0 1px 18px rgba(18, 5, 10, 0.8);
}

.hero .hero__rail {
  background: var(--ink-900);
  border-top-color: rgba(243, 237, 226, 0.12);
}

/* Gold for wayfinding labels only — headline stays white so the CTA wins. */
.hero__eyebrow-dot,
.hero__rail-term {
  color: var(--brass);
}

.hero__rail-desc a:hover {
  border-bottom-color: var(--brass);
  color: var(--brass);
}

.nav__list a::after {
  background: var(--brass);
}

.hero__scroll-line {
  background: linear-gradient(to bottom, transparent, var(--brass));
}

/* Cream CTA — pops off the burgundy wash; burgundy-on-burgundy was too quiet. */
.hero .btn--primary {
  background: var(--bone-50);
  border-color: var(--bone-50);
  color: var(--ink-900);
  min-height: 56px;
  padding-inline: 2.1rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.25) inset,
    0 10px 32px rgba(69, 16, 30, 0.42);
}

.hero .btn--primary:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink-900);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.3) inset,
    0 14px 40px rgba(69, 16, 30, 0.5);
  transform: translateY(-3px);
}

.hero .btn--primary span[aria-hidden="true"] {
  display: inline-block;
  margin-left: 0.15em;
  transition: transform var(--dur) var(--ease);
}

.hero .btn--primary:hover span[aria-hidden="true"] {
  transform: translateX(4px);
}

/* Secondary action: cream outline, readable on the photo. */
.hero .btn--ghost {
  color: var(--bone-50);
  border-color: rgba(243, 237, 226, 0.65);
}

.hero .btn--ghost:hover {
  background: rgba(234, 224, 207, 0.14);
  border-color: var(--bone-100);
  color: var(--bone-50);
}

/* ---------------------------------------------------------------- marquee */

.marquee {
  background: var(--ink-700);
  border-block-color: rgba(69, 16, 30, 0.35);
}

@media (min-width: 1100px) {
  .hero .hero__media img {
    object-position: 72% 40%;
  }
}

@media (max-width: 960px) {
  .nav {
    background: rgba(69, 16, 30, 0.98);
    border-bottom-color: rgba(243, 237, 226, 0.14);
  }

  .nav__list a {
    color: var(--bone-50);
  }
}