/* ================= css of technologyPage for the courses ================= */

:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --primary:#013243;
  --muted:#6b7280;
  --nav:#1f2937;
  --accent:#007acc;
  --scroll-width:260px;
  --indicator:#36a372;
}
*{box-sizing:border-box;}
html, body{
  margin:0;
  height:100%;

  background:var(--bg);
  color:#111827;
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
}

header.site-header{
  background:linear-gradient(135deg,var(--nav),#212529);
  color:#fff;
  padding:18px 20px;
  position:sticky;
  top:0;
  z-index:1200;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
header .brand{
  display:flex;align-items:center;gap:12px;
  flex:1;
}
header .brand img{height:36px;}
header h1{
  font-size:18px;
  margin:0;
  font-weight:600;
  flex:1;
}

nav.toc .collapsible{
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:600;
}
nav.toc .collapsible::after{
  content:"▸";
  font-size:12px;
  transition:transform .25s ease;
}
nav.toc .collapsible.open::after{
  transform:rotate(90deg);
}
nav.toc ul.subtopics{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
  padding-left:12px;
}
nav.toc ul.subtopics.open{
  max-height:500px;
}

section.card p, section.card li{color:#374151;}
section.card .note{background:#e0f2fe;padding:10px;border-left:4px solid var(--accent);border-radius:6px;margin:12px 0;font-size:14px;}
pre{background:#dfe6ec;color:#2b2d2c;padding:14px;border-radius:8px;overflow:auto;font-family:ui-monospace; font-size:13px;margin:12px 0;}
code.inline{background:#eef2ff;padding:2px 6px;border-radius:6px;font-family:ui-monospace;}

@media(max-width:992px){
nav.toc.open{transform:translateX(0);}
.overlay.show{display:block;}
}