/* ============================================================================
   SQUARESPACE PREMIUM LAYER — Menu Six Fusion
   Additive enhancement on top of common.css. Restyles EXISTING classes with
   premium Squarespace / Foundry patterns. No markup or content changes.
   Loads AFTER common.min.css so these rules win. All values map to the
   design-system tokens already defined in common.css :root.
   ============================================================================ */

/* ---- 1. Sticky nav: the 0.97 opacity signature + glass blur ------------- */
.navbar {
  background: var(--bg-alpha-97) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--accent-alpha-10);
  transition: background var(--transition-base), border-color var(--transition-base);
}

/* Squarespace underline-slide hover on nav links */
.nav-link {
  background-image: linear-gradient(to right, var(--brand-gold), var(--brand-gold));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size var(--transition-base) var(--ease-standard),
              color var(--transition-base);
}
.nav-link:hover,
.nav-link:focus-visible { background-size: 100% 1.5px; }

/* ---- 2. Section rhythm: generous fluid vertical spacing ----------------- */
.order-mode-section,
#menu,
.reviews-section,
.tea-promo-section,
#location,
#faq,
.newsletter-section {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

/* Alternating section banding (whitespace rhythm without hairlines).
   brand-charcoal is the subtle "off" band against brand-black. */
#menu,
#location { background: var(--brand-charcoal); }

/* ---- 3. Editorial type: small-caps eyebrow + tightened display --------- */
.section-label,
.hero-tagline {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-gold);
}
.section-title,
.hero-title {
  font-family: var(--font-display);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  font-weight: 600;
}
.hero-title { letter-spacing: var(--ls-tighter); }
.section-description { max-width: 60ch; margin-inline: auto; }

/* ---- 4. Buttons: premium pill + slide-fill hover (keeps gold brand) ----- */
.btn-primary,
.btn-secondary,
.nav-cta,
.btn-add,
.location-btn,
.tea-promo-ctas a {
  border-radius: var(--radius-pill);
  letter-spacing: var(--ls-wide);
  transition: transform var(--transition-fast),
              background var(--transition-base),
              color var(--transition-base),
              box-shadow var(--transition-base);
}
.btn-primary:hover,
.nav-cta:hover,
.btn-add:hover { transform: translateY(-1px); box-shadow: 0 4px 18px var(--accent-alpha-30); }

/* Outlined secondary on dark → gold fill on hover (Foundry pattern) */
.btn-secondary,
.location-btn-secondary {
  border: 1px solid var(--accent-alpha-30);
  background: transparent;
  color: var(--brand-gold);
}
.btn-secondary:hover,
.location-btn-secondary:hover {
  background: var(--brand-gold);
  color: var(--brand-black);
  border-color: var(--brand-gold);
}

/* ---- 5. Cards: premium radius, hairline border, lift + image zoom ------ */
.order-mode-card,
.menu-item,
.review-card,
.location-service-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--accent-alpha-10);
  background: var(--brand-charcoal);
  overflow: hidden;
  transition: transform var(--transition-base) var(--ease-standard),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}
.order-mode-card:hover,
.menu-item:hover,
.review-card:hover,
.location-service-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-alpha-30);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Slow, deliberate Ken-Burns-style image zoom on menu cards */
.menu-item-image { overflow: hidden; border-radius: 0; }
.menu-item-image img {
  transition: transform 600ms var(--ease-standard);
  will-change: transform;
}
.menu-item:hover .menu-item-image img { transform: scale(1.05); }

/* Title shifts to gold on card hover */
.menu-item-name,
.review-card .review-name { transition: color var(--transition-base); }
.menu-item:hover .menu-item-name { color: var(--brand-gold); }

/* ---- 6. Menu price: dotted-leader treatment (the SQSP menu signature) --- */
.menu-item-footer {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.menu-item-footer::before {
  content: "";
  flex: 1;
  border-bottom: 1px dotted var(--accent-alpha-30);
  transform: translateY(-0.25em);
}
.menu-item-price {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-gold);
  letter-spacing: var(--ls-tight);
}

/* ---- 7. Menu tags / badges: refined pill chips ------------------------- */
.menu-tag,
.tea-promo-badge {
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent-alpha-20);
  background: var(--accent-alpha-10);
  color: var(--brand-gold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-size: var(--fs-2xs);
}

/* ---- 8. Hero: stronger scrim + bottom-left editorial weight ------------- */
.hero-overlay {
  background: linear-gradient(to bottom,
              rgba(10,10,10,0.35) 0%,
              rgba(10,10,10,0.55) 55%,
              rgba(10,10,10,0.88) 100%) !important;
}
.hero-rating-pill {
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent-alpha-20);
  background: var(--accent-alpha-10);
  backdrop-filter: blur(6px);
}

/* ---- 9. Reviews: editorial quote treatment ----------------------------- */
.review-card { padding: var(--space-lg); }
.review-card .review-text,
.review-card p { line-height: var(--lh-relaxed); }

/* ---- 10. Newsletter: premium inset band -------------------------------- */
.newsletter-section {
  background: var(--brand-charcoal);
  border-top: 1px solid var(--accent-alpha-10);
  border-bottom: 1px solid var(--accent-alpha-10);
}
.newsletter-section input {
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-alpha-20);
  background: rgba(255,255,255,0.03);
}
.newsletter-section input:focus { border-color: var(--brand-gold); }

/* ---- 11. Footer: tighten labels into small-caps directory -------------- */
.footer-section h3,
.footer-section h4 {
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  font-size: var(--fs-xs);
  color: var(--brand-gold);
}
footer a { transition: color var(--transition-base), opacity var(--transition-base); }
footer a:hover { color: var(--brand-gold); }

/* ---- 12. Section sub-nav pills (sticky scroll-spy) --------------------- */
.section-nav-pill {
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent-alpha-20);
  transition: background var(--transition-base), color var(--transition-base);
}
.section-nav-pill:hover,
.section-nav-pill[aria-current="true"] {
  background: var(--brand-gold);
  color: var(--brand-black);
}

/* ---- 13. Scroll fade-up (the SQSP entrance signature) ------------------ */
@media (prefers-reduced-motion: no-preference) {
  .animate-on-scroll.animate-ready {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--ease-decelerate),
                transform 700ms var(--ease-decelerate);
  }
  .animate-on-scroll.is-visible,
  .animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   ADDITIONAL OVERRIDES
   ============================================================================ */

/* ---- Win the card radius + image-zoom over the in-HTML styles ---- */
.menu-item, .order-mode-card, .location-service-card { border-radius: var(--radius-lg) !important; }
.menu-item-image { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }

/* ============================================================================
   PREMIUM MOTION (Squarespace signatures) — all gated behind
   prefers-reduced-motion so it never harms accessibility.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* ---- Hero Ken Burns: slow, continuous image drift (the #1 premium tell) */
  .hero-bg img {
    animation: sqsp-ken-burns 22s var(--ease-standard) infinite alternate;
    transform-origin: center center;
    will-change: transform;
  }
  @keyframes sqsp-ken-burns {
    from { transform: scale(1.0); }
    to   { transform: scale(1.08); }
  }

  /* ---- Section titles get a gold underline that draws in on reveal ---- */
  .section-header.animate-in .section-title::after,
  .section-header.animate-in::after {
    /* (decorative; only if a title underline element exists) */
  }

  /* ---- Buttons with arrow: slide the arrow on hover ---- */
  .btn-primary svg,
  .btn-secondary svg,
  .nav-cta svg,
  .location-btn svg {
    transition: transform var(--transition-base) var(--ease-standard);
  }
  .btn-primary:hover svg,
  .btn-secondary:hover svg,
  .nav-cta:hover svg,
  .location-btn:hover svg {
    transform: translateX(4px);
  }

  /* ---- Count-up numbers: subtle rise as they begin counting ---- */
  .sqsp-countup {
    display: inline-block;
    font-variant-numeric: tabular-nums;
  }

  /* ---- Card image: ensure the menu hover zoom is smooth/deliberate ---- */
  .menu-item-image img,
  .review-card img,
  .order-mode-card img,
  .card img {
    transition: transform 650ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .card:hover img { transform: scale(1.04); }
}

/* ============================================================================
   SITEWIDE COVERAGE — extend the premium treatment to the generic card
   family + section headers used across guide/recipe/menu/location pages,
   so the Squarespace elements reach EVERY page, not just index.html.
   Low specificity / no !important so per-page custom styles still win where
   they intentionally differ; this only fills the gaps.
   ============================================================================ */

/* Generic cards (info-card, route-card, service-option-card, eta-card, etc.) */
.card,
[class*="-card"]:not(.menu-item):not(.review-card):not(.order-mode-card) {
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base) var(--ease-standard),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}
.card:hover,
[class*="-card"]:not(.menu-item):not(.review-card):not(.order-mode-card):hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  border-color: var(--accent-alpha-30);
}
.card img,
[class*="-card"] img { overflow: hidden; }

/* Section headers everywhere: small-caps gold eyebrow + tightened title */
.card-title, .section-title, h2.section-title {
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

/* Any hero image not using .hero-bg still gets the Ken Burns drift */
@media (prefers-reduced-motion: no-preference) {
  [class*="hero"] img:not(.hero-bg img),
  .page-hero img,
  .guide-hero img {
    animation: sqsp-ken-burns 22s var(--ease-standard) infinite alternate;
    transform-origin: center center;
  }
}

/* Links inside content get the gentle gold hover everywhere */
main a:not(.btn-primary):not(.btn-secondary):not(.nav-cta):not(.nav-link):hover {
  color: var(--brand-gold);
}