/* ================================
   hero-fixedbg.css  (full file)
   - Fixed full-bleed background that never moves
   - Background swaps per frame via JS (sets --bg-url to image-set)
   - Compact frames (not full-screen)
   - Light grey glass slab + lighter grey article cards
   - H1 = white, H3 (.copy-title) = teal (uses --accent)
   - Article text = black/ink (uses --text)
   - Sticky header + footer readability
   ================================= */

/* Base + stacking */
html,
body {
  overflow-x: hidden;
  background: #0b0f17;
}

#buildops-hero {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* Fixed full-bleed bg that never moves (always behind content) */
#hero-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  /* Default: blueprint with PNG fallback via image-set */
  --bg-url: image-set(url('/images/blueprint-modern.webp') type('image/webp') 1x,
      url('/images/blueprint-modern.png') type('image/png') 1x);

  background-image:
    radial-gradient(120% 65% at 50% 10%, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 60%),
    /* dramatically light overlay (.10/.12/.16) */
    linear-gradient(180deg, rgba(7, 12, 20, .10) 0%, rgba(7, 12, 20, .12) 40%, rgba(7, 12, 20, .16) 100%),
    var(--bg-url);
  background-position: center center, center center, center center;
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
  transition: background-image 280ms ease, opacity 220ms ease;
}

#hero-bg.bg-off {
  opacity: 0;
  /* reveal page’s own bg for footer/feasibility (optional) */
  pointer-events: none;
}

/* Frames & content (compact) */
.hero-frame {
  position: relative;
  z-index: 1;
  /* above bg */
  min-height: auto;
  /* not full-screen */
  padding: 3.5rem 1rem;
  /* tighter vertical rhythm */
  display: block;
}

.hero-frame+.hero-frame {
  margin-top: 1.25rem;
}

@media (min-width: 1024px) {
  .hero-frame {
    padding: 3.75rem 1.25rem;
  }
}

/* Kill legacy fade/slide states so frames are always visible */
.hero-frame,
.hero-frame.in-view,
.hero-frame.is-visible,
.hero-frame.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* Prevent old overlays from double-stacking */
.hero-overlay,
.hero-light {
  display: none !important;
}

/* Shared width so H1 and grid align perfectly */
#buildops-hero {
  --slab-w: 68rem;
}

/* tweak 66–72rem to taste */
.hero-slab {
  max-width: var(--slab-w);
  margin-left: auto;
  margin-right: auto;
}

/* Headline: white, same width as grid */
.frame-content {
  position: relative;
  z-index: 2;
}

.frame-content h1 {
  max-width: var(--slab-w);
  margin: 0 auto 0.75rem auto;
  text-align: center;
  color: #ffffff !important;
  /* H1 = white */
  text-shadow: none;
  font-size: clamp(1.9rem, 1.1rem + 2.2vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Light grey glass for slab; lighter for article cards */
#buildops-hero {
  --slab-bg: rgba(255, 255, 255, 0.58);
  /* slab panel glass */
  --slab-brd: rgba(0, 0, 0, 0.06);

  --card-bg: rgba(255, 255, 255, 0.38);
  /* article cards glass (lighter) */
  --card-brd: rgba(0, 0, 0, 0.06);
}

.hero-slab {
  background: var(--slab-bg);
  border: 1px solid var(--slab-brd);
  border-radius: 1rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

/* Grid */
.copy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  /* a bit tighter */
}

/* Cards: lighter grey; text = black/ink */
.copy-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-brd) !important;
  border-radius: 0.75rem;
  padding: clamp(1rem, 0.6rem + 1vw, 1.75rem) clamp(1rem, 0.8rem + 1vw, 2rem);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.20);
}

/* Article headings (h3): teal using theme accent */
.copy-title {
  color: var(--accent, #0ea5e9) !important;
  /* H3 = teal */
  font-weight: 600;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.35rem);
  line-height: 1.3;
}

/* Article body text = solid black/ink via theme text color */
.copy-card,
.copy-card .bo-copy,
.copy-card li,
.copy-card p,
.copy-card span,
.copy-card [class*="text-ink"] {
  color: var(--text, #1f2937) !important;
}

/* CTA */
.cta-row {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}

.bo-btn.bo-btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #hero-bg {
    transition: none;
  }
}

/* --- Feasibility: kill flicker & keep above bg --- */
/* Always-visible feasibility section */
#feasibility {
  position: relative;
  z-index: 2;
  /* above bg or any overlays */
  opacity: 1 !important;
  /* defeat legacy fade rules */
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  content-visibility: auto;
  /* perf: doesn’t hide paint */
}

/* Make the feasibility section show the sticky background (override any solid background utilities) */
#feasibility,
#feasibility.bg-background {
  background: transparent !important;
  /* show last background through */
}

/* If any global rules target these classes, neutralize them here */
#feasibility.in-view,
#feasibility.is-visible,
#feasibility.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* --- Footer always readable on neutral --- */
footer,
.site-footer,
#footer {
  position: relative;
  z-index: 1;
  /* above anything else */
  background: var(--bg, #faf7f2);
  /* warm neutral from your theme */
  color: var(--text, #1f2937);
  border-top: 1px solid var(--border, #e2e8f0);
}

footer a,
.site-footer a,
#footer a {
  color: var(--accent, #0ea5e9);
  text-decoration: none;
  border-bottom: 1px dashed rgba(14, 165, 233, .35);
}

footer a:hover,
.site-footer a:hover,
#footer a:hover {
  border-bottom-style: solid;
}

/* --- Sticky header (always above the fixed hero bg) --- */
/* NOTE: Safari can break position:sticky when filters/transform/fixed layers exist.
   We force a visually identical fixed header and add top offset via JS. */
#site-header,
.bo-nav,
.site-header,
header#site-header,
header.bo-nav,
header {
  position: fixed;
  /* ← forced fixed */
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  width: 100%;
  background: rgba(250, 247, 242, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border, #e2e8f0);
  isolation: isolate;
  /* ensure its own stacking context */
}

/* Shadow when scrolled (JS toggles html.header-scrolled) */
html.header-scrolled #site-header,
html.header-scrolled .bo-nav,
html.header-scrolled .site-header,
html.header-scrolled header#site-header,
html.header-scrolled header.bo-nav,
html.header-scrolled header {
  box-shadow: 0 8px 20px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .05);
}

/* Allow stickiness: some wrappers add overflow hidden; neutralize safely */
main,
.site-main,
.layout,
.page,
.wrapper,
.content {
  overflow: visible !important;
  /* prevent breaking sticky/fixed behavior */
}