/*
 * MemoVoltShop — External Stylesheet
 * Companion to inline critical CSS in index.html
 * System fonts only: Georgia (headings) · Arial (body)
 */

/* ══════════════════════════════════════════════════════════════
   FAQ ACCORDION — display:none REQUIRED here AND in inline <style>
   ══════════════════════════════════════════════════════════════ */
.faq-a{display:none}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-q{background:var(--off)}

/* ══════════════════════════════════════════════════════════════
   FLOAT ANIMATION — off at ≤1024px (mobile/tablet)
   ══════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .bottle-float{animation:none}
}

/* ══════════════════════════════════════════════════════════════
   NAVBAR SCROLL STATE
   ══════════════════════════════════════════════════════════════ */
header#navbar.scrolled{
  box-shadow:0 4px 32px rgba(15,23,42,.5)
}

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════════════════════════════════ */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s ease,transform .5s ease
}
.reveal.visible{
  opacity:1;
  transform:translateY(0)
}

/* ══════════════════════════════════════════════════════════════
   CONTENT-VISIBILITY — off-screen section performance
   ══════════════════════════════════════════════════════════════ */
#science,#blends,#ingredients,#benefits,#how-to-use,
#bonuses,#pricing,#reviews,#guarantee,#faq,#final-cta{
  content-visibility:auto;
  contain-intrinsic-size:0 600px
}

/* ══════════════════════════════════════════════════════════════
   BUTTON STATES
   ══════════════════════════════════════════════════════════════ */
.btn-primary:focus-visible,
.pc-btn:focus-visible,
.faq-q:focus-visible{
  outline:3px solid var(--blue-glow);
  outline-offset:3px
}

/* ══════════════════════════════════════════════════════════════
   PRINT STYLES
   ══════════════════════════════════════════════════════════════ */
@media print{
  .ann-bar,
  header#navbar,
  .mobile-menu,
  .skip-link,
  .hero-cta-block,
  .final-cta,
  .nav-cta{display:none!important}
  body{padding-top:0}
  .hero-wrap{background:#fff;color:#000}
  h1.hero-h1,
  .sec-title.on-dark{color:#000}
}