/* ============================================================
   topic.css — Common template for all topic pages
   JS Mastery
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #0a0a0f;
  --bg2:           #0f0f1a;
  --bg3:           #13131f;
  --bg4:           #080c14;
  --border:        rgba(255,255,255,0.08);
  --border2:       rgba(255,255,255,0.13);
  --yellow:        #f7df1e;
  --yellow-dim:    rgba(247,223,30,0.1);
  --yellow-border: rgba(247,223,30,0.22);
  --text:          #e2e8f0;
  --text-2:        #94a3b8;
  --text-3:        #64748b;
  --green:         #4ade80;
  --red:           #f87171;
  --blue:          #82aaff;
  --radius:        12px;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
}
a { text-decoration: none; color: inherit; }

/* ── NAV ──────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,15,0.95);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
}
.nav-inner {
  max-width: 860px; margin: 0 auto;
  display: flex; align-items: center; height: 60px; gap: 16px;
}
.logo {
  font-family: 'Fira Code', monospace;
  background: var(--yellow); color: #111;
  padding: 3px 8px; border-radius: 6px;
  font-size: 0.85rem; font-weight: 500; flex-shrink: 0;
}
.nav-title { font-weight: 700; font-size: 0.95rem; }
.back-link {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  color: var(--text-2); font-size: 0.875rem; font-weight: 500;
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 8px;
  transition: all 0.2s; flex-shrink: 0;
}
.back-link:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.quant-btn { display: flex; align-items: center; padding: 2px; border-radius: 6px; transition: opacity 0.2s, transform 0.2s; opacity: 0.85; }
.quant-btn:hover { opacity: 1; transform: scale(1.08); }
.quant-btn img { height: 32px; width: auto; display: block; border-radius: 4px; }

/* ── CONTAINER ────────────────────────────────────────────── */
.topic-container {
  max-width: 860px; margin: 0 auto;
  padding: 0 24px 100px;
}

/* ── BREADCRUMB ───────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 22px 0 0;
  font-size: 0.8rem; color: var(--text-3);
  /* Ensure it sits below the sticky nav */
  position: relative; z-index: 1;
}
.breadcrumb a { color: var(--text-3); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--yellow); }
.breadcrumb-sep { opacity: 0.4; }
.breadcrumb-current { color: var(--text-2); }

/* ── TOPIC HERO ───────────────────────────────────────────── */
.topic-hero { padding: 24px 0 40px; }
.topic-tag-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.topic-badge {
  font-family: 'Fira Code', monospace;
  background: var(--yellow); color: #111;
  padding: 4px 12px; border-radius: 8px;
  font-size: 0.875rem; font-weight: 700;
}
.module-tag {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
  background: var(--bg2); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 6px;
}
.topic-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px;
}
.highlight { color: var(--yellow); }
.topic-hero .subtitle {
  color: var(--text-2); font-size: 1rem; max-width: 560px; line-height: 1.6;
}

/* ── SECTION ──────────────────────────────────────────────── */
.section {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 28px 24px;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.section:hover { border-color: var(--border2); }

.section-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.section-num {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--yellow); color: #111;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800; flex-shrink: 0;
  font-family: 'Fira Code', monospace;
}
.section-header h2 { font-size: 1.05rem; font-weight: 700; }

.section-body > p {
  color: var(--text-2); font-size: 0.9375rem; line-height: 1.75;
}
.section-body > p + p { margin-top: 12px; }

/* ── INLINE CODE ──────────────────────────────────────────── */
code {
  font-family: 'Fira Code', monospace;
  background: rgba(247,223,30,0.08);
  color: var(--yellow);
  padding: 2px 6px; border-radius: 4px; font-size: 0.85em;
}
pre code {
  background: none !important;
  color: inherit !important;
  padding: 0 !important;
  border-radius: 0;
  font-size: inherit !important;
}

/* ── CODE BLOCKS (non-selectable) ─────────────────────────── */
pre {
  font-family: 'Fira Code', monospace !important;
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  padding: 18px 20px !important;
  overflow-x: auto;
  margin: 0 !important;
  background: transparent !important;

  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
pre {
  cursor: default;
}

pre::-webkit-scrollbar {
  height: 6px;
}

pre::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
}

/* ── SIMPLE WAY ───────────────────────────────────────────── */
.intro-text {
  color: var(--text-2); font-size: 0.9375rem; margin-bottom: 16px; line-height: 1.75;
}
.simple-ops { display: flex; flex-direction: column; gap: 10px; }
.simple-op-row {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-2); font-size: 0.9375rem;
}
.op-badge {
  font-family: 'Fira Code', monospace;
  background: var(--yellow-dim); color: var(--yellow);
  border: 1px solid var(--yellow-border);
  padding: 3px 10px; border-radius: 5px;
  font-size: 0.875rem; flex-shrink: 0; min-width: 44px; text-align: center;
}
.op-arrow { color: var(--text-3); flex-shrink: 0; }

/* ── EXAMPLE BLOCK ─────────────────────────────────────────── */
.example-block {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; margin-top: 16px;
}
.example-block + .example-block { margin-top: 12px; }

.example-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  display: flex; align-items: center;
}
.example-label { font-size: 0.8rem; font-weight: 600; color: var(--text-2); }


/* ── OUTPUT PANEL ─────────────────────────────────────────── */
.output-panel {
  border-top: 1px solid var(--border);
  background: var(--bg4);
}

.output-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
}

.output-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}
.output-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-3);
  transition: background 0.35s, box-shadow 0.35s;
  flex-shrink: 0;
}
.output-panel.live .output-dot {
  background: var(--green);
  box-shadow: 0 0 7px rgba(74,222,128,0.7);
}

.run-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.22);
  color: var(--green); border-radius: 6px;
  padding: 4px 13px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  font-family: 'Inter', sans-serif; transition: all 0.15s;
}
.run-btn:hover:not(:disabled) {
  background: rgba(74,222,128,0.18);
  box-shadow: 0 0 10px rgba(74,222,128,0.12);
}
.run-btn:disabled { opacity: 0.55; cursor: default; }

.output-body {
  padding: 12px 18px;
  font-family: 'Fira Code', monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  min-height: 44px;
}
.output-placeholder { color: var(--text-3); font-style: italic; font-size: 0.82rem; }
.output-line { animation: outFade 0.25s ease both; }
.output-line.is-error { color: var(--red); }
.output-empty { color: var(--text-3); font-style: italic; }

/* Type-coloured output values */
.out-num  { color: #f78c6c; }
.out-str  { color: #c3e88d; }
.out-bool { color: #c792ea; }
.out-null,
.out-undef { color: var(--text-3); font-style: italic; }
.out-obj  { color: var(--text-2); }

@keyframes outFade {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* ── LIVE HTML PREVIEW ─────────────────────────────────────── */
.preview-panel { border-top: 1px solid var(--border); }

.preview-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(130,170,255,0.1);
  border: 1px solid rgba(130,170,255,0.22);
  color: var(--blue); border-radius: 6px;
  padding: 4px 13px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  font-family: 'Inter', sans-serif; transition: all 0.15s;
}
.preview-btn:hover { background: rgba(130,170,255,0.18); }

.preview-frame {
  width: 100%; border: none; display: none;
  min-height: 400px; background: #ffffff;
  border-top: 1px solid var(--border);
}
.preview-frame.visible { display: block; }

/* ── EXPLANATION ──────────────────────────────────────────── */
.explanation {
  background: rgba(247,223,30,0.04);
  border-top: 1px solid rgba(247,223,30,0.1);
  padding: 14px 18px;
}
.explanation-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--yellow); margin-bottom: 8px;
}
.explanation ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.explanation ul li {
  color: var(--text-2); font-size: 0.875rem;
  display: flex; align-items: baseline; gap: 8px;
}
.explanation ul li::before { content: '→'; color: var(--yellow); flex-shrink: 0; }

/* ── PROBLEM / SOLUTION ───────────────────────────────────── */
.problem-box {
  background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.2);
  border-radius: 8px; padding: 12px 16px; margin-top: 12px;
}
.problem-box .box-label {
  font-size: 0.72rem; font-weight: 700; color: var(--red);
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.07em;
}
.problem-box p { color: var(--text-2); font-size: 0.875rem; }

.solution-box {
  background: rgba(74,222,128,0.05); border: 1px solid rgba(74,222,128,0.18);
  border-radius: 8px; overflow: hidden; margin-top: 8px;
}
.solution-box-label {
  font-size: 0.72rem; font-weight: 700; color: var(--green);
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 10px 16px; border-bottom: 1px solid rgba(74,222,128,0.12);
  background: rgba(74,222,128,0.04);
}

/* ── REAL LIFE ANALOGY ────────────────────────────────────── */
.analogy-intro { color: var(--text-2); font-size: 0.9375rem; margin-bottom: 16px; }
.analogy-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 12px;
}
.analogy-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; padding: 18px 14px; text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}
.analogy-card:hover { border-color: var(--yellow-border); transform: translateY(-2px); }
.analogy-op {
  font-family: 'Fira Code', monospace;
  font-size: 1.4rem; font-weight: 700; color: var(--yellow); margin-bottom: 6px;
}
.analogy-desc { font-size: 0.825rem; color: var(--text-2); line-height: 1.5; }

/* ── SECTION INTRO PARAGRAPH ─────────────────────────────── */
.section-intro-p {
  color: var(--text-2); font-size: 0.9375rem; margin-bottom: 16px; line-height: 1.75;
}

/* ── TASKS ────────────────────────────────────────────────── */
.task-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.task-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.task-card-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.task-difficulty {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 5px;
}
.task-difficulty.easy   { background: rgba(74,222,128,0.12);  color: var(--green); }
.task-difficulty.medium { background: rgba(251,191,36,0.12);  color: #fbbf24; }
.task-difficulty.hard   { background: rgba(248,113,113,0.12); color: var(--red); }
.task-title { font-size: 0.9rem; font-weight: 600; }
.task-card-body { padding: 16px; }
.task-card-body .example-block { margin-top: 0; }
.task-steps { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.task-steps li {
  display: flex; align-items: baseline; gap: 8px;
  color: var(--text-2); font-size: 0.9rem;
}
.task-steps li::before { content: '▸'; color: var(--yellow); flex-shrink: 0; }

/* ── MCQ ──────────────────────────────────────────────────── */
.mcq-list { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.mcq-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.mcq-q-num {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 6px;
}
.mcq-question {
  padding: 14px 18px; font-weight: 600; font-size: 0.9375rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.mcq-question-code { margin-top: 10px; border-radius: 8px; overflow: hidden; }
.mcq-question-code pre { padding: 10px 14px !important; }
.mcq-options { list-style: none; }
.mcq-option {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  font-size: 0.9rem; color: var(--text-2);
}
.mcq-option:last-child { border-bottom: none; }
.mcq-option:not(.correct):not(.wrong):hover { background: rgba(255,255,255,0.03); }
.mcq-option-key {
  font-family: 'Fira Code', monospace;
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; flex-shrink: 0;
  transition: all 0.15s;
}
.mcq-option.correct { background: rgba(74,222,128,0.07); color: var(--text); }
.mcq-option.correct .mcq-option-key { background: var(--green); border-color: var(--green); color: #111; }
.mcq-option.wrong { background: rgba(248,113,113,0.05); color: var(--text-3); }
.mcq-option.wrong .mcq-option-key { background: rgba(248,113,113,0.25); border-color: var(--red); color: var(--red); }
.mcq-explanation {
  padding: 12px 18px;
  background: rgba(247,223,30,0.04);
  border-top: 1px solid rgba(247,223,30,0.1);
  font-size: 0.875rem; color: var(--text-2);
  display: none; gap: 8px;
}
.mcq-explanation.visible { display: flex; align-items: flex-start; }
.mcq-explanation-icon { color: var(--yellow); flex-shrink: 0; }
.mcq-explanation strong { color: var(--yellow); }

/* ── PRO TIPS ─────────────────────────────────────────────── */
.pro-tips-list { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-top: 4px; }
.pro-tip { display: flex; gap: 12px; }
.tip-icon {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--yellow-dim); border: 1px solid var(--yellow-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
  font-size: 0.7rem; color: var(--yellow); font-weight: 800;
  font-family: 'Fira Code', monospace;
}
.tip-content { flex: 1; }
.tip-content > p { color: var(--text-2); font-size: 0.9rem; line-height: 1.65; }
.tip-content > .example-block { margin-top: 10px; }

.warn-box {
  background: rgba(248,113,113,0.04); border: 1px solid rgba(248,113,113,0.16);
  border-radius: 10px; overflow: hidden; margin-top: 10px;
}
.warn-box .example-label { color: var(--red); }

/* ── MINI CHALLENGE ───────────────────────────────────────── */
.challenge-card {
  background: linear-gradient(135deg, rgba(247,223,30,0.06) 0%, rgba(247,223,30,0.02) 100%);
  border: 1px solid rgba(247,223,30,0.22);
  border-radius: var(--radius); padding: 28px 28px 24px;
  margin-bottom: 16px;
}
.challenge-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.challenge-title { font-size: 1rem; font-weight: 700; color: var(--yellow); }
.challenge-subtitle { color: var(--text-2); font-size: 0.875rem; margin-bottom: 16px; line-height: 1.6; }
.challenge-code-wrap {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; margin-bottom: 0;
}
.challenge-answer {
  display: none;
  background: var(--bg3); border: 1px solid rgba(74,222,128,0.2);
  border-radius: 8px; overflow: hidden; margin-top: 16px;
}
.challenge-answer.visible { display: block; }
.challenge-answer-header {
  padding: 10px 16px; background: rgba(74,222,128,0.05);
  border-bottom: 1px solid rgba(74,222,128,0.15);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--green);
}
.challenge-answer pre { padding: 16px 18px !important; }

/* Reveal button */
.reveal-btn {
  background: var(--yellow); color: #111;
  border: none; padding: 10px 24px; border-radius: 8px;
  font-size: 0.875rem; font-weight: 700; cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: opacity 0.2s, transform 0.1s;
  margin-top: 16px;
}
.reveal-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.reveal-btn:disabled { opacity: 0.5; cursor: default; transform: none; }

/* ── TOPIC NAV (prev / next) ──────────────────────────────── */
.topic-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px; gap: 12px;
}
.nav-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 20px;
  font-size: 0.875rem; font-weight: 600; color: var(--text-2);
  transition: all 0.18s;
}
.nav-btn:hover {
  border-color: var(--yellow-border); color: var(--text);
  background: rgba(247,223,30,0.04);
}
.nav-btn.next { margin-left: auto; }

/* ── Prism override (match site theme) ───────────────────── */
code[class*="language-"],
pre[class*="language-"] {
  font-family: 'Fira Code', monospace !important;
  font-size: 0.875rem !important;
  background: transparent !important;
  text-shadow: none !important;
}
.token.comment,
.token.prolog,
.token.cdata         { color: #546e7a; font-style: italic; }
.token.keyword       { color: #c792ea; }
.token.string        { color: #c3e88d; }
.token.number        { color: #f78c6c; }
.token.operator      { color: #89ddff; }
.token.function      { color: #82aaff; }
.token.boolean,
.token.constant      { color: #f78c6c; }
.token.property      { color: #80cbc4; }
.token.punctuation   { color: #a0aec0; }
.token.tag           { color: #f07178; }
.token.attr-name     { color: #ffcb6b; }
.token.attr-value    { color: #c3e88d; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .topic-container { padding: 0 16px 80px; }
  .section { padding: 18px 16px; }
  .analogy-grid { grid-template-columns: 1fr 1fr; }
  .topic-nav { flex-direction: column; }
  .nav-btn.next { margin-left: 0; width: 100%; justify-content: center; }
  pre { padding: 14px 14px !important; }
}