/**
 * BioRecoveryUSA — Blog Posts & Guides Layout (br-posts.css)
 * Version: 3.6.3
 * Single source of truth for post content: Sticky TOC + Main Article
 * Header, Footer, and Hero are centrally styled in br-global.css
 */

/* ============================================================
   1. POST CONTENT GRID (Sticky TOC + Article)
   ============================================================ */
.single .content-grid,
.single .article-layout,
.single .article-shell {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  grid-template-areas: "toc article" !important;
  gap: 48px !important;
  align-items: start !important;
  width: min(100% - 48px, 1140px) !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 64px !important;
  box-sizing: border-box !important;
}

/* Sticky Table of Contents in Left Column (grid-area: toc) */
.single .content-grid > .br-toc-wrapper,
.single .content-grid > aside.toc,
.single aside.toc,
.single .article-layout > aside.article-rail {
  grid-area: toc !important;
  position: sticky !important;
  top: 96px !important;
  width: 100% !important;
  max-width: 260px !important;
  background: #ffffff !important;
  border: 1px solid #dce5de !important;
  border-radius: 12px !important;
  padding: 24px 22px !important;
  box-shadow: 0 4px 16px rgba(18, 42, 29, 0.05) !important;
  box-sizing: border-box !important;
}

.single aside.toc h2,
.single aside.toc h3,
.single aside.toc strong {
  display: block !important;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--brand, #176b45) !important;
  margin: 0 0 14px 0 !important;
  border-bottom: 1px solid #e5ede7 !important;
  padding-bottom: 8px !important;
}

.single aside.toc ol,
.single aside.toc ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.single aside.toc li {
  margin: 0 !important;
  padding: 0 !important;
}

.single aside.toc li a {
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
  font-size: 0.92rem !important;
  color: #2c4234 !important;
  text-decoration: none !important;
  line-height: 1.45 !important;
  display: block !important;
  transition: color 0.15s ease !important;
}

.single aside.toc li a:hover {
  color: var(--brand, #176b45) !important;
  text-decoration: underline !important;
}

/* Article Body Column in Right Column (grid-area: article) */
.single .content-grid > article.article,
.single article.article,
.single .article-layout > article {
  grid-area: article !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.single article.article > section {
  margin-bottom: 44px !important;
}

.single article.article h2 {
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif) !important;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important;
  color: #14231b !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  margin: 44px 0 18px 0 !important;
  line-height: 1.25 !important;
  border-bottom: 1px solid #e2ece5 !important;
  padding-bottom: 10px !important;
}

.single article.article h2:first-of-type {
  margin-top: 0 !important;
}

.single article.article h3 {
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif) !important;
  font-size: clamp(1.25rem, 1.8vw, 1.45rem) !important;
  color: #172d21 !important;
  font-weight: 600 !important;
  margin: 28px 0 12px 0 !important;
  line-height: 1.35 !important;
}

.single article.article p {
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
  font-size: 1.05rem !important;
  line-height: 1.72 !important;
  color: #1a2a20 !important;
  margin: 0 0 20px 0 !important;
}

.single article.article ul,
.single article.article ol {
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
  color: #24382c !important;
  margin: 0 0 24px 0 !important;
  padding-left: 24px !important;
}

.single article.article li {
  margin-bottom: 8px !important;
}

/* Callout & Lede Box in Posts */
.single .lede-box,
.single .key-takeaways {
  background: #f2f7f4 !important;
  border: 1px solid #d4e2d8 !important;
  border-left: 5px solid #176B45 !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  margin: 32px 0 !important;
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
  color: #172d21 !important;
  box-shadow: 0 2px 10px rgba(23, 107, 69, 0.04) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.single .lede-box strong,
.single .key-takeaways strong {
  color: #0d281a !important;
  font-weight: 700 !important;
}

/* Term Grids in Posts */
.single .term-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 18px !important;
  margin: 28px 0 !important;
}

.single .term-card {
  background: #ffffff !important;
  border: 1px solid #dce5de !important;
  border-radius: 10px !important;
  padding: 22px 20px !important;
  box-shadow: 0 2px 8px rgba(18, 42, 29, 0.04) !important;
}

.single .term-card h3 {
  font-size: 1.1rem !important;
  color: #14231b !important;
  margin: 0 0 8px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.single .term-no {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--brand, #176b45) !important;
  background: #eaf5ef !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
}

.single .term-card p {
  font-size: 0.95rem !important;
  color: #496052 !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}

/* Contractor Advisory & Checklist Box */
.single .br-advisory-box {
  background: #ffffff !important;
  border: 2px solid var(--brand, #176b45) !important;
  border-radius: 14px !important;
  padding: 32px 36px !important;
  margin: 44px 0 !important;
  box-shadow: 0 6px 24px rgba(23, 107, 69, 0.07) !important;
  box-sizing: border-box !important;
}

.single .br-advisory-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--brand, #176b45) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 12px !important;
}

.single .br-advisory-box h3 {
  font-size: 1.4rem !important;
  color: #14231b !important;
  margin: 0 0 10px 0 !important;
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif) !important;
}

.single .br-advisory-box p {
  color: #496052 !important;
  font-size: 0.98rem !important;
  line-height: 1.65 !important;
  margin: 0 0 20px 0 !important;
}

.single .br-advisory-list {
  list-style: none !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 12px !important;
}

.single .br-advisory-list li {
  position: relative !important;
  padding-left: 28px !important;
  font-size: 0.98rem !important;
  color: #14231b !important;
  line-height: 1.55 !important;
}

.single .br-advisory-list li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  font-weight: bold !important;
  color: var(--brand, #176b45) !important;
  font-size: 1.1rem !important;
}

/* Related Guides Section */
.single .br-related-section {
  margin: 40px 0 28px 0 !important;
  padding: 36px 32px !important;
  background: #f1f6f2 !important;
  border: 1px solid #dce5df !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

.single .br-related-kicker {
  display: block !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--brand, #176b45) !important;
  margin-bottom: 6px !important;
}

.single .br-related-header h3 {
  font-size: 1.4rem !important;
  color: #14231b !important;
  margin: 0 0 8px 0 !important;
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif) !important;
}

.single .br-related-header p {
  font-size: 0.98rem !important;
  color: #496052 !important;
  margin: 0 0 24px 0 !important;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
}

.single .br-related-guides-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.single .br-related-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  background: #ffffff !important;
  border: 1px solid #dce5de !important;
  border-radius: 10px !important;
  padding: 22px 20px !important;
  text-decoration: none !important;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
}

.single .br-related-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--brand, #176b45) !important;
  box-shadow: 0 6px 20px rgba(23, 107, 69, 0.08) !important;
}

.single .br-related-card h4 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #14231b !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.4 !important;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
}

.single .br-related-card p {
  font-size: 0.95rem !important;
  color: #3b5244 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
}

/* Tables in Posts */
.single article.article table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 28px 0 !important;
  background: #ffffff !important;
  border: 1px solid #dce5de !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.single article.article th {
  background: #f1f6f2 !important;
  color: #14231b !important;
  font-weight: 700 !important;
  text-align: left !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #dce5de !important;
  font-size: 0.95rem !important;
}

.single article.article td {
  padding: 14px 18px !important;
  border-bottom: 1px solid #eef3f0 !important;
  font-size: 0.95rem !important;
  color: #24382c !important;
}

.single article.article tr:last-child td {
  border-bottom: none !important;
}

/* Responsive behavior */
@media (max-width: 900px) {
  .single .content-grid,
  .single .article-layout,
  .single .article-shell {
    display: flex !important;
    flex-direction: column !important;
    width: min(100% - 32px, 1140px) !important;
  }
  .single .content-grid > .br-toc-wrapper,
  .single .content-grid > aside.toc,
  .single aside.toc {
    order: -1 !important;
    position: static !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 32px !important;
  }
  .single .content-grid > article.article,
  .single article.article {
    order: 1 !important;
    width: 100% !important;
  }
}


/* ============================================================
   ARTICLE CTA BOX (.article-cta)
   ============================================================ */
.single article.article section.article-cta,
.single section.article-cta,
.br-entry .article-cta,
.article-cta {
  background: linear-gradient(135deg, #0e2218 0%, #153827 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  padding: 38px 36px 36px 36px !important;
  margin: 48px 0 !important;
  box-shadow: 0 8px 30px rgba(14, 34, 24, 0.14) !important;
  box-sizing: border-box !important;
}

.single article.article section.article-cta h2,
.single section.article-cta h2,
.br-entry .article-cta h2,
.article-cta h2 {
  color: #ffffff !important;
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif) !important;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  letter-spacing: -0.01em !important;
}

/* Direct paragraph under article-cta (on dark background) */
.single article.article section.article-cta > p,
.single section.article-cta > p,
.br-entry .article-cta > p,
.article-cta > p {
  color: #d8eee0 !important;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  margin-top: 0 !important;
  margin-bottom: 26px !important;
}

/* Nested advisory box inside article-cta (White background card) */
.single section.article-cta aside.br-advisory-box,
.article-cta aside.br-advisory-box {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 12px !important;
}

.single .br-advisory-box p,
.article-cta .br-advisory-box p,
.single section.article-cta .br-advisory-box p,
.br-entry aside.br-advisory-box p,
aside.br-advisory-box p {
  color: #3b5244 !important;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
  font-size: 0.98rem !important;
  line-height: 1.65 !important;
  margin: 0 0 20px 0 !important;
}

.single .br-advisory-box h3,
.article-cta .br-advisory-box h3,
aside.br-advisory-box h3 {
  color: #14231b !important;
}

.single .br-advisory-box li,
.article-cta .br-advisory-box li,
aside.br-advisory-box li {
  color: #14231b !important;
}

/* ============================================================
   POST NAVIGATION (Previous / Next Article Cards)
   ============================================================ */
.single .post-navigation {
  margin: 28px auto 44px auto !important;
  width: min(100% - 48px, 1140px) !important;
  max-width: 1140px !important;
  padding: 0 !important;
  border-top: 1px solid #e2e8e3 !important;
  padding-top: 32px !important;
  box-sizing: border-box !important;
}

.single .post-navigation .nav-links {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

/* Eliminate stray vertical divider line when only 1 post exists */
.single .post-navigation .nav-previous:after,
.single .post-navigation .nav-next:after,
.post-navigation .nav-previous:after,
.post-navigation .nav-next:after {
  display: none !important;
  content: none !important;
}

.single .post-navigation .nav-previous,
.single .post-navigation .nav-next {
  display: flex !important;
  position: relative !important;
  grid-column: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.single .post-navigation .nav-previous a,
.single .post-navigation .nav-next a {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid #dce5de !important;
  border-radius: 10px !important;
  padding: 18px 22px !important;
  text-decoration: none !important;
  color: #14231b !important;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
  font-weight: 600 !important;
  font-size: 1.02rem !important;
  line-height: 1.45 !important;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
}

.single .post-navigation .nav-previous a:hover,
.single .post-navigation .nav-next a:hover {
  border-color: var(--brand, #176b45) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(23, 107, 69, 0.08) !important;
  color: var(--brand, #176b45) !important;
}

.single .post-navigation-sub {
  margin-bottom: 6px !important;
}

.single .post-navigation-sub small {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-transform: uppercase !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--brand, #176b45) !important;
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif) !important;
}

.single .post-navigation-sub .kadence-svg-iconset {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
}

.single .post-navigation-sub svg {
  width: 13px !important;
  height: 13px !important;
}

.single .post-navigation .nav-next {
  text-align: right !important;
}

.single .post-navigation .nav-next .post-navigation-sub {
  justify-content: flex-end !important;
}

.single .post-navigation .nav-next a {
  align-items: flex-end !important;
  text-align: right !important;
}

/* ============================================================
   BOTTOM "KEEP READING" QUERY SECTION (Element 427)
   ============================================================ */
.single #main > .wp-block-heading,
.single .site-main > .wp-block-heading {
  width: min(100% - 48px, 1140px) !important;
  max-width: 1140px !important;
  margin: 16px auto 20px auto !important;
  padding: 0 !important;
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: #14231b !important;
  box-sizing: border-box !important;
}

.single #main > .wp-block-kadence-query,
.single .site-main > .wp-block-kadence-query {
  width: min(100% - 48px, 1140px) !important;
  max-width: 1140px !important;
  margin: 0 auto 64px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.single .wp-block-kadence-query .kb-query-grid-wrap {
  gap: 24px !important;
}

.single .wp-block-kadence-query .kb-query-item {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.single .wp-block-kadence-query .kb-query-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(23, 107, 69, 0.12) !important;
}