/* ==========================================================================
   BISUN POWER — COMPONENTS
   Header, Navigation, Hero, Sections, CTA, FAQ, Footer.
   ========================================================================== */

/* ---------- Header / Navigation ---------- */
.bp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bp-border);
}

/* ---------- Top-spacing bug fix ----------
   Astra's own content wrapper (.ast-container / #content / .site-content)
   adds its own default top padding above the entry content, which stacked
   with our own layout and created excess whitespace below the sticky
   header. This zeroes out Astra's contribution and sets one single,
   controlled gap instead, applied globally via #bp-main-content — no
   page content changes required. */
.ast-container,
#content,
.site-content,
.ast-page .entry-content,
.ast-separate-container .ast-article-single {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#bp-main-content {
  padding-top: 32px;
}
@media (max-width: 640px) {
  #bp-main-content {
    padding-top: 24px;
  }
}
.bp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bp-space-3) var(--bp-gutter);
  max-width: var(--bp-container-max);
  margin-inline: auto;
}
.bp-nav ul { display: flex; gap: var(--bp-space-6); list-style: none; margin: 0; padding: 0; }
.bp-nav a { text-decoration: none; color: var(--bp-text); font-weight: 500; font-size: var(--bp-fs-small); position: relative; padding-bottom: 4px; transition: color var(--bp-transition-fast); }
.bp-nav a:hover { color: var(--bp-primary); }
.bp-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--bp-primary); transition: width var(--bp-transition-base); }
.bp-nav a:hover::after { width: 100%; }
.bp-nav li.current-menu-item > a,
.bp-nav li.current_page_item > a { color: var(--bp-primary); font-weight: 600; }
.bp-nav li.current-menu-item > a::after,
.bp-nav li.current_page_item > a::after { width: 100%; }

/* Mobile nav toggle (JS-driven, see navigation.js) */
.bp-nav-toggle { display: none; background: none; border: none; cursor: pointer; }
.bp-logo img { max-height: 42px; width: auto; display: block; }
.bp-nav-cta { flex-shrink: 0; padding: 10px 20px !important; font-size: 13px; }
.bp-main { display: block; }
.bp-mobile-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bp-space-4); }
.bp-mobile-menu a { text-decoration: none; color: var(--bp-text); font-weight: 500; }
.skip-link.screen-reader-text {
  position: absolute; left: -9999px; top: 0; z-index: 999999;
  background: var(--bp-primary); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
}
.skip-link.screen-reader-text:focus { left: 0; }
.bp-mobile-menu { display: none; flex-direction: column; gap: var(--bp-space-4); padding: var(--bp-space-6); background: var(--bp-white); border-top: 1px solid var(--bp-border); }
.bp-mobile-menu.is-open { display: flex; }

@media (max-width: 1024px) {
  .bp-nav ul.bp-nav-primary { display: none; }
  .bp-nav-toggle { display: block; }
  .bp-nav-cta { display: none; }
}

/* ---------- Hero ---------- */
.bp-hero {
  border-radius: var(--bp-radius-xl);
  padding: var(--bp-space-16) var(--bp-space-8);
  text-align: center;
  background: linear-gradient(135deg, #0b1f14, var(--bp-dark));
  margin-bottom: var(--bp-space-12);
}
.bp-hero h1 { color: var(--bp-white); margin-bottom: var(--bp-space-4); }
.bp-hero p { color: #d1d5db; font-size: 17px; max-width: 640px; margin: 0 auto var(--bp-space-6); }

@media (max-width: 640px) {
  .bp-hero { padding: var(--bp-space-8) var(--bp-space-4); border-radius: var(--bp-radius-lg); }
}

/* ---------- Section header, dark panel, CTA band, FAQ accordion ----------
   Moved to system.css (the shared spacing/component system) to eliminate
   duplicate definitions that were silently conflicting depending on
   stylesheet load order. Do not redefine these here. */

/* ---------- Stats ---------- */
.bp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--bp-space-4); text-align: center; margin-top: var(--bp-space-8); }
.bp-stat-num { font-family: var(--bp-font-heading); font-size: 30px; font-weight: 700; color: var(--bp-primary); }
.bp-stat-label { font-size: var(--bp-fs-caption); color: #9CA3AF; }

/* ---------- Product spec rows ---------- */
.bp-spec { display: flex; justify-content: space-between; font-size: 13.5px; padding: 7px 0; border-bottom: 1px solid #F1F5F9; }
.bp-spec span:first-child { color: var(--bp-text-muted); }
.bp-spec span:last-child { font-weight: 600; color: var(--bp-dark); }

/* ---------- Footer ---------- */
.bp-footer { background: var(--bp-dark); color: #cbd5e1; padding: var(--bp-space-24) var(--bp-gutter) var(--bp-space-8); }
.bp-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--bp-space-12); max-width: var(--bp-container-max); margin-inline: auto; }
.bp-footer h4 { color: var(--bp-white); font-size: var(--bp-fs-h4); font-weight: 700; letter-spacing: 0.02em; margin-bottom: var(--bp-space-6); }
.bp-footer p { font-size: var(--bp-fs-small); line-height: 1.7; color: #9CA3AF; }
.bp-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bp-footer a { color: #cbd5e1; text-decoration: none; font-size: var(--bp-fs-small); display: inline-block; transition: color var(--bp-transition-fast), transform var(--bp-transition-fast); }
.bp-footer a:hover { color: var(--bp-primary-glow); transform: translateX(3px); }
.bp-footer-bottom { text-align: center; margin-top: var(--bp-space-16); padding-top: var(--bp-space-6); border-top: 1px solid rgba(255,255,255,0.08); font-size: var(--bp-fs-caption); color: #9CA3AF; letter-spacing: 0.02em; }