/* final production-ready visual system */

:root{
  --final-light-bg:#f6f9ff;
  --final-light-surface:#ffffff;
  --final-light-surface-2:#eef4ff;
  --final-light-text:#0f172a;
  --final-light-muted:#475569;
  --final-light-line:rgba(15,23,42,0.08);
  --final-light-blue:#143e91;
  --final-light-blue-2:#1d4ed8;
  --final-light-blue-soft:#e8f1ff;
  --final-light-shadow:0 14px 34px rgba(15,23,42,0.08);
}

/* ---------- light theme foundation ---------- */
body:not(.theme-dark):not(.dark){
  background:
    radial-gradient(900px 340px at 50% -8%, rgba(29,78,216,0.08), transparent 62%),
    linear-gradient(180deg, var(--final-light-bg) 0%, #fdfefe 100%) !important;
  color:var(--final-light-text) !important;
}

body:not(.theme-dark):not(.dark) .header{
  background:linear-gradient(180deg, rgba(20,62,145,0.98), rgba(17,52,126,0.98)) !important;
  border-bottom:1px solid rgba(255,255,255,0.10) !important;
  box-shadow:0 6px 18px rgba(15,23,42,0.10) !important;
}

body:not(.theme-dark):not(.dark) .brand{
  color:#f8fbff !important;
}

body:not(.theme-dark):not(.dark) .navlinks a,
body:not(.theme-dark):not(.dark) .theme-toggle-btn{
  background:#ffffff !important;
  color:var(--final-light-text) !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  box-shadow:0 8px 18px rgba(15,23,42,0.08) !important;
}

body:not(.theme-dark):not(.dark) .navlinks a:hover,
body:not(.theme-dark):not(.dark) .navlinks a[aria-current="page"]{
  background:#f8fbff !important;
}

body:not(.theme-dark):not(.dark) .theme-toggle-btn{
  color:var(--final-light-blue) !important;
}

body:not(.theme-dark):not(.dark) .nav-icon-badge{
  background:var(--final-light-blue-soft) !important;
  border:1px solid rgba(29,78,216,0.08);
}

body:not(.theme-dark):not(.dark) .nav-icon path,
body:not(.theme-dark):not(.dark) .nav-icon circle{
  stroke:var(--final-light-blue) !important;
}

/* ---------- content readability ---------- */
body:not(.theme-dark):not(.dark) h1,
body:not(.theme-dark):not(.dark) h2,
body:not(.theme-dark):not(.dark) h3,
body:not(.theme-dark):not(.dark) .hero h1,
body:not(.theme-dark):not(.dark) .page-hero h1,
body:not(.theme-dark):not(.dark) .article-hero h1{
  color:var(--final-light-text) !important;
}

body:not(.theme-dark):not(.dark) p,
body:not(.theme-dark):not(.dark) li,
body:not(.theme-dark):not(.dark) .hero p,
body:not(.theme-dark):not(.dark) .page-card p,
body:not(.theme-dark):not(.dark) .step-card p,
body:not(.theme-dark):not(.dark) .article-shell p,
body:not(.theme-dark):not(.dark) .article-shell li,
body:not(.theme-dark):not(.dark) .meta-row,
body:not(.theme-dark):not(.dark) .lead{
  color:var(--final-light-muted) !important;
}

/* ---------- home page ---------- */
body:not(.theme-dark):not(.dark)[data-page="home"] .hero{
  background:#ffffff !important;
  border:none !important;
  box-shadow:none !important;
}

body:not(.theme-dark):not(.dark)[data-page="home"] .hero-sub,
body:not(.theme-dark):not(.dark)[data-page="home"] .hero-reflection-top{
  color:#4b5c72 !important;
}

body:not(.theme-dark):not(.dark)[data-page="home"] .hero-reflection-mid{
  color:#0f172a !important;
}

body:not(.theme-dark):not(.dark)[data-page="home"] .hero-reflection-strong{
  color:#1d4ed8 !important;
}

body:not(.theme-dark):not(.dark)[data-page="home"] .hero-image-wrap{
  border:1px solid rgba(15,23,42,0.08) !important;
  box-shadow:0 16px 36px rgba(15,23,42,0.10) !important;
  background:#ffffff !important;
}

body:not(.theme-dark):not(.dark)[data-page="home"] .start-here{
  background:linear-gradient(180deg, rgba(37,99,235,0.03), rgba(248,250,252,0.98)) !important;
}

body:not(.theme-dark):not(.dark)[data-page="home"] .journey-card,
body:not(.theme-dark):not(.dark)[data-page="home"] .track-card,
body:not(.theme-dark):not(.dark)[data-page="home"] .learning-card{
  background:linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%) !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  box-shadow:var(--final-light-shadow) !important;
  color:var(--final-light-text) !important;
}

body:not(.theme-dark):not(.dark)[data-page="home"] .journey-card h3,
body:not(.theme-dark):not(.dark)[data-page="home"] .track-card h3,
body:not(.theme-dark):not(.dark)[data-page="home"] .learning-card h3{
  color:var(--final-light-text) !important;
}

body:not(.theme-dark):not(.dark)[data-page="home"] .journey-card p,
body:not(.theme-dark):not(.dark)[data-page="home"] .track-card p,
body:not(.theme-dark):not(.dark)[data-page="home"] .learning-card p,
body:not(.theme-dark):not(.dark)[data-page="home"] .track-card li{
  color:#475569 !important;
}

body:not(.theme-dark):not(.dark)[data-page="home"] .journey-card .num,
body:not(.theme-dark):not(.dark)[data-page="home"] .learning-card .badge{
  background:rgba(37,99,235,0.10) !important;
  color:#1d4ed8 !important;
}

/* ---------- getting started / career / about cards ---------- */
body:not(.theme-dark):not(.dark)[data-page="getting-started"] .hero,
body:not(.theme-dark):not(.dark)[data-page="career-path"] .hero,
body:not(.theme-dark):not(.dark)[data-page="about"] .hero{
  background:linear-gradient(180deg, rgba(255,255,255,0.94), rgba(245,249,255,0.98)) !important;
  border:1px solid rgba(15,23,42,0.07) !important;
  box-shadow:var(--final-light-shadow) !important;
}

body:not(.theme-dark):not(.dark)[data-page="getting-started"] .step-card,
body:not(.theme-dark):not(.dark)[data-page="career-path"] .step-card,
body:not(.theme-dark):not(.dark)[data-page="career-path"] .card,
body:not(.theme-dark):not(.dark)[data-page="about"] .card{
  background:linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%) !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  box-shadow:var(--final-light-shadow) !important;
  color:var(--final-light-text) !important;
}

body:not(.theme-dark):not(.dark)[data-page="getting-started"] .step-num,
body:not(.theme-dark):not(.dark)[data-page="career-path"] .step-num{
  background:rgba(37,99,235,0.10) !important;
  color:#1d4ed8 !important;
  box-shadow:none !important;
}

/* ---------- search - in flow and centered ---------- */
.top-jump-wrap{
  width:min(1100px, calc(100% - 32px)) !important;
  margin:18px auto 18px !important;
  position:relative !important;
}

.topic-search{
  width:min(920px, 92%) !important;
  position:relative !important;
  margin:0 auto !important;
}

.topic-search-input{
  width:100% !important;
  min-height:56px !important;
}

.topic-search-panel{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  width:100% !important;
  margin-top:10px !important;
  max-height:280px !important;
  overflow:auto !important;
  z-index:1 !important;
}

.topic-search.open .topic-search-panel{
  display:block !important;
}

.topic-search-panel.panel-expanded{
  max-height:460px !important;
}

body:not(.theme-dark):not(.dark) .topic-search-input{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,0.10) !important;
  color:#0f172a !important;
  box-shadow:0 10px 24px rgba(15,23,42,0.05) !important;
}

body:not(.theme-dark):not(.dark) .topic-search-input::placeholder{
  color:#64748b !important;
}

body:not(.theme-dark):not(.dark) .topic-search-panel{
  background:rgba(255,255,255,0.98) !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  box-shadow:0 16px 34px rgba(15,23,42,0.08) !important;
}

body:not(.theme-dark):not(.dark) .topic-filter-row{
  border-bottom:1px solid rgba(15,23,42,0.06) !important;
}

body:not(.theme-dark):not(.dark) .topic-filter-chip{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  color:#334155 !important;
}

body:not(.theme-dark):not(.dark) .topic-filter-chip.active{
  background:rgba(37,99,235,0.10) !important;
  border-color:rgba(37,99,235,0.16) !important;
  color:#1d4ed8 !important;
}

body:not(.theme-dark):not(.dark) .topic-result-group{
  color:#64748b !important;
}

body:not(.theme-dark):not(.dark) .topic-result-label,
body:not(.theme-dark):not(.dark) .topic-empty{
  color:#0f172a !important;
}

body:not(.theme-dark):not(.dark) .topic-result:hover,
body:not(.theme-dark):not(.dark) .topic-result.active{
  background:rgba(37,99,235,0.06) !important;
}

body:not(.theme-dark):not(.dark) .topic-results-toggle{
  background:rgba(37,99,235,0.08) !important;
  border:1px solid rgba(37,99,235,0.12) !important;
  color:#1d4ed8 !important;
}

/* ---------- footer in light mode ---------- */
body:not(.theme-dark):not(.dark) .site-footer{
  background:linear-gradient(180deg, rgba(236,242,252,0.98), rgba(224,233,248,0.98)) !important;
  border-top:1px solid rgba(15,23,42,0.08) !important;
}

body:not(.theme-dark):not(.dark) .footer-links--premium a{
  color:#334155 !important;
}

body:not(.theme-dark):not(.dark) .footer-links--premium a::after{
  background:rgba(15,23,42,0.10) !important;
}

body:not(.theme-dark):not(.dark) .footer-copy--premium{
  color:#64748b !important;
}

body:not(.theme-dark):not(.dark) .footer-copy--premium strong{
  color:#0f172a !important;
}


/* live-site style header match */
body:not(.theme-dark):not(.dark) .header{
  background:linear-gradient(180deg, #173f8f 0%, #153a84 100%) !important;
  border-bottom:1px solid rgba(255,255,255,0.10) !important;
  box-shadow:none !important;
}

body:not(.theme-dark):not(.dark) .header-row{
  min-height:72px !important;
}

body:not(.theme-dark):not(.dark) .brand{
  color:#f8fbff !important;
}

body:not(.theme-dark):not(.dark) .brand-mark{
  background:linear-gradient(135deg,#2563eb,#38bdf8) !important;
}

body:not(.theme-dark):not(.dark) .navlinks{
  gap:12px !important;
}

body:not(.theme-dark):not(.dark) .navlinks a{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  box-shadow:0 6px 14px rgba(15,23,42,0.08) !important;
  padding:10px 18px !important;
  font-weight:700 !important;
}

body:not(.theme-dark):not(.dark) .navlinks a:hover,
body:not(.theme-dark):not(.dark) .navlinks a[aria-current="page"]{
  background:#ffffff !important;
  color:#0f172a !important;
}

body:not(.theme-dark):not(.dark) .nav-icon-badge{
  width:16px !important;
  height:16px !important;
  background:transparent !important;
  border:none !important;
}

body:not(.theme-dark):not(.dark) .nav-icon{
  width:12px !important;
  height:12px !important;
  flex:0 0 12px !important;
}

body:not(.theme-dark):not(.dark) .nav-icon svg{
  width:12px !important;
  height:12px !important;
}

body:not(.theme-dark):not(.dark) .nav-icon path,
body:not(.theme-dark):not(.dark) .nav-icon circle{
  stroke:#94a3b8 !important;
  stroke-width:2 !important;
}

body:not(.theme-dark):not(.dark) .navlinks a:hover .nav-icon path,
body:not(.theme-dark):not(.dark) .navlinks a:hover .nav-icon circle,
body:not(.theme-dark):not(.dark) .navlinks a[aria-current="page"] .nav-icon path,
body:not(.theme-dark):not(.dark) .navlinks a[aria-current="page"] .nav-icon circle{
  stroke:#94a3b8 !important;
}

body:not(.theme-dark):not(.dark) .theme-toggle-btn{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  box-shadow:0 6px 14px rgba(15,23,42,0.08) !important;
}



/* light theme dropdown centered fix */
.top-jump-wrap{
  width:min(980px, calc(100% - 32px)) !important;
  margin:18px auto 18px !important;
}

.top-jump-wrap [data-topic-search],
.top-jump-wrap .topic-search{
  width:min(860px, 92%) !important;
  max-width:860px !important;
  margin:0 auto !important;
  display:block !important;
}

.top-jump-wrap [data-topic-search] .topic-search-input,
.top-jump-wrap .topic-search .topic-search-input{
  width:100% !important;
}

.top-jump-wrap [data-topic-search] .topic-search-panel,
.top-jump-wrap .topic-search .topic-search-panel{
  width:100% !important;
  left:0 !important;
  right:auto !important;
  margin-top:10px !important;
}

body:not(.theme-dark):not(.dark) .top-jump-wrap [data-topic-search],
body:not(.theme-dark):not(.dark) .top-jump-wrap .topic-search{
  width:min(860px, 92%) !important;
  margin:0 auto !important;
}



/* title container fix: keep long internal page titles inside wrapper */
body:not([data-page="home"]) .hero h1,
body:not([data-page="home"]) .page-hero h1,
body:not([data-page="home"]) .article-hero h1{
  max-width:100% !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  font-size:clamp(34px, 5vw, 72px) !important;
  line-height:1.06 !important;
}

@media (max-width: 1200px){
  body:not([data-page="home"]) .hero h1,
  body:not([data-page="home"]) .page-hero h1,
  body:not([data-page="home"]) .article-hero h1{
    font-size:clamp(32px, 4.4vw, 58px) !important;
  }
}

@media (max-width: 900px){
  body:not([data-page="home"]) .hero h1,
  body:not([data-page="home"]) .page-hero h1,
  body:not([data-page="home"]) .article-hero h1{
    font-size:clamp(28px, 7vw, 44px) !important;
    line-height:1.08 !important;
  }
}


/* v181 search/filter visibility + duplicate header cleanup support */
.topic-search-panel{
  display:none;
}
.topic-search.open .topic-search-panel,
.topic-search:focus-within .topic-search-panel{
  display:block;
}
.topic-filter-row{
  display:flex !important;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.topic-filter-chip{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:6px 10px;
  border-radius:999px;
}
.topic-results{
  max-height:360px;
  overflow:auto;
}


/* v182 unified home theme + netflix card style */
body{
  transition: background .2s ease, color .2s ease;
}
body.theme-dark{
  background:
    radial-gradient(900px 380px at 72% 12%, rgba(56,189,248,0.20), transparent 42%),
    radial-gradient(800px 300px at 22% 78%, rgba(37,99,235,0.15), transparent 38%),
    linear-gradient(180deg, #09142a 0%, #0d2b63 58%, #0f172a 100%) !important;
  color:#eef4ff !important;
}
body:not(.theme-dark):not(.dark){
  background:
    radial-gradient(900px 340px at 50% -8%, rgba(29,78,216,0.08), transparent 62%),
    linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%) !important;
  color:#0f172a !important;
}
body.theme-dark .hero,
body.theme-dark .page-hero,
body.theme-dark .article-hero{
  background:transparent !important;
}
body.theme-dark .hero-image-wrap,
body.theme-dark .page-card,
body.theme-dark .step-card,
body.theme-dark .journey-card,
body.theme-dark .learning-card,
body.theme-dark .related-card,
body.theme-dark .gs-card,
body.theme-dark .inline-note,
body.theme-dark .article-shell .continue-box,
body.theme-dark .article-shell .promo-box{
  background:linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(15,23,42,0.78) 100%) !important;
  border:1px solid rgba(191,219,254,0.18) !important;
  border-radius:20px !important;
  box-shadow:0 12px 28px rgba(2,8,23,0.16) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body:not(.theme-dark):not(.dark) .page-card,
body:not(.theme-dark):not(.dark) .step-card,
body:not(.theme-dark):not(.dark) .journey-card,
body:not(.theme-dark):not(.dark) .learning-card,
body:not(.theme-dark):not(.dark) .related-card,
body:not(.theme-dark):not(.dark) .gs-card,
body:not(.theme-dark):not(.dark) .inline-note{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  border-radius:20px !important;
  box-shadow:0 12px 24px rgba(15,23,42,0.08) !important;
}
body.theme-dark .page-card h3,
body.theme-dark .step-card h3,
body.theme-dark .journey-card h3,
body.theme-dark .learning-card h3,
body.theme-dark .related-card h3,
body.theme-dark .article-shell h1,
body.theme-dark .article-shell h2,
body.theme-dark .article-shell h3,
body.theme-dark .content-wrap h1,
body.theme-dark .content-wrap h2{
  color:#ffffff !important;
}
body.theme-dark .page-card p,
body.theme-dark .step-card p,
body.theme-dark .journey-card p,
body.theme-dark .learning-card p,
body.theme-dark .related-card p,
body.theme-dark .article-shell p,
body.theme-dark .article-shell li,
body.theme-dark .content-wrap p{
  color:rgba(238,244,255,0.88) !important;
}
body.theme-dark .step-num,
body.theme-dark .journey-card .num{
  background:rgba(147,197,253,0.18) !important;
  color:#dbeafe !important;
}
body.theme-dark .inline-note{
  color:#dbeafe !important;
}

/* search/filter always visible and readable */
.topic-search{
  max-width:760px;
  margin:0 auto 22px;
}
.topic-search-panel{
  display:block !important;
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  margin-top:10px;
  max-height:none !important;
  overflow:visible !important;
  border-radius:18px !important;
}
.topic-search-input{
  width:100%;
  border-radius:18px !important;
  min-height:52px;
}
.topic-filter-row{
  display:flex !important;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.topic-filter-chip{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 12px;
  border-radius:999px;
  font-weight:700;
}
.topic-results{
  max-height:320px;
  overflow:auto;
}
body.theme-dark .topic-search-input{
  background:rgba(15,23,42,0.46) !important;
  border:1px solid rgba(191,219,254,0.18) !important;
  color:#eef4ff !important;
}
body.theme-dark .topic-search-panel{
  background:rgba(8,15,33,0.72) !important;
  border:1px solid rgba(191,219,254,0.14) !important;
}
body.theme-dark .topic-filter-chip{
  background:rgba(255,255,255,0.06) !important;
  color:#dbeafe !important;
  border:1px solid rgba(191,219,254,0.12) !important;
}
body.theme-dark .topic-filter-chip.active{
  background:rgba(59,130,246,0.22) !important;
  color:#ffffff !important;
}
body:not(.theme-dark):not(.dark) .topic-search-input{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  color:#0f172a !important;
}
body:not(.theme-dark):not(.dark) .topic-search-panel{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  box-shadow:0 12px 24px rgba(15,23,42,0.08) !important;
}
body:not(.theme-dark):not(.dark) .topic-filter-chip{
  background:#f8fbff !important;
  color:#143e91 !important;
  border:1px solid rgba(29,78,216,0.10) !important;
}
body:not(.theme-dark):not(.dark) .topic-filter-chip.active{
  background:#e8f1ff !important;
  color:#143e91 !important;
}

/* getting started should follow home theme normally */
body[data-page="getting-started"]{
  color:inherit !important;
}


/* v187 search cleanup: hidden until interaction, single scrollbar, proper theme on Getting Started */
.top-jump-wrap{
  position:relative !important;
  z-index:30 !important;
}
.topic-search{
  position:relative !important;
  width:min(860px, 92%) !important;
  margin:0 auto !important;
}
.topic-search.open,
.topic-search.results-expanded{
  margin-bottom:0 !important;
}
.topic-search-panel{
  display:none !important;
  position:absolute !important;
  top:58px !important;
  left:0 !important;
  width:100% !important;
  max-height:none !important;
  overflow:visible !important;
  z-index:60 !important;
}
.topic-search.open .topic-search-panel,
.topic-search:focus-within .topic-search-panel{
  display:block !important;
}
.topic-filter-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-bottom:12px !important;
}
.topic-results{
  max-height:280px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
.topic-search-panel.panel-expanded .topic-results{
  max-height:440px !important;
}
body:not(.theme-dark):not(.dark) .topic-search-panel{
  background:rgba(255,255,255,0.98) !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  border-radius:18px !important;
  box-shadow:0 16px 34px rgba(15,23,42,0.08) !important;
}
body.theme-dark .topic-search-panel,
body.dark .topic-search-panel{
  background:rgba(8,15,33,0.96) !important;
  border:1px solid rgba(191,219,254,0.12) !important;
  border-radius:18px !important;
  box-shadow:0 18px 36px rgba(2,8,23,0.30) !important;
}