/* ==========================================================================
   CrackAnalytics — Course detail page (sql-interview-questions.html, reusable
   for other topic pages). Scoped to new classes (cd-*) plus light overrides
   of existing page-head / qa / badge / lesson-foot / sb-progress so the real
   lesson engine, mark-complete gating and bookmark stars keep working as-is.
   ========================================================================== */
:root{
  --hp-bg:#FFFFFF; --hp-bg-soft:#F6F8FC;
  --hp-navy:#101A33; --hp-navy-soft:#4B5468;
  --hp-blue:#2E5CE6; --hp-blue-dark:#1B3FC4; --hp-blue-soft:#EAF0FE;
  --hp-purple:#7C5CFC; --hp-purple-soft:#F1ECFF;
  --hp-green:#1FA971; --hp-green-soft:#E7F8EF;
  --hp-line:#E6E9F2;
  --hp-radius:16px; --hp-radius-lg:22px;
  --hp-shadow:0 1px 2px rgba(16,26,51,.04),0 10px 24px -14px rgba(16,26,51,.12);
}

body.course{background:var(--hp-bg)}
#content{background:var(--hp-bg)}

/* breadcrumb */
.breadcrumb{font-family:var(--font-body) !important}

/* ---------- course detail hero ---------- */
.cd-hero{max-width:1180px;margin:18px auto 0;padding:0 20px}
.cd-crumb{font-size:12.5px;color:var(--hp-navy-soft);margin-bottom:10px}
.cd-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.cd-top h1{font-family:var(--font-body);font-size:clamp(24px,3vw,32px);font-weight:800;color:var(--hp-navy);margin-bottom:6px}
.cd-top p.cd-sub{color:var(--hp-navy-soft);font-size:15px;max-width:62ch;line-height:1.55}
.cd-actions{display:flex;gap:10px;flex-shrink:0}
.cd-btn{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;padding:11px 20px;border-radius:11px;text-decoration:none;cursor:pointer;border:none;font-family:var(--font-body)}
.cd-btn.primary{background:var(--hp-blue);color:#fff}
.cd-btn.primary:hover{background:var(--hp-blue-dark)}
.cd-btn.ghost{background:#fff;color:var(--hp-navy);border:1.5px solid var(--hp-line)}
.cd-btn.ghost:hover{border-color:var(--hp-blue);color:var(--hp-blue)}

.cd-meta-row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.cd-meta-chip{background:var(--hp-bg-soft);border:1px solid var(--hp-line);border-radius:11px;padding:10px 16px;font-size:12.5px;color:var(--hp-navy-soft);display:flex;flex-direction:column;gap:2px;min-width:110px}
.cd-meta-chip b{color:var(--hp-navy);font-size:15px;font-family:var(--font-body)}

.cd-progress-wrap{max-width:1180px;margin:0 auto 8px}
.cd-progress-label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--hp-navy-soft);margin-bottom:6px}
.cd-progress-track{height:8px;background:var(--hp-line);border-radius:99px;overflow:hidden}
.cd-progress-track > span{display:block;height:100%;background:linear-gradient(90deg,var(--hp-blue),var(--hp-purple))}

/* ---------- tab bar ---------- */
.cd-tabs{max-width:1180px;margin:22px auto 0;padding:0 20px;display:flex;gap:6px;border-bottom:1.5px solid var(--hp-line);overflow-x:auto}
.cd-tab{flex-shrink:0;padding:12px 18px;font-size:13.5px;font-weight:700;color:var(--hp-navy-soft);text-decoration:none;border-bottom:2.5px solid transparent;white-space:nowrap}
.cd-tab:hover{color:var(--hp-navy)}
.cd-tab.active{color:var(--hp-blue);border-color:var(--hp-blue)}

/* ---------- overview: what you'll learn ---------- */
.cd-overview-grid{max-width:1180px;margin:26px auto 0;padding:0 20px;display:grid;grid-template-columns:1fr 300px;gap:24px}
.cd-learn-card{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-radius);padding:22px;box-shadow:var(--hp-shadow)}
.cd-learn-card h3{font-size:16px;margin-bottom:14px;color:var(--hp-navy)}
.cd-check-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cd-check-list li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--hp-navy-soft);line-height:1.5}
.cd-check-list li::before{content:"✓";color:var(--hp-green);font-weight:800;flex-shrink:0}
@media (max-width:640px){.cd-check-list{grid-template-columns:1fr}}

.cd-curriculum-card{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-radius);padding:20px;box-shadow:var(--hp-shadow);margin-top:20px}
.cd-curriculum-card h3{font-size:15px;margin-bottom:12px}
.cd-curr-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--hp-line);text-decoration:none;color:var(--hp-navy)}
.cd-curr-row:last-child{border-bottom:none}
.cd-curr-row .n{width:22px;height:22px;border-radius:50%;background:var(--hp-bg-soft);color:var(--hp-navy-soft);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cd-curr-row.done .n{background:var(--hp-green);color:#fff}
.cd-curr-row .t{flex:1;font-size:13.5px;font-weight:600}
.cd-curr-row .c{font-size:11.5px;color:var(--hp-navy-soft)}
.cd-curr-row.active{background:var(--hp-blue-soft);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:8px}

.cd-side{display:flex;flex-direction:column;gap:16px}
.cd-side-card{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-radius);padding:18px;box-shadow:var(--hp-shadow)}
.cd-side-card h4{font-size:13.5px;margin-bottom:10px;color:var(--hp-navy)}
.cd-side-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--hp-navy-soft);padding:6px 0;border-bottom:1px solid var(--hp-line)}
.cd-side-row:last-child{border-bottom:none}
.cd-side-row b{color:var(--hp-navy)}
@media (max-width:900px){.cd-overview-grid{grid-template-columns:1fr}}

/* ---------- page-head (existing element) restyled as content header inside each lesson ---------- */
.page-head h1{font-family:var(--font-body);color:var(--hp-navy)}
.page-head p{color:var(--hp-navy-soft)}
.updated-badge{color:var(--hp-navy-soft) !important}

/* ---------- question cards (existing .qa / .badge) ---------- */
details.qa{background:#fff;border:1px solid var(--hp-line);border-radius:12px;margin-bottom:10px;box-shadow:var(--hp-shadow)}
details.qa summary{padding:14px 16px;font-size:14px;font-weight:600;color:var(--hp-navy)}
.qa-body{padding:0 16px 16px;color:var(--hp-navy-soft);font-size:13.5px;line-height:1.65}
.badge{border-radius:99px !important;font-weight:700 !important}
.badge.easy{background:var(--hp-green-soft) !important;color:var(--hp-green) !important}
.badge.med{background:#FBF0D2 !important;color:#9A6A00 !important}
.badge.hard{background:#FBE4E1 !important;color:#B0362C !important}

/* ---------- lesson-foot / prev-next (existing) ---------- */
.lesson-foot{border-color:var(--hp-line) !important}
.pn-btn{border-radius:10px !important;font-family:var(--font-body)}
.pn-btn.next{background:var(--hp-blue) !important;border-color:var(--hp-blue) !important;color:#fff !important}

/* ---------- sidebar progress bar (existing #sb-fill) ---------- */
#sb-fill{background:linear-gradient(90deg,var(--hp-blue),var(--hp-purple)) !important}