/*
 * ============================================================
 *  blog-maths.css  —  Sam-Theme5 | Maths Category Styles
 * ============================================================
 *  Import AFTER blog-core.css on Maths course/blog posts.
 *  Overrides accent tokens for a warm scholarly purple/indigo
 *  palette that contrasts nicely with the green site chrome.
 * ============================================================
 */

/* ── 1. Maths Color Tokens ───────────────────────────────── */

:root {
  --accent-primary:    #5c3d99;
  --accent-secondary:  #3e2470;
  --accent-bg:         #f3eefc;
  --accent-border:     #c9b3f0;

  --code-bg:           #f5f0fc;
  --code-color:        #5c3d99;
  --code-border:       #d6c8f5;

  --highlight-border:  #5c3d99;
  --highlight-bg:      #f7f2ff;

  --blockquote-bg:     #faf7ff;
  --blockquote-border: #c9b3f0;

  --text-link:         #5c3d99;
  --text-link-hover:   #3e2470;
}

[data-theme="dark"] {
  --accent-primary:    #b18cf7;
  --accent-secondary:  #caaeff;
  --accent-bg:         #160f28;
  --accent-border:     #362060;

  --code-bg:           #130f20;
  --code-color:        #c9a8ff;
  --code-border:       #2e1f52;

  --highlight-bg:      #110c22;
  --highlight-border:  #7040cc;

  --blockquote-bg:     #16112a;
  --blockquote-border: #3d2875;

  --text-link:         #c0a0ff;
  --text-link-hover:   #d8c0ff;
}

/* ── 2. Maths Category Badge ─────────────────────────────── */

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

/* ── 3. Headings ─────────────────────────────────────────── */

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

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

/* h2 underline accent line */
.post-content h2::after,
.course-text h2::after,
.blog-body h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--accent-primary);
  border-radius: 2px;
  margin-top: 8px;
}

.post-content h3,
.course-text h3,
.blog-body h3 {
  color: #4a2e80;
}

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

/* ── 4. Blockquote — styled as definition card ────────────── */

.post-content blockquote,
.course-text blockquote,
.blog-body blockquote {
  position: relative;
  background: var(--blockquote-bg);
  border-left: 4px solid var(--blockquote-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 18px 22px 18px 26px;
  margin: 24px 0;
  color: var(--text-secondary);
  font-size: 0.97rem;
}

/* Maths-specific: subtle "theorem" icon hint */
.post-content blockquote::before,
.course-text blockquote::before,
.blog-body blockquote::before {
  content: '≡';
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 1.4rem;
  color: var(--accent-border);
  opacity: 0.6;
  font-style: normal;
  font-weight: bold;
}

/* ── 5. Formula / Math Display ───────────────────────────── */

.formula,
.math-display {
  background: var(--bg-surface-3);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin: 22px 0;
  text-align: center;
  overflow-x: auto;
  position: relative;
}

.formula::before,
.math-display::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-border));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

[data-theme="dark"] .formula,
[data-theme="dark"] .math-display {
  background: var(--bg-surface-2);
  border-color: var(--accent-border);
}

/* MathJax rendered output */
mjx-container,
.MathJax {
  color: var(--text-primary);
}

[data-theme="dark"] mjx-container,
[data-theme="dark"] .MathJax {
  color: var(--text-primary) !important;
}

/* ── 6. Definition / Theorem Box ─────────────────────────── */

.definition-box,
.theorem-box {
  border: 1.5px solid var(--accent-border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin: 28px 0;
  background: var(--accent-bg);
  position: relative;
  overflow: hidden;
}

.definition-box::before,
.theorem-box::before {
  content: attr(data-label);
  display: inline-block;
  background: var(--accent-primary);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 0 0 var(--radius-sm) 0;
  position: absolute;
  top: 0;
  left: 0;
}

[data-theme="dark"] .definition-box,
[data-theme="dark"] .theorem-box {
  background: var(--accent-bg);
  border-color: var(--accent-border);
}

/* ── 7. List Items ────────────────────────────────────────── */

.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: var(--text-primary);
}

[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: var(--text-secondary);
}

/* Custom list marker for maths */
.post-content ul,
.course-text ul,
.blog-body ul {
  list-style: none;
  padding-left: 24px;
}

.post-content ul li,
.course-text ul li,
.blog-body ul li {
  position: relative;
}

.post-content ul li::before,
.course-text ul li::before,
.blog-body ul li::before {
  content: '→';
  position: absolute;
  left: -22px;
  color: var(--accent-primary);
  font-weight: bold;
  font-size: 0.9em;
}

/* ── 8. Highlight Box (Maths override) ───────────────────── */

.highlight-box {
  background: var(--highlight-bg);
  border-left-color: var(--highlight-border);
}

.highlight-box strong {
  color: var(--accent-primary);
}

/* ── 9. CTA Box (Maths override) ─────────────────────────── */

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

[data-theme="dark"] .cta-box {
  background: #110c22;
  border-color: #2e1a52;
  color: #c0a0ff;
}

/* ── 10. Proof / Working section ─────────────────────────── */

.proof-block {
  font-family: var(--font-body);
  font-style: italic;
  border-top: 1px dashed var(--border-medium);
  border-bottom: 1px dashed var(--border-medium);
  padding: 14px 18px;
  margin: 22px 0;
  color: var(--text-secondary);
  position: relative;
}

.proof-block::after {
  content: '□';
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 1.1rem;
  color: var(--accent-primary);
  font-style: normal;
}

/* ── 11. Probability Table ───────────────────────────────── */

.prob-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);
}

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

.prob-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
}

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

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

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

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

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

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

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