/* ============================================================
   new-version.css
   Page-level overrides that AREN'T design-system rules.
   Button and pricing styling live in design-system.css — don't
   add them here. This file only fixes legacy page-specific CSS
   that conflicts with the system (e.g., italic long-form subtitles
   defined in home.css/collection.css that need to be upright).
   ============================================================ */

/* ---------- Long-form subtitles — upright Cormorant ----------
   Page-specific CSS files (home.css, collection.css, etc.) style
   these hero subtitles italic. Italic Cormorant at paragraph length
   on dark = unreadable. Explicit class list — does NOT match short
   italic taglines like .site-footer__tagline. */
body .hero__tagline,
body [class*="__subline"],
body .collection-section__sub,
body .journal-hero__sub,
body .event-hero__sub,
body .masterclass__subtitle {
  font-style: normal;
  font-weight: 500;
  color: #efe7d6;
  opacity: 0.92;
  line-height: 1.5;
}

/* ---------- Tasting notes — legible sizes ----------
   Labels were 0.5rem (8px) and descriptions were ~13px italic.
   Short italic is fine, but only if readable. */
body .flagship-hero__tasting-label,
body .tasting-note__type {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
}
body .flagship-hero__tasting-desc,
body .tasting-note__desc {
  font-size: 1.0625rem;
  color: #efe7d6;
  line-height: 1.5;
}

/* ---------- PDP accordion body — legible body copy ----------
   Accordion bodies were var(--text-sm) ~13px — fine for labels,
   way too small for paragraph-length text on a dark PDP. Bumped
   to 17px with the same loose line-height. */
body .pdp__accordion-body,
body .pdp__accordion-body p,
body .pdp__accordion-body li {
  font-size: 1.0625rem;       /* 17px */
  line-height: 1.7;
}

/* ---------- Size floor: badges, legal, hints ----------
   Legacy site used 0.5–0.6rem (8–10px) for functional UI text.
   Design system minimum is 12px. */
body .tier-card__badge,
body .masterclass__badge,
body .botanical-tag,
body .perfect-for-item__name,
body .product-card__badge,
body .gin-showcase-badge,
body .art-deco-edition__badge {
  font-size: 0.75rem;
}
body .site-footer__legal p,
body .age-gate__legal,
body .barware-cta__legal,
body .pdp__shipping-note,
body .art-deco-edition__legal,
body .society-waitlist__legal,
body .find__serve-note,
body .hero__scroll-hint span {
  font-size: 0.75rem;
  line-height: 1.5;
}
@media (max-width: 480px) {
  body .site-header__actions .btn {
    font-size: 0.6875rem;
  }
}

/* ---------- Spirit Collection — tight spacing after header removal ----------
   The "SPIRITS / The Four Expressions" duplicate header is gone, so collapse
   every bit of stacked top padding between the page hero and the flagship bottle. */

/* Tighten the page header's bottom padding */
body .collection-page__header {
  padding-bottom: var(--space-2);
}

/* Zero the section's own padding when flagship is the first child */
body .collection-section:has(> .flagship-hero:first-child) {
  padding-top: 0;
}

/* Zero the flagship-hero's own wrapper padding and pin content to top */
body .collection-section > .flagship-hero:first-child {
  padding-top: 0;
  align-items: start;
}
body .collection-section > .flagship-hero:first-child .flagship-hero__visual {
  padding-top: 0;
}
body .collection-section > .flagship-hero:first-child .flagship-hero__content {
  padding-top: var(--space-2);
}

/* ---------- Society tier CTA — pin to card bottom ---------- */
body .tier-card {
  display: flex;
  flex-direction: column;
}
body .tier-card__perks {
  flex: 1;  /* push CTA to bottom */
}
body .tier-card__cta {
  margin-top: var(--space-4);
  align-self: stretch;
  text-align: center;
  text-decoration: none;
}

/* ---------- Form feedback ARIA live region ---------- */
body .form-status {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  margin-top: 0.5rem;
  min-height: 1.2em;
}
body .form-status--error { color: #e57373; }
body .form-status--success { color: #8fbf8c; }

/* ---------- Mobile PDP sticky CTA bar ----------
   Gold background lives on the CONTAINER so it extends into the
   iPhone home-indicator safe area. The button itself is transparent
   with symmetric padding — text stays optically centered in the
   tappable region, no lopsided spacing above the home bar. */
.mobile-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  background: linear-gradient(180deg, #d4b56c 0%, #c9a84c 55%, #a07830 100%);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms ease;
}
.mobile-sticky-cta.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* Hide entirely above mobile breakpoint */
@media (min-width: 769px) {
  .mobile-sticky-cta {
    display: none !important;
  }
}
.mobile-sticky-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  box-sizing: border-box;
  padding: 16px 20px;
  background: transparent;
  color: #111;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  border: none;
  text-decoration: none;
  transition: filter 200ms ease;
}
.mobile-sticky-cta__btn:active {
  filter: brightness(1.08);
}
@media (max-width: 768px) {
  /* give the page bottom padding so sticky bar doesn't cover the footer.
     Uses a body class toggled by JS (GatsbyStickyCTA) — more reliable
     than :has() across browser versions. */
  body.has-sticky-cta {
    padding-bottom: 76px;
  }
  /* Sound toggle overlaps the sticky CTA at bottom-right — push it UP
     above the sticky bar when the bar is visible. */
  body.has-sticky-cta .sound-toggle {
    bottom: 88px !important;
  }
}

/* ---------- Home "Explore the House" nav grid ----------
   Content-level navigation so mobile users can reach every page
   without opening the hamburger menu. Also useful on desktop as a
   mid-scroll reminder of other site sections. */
.site-nav-grid {
  padding: var(--space-10) var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
}
.site-nav-grid__inner { max-width: 900px; margin: 0 auto; }
.site-nav-grid__headline {
  font-family: var(--font-display, 'Poiret One', serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  color: var(--color-ivory-soft, #efe7d6);
  margin: var(--space-2) 0 var(--space-6);
  letter-spacing: .02em;
}
.site-nav-grid__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
}
.site-nav-grid__tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  min-height: 64px;
  text-decoration: none;
  color: var(--color-ivory-soft, #efe7d6);
  background: transparent;
  border: 1px solid rgba(201, 168, 76, 0.28);
  transition: background-color 250ms ease,
              border-color 250ms ease,
              transform 250ms cubic-bezier(.4, 0, .2, 1);
  text-align: left;
}
.site-nav-grid__tile:hover {
  background: rgba(201, 168, 76, 0.06);
  border-color: var(--color-gold, #c9a84c);
  transform: translateY(-2px);
}
.site-nav-grid__tile-label {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.site-nav-grid__tile-arrow {
  color: var(--color-gold, #c9a84c);
  font-size: 16px;
  transition: transform 250ms ease;
}
.site-nav-grid__tile:hover .site-nav-grid__tile-arrow {
  transform: translateX(4px);
}
@media (max-width: 900px) {
  .site-nav-grid__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .site-nav-grid__grid { grid-template-columns: 1fr; }
  .site-nav-grid { padding: var(--space-8) var(--space-4); }
}

/* ---------- Mobile nav — adequate touch targets ----------
   Stock nav links have no explicit padding and sit at ~11px font.
   Bump to 44×44px minimum per WCAG 2.2 AA (SC 2.5.8 — Target Size). */
@media (max-width: 768px) {
  body .site-header__nav-link {
    display: block;
    padding: 12px 8px;
    min-height: 44px;
    line-height: 1.4;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body .btn--primary,
  body .btn--ghost,
  body .btn-primary,
  body .btn-ghost-ivory,
  body .btn-ghost-green,
  body .age-gate__cta,
  body .barware-cta__btn,
  body .art-deco-edition__notify-btn,
  body .pdp__cta-primary,
  body .pdp__cta-secondary,
  body .cta-primary,
  body .cta-alt {
    transition: none !important;
  }
  body .btn--primary:hover,
  body .btn--ghost:hover,
  body .btn-primary:hover,
  body .btn-ghost-ivory:hover,
  body .btn-ghost-green:hover,
  body .age-gate__cta:hover,
  body .barware-cta__btn:hover,
  body .art-deco-edition__notify-btn:hover,
  body .pdp__cta-primary:hover,
  body .pdp__cta-secondary:hover,
  body .cta-primary:hover,
  body .cta-alt:hover {
    transform: none !important;
  }
}