/**
 * ChooseMyPower UI/UX Round 1 -- global overrides
 * rev 2026-05-31 | Atlas 3 (operator: Cursor) -- R2 mobile; fonts via PHP enqueue
 */

/* ------------------------------------------------------------------ */
/* T3 + T8: retire theme header/footer chrome and decorative bleed    */
/* ------------------------------------------------------------------ */
header.art-sticky-header,
.art-sticky-header,
.art-header,
header.art-header,
.art-nav,
.art-footer,
.art-footer-inner {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#art-main,
.art-sheet,
body {
  background: #F0FAF0 !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

/* ------------------------------------------------------------------ */
/* T3: branded sitewide header (matches homepage cmpnav)              */
/* ------------------------------------------------------------------ */
nav#cmpnav.bpn-nuclear-header {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #DCE7E1 !important;
  z-index: 9999 !important;
}

nav#cmpnav .wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1080px !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  height: 70px !important;
  position: relative !important;
  box-sizing: border-box !important;
}

nav#cmpnav .logo {
  font-family: 'Lexend', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.35rem !important;
  color: #047857 !important;
  line-height: 1 !important;
}

nav#cmpnav .logo span {
  color: #F59E0B !important;
}

nav#cmpnav .navlinks.bpn-nuclear-header {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  align-items: center !important;
  gap: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
}

nav#cmpnav .navlinks.bpn-nuclear-header a {
  color: #1A2B22 !important;
  text-decoration: none !important;
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.98rem !important;
  margin: 0 !important;
}

nav#cmpnav .navlinks.bpn-nuclear-header a:hover {
  color: #059669 !important;
}

nav#cmpnav .navtoggle.bpn-nuclear-header {
  display: none !important;
  background: none !important;
  border: 0 !important;
  cursor: pointer !important;
  width: 44px !important;
  height: 44px !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 8px !important;
}

nav#cmpnav .navtoggle.bpn-nuclear-header span {
  display: block !important;
  height: 3px !important;
  width: 24px !important;
  background: #1A2B22 !important;
  border-radius: 2px !important;
}

@media (max-width: 820px) {
  nav#cmpnav .navtoggle.bpn-nuclear-header {
    display: flex !important;
  }

  nav#cmpnav .navlinks.bpn-nuclear-header {
    display: none !important;
    position: absolute !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    background: #FFFFFF !important;
    padding: 6px 24px 14px !important;
    border-bottom: 1px solid #DCE7E1 !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
    z-index: 9999 !important;
  }

  nav#cmpnav.open .navlinks.bpn-nuclear-header {
    display: flex !important;
  }

  nav#cmpnav .navlinks.bpn-nuclear-header a {
    padding: 12px 0 !important;
    width: 100% !important;
    font-size: 1.05rem !important;
  }
}

@media (max-width: 414px) {
  nav#cmpnav .wrap {
    padding: 0 14px !important;
  }
}

/* ------------------------------------------------------------------ */
/* T4: calculator / tool heading colours                              */
/* ------------------------------------------------------------------ */
body:has(.cmp-calc) .art-postheader.entry-title,
body:has(.sbb-page) .art-postheader.entry-title {
  display: none !important;
}

.cmp-calc__title,
.art-postheader.entry-title {
  color: #059669 !important;
  font-family: 'Lexend', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

.art-postcontent:has(.cmp-calc) h1,
.art-postcontent:has(.cmp-calc) h2,
.art-postcontent:has(.sbb-page) h2,
.cmp-calc h2,
.cmp-calc h3 {
  color: #059669 !important;
  font-family: 'Lexend', system-ui, sans-serif !important;
  font-style: normal !important;
}

/* ------------------------------------------------------------------ */
/* T5: emerald checkbox / radio accent                                */
/* ------------------------------------------------------------------ */
.cmp-calc input[type="checkbox"],
.cmp-calc input[type="radio"],
.cmp-calc .cmp-calc__field input[type="checkbox"],
.cmp-calc .cmp-calc__field input[type="radio"] {
  accent-color: #059669 !important;
}

/* ------------------------------------------------------------------ */
/* T9: centred calculator / landing column                            */
/* ------------------------------------------------------------------ */
body:has(.cmp-calc) .art-sheet,
body:has(.sbb-page) .art-sheet {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

body:has(.cmp-calc) .art-content-layout-row,
body:has(.sbb-page) .art-content-layout-row {
  display: block !important;
}

body:has(.cmp-calc) .art-layout-cell.art-sidebar1,
body:has(.cmp-calc) .art-layout-cell.art-sidebar2,
body:has(.sbb-page) .art-layout-cell.art-sidebar1,
body:has(.sbb-page) .art-layout-cell.art-sidebar2 {
  display: none !important;
}

body:has(.cmp-calc) .art-layout-cell.art-content,
body:has(.sbb-page) .art-layout-cell.art-content {
  width: 100% !important;
  float: none !important;
}

body:has(.cmp-calc) #art-main .art-sheet,
body:has(.cmp-calc) .art-sheet,
body:has(.cmp-calc) .art-content-layout,
body:has(.cmp-calc) .art-content,
body:has(.sbb-page) #art-main .art-sheet,
body:has(.sbb-page) .art-content-layout,
body:has(.sbb-page) .art-content {
  padding-top: 16px !important;
}

.cmp-calc {
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ------------------------------------------------------------------ */
/* T6/T7/T10: SBB landing helpers (content CSS also updated)          */
/* ------------------------------------------------------------------ */
.sbb-page {
  margin: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.sbb-page .sbb-hero {
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.sbb-page .sbb-hero h1,
.sbb-page .sbb-hero .sbb-sub {
  color: #FFFFFF !important;
}

.sbb-page .sbb-section h2 {
  color: #059669 !important;
}

.sbb-page .sbb-bullets {
  list-style: none !important;
  padding-left: 0 !important;
}

.sbb-page .sbb-bullets li {
  position: relative !important;
  padding-left: 1.75rem !important;
}

.sbb-page .sbb-bullets li::before {
  content: "\2713" !important;
  position: absolute !important;
  left: 0 !important;
  color: #059669 !important;
  font-weight: 800 !important;
}

/* Prevent horizontal scroll on mobile */
html,
body {
  overflow-x: hidden !important;
}

#art-main,
.art-sheet,
.art-content,
.art-postcontent {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ------------------------------------------------------------------ */
/* Round 2: mobile / responsive (360-414px focus)                     */
/* ------------------------------------------------------------------ */
@media (max-width: 540px) {
  .cmp-calc__title {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }

  .cmp-calc {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Stack multi-column calculator layouts */
  .cmp-calc__spec-grid,
  .cmp-calc__result-grid,
  .cmp-calc__result-row,
  .cmp-calc__preset-row,
  .cmp-calc__row,
  .cmp-calc__summary-grid,
  .cmp-calc__path-grid,
  .cmp-calc__verdict-grid,
  .cmp-calc__compare-grid,
  .cmp-calc__appliance-row,
  .cmp-calc__mode-toggle {
    grid-template-columns: 1fr !important;
  }

  .cmp-calc__radio-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .cmp-calc__radio {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cmp-calc__radio-label,
  .cmp-calc__chip,
  .cmp-calc__preset,
  .cmp-calc__btn,
  .cmp-calc__btn--secondary,
  .cmp-calc a.cmp-calc__btn,
  .cmp-calc button.cmp-calc__btn,
  .cmp-calc a.cmp-calc__btn--master,
  .cmp-calc a.cmp-calc__result-cta {
    min-height: 44px !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .cmp-calc__cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .cmp-calc__cta-row > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  .cmp-calc__input,
  .cmp-calc__select {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  /* Result / cost readouts: contain long numbers */
  .cmp-calc__result,
  .cmp-calc__result-row > *,
  .cmp-calc__result-grid > *,
  .cmp-calc__summary-card,
  .cmp-calc__stat,
  .cmp-calc__path-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .cmp-calc__result-amount,
  .cmp-calc__stat-value,
  .cmp-calc__path-value,
  .cmp-calc__verdict-amount {
    font-size: clamp(22px, 8vw, 36px) !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .cmp-calc table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* SBB: GHL embed container only */
  .sbb-page .sbb-form-wrap,
  .sbb-page .sbb-panel,
  .sbb-page .sbb-wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .sbb-page .sbb-form-wrap iframe,
  .sbb-page iframe {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sbb-page .sbb-hero {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}