/**
 * BioRecoveryUSA — Master Global Design System (br-global.css)
 * Single Source of Truth for Header, Footer, Hero, Typography & Process Components
 * Applied uniformly across ALL pages, posts, and homepage.
 * Version: 3.6.2
 */

:root {
  /* Brand Emerald Palette */
  --brand-dark: #0a331f;
  --brand: #176B45;
  --brand-light: #1e8757;
  --brand-tint: #eaf5ef;
  --brand-glow: rgba(23, 107, 69, 0.22);

  /* Eye-Comfort Foundations */
  --page-bg: #f8faf7;
  --surface: #ffffff;
  --surface-alt: #f1f6f2;
  --surface-raised: #ffffff;

  /* Human-Comfort Inks */
  --ink: #14231b;
  --ink-secondary: #2c4234;
  --ink-muted: #566e60;
  --ink-faint: #81988b;

  /* Structural Dividers */
  --line: #dce5df;
  --line-strong: #c2d4c7;

  /* Typography */
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;

  /* UI Tokens */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(18, 42, 29, 0.05);
  --shadow-md: 0 4px 16px rgba(18, 42, 29, 0.08);
  --shadow-lg: 0 12px 32px rgba(18, 42, 29, 0.12);
}

/* ============================================================
   1. BASE DOCUMENT RESET & BODY NORMALIZATION
   ============================================================ */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--page-bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--page-bg) !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Base Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-top: 0;
}

p {
  margin-top: 0;
  margin-bottom: 1.25rem;
  color: var(--ink-secondary);
}

a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--brand-dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Base Reading Containers */
.br-container {
  width: min(100% - 40px, 1160px);
  margin-inline: auto;
}

@media (max-width: 640px) {
  .br-container {
    width: min(100% - 28px, 1160px);
  }
}

/* Eliminate Kadence default gap between header and content across pages & posts */
body.page #inner-wrap,
body.page.content-vertical-padding-show #inner-wrap,
body.single #inner-wrap,
body.single.content-vertical-padding-show #inner-wrap,
body.single-post #inner-wrap,
body.page #primary,
body.single #primary,
body.page #main,
body.single #main,
body.page .content-wrap,
body.single .content-wrap,
body.page article.entry,
body.single article.entry,
body.page .entry-content-wrap,
body.single .entry-content-wrap,
body.page .entry-content,
body.single .entry-content,
body.page .br-entry,
body.single .br-entry {
  padding-top: 0 !important;
  margin-top: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Suppress Kadence duplicate featured image & headers on single posts */
body.single .post-thumbnail,
body.single .article-post-thumbnail,
body.single-post .post-thumbnail,
body.single .entry-hero,
body.single .entry-header {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Allow hero background to stretch 100% full width across pages and posts */
body.page .content-container.site-container,
body.single .content-container.site-container,
body.single-post .content-container.site-container,
body.page #primary,
body.single #primary,
body.page #main,
body.single #main,
body.page .content-wrap,
body.single .content-wrap,
body.page article.entry,
body.single article.entry,
body.page .entry-content-wrap,
body.single .entry-content-wrap,
body.page .entry-content,
body.single .entry-content,
body.page .br-entry,
body.single .br-entry {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Centered Reading Containers for Page Content below Hero */
body.page .content-grid,
body.page .policy-layout,
body.page .ctc-grid,
body.page .ctc-write {
  width: min(100% - 48px, 1140px) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.page .content-grid > article.article,
body.page .policy-layout > article,
body.page article.article {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

body.page .lede-box {
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  body.page .content-grid,
  body.page .policy-layout,
  body.page .ctc-grid,
  body.page .ctc-write {
    width: min(100% - 32px, 1140px) !important;
  }
}

/* Suppress Kadence default entry header / duplicate titles */
body.page .entry-hero,
body.page .page-hero-section,
body.page section.entry-hero,
body.page .entry-header.page-title {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* ============================================================
   2. GLOBAL HEADER (Site-Wide on All Pages, Posts & Home)
   ============================================================ */
header#masthead,
.site-header,
#masthead.site-header {
  background: #ffffff !important;
  border-bottom: 1px solid #dce5de !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
}

/* Header Container: perfectly centered and aligned with 1140px grid */
.site-header .site-container {
  width: min(100% - 48px, 1140px) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Header Navigation Bar Flex Alignment (Desktop): Logo Left, Menu Right */
#main-header .site-main-header-inner-wrap {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

#main-header .site-header-main-section-left {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}

#main-header .site-header-main-section-right:empty {
  display: none !important;
}

.brand img.custom-logo {
  max-width: 260px;
  height: auto;
  display: block;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
  font-family: var(--font-sans) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  transition: color 0.15s ease !important;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
  color: var(--brand) !important;
}

/* ============================================================
   3. GLOBAL HERO SECTION (Same Exact Appearance on All Pages)
   ============================================================ */
.br-hero-section,
.hero,
.masthead,
.ctc-hero,
body.page .hero,
body.single .hero,
body.single-post .hero,
.br-entry section.hero {
  position: relative !important;
  background: linear-gradient(135deg, #0e2218 0%, #153827 50%, #0d2218 100%) !important;
  color: #ffffff !important;
  padding: clamp(54px, 6vw, 84px) 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: clamp(40px, 5vw, 56px) !important;
  box-shadow: 0 8px 30px rgba(14, 34, 24, 0.12) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Hero Inner Content Wrapper */
.br-hero-section > .br-container,
body.page .hero-inner,
body.single .hero-inner,
body.single-post .hero-inner,
.br-entry .hero-inner,
body.page .masthead .wrap,
body.page .ctc-hero {
  box-sizing: border-box !important;
}

body.page .hero-inner,
body.page .masthead .wrap {
  width: min(100% - 40px, 1140px) !important;
  margin: 0 auto !important;
  position: relative;
  z-index: 1;
}

body.page .ctc-hero {
  text-align: left !important;
  padding-left: max(24px, calc((100% - 1140px) / 2)) !important;
  padding-right: max(24px, calc((100% - 1140px) / 2)) !important;
}

body.page .ctc-hero > * {
  max-width: 1140px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  position: relative;
  z-index: 1;
}

body.page .ctc-hero .ctc-eyebrow {
  display: inline-flex !important;
  margin-bottom: 20px !important;
}

body.page .ctc-hero h1 {
  margin: 0 0 20px 0 !important;
}

body.page .ctc-hero .ctc-lede {
  max-width: 820px !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  body.page .ctc-hero {
    padding-left: max(16px, calc((100% - 1140px) / 2)) !important;
    padding-right: max(16px, calc((100% - 1140px) / 2)) !important;
  }
}

/* Hero Pill Badges & Breadcrumbs (Homepage Parity) */
.br-pill-badge,
body.page .eyebrow,
body.page .ctc-eyebrow,
.hero .breadcrumbs,
body.page .hero .breadcrumbs,
body.single .hero .breadcrumbs,
body.single-post .hero .breadcrumbs,
.br-entry .breadcrumbs,
body.page .masthead .crumbs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #c8edd9 !important;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  margin-bottom: 20px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.br-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
}

body.page .hero .breadcrumbs a,
body.page .masthead .crumbs a {
  color: #c8edd9 !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

body.page .hero .breadcrumbs a:hover,
body.page .masthead .crumbs a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

body.page .hero .breadcrumbs span[aria-hidden="true"],
body.page .masthead .crumbs span[aria-hidden="true"] {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Hero Titles (Homepage Scale) */
.br-hero-title,
.hero h1,
body.page .hero h1,
body.single .hero h1,
body.single-post .hero h1,
.br-entry section.hero h1,
body.page .masthead h1,
body.page .ctc-hero h1 {
  font-size: clamp(2.35rem, 4.4vw, 3.5rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0 0 20px 0 !important;
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif) !important;
  font-weight: 700 !important;
}

/* Hero Subtitle / Lead Decks */
.br-hero-lead,
body.page .hero-deck,
.hero-deck,
body.page .hero-deck,
body.single .hero-deck,
body.single-post .hero-deck,
.br-entry .hero-deck,
body.page .hero-lead,
body.page .masthead .intro,
body.page .ctc-lede {
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
  font-size: clamp(1.05rem, 1.3vw, 1.18rem) !important;
  line-height: 1.7 !important;
  color: rgba(214, 232, 220, 0.95) !important;
  margin: 0 0 22px 0 !important;
  max-width: 820px !important;
}

body.page .hero-support {
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
  font-size: 1.02rem !important;
  color: #adc6b5 !important;
  line-height: 1.65 !important;
  margin: 0 0 24px 0 !important;
}

/* Hero Bylines / Metadata */
.article-meta,
body.page .article-meta,
body.single .article-meta,
body.single-post .article-meta,
.br-entry .article-meta,
body.page .masthead .updated {
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
  font-size: 0.88rem !important;
  color: #a3c4af !important;
  display: flex !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding-top: 18px !important;
  align-items: center !important;
}

body.page .article-meta span,
body.page .masthead .updated {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ============================================================
   4. NUMBERED PROCESS LIST (ol.process > li)
   ============================================================ */
ol.process,
.process ol,
body.page ol.process,
.br-entry .content-grid ol.process {
  list-style: none !important;
  counter-reset: process-step !important;
  margin: 36px 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  width: 100% !important;
}

ol.process > li,
.process ol > li,
ol > li.process,
body.page ol.process > li,
.br-entry .content-grid ol.process > li {
  counter-increment: process-step !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 20px !important;
  background: #ffffff !important;
  border: 1px solid #dce5de !important;
  border-radius: 14px !important;
  padding: 24px 28px !important;
  box-shadow: 0 2px 10px rgba(18, 42, 29, 0.03) !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  grid-template-columns: none !important;
}

ol.process > li::before,
.process ol > li::before,
ol > li.process::before,
body.page ol.process > li::before,
.br-entry .content-grid ol.process > li::before {
  content: counter(process-step) !important;
  flex-shrink: 0 !important;
  width: 38px !important;
  height: 38px !important;
  background: #eef7f2 !important;
  border: 1.5px solid #176B45 !important;
  color: #176B45 !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
  margin-top: 2px !important;
  position: static !important;
}

ol.process > li > div,
.process ol > li > div,
ol > li.process > div,
body.page ol.process > li > div,
.br-entry .content-grid ol.process > li > div {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
}

ol.process > li strong,
.process ol > li strong,
ol > li.process strong,
body.page ol.process strong,
.br-entry .content-grid ol.process strong {
  font-size: 1.15rem !important;
  color: #14231b !important;
  display: block !important;
  margin-bottom: 6px !important;
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

ol.process > li p,
.process ol > li p,
ol > li.process p,
body.page ol.process p,
.br-entry .content-grid ol.process p {
  margin: 0 !important;
  color: #3b5043 !important;
  line-height: 1.65 !important;
  font-size: 1rem !important;
}

/* ============================================================
   5. AUTHORITATIVE GLOBAL FOOTER (Shared Identically Site-Wide)
   ============================================================ */
footer#colophon,
#colophon.site-footer,
.site-footer {
  background: #0e2218 !important;
  color: #d2e4d9 !important;
  border-top: 1px solid #1a3828 !important;
  padding: 0 !important;
  margin: 0 !important;
}

footer#colophon .site-footer-wrap,
footer#colophon .site-footer-row-container,
footer#colophon .site-middle-footer-wrap,
footer#colophon .site-bottom-footer-wrap,
footer#colophon .site-footer-row-container-inner,
footer#colophon .site-container {
  background: transparent !important;
  background-color: transparent !important;
}

footer#colophon .site-container {
  width: min(100% - 48px, 1140px) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

footer#colophon .site-middle-footer-wrap {
  padding: 52px 0 36px !important;
}

footer#colophon .site-bottom-footer-wrap {
  padding: 24px 0 26px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

footer#colophon h1,
footer#colophon h2,
footer#colophon h3,
footer#colophon .widget-title {
  color: #ffffff !important;
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 16px !important;
  text-transform: none !important;
}

footer#colophon p {
  color: rgba(210, 228, 217, 0.88) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  margin: 0 0 12px 0 !important;
}

footer#colophon a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

footer#colophon a:hover {
  color: #5edaa0 !important;
  text-decoration: underline !important;
}

footer#colophon ul,
footer#colophon ul.menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

footer#colophon ul li,
footer#colophon ul.menu li {
  margin: 0 !important;
  padding: 0 !important;
}

footer#colophon .site-info,
footer#colophon .footer-html p {
  color: rgba(210, 228, 217, 0.75) !important;
  font-size: 0.88rem !important;
}

/* ============================================================
   6. GLOBAL DARK MODE ADAPTATION
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #0b1711;
    --surface: #122219;
    --surface-alt: #162b20;
    --surface-raised: #1a3326;
    --ink: #f0f7f2;
    --ink-secondary: #d2e4d9;
    --ink-muted: #9eb8a7;
    --line: #213a2c;
    --line-strong: #2f523f;
    --brand-tint: #143022;
  }

  body {
    background-color: #0b1711 !important;
    color: #e4eee7 !important;
  }

  header#masthead,
  .site-header,
  #masthead.site-header {
    background: #0e1e16 !important;
    border-bottom-color: #213a2c !important;
  }

  .main-navigation .primary-menu-container > ul > li.menu-item > a {
    color: #e4eee7 !important;
  }

  .main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
    color: #5edaa0 !important;
  }

  ol.process > li,
  .process ol > li,
  ol > li.process,
  body.page ol.process > li,
  .br-entry .content-grid ol.process > li {
    background-color: #122219 !important;
    border-color: #233e2f !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
  }

  ol.process > li strong,
  .process ol > li strong,
  ol > li.process strong,
  body.page ol.process strong,
  .br-entry .content-grid ol.process strong {
    color: #f0f7f2 !important;
  }

  ol.process > li p,
  .process ol > li p,
  ol > li.process p,
  body.page ol.process p,
  .br-entry .content-grid ol.process p {
    color: #a7bfae !important;
  }

  ol.process > li::before,
  .process ol > li::before,
  ol > li.process::before,
  body.page ol.process > li::before,
  .br-entry .content-grid ol.process > li::before {
    background: #173324 !important;
    border-color: #38a76d !important;
    color: #5edaa0 !important;
  }
}