/* ==========================================================================
   SITE-DARK OVERRIDE
   Applies the index.html dark / glass-card aesthetic to menu, pricing,
   about and faq. Loaded AFTER each page's own stylesheet so these rules win.
   ========================================================================== */

:root { --terracotta-a11y: #96603C; }

/* ---- Page base -------------------------------------------------------- */
html { overflow-x: hidden; }
body {
  max-width: 100vw;
  color: var(--cream);
  position: relative;
  background:
    radial-gradient(ellipse 70% 55% at 15% 8%, rgba(211,168,124,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(140,65,40,0.22) 0%, transparent 65%),
    linear-gradient(160deg, #4A2F1F 0%, #3A2A1D 45%, #2A1D14 100%);
  background-size: 200% 200%, 200% 200%, 140% 140%;
  background-attachment: fixed;
  animation: bcc-bg-drift 26s ease-in-out infinite;
}
@keyframes bcc-bg-drift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
  50% { background-position: 10% 15%, 90% 85%, 55% 45%; }
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}
@media (max-width: 768px) {
  body { background-attachment: scroll; background-size: 240% 240%, 240% 240%, 160% 160%; }
}

/* Hide the SVG wave dividers that stitched the old light surfaces together;
   everything is one espresso tone now. */
.section-blend { display: none !important; }

/* ---- Header: solid glass card, light type --------------------------- */
.header { background: transparent; padding: 0 24px; }
.header::before, .header::after { display: none !important; }
.header__inner {
  background: rgba(28,11,0,0.55);
  border: 1px solid rgba(232,217,197,0.16);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  padding: 14px 28px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.header__logo-name { color: var(--cream); }
.header__nav-link { color: rgba(245,239,224,0.78); }
.header__nav-link:hover { color: var(--cream); background: rgba(245,239,224,0.1); }
.header__nav-link.is-active { color: var(--peach); }
.header__burger-bar { background: var(--cream); }

/* ---- Mobile drawer: dark glass panel that expands open -------------- */
.header__drawer {
  display: flex; top: calc(100% - 24px); left: 24px; right: 24px;
  background: rgba(28,11,0,0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  padding: 0 14px;
  border: 1px solid rgba(232,217,197,0.16); border-top: 0; border-radius: 0 0 14px 14px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.42);
  max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transform: translateY(-10px);
  transition: max-height .42s cubic-bezier(.4,0,.2,1), opacity .42s ease, transform .42s cubic-bezier(.4,0,.2,1), padding .42s cubic-bezier(.4,0,.2,1);
}
.header__drawer.is-open { display: flex; max-height: 420px; opacity: 1; pointer-events: auto; transform: translateY(0); padding: 14px 14px 18px; }
.header__drawer-link { color: rgba(245,239,224,0.82); border-bottom: 1px solid rgba(232,217,197,0.12); padding: 14px 10px; }
.header__drawer-link:hover { color: var(--cream); background: rgba(245,239,224,0.08); }
.header__drawer-link.is-active { color: var(--peach); }
.header.is-open .header__inner { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.header__burger:hover { background: rgba(245,239,224,0.1); }

/* ---- Sections -> transparent so the fixed beans background shows (matches home) ---- */
.menu-hero, .specialty-sec, .syrups-sec, .sip-sec, .menu-cta-sec,
.price-hero, .included-sec, .addon-sec, .quote-form-sec, .price-cta-sec,
.about-hero, .story-sec, .apart-sec, .about-cta-sec,
.faq-hero, .faq-cta {
  background: transparent;
}

/* ---- Headings -> cream --------------------------------------------- */
.menu-section-title, .included-title, .story-title, .quote-form-title,
.drink-card-title, .included-card-title, .apart-card-title, .sip-row-title,
.addon-card-title {
  color: var(--cream);
}

/* ---- Body copy -> driftwood ---------------------------------------- */
.menu-section-note, .drink-card-desc, .sip-row-desc, .included-sub,
.included-card-desc, .story-text, .apart-card-desc, .quote-form-sub {
  color: var(--driftwood);
}
.included-closing { color: var(--peach); }
.custom-callout-title { color: var(--cream); }
.custom-callout-desc { color: var(--driftwood); }
.story-stat-num { color: var(--peach); }
.story-stat-label { color: var(--driftwood); }

/* Inline links inside copy stay legible on dark */
.drink-card-desc a, .included-card-desc a, .apart-card-desc a { color: var(--peach); }
.drink-card-desc a:hover, .included-card-desc a:hover, .apart-card-desc a:hover { color: var(--cream); }

/* ---- Cards -> dark translucent ------------------------------------- */
.drink-card, .included-card, .addon-card, .apart-card, .custom-callout {
  background: rgba(28,11,0,0.55);
  border: 1px solid rgba(232,217,197,0.16);
  box-shadow: 0 5px 24px rgba(0,0,0,0.18);
}
.drink-card-build { color: var(--peach); }

/* Tea / sip pills */
.tea-tag { background: rgba(245,239,224,0.1); color: var(--cream); }

/* ---- Eyebrows -> tan on dark --------------------------------------- */
.eyebrow-light { color: var(--peach); }
.eyebrow-light::before, .eyebrow-light::after { background: var(--peach); }

/* ---- CTA buttons: match home's solid terracotta -------------------- */
.cta-btn {
  background: var(--terracotta-a11y);
  color: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 8px 20px rgba(192,94,58,0.22);
}
.cta-btn::before { display: none; }
.cta-btn:hover, .cta-btn:focus-visible, .cta-btn.is-pressed {
  background: var(--terracotta-a11y);
  opacity: 0.88;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(192,94,58,0.35), 0 4px 10px rgba(49,19,0,0.2);
}

/* ---- Secondary buttons -> tan outline ------------------------------ */
.cta-btn--secondary { background: transparent; color: var(--driftwood); border-color: var(--driftwood); box-shadow: none; }
.cta-btn--secondary:hover, .cta-btn--secondary:focus-visible, .cta-btn--secondary.is-pressed {
  background: rgba(245,239,224,0.1); color: var(--cream); border-color: var(--driftwood); box-shadow: none;
}

/* ---- Footer map dark filter ---------------------------------------- */
.footer-map iframe { filter: invert(0.92) hue-rotate(180deg) saturate(0.8) brightness(0.95); }

/* ---- FAQ page specifics -------------------------------------------- */
.faq-category h2 { color: var(--cream); border-bottom-color: rgba(232,217,197,0.18); }
.faq-item {
  background: rgba(28,11,0,0.55);
  border: 1px solid rgba(232,217,197,0.16);
}
.faq-item summary { color: var(--cream); }
.faq-item summary:hover { color: var(--peach); }
/* Icon: match home's thin denim plus that collapses to a minus */
.faq-item summary .faq-icon {
  width: 18px; height: 18px; background: none; color: transparent;
  font-size: 0; border-radius: 0; transform: none; position: relative; flex-shrink: 0;
  box-shadow: none;
}
.faq-item summary .faq-icon::before,
.faq-item summary .faq-icon::after {
  content: ''; position: absolute; background: #C9A876; border-radius: 1px;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.faq-item summary .faq-icon { transition: transform .45s cubic-bezier(.4,0,.2,1); }
.faq-item summary .faq-icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq-item summary .faq-icon::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.faq-item[open] summary .faq-icon { transform: rotate(225deg); }
.faq-item-body-inner { color: var(--driftwood); }
.faq-item-body-inner strong { color: var(--cream); }
.faq-item-body-inner a, .faq-item-body-inner a strong { color: var(--peach); }
.faq-seo-block {
  background: rgba(28,11,0,0.55);
  border: 1px solid rgba(232,217,197,0.16);
}
.faq-seo-block h2 { color: var(--cream); }
.faq-seo-block p { color: var(--driftwood); }
.faq-cta h2 { color: var(--cream); }
.faq-cta p { color: var(--driftwood); }
.faq-cta-btn {
  background: var(--terracotta-a11y); color: #fff;
  box-shadow: 0 8px 20px rgba(192,94,58,0.22);
}
.faq-cta-btn:hover, .faq-cta-btn:focus-visible {
  background: var(--terracotta-a11y); opacity: 0.88;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(192,94,58,0.35), 0 4px 10px rgba(49,19,0,0.2);
}

/* ---- Footer: glass card like the header --------------------------- */
.site-footer { background: transparent !important; }
.footer-inner {
  background: rgba(28,11,0,0.55);
  border: 1px solid rgba(232,217,197,0.16);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 48px 56px;
}
@media (max-width: 480px) { .footer-inner { padding: 36px 24px; } }
}