/* Course presentation layer. Existing lesson content and interactions are unchanged. */
:root { --wt-fresh-ink:#10263f; --wt-fresh-copy:#435a75; --wt-fresh-muted:#5c708a; --wt-fresh-line:#d4e2f0; --wt-fresh-bg:#f4f8fd; --wt-fresh-blue:#096ba5; --wt-fresh-teal:#087c87; --wt-fresh-gold:#ba800d; }
html {scroll-padding-top:100px}
/* Keep the dynamically injected header visible while the lesson scrolls. */
#site-header {position:sticky;top:0;z-index:1000}
body,body.wt-index-page {background:var(--wt-fresh-bg);color:var(--wt-fresh-ink)}
body :is(a,button,input,select,textarea):focus-visible {outline:3px solid #d69b20;outline-offset:3px}
/* Nearly full width at desktop sizes, with modest side padding as in the OS course. */
.wt-index-layout,.wt-lesson-layout {width:min(100% - 28px,1920px);margin:0 auto;display:grid;grid-template-columns:268px minmax(0,1fr);gap:18px;align-items:start}
.wt-index-layout {padding-top:14px}
.wt-index-main,.wt-page {min-width:0}
.wt-index-main {padding:0 0 44px}
.wt-lesson-layout .wt-page {width:100%;max-width:none;margin:0;padding:14px 0 56px}
.wt-sidebar-host {top:86px;height:calc(100vh - 100px)}
.wt-sidebar {padding:0 3px 16px 0}
.wt-index-page {--wt-index-text:var(--wt-fresh-ink);--wt-index-soft:var(--wt-fresh-copy);--wt-index-muted:var(--wt-fresh-muted);--wt-index-border:var(--wt-fresh-line);--wt-index-border-soft:var(--wt-fresh-line);--wt-index-panel:#fff;--wt-index-panel-2:#f7faff;--wt-index-cyan:var(--wt-fresh-teal);--wt-index-cyan-soft:var(--wt-fresh-teal);--wt-index-gold:var(--wt-fresh-gold);--wt-index-gold-soft:#946415;--wt-index-orange:#9b650e;--wt-index-green:#117447}
/* Header and course hero retain the familiar CodeBhavya dark navy. */
.wt-course-header {position:relative;background:#0d2034;border-bottom:2px solid #e7b942;box-shadow:0 4px 16px #10263f15}
.wt-course-header :is(a,.wt-course-brand-name) {color:#f8fbff}
.wt-index-hero,.wt-hero {background:linear-gradient(120deg,#102339,#173b56);border:1px solid #2c5066;border-radius:20px;box-shadow:0 8px 28px #132b4420}
.wt-index-hero {padding:clamp(26px,3vw,46px)}
.wt-index-hero :is(h1,h2,h3,p,.wt-index-tagline,.wt-index-description),.wt-hero :is(h1,p,.hero-subtitle) {color:#f5f9ff}
.wt-index-hero :is(.wt-index-level-label,.wt-index-section-label),.wt-hero .level-badge {color:#f4c759}
.wt-index-hero :is(.wt-index-breadcrumb,.wt-index-breadcrumb a),.wt-hero :is(.wt-breadcrumb,.wt-breadcrumb a) {color:#c7e5ec}
.wt-index-hero-panel,.wt-snapshot-card {background:#ffffff12;border-color:#ffffff43;color:#fff}
.wt-index-hero-panel :is(h2,h3,p,strong,span),.wt-snapshot-card :is(p,strong,span) {color:#fff}
.wt-index-primary-btn {background:#f3c049;color:#102339}
.wt-index-secondary-btn {color:#fff;border-color:#d4e5ef}
/* Course home: compact white panels, legible descriptions, clear progress. */
.wt-sidebar-header,.wt-index-section,.wt-index-feature-card,.wt-level-card,.wt-learning-method-grid article,.wt-index-start-card,.wt-sidebar-footer-note {background:#fff;border:1px solid var(--wt-fresh-line);box-shadow:0 5px 18px #10263f0a}
.wt-sidebar-header {background:#102b45;border-radius:14px;padding:18px}
.wt-sidebar-header :is(h2,p,.wt-sidebar-kicker) {color:#fff}
.wt-sidebar-home {background:#fff;color:var(--wt-fresh-ink);border-color:var(--wt-fresh-line);margin-top:8px}
.wt-sidebar-home:hover,.wt-sidebar-level.available:hover,.wt-sidebar-level.available.current {background:#e9f6fa;border-color:#a9d5e0}
.wt-sidebar-part-title {color:#815809;font-size:11px}
.wt-sidebar-level-number {background:#edf6fa;border-color:#d7e8f0;color:#086b7b}
.wt-sidebar-level-info strong,.wt-sidebar-level.available {color:var(--wt-fresh-ink)}
.wt-sidebar-level-info strong {font-size:12px}
.wt-sidebar-level-info small {font-size:10px}
.wt-sidebar-level-info small {color:#147447}
.wt-sidebar-level.coming {opacity:1}
.wt-sidebar-level.coming .wt-sidebar-level-info strong {color:#63758a}
.wt-index-section {border-radius:18px;padding:clamp(20px,2.2vw,32px);margin-top:18px}
.wt-index-section-heading h2,.wt-index-feature-card h3,.wt-level-card h3,.wt-index-start-card h2,.wt-learning-method-grid article h3,.wt-roadmap-group-heading :is(h2,h3) {color:var(--wt-fresh-ink)}
.wt-index-section-heading p,.wt-index-feature-card p,.wt-level-card p,.wt-index-start-card p,.wt-learning-method-grid article p {color:var(--wt-fresh-copy);font-size:clamp(.84rem,.88vw,.95rem);line-height:1.6}
.wt-index-feature-grid,.wt-level-card-grid {gap:14px}
.wt-index-feature-card h3,.wt-learning-method-grid h3 {color:var(--wt-fresh-ink)}
.wt-learning-method-grid article > span {background:#eaf4fa;color:#0b6b81}
.wt-level-card {min-height:0;padding:19px;border-radius:12px}
.wt-level-card.available:hover {background:#f2fafd;border-color:#93cbd8}
.wt-level-card.coming {background:#f7f9fc;opacity:1}
.wt-level-card-bottom {color:var(--wt-fresh-muted)}
.wt-index-start-card {background:#fff9ea}
.wt-index-start-card h2 {font-family:Georgia,serif}
.wt-course-footer {background:#0d2034}
.wt-course-footer :is(h2,h3,p,span,a) {color:#e9eff8}
/* Lesson outline is generated from the existing section headings; no lessons are rewritten. */
.wt-lesson-sidebar {position:sticky;top:74px;max-height:calc(100vh - 102px);overflow:auto;padding:17px 10px;background:#fff;border:1px solid var(--wt-fresh-line);border-radius:16px;box-shadow:0 6px 20px #10263f0c;scrollbar-width:thin}
.wt-lesson-sidebar .wt-outline-title {display:block;padding:0 11px 12px;font-size:.8rem;font-weight:800;letter-spacing:.08em;color:#90630b;text-transform:uppercase}
.wt-lesson-sidebar a {display:block;padding:10px 12px;border-radius:9px;text-decoration:none;color:#25415d;font-size:.88rem;line-height:1.35}
.wt-lesson-sidebar a:hover,.wt-lesson-sidebar a:focus-visible,.wt-lesson-sidebar a[aria-current="location"] {background:#eaf5fb;color:#075f86}
.wt-lesson-sidebar .wt-course-back {font-weight:750;margin-bottom:12px;padding-bottom:15px;border-bottom:1px solid var(--wt-fresh-line)}
.wt-page .wt-hero {margin-bottom:16px;padding:clamp(25px,3vw,48px)}
.wt-page .content-section {background:#fff;border:1px solid var(--wt-fresh-line);border-radius:18px;margin:0 0 18px;padding:clamp(20px,2vw,32px);box-shadow:0 4px 16px #10263f09;overflow-wrap:anywhere}
.wt-page .section-heading {margin-bottom:20px}
.wt-page .section-heading h2 {color:var(--wt-fresh-ink);font-family:Georgia,serif}
.wt-page .section-heading p {color:var(--wt-fresh-muted)}
.wt-page .section-number {background:#eaf4fa;color:#086787;border-color:#cfe1ee}
.wt-page :is(.info-card,.article-card,.comparison-card,.architecture-card,.technology-card,.mistake-card,.qa-card,.mcq-card,.revision-card,.glossary-item,.roadmap-part,.completion-card,.topic-nav-btn,.practice-item,.scenario-card,.simple-node,.tier-card,.mvc-node,.side-panel,.stack-layer,.pipeline-step) {background:#f8fbff;border:1px solid var(--wt-fresh-line);box-shadow:none;color:var(--wt-fresh-ink)}

/* Flip cards keep the premium dark CodeBhavya treatment so all front-face text remains readable. */
.wt-page .flip-card-front {
  background:linear-gradient(145deg,#10263f,#173b56);
  border:1px solid #2c5066;
  color:#f5f9ff;
  box-shadow:0 10px 24px rgba(16,38,63,.18);
}
.wt-page .flip-card-back {
  background:linear-gradient(145deg,#12384b,#102b45);
  border:1px solid rgba(101,203,210,.32);
  color:#edf8fb;
}
.wt-page .flip-card-front :is(h3,h4,p,strong,li,.flip-card-question,.flip-card-term) {color:#f5f9ff}
.wt-page .flip-card-back :is(h3,h4,p,strong,li) {color:#edf8fb}
.wt-page .flip-card-front .flip-card-label {color:#f4c759;background:rgba(239,198,91,.12);border-color:rgba(239,198,91,.28)}
.wt-page .flip-card-back .flip-card-label {color:#65cbd2;background:rgba(101,203,210,.09);border-color:rgba(101,203,210,.28)}
.wt-page .flip-card-hint {color:#b9d7e5 !important}
.wt-page .flip-card-answer-note {color:#b9d7e5 !important}
.wt-page :is(.info-card,.article-card,.comparison-card,.architecture-card,.technology-card,.mistake-card,.qa-card,.mcq-card,.revision-card,.glossary-item,.roadmap-part,.completion-card,.topic-nav-btn,.practice-item,.scenario-card,.flip-card-front,.simple-node,.tier-card,.mvc-node,.side-panel,.stack-layer,.pipeline-step) :is(h2,h3,h4,strong,p,li,small) {color:var(--wt-fresh-ink)}
.wt-page :is(.info-card,.article-card,.comparison-card,.architecture-card,.technology-card,.mistake-card,.qa-card,.mcq-card,.revision-card,.glossary-item,.roadmap-part,.completion-card,.topic-nav-btn,.practice-item,.scenario-card,.flip-card-front,.simple-node,.tier-card,.mvc-node,.side-panel,.stack-layer,.pipeline-step) p {color:var(--wt-fresh-copy)}
.wt-page :is(.highlight-box,.note-box,.memory-box,.takeaway-card) {background:#fff7e4;color:var(--wt-fresh-ink);border-color:#e3c671}
.wt-page :is(.highlight-box,.note-box,.memory-box,.takeaway-card) :is(p,strong) {color:var(--wt-fresh-ink)}
.wt-page .comparison-table-wrap {background:#fff;border-color:var(--wt-fresh-line)}
.wt-page .comparison-table th {background:#eaf2fa;color:#123b60;border-color:var(--wt-fresh-line)}
.wt-page .comparison-table td {background:#fff;color:var(--wt-fresh-copy);border-color:var(--wt-fresh-line)}
.wt-page .mcq-option {background:#fff;color:var(--wt-fresh-ink);border-color:var(--wt-fresh-line)}
.wt-page .mcq-option:hover {background:#e8f5fa;color:var(--wt-fresh-ink)}
.wt-page .mcq-option.correct {background:#e2f6e9;color:#125b3b}
.wt-page .mcq-option.wrong {background:#fff0ed;color:#9b2a28}
.wt-page .show-answer {background:#eaf3fc;color:#095f89;border-color:var(--wt-fresh-line)}
.wt-page .completion-btn {background:#f3bd43;color:#10263f}
.wt-page .completion-btn.completed {background:#e2f5eb;color:#15653f}
.wt-page .topic-navigation,.wt-page .completion-section {margin:18px 0}
.wt-page .comparison-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  min-width:0;
}
.wt-page .comparison-grid:has(> .vs-badge) {
  grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);
}
.wt-page .comparison-grid:has(> .comparison-card:nth-child(3):last-child) {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.wt-page .comparison-grid:has(> .comparison-card:nth-child(4):last-child) {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.wt-page .comparison-grid > * {min-width:0;max-width:100%;box-sizing:border-box;}
.wt-page .comparison-grid pre {max-width:100%;overflow-x:auto;}
.wt-page :is(pre,table,svg,img,video,canvas) {max-width:100%}
.wt-page pre,.wt-page .comparison-table-wrap {overflow-x:auto}
/* Dense learning panels keep their diagram contrast and retain existing controls. */
.wt-page :is(.visualizer-shell,.trace-stage,.flip-card-back,.mvc-diagram,.api-architecture,.security-boundary,.cdn-layout) {color:#edf5fb}
@media (max-width:1050px) {.wt-index-layout,.wt-lesson-layout {grid-template-columns:230px minmax(0,1fr)}.wt-index-feature-grid,.wt-level-card-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px) {.wt-index-layout,.wt-lesson-layout {display:block;width:calc(100% - 20px)}.wt-lesson-sidebar {position:static;max-height:none;margin:10px 0;padding:12px}.wt-lesson-sidebar .wt-outline-links {display:flex;overflow:auto;gap:4px;white-space:nowrap;scrollbar-width:thin}.wt-lesson-sidebar .wt-outline-links a {flex:0 0 auto}.wt-lesson-sidebar .wt-course-back {margin-bottom:4px;padding-bottom:9px}.wt-sidebar-host {position:static;height:auto}.wt-sidebar {max-height:320px}.wt-page .wt-hero {padding:24px}.wt-page .content-section {padding:20px}.wt-index-main {padding-top:0}}
@media (max-width:540px) {.wt-index-feature-grid,.wt-level-card-grid,.wt-page :is(.objective-grid,.mcq-grid,.technology-grid,.comparison-grid,.architecture-grid) {grid-template-columns:1fr}.wt-page .comparison-grid .vs-badge {margin:0 auto}.wt-page .content-section {padding:17px}.wt-lesson-sidebar .wt-outline-title {padding-bottom:6px}}

/* Course index: keep the full roadmap available without putting it before the hero on phones. */
.wt-mobile-course-toggle {display:none}
@media (max-width:760px) {
  .wt-index-page .wt-mobile-course-toggle {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0 0 12px;padding:14px 17px;background:#fff;border:1px solid var(--wt-fresh-line);border-radius:12px;box-shadow:0 3px 12px #10263f0b;color:var(--wt-fresh-ink);font:750 1rem/1.25 Inter,Arial,sans-serif;cursor:pointer;text-align:left}
  .wt-index-page .wt-mobile-course-toggle::after {content:'▾';font-size:1.35rem;color:#096b81;transition:transform .18s}
  .wt-index-page .wt-mobile-course-toggle[aria-expanded="true"]::after {transform:rotate(180deg)}
  .wt-index-page.wt-mobile-nav-ready .wt-sidebar-host {display:none;margin:0 0 14px;height:auto;max-height:none;overflow:hidden;background:#fff;border:1px solid var(--wt-fresh-line);border-radius:14px}
  .wt-index-page.wt-mobile-nav-ready .wt-sidebar-host.wt-sidebar-mobile-open {display:block}
  .wt-index-page .wt-sidebar {max-height:min(62vh,520px);padding:12px;overflow-y:auto}
  .wt-index-page .wt-sidebar-header {padding:14px}
  .wt-index-page .wt-index-main {padding-top:0}
}

/* DBMS-style shared course drawer: works on the home page and every lesson. */
@media (max-width:760px) {
  body.wt-course-nav-enhanced .wt-mobile-course-toggle {
    display:block;position:relative;top:auto;z-index:auto;width:100%;
    margin:0;padding:13px 18px;border:0;border-radius:0;
    background:#103a59;color:#fff;box-shadow:0 3px 9px #122b401a;
    font:750 1rem/1.3 Inter,Arial,sans-serif;text-align:left;cursor:pointer;
  }
  body.wt-course-nav-enhanced .wt-mobile-course-toggle::after {content:none}
  body.wt-course-nav-enhanced .wt-mobile-course-backdrop:not([hidden]) {
    position:fixed;inset:var(--wt-course-drawer-top,116px) 0 0;z-index:930;
    background:rgba(7,24,40,.56);
  }
  body.wt-course-nav-enhanced :is(.wt-index-layout,.wt-lesson-layout) > .wt-sidebar-host {
    display:block;position:fixed;top:var(--wt-course-drawer-top,116px);bottom:0;left:0;
    z-index:950;width:min(360px,calc(100vw - 44px));max-width:calc(100vw - 44px);
    height:auto;max-height:none;margin:0;padding:0;overflow:hidden;
    border:0;border-radius:0;background:#fff;box-shadow:15px 0 30px #10263f35;
    transform:translateX(-105%);transition:transform .22s ease;
  }
  body.wt-course-nav-enhanced :is(.wt-index-layout,.wt-lesson-layout) > .wt-sidebar-host.wt-sidebar-mobile-open {
    transform:translateX(0);
  }
  body.wt-course-nav-enhanced :is(.wt-index-layout,.wt-lesson-layout) > .wt-sidebar-host .wt-sidebar {
    height:100%;max-height:none;overflow-y:auto;padding:14px 12px 38px;
  }
  body.wt-course-drawer-open {overflow:hidden}
  body.wt-course-nav-enhanced :is(.wt-index-layout,.wt-lesson-layout) {padding-top:14px}
  body.wt-course-nav-enhanced .wt-sidebar-fallback {display:block}
}


/* =========================================================
   CODEBHAVYA — DEFINITIVE FIXED HEADER
   Keep the injected header fixed to the viewport without
   creating blank space above it.
   ========================================================= */
:root {
  --wt-header-height: 70px;
}

html {
  scroll-padding-top: calc(var(--wt-header-height) + 12px) !important;
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* The host itself is the fixed viewport layer. */
#site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 99999 !important;
  transform: none !important;
}

/* The injected header must not participate in page scrolling. */
#site-header .wt-course-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  min-height: var(--wt-header-height) !important;
  margin: 0 !important;
}

/* Offset only the lesson content — NOT the body/header. */
body.wt-fixed-course-header .wt-page {
  padding-top: calc(var(--wt-header-height) + 14px) !important;
}

body.wt-fixed-course-header .wt-lesson-layout {
  padding-top: calc(var(--wt-header-height) + 14px) !important;
}

body.wt-fixed-course-header .wt-lesson-sidebar {
  top: calc(var(--wt-header-height) + 8px) !important;
  max-height: calc(100vh - var(--wt-header-height) - 18px) !important;
}

@media (max-width: 760px) {
  body.wt-fixed-course-header .wt-page {
    padding-top: calc(var(--wt-header-height) + 10px) !important;
  }

  body.wt-fixed-course-header .wt-lesson-layout {
    padding-top: calc(var(--wt-header-height) + 10px) !important;
  }
}


/* =========================================================
   CODEBHAVYA SHARED COURSE HEADER
   Same header as Web Technologies index, fixed across all
   Web Technologies pages. No space is created above it.
========================================================= */

.wt-course-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
}

/* The header host itself must not create a second blank header. */
#site-header,
#cb-header {
    display: block;
    margin: 0;
    padding: 0;
}

/* Leave room below the fixed header, never above it. */
body:has(#site-header) .wt-page {
    padding-top: 86px;
}

body:has(#site-header) .reading-progress-wrap {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    z-index: 99990;
}

body.wt-index-page .wt-index-layout {
    padding-top: 86px;
}

body.wt-index-page .wt-course-header {
    position: fixed !important;
}

@media (max-width: 760px) {
    body:has(#site-header) .wt-page {
        padding-top: 74px;
    }

    body:has(#site-header) .reading-progress-wrap {
        top: 60px;
    }

    body.wt-index-page .wt-index-layout {
        padding-top: 74px;
    }
}