/* ============================================================
   XLR8 COFFEE — SITE-WIDE DARK THEME + CARBON-FIBER WEAVE
   Loaded after styles.css on every page.
   Philosophy: rich charcoal page + dark chrome; light "cards"
   (forms, product/menu/roast cards) stay light so they pop and
   their text stays readable.
   ============================================================ */

/* ---------- Reusable left scroll-rail (auto-built on long pages) ---------- */
.xrail { position: fixed; left: 26px; top: 50%; transform: translateY(-50%); z-index: 95; display: flex; flex-direction: column; align-items: center; }
.xrail .xrail-track { position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px; transform: translateX(-50%); background: rgba(255,255,255,0.16); }
.xrail .xrail-fill { position: absolute; top: 8px; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(var(--gold), var(--ember)); height: 0; transition: height 0.25s ease; }
.xrail-dot { position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 0; }
.xrail-dot i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a44; border: 2px solid #5a5e66; transition: all 0.25s ease; }
.xrail-dot span { position: absolute; left: 28px; white-space: nowrap; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); opacity: 0; transform: translateX(-6px); transition: all 0.25s ease; pointer-events: none; font-family: var(--font-display); }
.xrail-dot:hover span { opacity: 1; transform: none; }
.xrail-dot.on i { background: var(--gold); border-color: #fff; box-shadow: 0 0 0 4px rgba(255,176,0,0.18), 0 0 12px rgba(255,176,0,0.6); }
.xrail-dot.on span { opacity: 1; transform: none; color: var(--gold); }
[data-scroll-rail] > section, [data-scroll-rail] section[data-rail] { scroll-margin-top: 90px; }
@media (max-width: 1180px) { .xrail { display: none; } }

/* ---------- Page background + carbon-fiber weave ----------
   NOTE: we intentionally do NOT change the default text color.
   White "cards" (roast/menu/product/forms) keep their dark text and
   stay perfectly readable; only the dark bands below are lightened. */
html { background: #060608; }
body {
  background: var(--carbon-fiber), #060608;
  background-attachment: fixed;
}
main { background: transparent; }

/* ---------- Header / nav / hamburger ---------- */
.site-header,
.site-header.is-scrolled { background: rgba(12,12,15,0.93); border-bottom-color: rgba(255,255,255,0.08); }
.brand-subtitle { color: rgba(255,255,255,0.62); }
.nav-toggle span { background: var(--gold); }

/* the menu is a dropdown at every width — make it dark so the
   light links are readable when it's open */
.site-nav { background: #101015; border-bottom-color: rgba(255,255,255,0.1); box-shadow: 0 20px 44px rgba(0,0,0,0.6); }
.site-nav a { color: #f4f4f6; }
.site-nav a:hover { background: rgba(226,35,26,0.22); }

/* (Footer is already dark with carbon fiber + white text — left as-is.) */

/* ---------- Full-width light section bands -> transparent (dark page shows through) ---------- */
.section,
.events-section,
.ig-feed,
.shop-intro,
.roast-shop,
.roast-filter,
.lineup-section,
.calendar-section,
.detail-section,
.merch-strip,
.monthly-specials,
.specials-head,
.product-page,
.product-story,
.product-gallery,
.origin-page,
.origin-section,
.tyler-page,
.profile-grid,
.past-grid,
.rr-grid,
.fu-grid,
.page-hero,
.product-hero,
.past-hero,
.rr-hero,
.fu-hero { background: transparent !important; }

/* carbon-fiber weave on the two homepage feature bands so they read like the Story band */
.events-section,
.ig-feed {
  background: var(--carbon-fiber), #08080a !important;
}

/* ---------- Section-level text (NOT inside cards) -> light ----------
   These target headings/copy that sit directly on a band. Card
   components keep their own class-based colors, so they're unaffected. */
.section > .section-copy h1, .section > .section-copy h2, .section > .section-copy h3, .section > .section-copy p,
.section-copy > h1, .section-copy > h2, .section-copy > h3, .section-copy > p,
.shop-intro h2, .shop-intro p,
.calendar-intro h2, .calendar-intro p,
.specials-head h2, .specials-head p,
.page-hero h1, .page-hero h2, .page-hero p,
.product-hero h1, .product-hero p,
.product-story h2, .product-story p,
.past-hero h1, .past-hero p,
.fu-hero h1, .fu-hero p,
.origin-section h2, .origin-section p,
.tyler-profile-intro h2, .tyler-profile-intro p { color: #ffffff; }

.section > .section-copy p,
.section-copy > p,
.shop-intro p,
.calendar-intro p,
.specials-head p,
.page-hero p,
.product-hero p,
.product-story p,
.past-hero p,
.fu-hero p,
.origin-section p,
.tyler-profile-intro p { color: rgba(255,255,255,0.74); }

/* roast filter chips read on dark */
.roast-filter a { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: #f4f4f6; }
.roast-filter a:hover { background: rgba(226,35,26,0.22); }

/* IG avatar ring: dark center instead of white */
.ig-avatar { background-image: linear-gradient(#0d0d11,#0d0d11), linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#e2231a) !important; }

/* section divider band */
.section-divider { background: #0b0b0d; }
.section-divider em { color: var(--gold); }