@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&display=swap');

:root {
  --navy:    #07243f;
  --navy2:   #0a3060;
  --gold:    #e8a020;
  --gold-lt: #f5c060;
  --text:    #1a2535;
  --muted:   #4a5568;
  --border:  #dde3ea;
  --offwhite:#f4f7fb;
}

/* ── PAGE BACKGROUND — dark navy like homepage ── */
body { background: #07243f !important; }

/* ══ NAV ══════════════════════════════════════════════ */
nav.nav {
  background: rgba(5,28,52,0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.45) !important;
  position: sticky !important; top: 0 !important; z-index: 500 !important;
}
nav.nav .nav-inner {
  height: 66px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* All nav links */
nav.nav .nd-trigger,
nav.nav .nav-links > a:not(.nav-cta) {
  font-family: 'Oswald', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.82) !important;
  padding: 8px 13px !important;
  border-radius: 5px !important;
  transition: color .18s, background .18s !important;
}
nav.nav .nd-trigger:hover,
nav.nav .nav-links > a:not(.nav-cta):hover {
  color: #fff !important; background: rgba(255,255,255,0.08) !important;
}

/* BY STATE — gold to draw the eye */
nav.nav .nd-trigger:first-child,
nav.nav .nav-links .nav-dd:first-child .nd-trigger {
  color: var(--gold) !important;
  background: rgba(232,160,32,0.1) !important;
  border: 1px solid rgba(232,160,32,0.3) !important;
}
nav.nav .nav-links .nav-dd:first-child .nd-trigger:hover {
  background: rgba(232,160,32,0.18) !important;
  color: var(--gold-lt) !important;
}

/* Dropdown arrow */
nav.nav .nd-trigger::after { content: " ▾" !important; font-size: 9px !important; opacity: .6 !important; }

/* Dropdown panels */
nav.nav .nd-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 9999 !important;
  margin-top: 6px !important;
  background: #081e38 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 52px rgba(0,0,0,0.65) !important;
  min-width: 200px !important;
}
nav.nav .nd-menu.nd-open,
nav.nav .nav-dd:hover > .nd-menu {
  display: block !important;
}
nav.nav .nd-menu.nd-wide {
  display: none !important;
  min-width: 440px !important;
}
nav.nav .nd-menu.nd-wide.nd-open,
nav.nav .nav-dd:hover > .nd-menu.nd-wide {
  display: flex !important;
  gap: 0 !important;
}
nav.nav .nd-col {
  flex: 1 !important;
  padding: 8px 0 !important;
}
nav.nav .nav-dd {
  position: relative !important;
}
nav.nav .nd-menu a {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.82) !important;
  padding: 9px 20px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}
nav.nav .nd-menu a:hover {
  background: rgba(232,160,32,0.13) !important;
  color: #fff !important; padding-left: 26px !important;
}
nav.nav .nd-head {
  font-family: 'Oswald', sans-serif !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important;
  color: var(--gold) !important; padding: 10px 20px 4px !important;
}

/* CTA button */
nav.nav .nav-cta {
  font-family: 'Oswald', sans-serif !important;
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: 0.09em !important; text-transform: uppercase !important;
  background: var(--gold) !important; color: var(--navy) !important;
  padding: 10px 22px !important; border-radius: 5px !important;
}
nav.nav .nav-cta:hover { background: var(--gold-lt) !important; transform: translateY(-1px) !important; }

/* ══ BREADCRUMBS ══════════════════════════════════════ */
.hsc-breadcrumb {
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 9px 0;
}
.hsc-breadcrumb nav {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  position: static !important;
  height: auto !important;
  display: block !important;
}
.hsc-breadcrumb ol {
  display: flex; align-items: center; gap: 6px;
  list-style: none; flex-wrap: wrap;
}
.hsc-breadcrumb li { display: flex; align-items: center; gap: 6px; }
.hsc-breadcrumb a {
  font-size: 12px; color: rgba(255,255,255,0.52);
  text-decoration: none; font-family: 'Inter', sans-serif;
  transition: color .15s;
}
.hsc-breadcrumb a:hover { color: var(--gold); }
.hsc-breadcrumb .bc-sep { color: rgba(255,255,255,0.25); font-size: 11px; }
.hsc-breadcrumb .bc-current {
  font-size: 12px; color: var(--gold);
  font-family: 'Inter', sans-serif; font-weight: 600;
}

/* ══ HERO ══════════════════════════════════════════════ */
div.hero {
  position: relative !important; overflow: hidden !important;
  border-bottom: 3px solid var(--gold) !important;
}
div.hero img {
  filter: brightness(1.38) saturate(1.14) contrast(1.04) !important;
  animation: hsc-kb 13s ease-out forwards !important;
}
@keyframes hsc-kb { from{transform:scale(1.06)} to{transform:scale(1.0)} }
div.hero .hero-overlay {
  background: linear-gradient(to right, rgba(7,32,60,0.90) 30%, rgba(7,32,60,0.18) 100%) !important;
}
div.hero .hero-tag {
  background: rgba(232,160,32,0.16) !important;
  border: 1px solid rgba(232,160,32,0.42) !important;
  color: var(--gold) !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important; font-size: 11px !important;
}
div.hero h1 { font-family: 'Playfair Display', Georgia, serif !important; color: #fff !important; }
div.hero h1 em { color: var(--gold) !important; font-style: normal !important; }
div.hero .btn-primary { background: var(--gold) !important; color: var(--navy) !important; font-weight: 700 !important; border-radius: 7px !important; }
div.hero .btn-ghost { border-color: rgba(255,255,255,0.45) !important; color: #fff !important; border-radius: 7px !important; }

/* ══ WHITE CONTENT CARDS ══════════════════════════════ */
/* The page-body sits as a white card on dark navy */
.page-body {
  background: #ffffff !important;
  border-top: none !important;
  padding: 32px 24px !important;
}
.page-body > .inner,
.page-body .content-wrap,
body > .section,
body > .section-alt {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Main content column — white card */
.content {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 36px 40px !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.28) !important;
  border-top: 4px solid var(--gold) !important;
}

/* Sidebar also gets card treatment */
.sidebar {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Sections on pages without page-body (homepage sections) */
.section { background: #fff !important; }
.section-alt { background: var(--offwhite) !important; }

/* ── Typography inside white cards ── */
.content h2, .content h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--navy) !important;
}
.content p { color: var(--text) !important; font-size: 16px !important; line-height: 1.78 !important; }
span.section-tag {
  font-family: 'Oswald', sans-serif !important;
  color: var(--gold) !important; font-weight: 700 !important;
  letter-spacing: 0.12em !important; font-size: 14px !important;
  text-transform: uppercase !important; display: flex !important;
  align-items: center !important; gap: 12px !important; margin-bottom: 8px !important;
}
span.section-tag::before {
  content: '' !important; display: block !important;
  width: 34px !important; height: 3px !important; background: var(--gold) !important; flex-shrink: 0 !important;
}

/* Images inside content */
.content img {
  border-radius: 10px !important;
  box-shadow: 0 4px 24px rgba(14,32,64,0.12) !important;
  margin: 20px 0 !important;
}

/* Info boxes */
.info-box {
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--gold) !important;
  border-radius: 0 8px 8px 0 !important;
  background: #fff !important;
}
.info-box:hover { box-shadow: 0 0 0 1px rgba(232,160,32,0.3), 0 4px 20px rgba(232,160,32,0.14) !important; }
.info-box h4 { color: var(--navy) !important; }

/* Compare tables */
.compare-table th {
  background: var(--navy) !important; color: var(--gold) !important;
  font-family: 'Oswald', sans-serif !important; letter-spacing: 0.06em !important;
  text-transform: uppercase !important; font-size: 12px !important;
}
.compare-table tr.highlight-row td { background: rgba(232,160,32,0.07) !important; }

/* Warning / callout boxes */
.warning-box {
  border-left: 4px solid var(--gold) !important; border-radius: 0 8px 8px 0 !important;
  background: rgba(232,160,32,0.06) !important;
}

/* Gouge banner */
.gouge-banner {
  border-left: 4px solid #ef4444 !important; border-radius: 0 8px 8px 0 !important;
  background: rgba(239,68,68,0.05) !important;
}

/* Pros/cons */
.pros { border-top: 3px solid #22c55e !important; }
.cons { border-top: 3px solid #ef4444 !important; }

/* Product/guide/state cards */
.product-card { background: #fff !important; }
.product-card:hover { border-color: rgba(232,160,32,0.5) !important; box-shadow: 0 0 0 1px rgba(232,160,32,0.3), 0 8px 32px rgba(232,160,32,0.12) !important; }
.state-card { background: #fff !important; }
.state-card:hover { border-color: var(--gold) !important; }
.guide-card:hover, .comp-card:hover { border-color: rgba(232,160,32,0.45) !important; box-shadow: 0 0 0 1px rgba(232,160,32,0.2) !important; }

/* Stats bar */
.stats-bar { border-bottom: 3px solid var(--gold) !important; }
.stat-num { color: var(--gold) !important; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg,#05172a 0%,#0c2f5c 55%,#05172a 100%) !important;
  border-top: 3px solid var(--gold) !important;
}
.cta-band h2 { color: #fff !important; }
.cta-band p { color: rgba(255,255,255,0.62) !important; }
.cta-btn-big {
  font-family: 'Oswald', sans-serif !important; font-weight: 700 !important;
  letter-spacing: 0.07em !important; background: var(--gold) !important;
  color: var(--navy) !important; border-radius: 8px !important;
}
.cta-btn-big:hover { background: var(--gold-lt) !important; }

/* ══ FOOTER ══════════════════════════════════════════ */
footer.footer {
  background: #040e1c !important;
  border-top: 3px solid var(--gold) !important;
}
nav.nav + * { } /* spacer override handled by sticky */

/* ══ MOBILE ══════════════════════════════════════════ */
@media (max-width: 768px) {
  nav.nav .nav-links { display: none !important; }
  .content { padding: 24px 18px !important; border-radius: 8px !important; }
  .page-body { padding: 16px !important; }
}

/* ── RESPONSIVE OVERFLOW FIX ── */
img { max-width: 100%; height: auto; display: block; }
table { max-width: 100%; }
.compare-table { table-layout: auto; word-break: break-word; }
figure { max-width: 100%; overflow: hidden; }
figure img { width: 100%; }


/* ══ DARK THEME — matches homepage ══════════════════════════ */

/* Body fully dark like homepage */
html, body {
  background: #07243f !important;
  color: #e8edf5 !important;
}

/* Page body — dark, no white card */
div.page-body {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 40px 24px !important;
}

/* Content column — dark background */
.content, div.content {
  background: rgba(255,255,255,0.05) !important;
  border-radius: 12px !important;
  padding: 36px 40px !important;
  box-shadow: none !important;
  border-top: 3px solid #e8a020 !important;
}

/* All text in content — light colored */
.content h2, .content h3, .content h4,
.content p, .content li, .content td,
.content th { color: #e8edf5 !important; }
.content h2 { border-top-color: rgba(255,255,255,0.1) !important; }
.content p { color: rgba(255,255,255,0.82) !important; }
.content li { color: rgba(255,255,255,0.82) !important; }

/* Section tags — amber, bigger */
span.section-tag, .section-tag {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #e8a020 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Info boxes — dark tinted */
.info-box, .warning-box, .gouge-banner,
.steps, .step, .pros, .cons,
.info-grid, .state-grid {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.85) !important;
}
.info-box h4, .info-box p { color: rgba(255,255,255,0.85) !important; }
.warning-box { background: rgba(232,160,32,0.12) !important; border-color: #e8a020 !important; color: #fde68a !important; }

/* Tables */
.compare-table th, .price-table th { background: #051627 !important; }
.compare-table td, .price-table td { color: rgba(255,255,255,0.82) !important; border-color: rgba(255,255,255,0.08) !important; }
.compare-table tr:nth-child(even) td, .price-table tr:nth-child(even) td { background: rgba(255,255,255,0.04) !important; }

/* Sidebar cards */
.sidebar-card, .info-card, .nav-card, .aff-card {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.sidebar-card h3, .info-card h4, .nav-card h4,
.sidebar-card p, .info-card p, .info-key, .info-val,
.related-links a, .nav-card a {
  color: rgba(255,255,255,0.82) !important;
}

/* Breadcrumb */
.breadcrumb, .hsc-breadcrumb {
  background: #051627 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.breadcrumb a, .bc, .bc-sep, .bc-current,
.hsc-breadcrumb a, .hsc-breadcrumb span {
  color: rgba(255,255,255,0.6) !important;
}
.bc-current { color: rgba(255,255,255,0.9) !important; }

/* State cards */
.state-card { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.1) !important; }
.state-card h4, .state-card p { color: rgba(255,255,255,0.85) !important; }

/* FAQ items */
.faq-item, .faq-q, .faq-a { border-color: rgba(255,255,255,0.1) !important; }
.faq-q { color: #e8edf5 !important; }
.faq-a { color: rgba(255,255,255,0.75) !important; }

/* Extra sections after page-body */
body > div, body > section {
  background: #07243f !important;
}
/* Keep hero and nav and facts bar their own dark color */
body > div.hero { background: transparent !important; }

@media (max-width: 768px) {
  .content { padding: 24px 16px !important; }
  div.page-body { padding: 16px !important; }
}

/* ══ v135b FIXES — sidebar, inline boxes, readability ══════ */

/* Sidebar nav-card links — dark alternating rows */
.nav-card a, .nav-card a:nth-child(odd), .nav-card a:nth-child(even) {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.82) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.nav-card a:hover { background: rgba(232,160,32,0.18) !important; color: #fff !important; }
.nav-card h3, .nav-card h4 { color: #e8a020 !important; border-bottom-color: rgba(232,160,32,0.3) !important; }
.nav-arrow { color: rgba(255,255,255,0.4) !important; }

/* Force ALL divs inside .content to dark — fixes inline-styled boxes */
.content > div,
.content > div > div {
  background-color: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
/* Keep images and figures transparent */
.content figure, .content figure div,
.content img, .content .info-grid,
.content .info-grid .info-box,
.content .state-grid, .content .state-grid .state-card,
.content .pros-cons, .content .pros-cons .pros,
.content .pros-cons .pros li, .content .pros-cons .cons li {
  background-color: rgba(255,255,255,0.06) !important;
}
.content figure { background: transparent !important; }

/* Figcaption readable */
.content figcaption, figcaption {
  color: rgba(255,255,255,0.55) !important;
  background: transparent !important;
}

/* Strong/bold text in dark boxes */
.content > div strong, .content > div p, .content > div li {
  color: rgba(255,255,255,0.85) !important;
}
.content > div > strong[style*="color:#991b1b"],
.content > div > strong[style*="color:#0e2040"] {
  color: #fde68a !important;
}

/* Info rows in sidebar */
.info-row { border-color: rgba(255,255,255,0.08) !important; }
.info-key { color: rgba(255,255,255,0.55) !important; }
.info-val { color: rgba(255,255,255,0.9) !important; }

/* Pros/cons */
.pros { background: rgba(0,200,80,0.1) !important; border-color: rgba(0,200,80,0.25) !important; }
.cons { background: rgba(200,50,0,0.1) !important; border-color: rgba(200,50,0,0.25) !important; }
.pros h4 { color: #6ee7a0 !important; }
.cons h4 { color: #fca5a5 !important; }
.pros li { color: #a7f3d0 !important; }
.cons li { color: #fecaca !important; }

/* Step numbers */
.step-num { background: #e8a020 !important; color: #07243f !important; }
.step-body h4 { color: #e8edf5 !important; }
.step-body p { color: rgba(255,255,255,0.7) !important; }
.step { border-color: rgba(255,255,255,0.08) !important; }

/* FAQ */
.faq-item { border-color: rgba(255,255,255,0.08) !important; }
.faq-q { color: #e8edf5 !important; }
.faq-a { color: rgba(255,255,255,0.72) !important; }

/* ══ v136 SIDEBAR DARK FIX ══════════════════════════════ */
.sidebar, div.sidebar {
  background: transparent !important;
  box-shadow: none !important;
}
.sidebar > div, .sidebar > *,
.nav-card, .info-card, .estimate-card,
div.sidebar > div {
  background: rgba(5, 22, 45, 0.85) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,0.85) !important;
}
.nav-card h3, .nav-card h4,
.info-card h3, .info-card h4 {
  color: #e8a020 !important;
  border-bottom-color: rgba(232,160,32,0.3) !important;
}
.nav-card a, .nav-card a:nth-child(odd), .nav-card a:nth-child(even) {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.82) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 5px !important;
}
.nav-card a:hover { background: rgba(232,160,32,0.2) !important; color: #fff !important; }
.nav-arrow { color: rgba(255,255,255,0.35) !important; }
.info-row { border-color: rgba(255,255,255,0.08) !important; }
.info-key { color: rgba(255,255,255,0.5) !important; }
.info-val { color: rgba(255,255,255,0.9) !important; }

/* ══ v137 CATCH ALL INLINE WHITE BACKGROUNDS ══════════ */
/* Override any inline style="background:#fff..." divs */
div[style*="background:#ffffff"],
div[style*="background: #ffffff"],
div[style*="background:#fff;"],
div[style*="background:#f0f4fa"],
div[style*="background:#f8fafc"],
div[style*="background:#fffbf0"],
div[style*="background:#fff8e8"],
div[style*="background:#fff1f2"],
div[style*="background:#fff8f0"] {
  background-color: rgba(5,22,45,0.7) !important;
  color: rgba(255,255,255,0.85) !important;
}
/* But NOT sidebar special cards that have their own dark bg */
div[style*="background:linear-gradient(135deg,#7b0000"],
div[style*="background:linear-gradient(135deg,#1a3a5c"] {
  background-color: unset !important;
}

/* ══ FAQ QUESTION TEXT FIX — inline color:var(--navy) was invisible on dark bg ══ */
div[style*="color:var(--navy)"] {
  color: #e8a020 !important;
}

/* ══ FAQ QUESTION TEXT — guaranteed bright regardless of other overrides ══ */
.faq-question {
  color: #e8a020 !important;
  font-weight: 700 !important;
}

/* ══ SECTION-TAG — override blue to amber on dark backgrounds ══ */
.section-tag {
  color: #e8a020 !important;
}