/*
 * ============================================================
 *  blog-dsa.css  —  Sam-Theme5 | DSA Category Styles
 * ============================================================
 *  Import AFTER blog-core.css on DSA course/blog posts.
 *  Overrides the --accent-* and component tokens for a
 *  technical, code-forward blue palette.
 * ============================================================
 */

/* ── 1. DSA Color Tokens ─────────────────────────────────── */

:root {
  --accent-primary:    #1a4971;
  --accent-secondary:  #0e3258;
  --accent-bg:         #eef4f9;
  --accent-border:     #b8d9e8;

  --code-bg:           #f0f5f8;
  --code-color:        #1a4971;
  --code-border:       #cce0ed;

  --highlight-border:  #1a4971;
  --highlight-bg:      #f0f6fb;

  --blockquote-bg:     #f5f9fc;
  --blockquote-border: #99c2dc;

  --text-link:         #1a4971;
  --text-link-hover:   #0e3258;
}

[data-theme="dark"] {
  --accent-primary:    #5ba3d9;
  --accent-secondary:  #7bbceb;
  --accent-bg:         #0d1c2a;
  --accent-border:     #1e3d5a;

  --code-bg:           #0d1a26;
  --code-color:        #7eb8f7;
  --code-border:       #1e3050;

  --highlight-bg:      #0a1926;
  --highlight-border:  #2a6090;

  --blockquote-bg:     #111e2d;
  --blockquote-border: #2a4a68;

  --text-link:         #6eb8ff;
  --text-link-hover:   #9cd0ff;
}

/* ── 2. DSA Category Badge ───────────────────────────────── */

.blog-category-badge.dsa {
  background: var(--accent-bg);
  color: var(--accent-primary);
  border-color: var(--accent-border);
}

/* ── 3. Post Title (DSA-specific heading colour) ──────────── */

.post-content h1,
.course-text h1,
.blog-body h1 {
  color: var(--accent-primary);
}

/* ── 4. Section Headings with Numbered Accent ─────────────── */

.post-content h2,
.course-text h2,
.blog-body h2 {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-border);
}

.post-content h3,
.course-text h3,
.blog-body h3 {
  color: #2c5f7a;
  position: relative;
  padding-left: 14px;
}

[data-theme="dark"] .post-content h3,
[data-theme="dark"] .course-text h3,
[data-theme="dark"] .blog-body h3 {
  color: #8fc8f0;
}

.post-content h3::before,
.course-text h3::before,
.blog-body h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: var(--accent-primary);
  border-radius: 2px;
}

/* ── 5. List Item Colour ─────────────────────────────────── */

.post-content ul li,
.post-content ol li,
.course-text ul li,
.course-text ol li,
.blog-body ul li,
.blog-body ol li {
  color: #1e6b30; /* DSA lists: slightly green — matches original */
}

[data-theme="dark"] .post-content ul li,
[data-theme="dark"] .post-content ol li,
[data-theme="dark"] .course-text ul li,
[data-theme="dark"] .course-text ol li,
[data-theme="dark"] .blog-body ul li,
[data-theme="dark"] .blog-body ol li {
  color: #6dcf90;
}

/* ── 6. Code Block — DSA-specific enhancements ───────────── */

/* Language label above code blocks */
.post-content pre,
.course-text pre,
.blog-body pre {
  position: relative;
}

/* Syntax-highlight accent: line numbers gutter simulation */
.post-content pre::before,
.course-text pre::before,
.blog-body pre::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 12px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-primary);
  opacity: 0.55;
  line-height: 2.8;
}

/* ── 7. Complexity / Big-O Table ─────────────────────────── */

.complexity-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.complexity-table thead {
  background: var(--accent-primary);
  color: #fff;
}

.complexity-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.complexity-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface);
  transition: background var(--transition-base);
}

.complexity-table tbody tr:nth-child(even) {
  background: var(--bg-surface-2);
}

.complexity-table tbody tr:hover {
  background: var(--accent-bg);
}

.complexity-table td {
  padding: 11px 16px;
  color: var(--text-primary);
}

.complexity-table .badge-good   { color: #2f8d46; font-weight: 700; }
.complexity-table .badge-ok     { color: #e67e22; font-weight: 700; }
.complexity-table .badge-bad    { color: #c0392b; font-weight: 700; }

[data-theme="dark"] .complexity-table tbody tr {
  background: var(--bg-surface);
}

[data-theme="dark"] .complexity-table tbody tr:nth-child(even) {
  background: var(--bg-surface-2);
}

[data-theme="dark"] .complexity-table tbody tr:hover {
  background: var(--accent-bg);
}

[data-theme="dark"] .complexity-table td {
  color: var(--text-secondary);
}

/* ── 8. Algorithm Step List ──────────────────────────────── */

.algo-steps {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  counter-reset: algo-counter;
}

.algo-steps li {
  counter-increment: algo-counter;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 14px 0;
  color: var(--text-primary) !important;
}

.algo-steps li::before {
  content: counter(algo-counter);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

[data-theme="dark"] .algo-steps li {
  color: var(--text-secondary) !important;
}

/* ── 9. DSA Concept Pill Tags ────────────────────────────── */

.concept-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.concept-pill {
  background: var(--accent-bg);
  color: var(--accent-primary);
  border: 1px solid var(--accent-border);
  border-radius: 20px;
  padding: 4px 14px;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
}

/* ── 10. CTA box (DSA override) ──────────────────────────── */

.cta-box {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent-primary);
}

[data-theme="dark"] .cta-box {
  background: #0a1926;
  border-color: #1e3a58;
  color: #7bbceb;
}