/* CPN content refresh: loaded last on pages that still use modern-styles.css / additional-fixes.css.
   site-corporate-pages.css forces dark headings/body text inside #main-content with !important, which
   breaks every legacy component that sits on a colored background. These rules restore readable text
   and restyle legacy components to the corporate look (charcoal #191B18, red #A00000, white). */

:root {
  --primary-color: #A00000;
  --primary-dark: #7F0000;
  --link-color: #A00000;
  --accent-color: #A00000;
  --secondary-color: #191B18;
  --success-color: #1F6B45;
  --gray-500: #4B5563;
  --gray-600: #374151;
}

/* ---------- Page call-to-action bands: light accent panel (the sitewide charcoal band follows them) ---------- */
body.site-corporate #main-content .cta-section {
  background: #F8EDED !important;
  border-top: 1px solid #EBCFCF !important;
  border-bottom: 1px solid #EBCFCF !important;
  color: #1F2937 !important;
}
body.site-corporate #main-content div.cta-section {
  border: 1px solid #EBCFCF !important;
  border-left: 4px solid #A00000 !important;
  border-radius: 14px !important;
}
body.site-corporate #main-content .cta-section :is(h1, h2, h3, h4, h5, h6) {
  color: #191B18 !important;
  -webkit-text-fill-color: #191B18 !important;
}
body.site-corporate #main-content .cta-section :is(p, li, small, em, span:not(.btn *), strong) {
  color: #1F2937 !important;
  -webkit-text-fill-color: #1F2937 !important;
}
body.site-corporate #main-content .cta-section a:not(.btn) {
  color: #A00000 !important;
  -webkit-text-fill-color: #A00000 !important;
  text-decoration: underline !important;
  font-weight: 700;
}
body.site-corporate #main-content .cta-section :is(.btn, a.btn) {
  background: #FFFFFF !important;
  color: #A00000 !important;
  -webkit-text-fill-color: #A00000 !important;
  border: 2px solid #A00000 !important;
  box-shadow: none !important;
}
body.site-corporate #main-content .cta-section :is(.btn, a.btn):hover {
  background: #FFF5F5 !important;
}
body.site-corporate #main-content .cta-section :is(.btn.btn-primary, a.btn-primary),
body.site-corporate #main-content .cta-section .cta-buttons > a.btn:first-child {
  background: #A00000 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: #A00000 !important;
}
body.site-corporate #main-content .cta-section :is(.btn.btn-primary, a.btn-primary):hover,
body.site-corporate #main-content .cta-section .cta-buttons > a.btn:first-child:hover {
  background: #7F0000 !important;
  border-color: #7F0000 !important;
}
body.site-corporate #main-content .cta-section .btn :is(i, span) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ---------- Inline-styled gradient boxes that declare white text ---------- */
body.site-corporate #main-content :is([style*="gradient"][style*="color: white"], [style*="gradient"][style*="color:white"], [style*="gradient"][style*="color: #fff"], [style*="gradient"][style*="color:#fff"], [style*="gradient"][style*="color: #FFF"]) :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, small, i, div) {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
body.site-corporate #main-content :is([style*="gradient"][style*="color: white"], [style*="gradient"][style*="color:white"], [style*="gradient"][style*="color: #fff"], [style*="gradient"][style*="color:#fff"]) a:not(.btn) {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-decoration: underline !important;
}

/* ---------- Light / outline-light buttons (meant for colored bands) ---------- */
body.site-corporate #main-content a.btn-light,
body.site-corporate #main-content .btn-light {
  background: #FFFFFF !important;
  color: #A00000 !important;
  -webkit-text-fill-color: #A00000 !important;
  border: 2px solid #FFFFFF !important;
}
body.site-corporate #main-content a.btn-light :is(i, span),
body.site-corporate #main-content .btn-light :is(i, span) {
  color: #A00000 !important;
  -webkit-text-fill-color: #A00000 !important;
}
body.site-corporate #main-content a.btn-outline-light,
body.site-corporate #main-content .btn-outline-light {
  background: transparent !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
}
body.site-corporate #main-content :is(a.btn-outline-light, .btn-outline-light) :is(i, span) {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* ---------- FAQ questions: light cards instead of solid colored bars ---------- */
body.site-corporate #main-content .faq-question {
  background: #FFFFFF !important;
  color: #191B18 !important;
  border: 1px solid #E5E7EB !important;
  border-left: 4px solid #A00000 !important;
  border-radius: 10px !important;
}
body.site-corporate #main-content .faq-question:hover {
  background: #F8EDED !important;
}
body.site-corporate #main-content .faq-question :is(h2, h3, h4, span, strong) {
  color: #191B18 !important;
  -webkit-text-fill-color: #191B18 !important;
}
body.site-corporate #main-content .faq-question i {
  color: #A00000 !important;
  -webkit-text-fill-color: #A00000 !important;
}

/* ---------- Pricing components ---------- */
body.site-corporate #main-content .pricing-card.featured .pricing-header {
  background: #191B18 !important;
  border-radius: 12px;
}
body.site-corporate #main-content .pricing-card.featured .pricing-header :is(h2, h3, h4, span, div, p) {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
body.site-corporate #main-content .pricing-card.featured .pricing-header .price {
  background: rgba(255, 255, 255, 0.08) !important;
}
body.site-corporate #main-content .featured-badge {
  background: #A00000 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
body.site-corporate #main-content .pricing-card .price :is(.currency, .amount, .period) {
  color: #A00000;
  -webkit-text-fill-color: #A00000;
}
body.site-corporate #main-content .price-badge {
  background: #191B18 !important;
  box-shadow: 0 12px 32px rgba(25, 27, 24, 0.18) !important;
}
body.site-corporate #main-content .price-badge :is(div, span, p, strong) {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
body.site-corporate #main-content .price-badge .price-breakdown,
body.site-corporate #main-content .price-badge .price-note {
  color: #E5E7EB !important;
  -webkit-text-fill-color: #E5E7EB !important;
}
body.site-corporate #main-content .price-badge .price-note {
  background: rgba(255, 255, 255, 0.1) !important;
}
body.site-corporate #main-content :is(.offer-badge, .special-offer .offer-badge) {
  background: #191B18 !important;
}
body.site-corporate #main-content .offer-badge :is(span, div, strong) {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
body.site-corporate #main-content .offer-badge .offer-savings {
  background: #A00000 !important;
}

/* ---------- Generic colored utility bands ---------- */
body.site-corporate #main-content :is(.bg-primary, .bg-dark, .bg-secondary) {
  background: #191B18 !important;
}
body.site-corporate #main-content :is(.bg-primary, .bg-dark, .bg-secondary) :is(h1, h2, h3, h4, h5, h6, p, li, span, strong) {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* ---------- Solid buttons instead of gradients ---------- */
body.site-corporate #main-content .btn-primary {
  background-image: none !important;
}

/* ---------- Typography: headings used "Source Sans 3", which is never loaded (fell back to Arial) ---------- */
body.site-corporate :is(h1, h2, h3, h4, h5, h6),
body.site-corporate #main-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  letter-spacing: -0.01em;
}
body.site-corporate #main-content h1 { font-weight: 800; }
body.site-corporate #main-content h2 { font-weight: 700; }
body.site-corporate #main-content :is(h3, h4) { font-weight: 700; }

/* ---------- Content lists: padding was 0, so bullets/numbers hung off-screen on phones ---------- */
body.site-corporate #main-content :is(ul, ol):not([class]):not([style*="list-style:none"]):not([style*="list-style: none"]):not(nav *):not([class*="card"] *):not(.breadcrumb *) {
  padding-left: 1.5rem !important;
  margin: 0 0 1.25rem !important;
}
body.site-corporate #main-content ul:not([class]):not([style*="list-style:none"]):not([style*="list-style: none"]):not(nav *):not([class*="card"] *) > li { list-style: disc; }
body.site-corporate #main-content ol:not([class]):not([style*="list-style:none"]):not([style*="list-style: none"]):not(nav *):not([class*="card"] *) > li { list-style: decimal; }
body.site-corporate #main-content :is(ul, ol):not([class]):not([style*="list-style:none"]):not([style*="list-style: none"]):not(nav *):not([class*="card"] *) > li { margin-bottom: 0.4rem; padding-left: 0.15rem; }
body.site-corporate #main-content :is(ul, ol, p, table) + :is(h2, h3) { margin-top: 2rem !important; }

/* ---------- Cards with no inner padding ---------- */
body.site-corporate #main-content .content-card {
  padding: 1.5rem 1.5rem 1.35rem !important;
  border-radius: 14px !important;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  box-shadow: 0 8px 24px rgba(25, 27, 24, 0.05);
}

/* ---------- Breadcrumbs: one separator per gap, left-aligned, compact band ---------- */
body.site-corporate #main-content .breadcrumb > li[aria-hidden="true"] { display: none !important; }
body.site-corporate #main-content nav[aria-label="Breadcrumb" i] .breadcrumb { justify-content: flex-start !important; }
body.site-corporate #main-content > section.section:has(> .container > nav[aria-label="Breadcrumb" i]:only-child) {
  padding: 1.25rem 0 0 !important;
  min-height: 0 !important;
}
body.site-corporate #main-content > section.section:has(> .container > nav[aria-label="Breadcrumb" i]:only-child) + section.section {
  padding-top: 1.5rem !important;
}

/* ---------- Honor the article widths pages set inline (legacy .container forced 1140px) ---------- */
body.site-corporate #main-content .container[style*="max-width:720px"], body.site-corporate #main-content .container[style*="max-width: 720px"] { max-width: 720px !important; }
body.site-corporate #main-content .container[style*="max-width:800px"] { max-width: 800px !important; }
body.site-corporate #main-content .container[style*="max-width:820px"] { max-width: 820px !important; }
body.site-corporate #main-content .container[style*="max-width:900px"] { max-width: 900px !important; }
body.site-corporate #main-content .container[style*="max-width:960px"] { max-width: 960px !important; }
body.site-corporate #main-content .container[style*="max-width:1040px"] { max-width: 1040px !important; }
body.site-corporate #main-content .container[style*="max-width:1100px"] { max-width: 1100px !important; }
body.site-corporate #main-content .container[style*="max-width:40rem"] { max-width: 40rem !important; }
body.site-corporate #main-content .container[style*="max-width:48rem"] { max-width: 48rem !important; }

/* ---------- Heading scale (keeps FAQ labels larger than the questions under them) ---------- */
body.site-corporate #main-content h1 { font-size: clamp(1.9rem, 4vw, 2.6rem) !important; line-height: 1.15 !important; }
body.site-corporate #main-content h2 { font-size: clamp(1.45rem, 3vw, 1.95rem) !important; line-height: 1.25 !important; }
body.site-corporate #main-content h3 { font-size: clamp(1.1rem, 2vw, 1.3rem) !important; line-height: 1.3 !important; }
body.site-corporate #main-content h4 { font-size: 1.05rem !important; line-height: 1.35 !important; }

/* ---------- Card rows: center an incomplete last row instead of leaving one card stranded left ---------- */
body.site-corporate #main-content .row { justify-content: center !important; }

/* ---------- Phones: real side gutters, scrollable tables, no mid-word breaks ---------- */
@media (max-width: 768px) {
  body.site-corporate #main-content .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.site-corporate #main-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  body.site-corporate #main-content :is(td, th) {
    word-break: normal !important;
    overflow-wrap: normal !important;
    min-width: 7.5rem;
  }
  body.site-corporate #main-content :is(ul, ol)[style*="columns"],
  body.site-corporate #main-content :is(ul, ol)[style*="column-count"] {
    columns: 1 !important;
    column-count: 1 !important;
  }
}

/* ---------- Former green promo boxes (inline gradients) -> charcoal brand panels ---------- */
body.site-corporate #main-content [style*="gradient"][style*="#1F6B45"] {
  background: linear-gradient(145deg, #191B18 0%, #2A2D29 100%) !important;
}

/* ---------- FAQ accordions: the wrapper added an empty strip under each closed question ---------- */
body.site-corporate #main-content .faq-item:has(> .faq-question) {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  margin-bottom: 0.75rem !important;
}
body.site-corporate #main-content .faq-item.active > :is(.faq-answer, .answer) {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

/* ---------- Breadcrumb sections with their own inline padding (legacy .section forced 4rem + 200px min-height) ---------- */
body.site-corporate #main-content > section.section[style*="padding-top:1.25rem"] {
  padding: 1.25rem 0 0.5rem !important;
  min-height: 0 !important;
}

/* ---------- Button rows written as <p><a class="btn">…</a> <a class="btn">…</a></p> ---------- */
body.site-corporate #main-content p:has(> a.btn + a.btn) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* ---------- Phones: drop the current-page crumb so long titles don't wrap with a stray separator ---------- */
@media (max-width: 600px) {
  body.site-corporate #main-content .breadcrumb > li[aria-current="page"] { display: none !important; }
  body.site-corporate #main-content .breadcrumb > li:has(+ li[aria-current="page"])::after,
  body.site-corporate #main-content .breadcrumb > li[aria-current="page"]::before { content: none !important; }
}

/* ---------- One-line "related link" footnote sections had a 200px minimum height ---------- */
body.site-corporate #main-content section[id^="fw-targeted-link"],
body.site-corporate section[id^="fw-targeted-link"] {
  min-height: 0 !important;
  padding: 1.25rem 0 !important;
}

/* ---------- Breadcrumbs written as a plain <p> of links in their own first section ---------- */
body.site-corporate #main-content > section.section:has(> .container > p:only-child > a[href="/"]) {
  padding: 1.25rem 0 0.25rem !important;
  min-height: 0 !important;
}
body.site-corporate #main-content > section.section:has(> .container > p:only-child > a[href="/"]) + section.section {
  padding-top: 1.5rem !important;
}

/* ---------- Phone numbers never break mid-number ---------- */
body.site-corporate a[href^="tel:"] { white-space: nowrap; }

/* ---------- Plain lists inside cards: keep bullets inside the card edge ---------- */
body.site-corporate #main-content [class*="card"] :is(ul, ol):not([class]):not([style*="list-style:none"]):not([style*="list-style: none"]) {
  padding-left: 1.35rem !important;
  margin-left: 0 !important;
}

/* ---------- Phones: stacked buttons need breathing room ---------- */
@media (max-width: 600px) {
  body.site-corporate #main-content :is(a.btn, .btn) + :is(a.btn, .btn) { margin-top: 0.65rem; }
}

/* ---------- FAQ items: no forced 88px minimum height (made spacing uneven) ---------- */
body.site-corporate #main-content .faq-item { min-height: 0 !important; }

/* ---------- Phones: small labels at least 12px; resource buttons tall enough to tap ---------- */
@media (max-width: 600px) {
  body.site-corporate #main-content :is(.gallery-hero-badge, .ts-eyebrow, .ni-tag, .gallery-stats .stat-label) { font-size: 12px !important; }
  html body.site-corporate #main-content .row .resource-card a.btn { min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; }
}
