/* ════════════════════════════════════════════════════════════════════════
   santus.me — Content Platform component styles
   Extends .prose-dark (assets/css/custom.css). Uses the site CSS variables:
   --c-accent, --c-accent-light, --c-accent-muted, --c-accent-faint, --accent-rgb
   ════════════════════════════════════════════════════════════════════════ */

/* ── Heading anchors ──────────────────────────────────────────────────── */
.prose-dark .content-heading { position: relative; scroll-margin-top: 120px; }
.prose-dark .heading-anchor {
  position: absolute; left: -1.1em; top: 0;
  opacity: 0; text-decoration: none; color: var(--c-accent-muted);
  font-weight: 400; padding-right: .3em; transition: opacity .15s;
}
.prose-dark .content-heading:hover .heading-anchor,
.prose-dark .heading-anchor:focus { opacity: 1; }
@media (max-width: 720px) { .prose-dark .heading-anchor { display: none; } }

/* ── Alerts / admonitions ─────────────────────────────────────────────── */
.content-alert {
  display: flex; gap: .85rem; align-items: flex-start;
  margin: 1.6em 0; padding: 1rem 1.15rem;
  border: 1px solid; border-left-width: 3px; border-radius: 10px;
  background: #141414;
}
.content-alert .alert-icon { flex-shrink: 0; margin-top: .1rem; }
.content-alert .ci { width: 20px; height: 20px; }
.content-alert .alert-body { min-width: 0; flex: 1; }
.content-alert .alert-title { font-weight: 600; margin: 0 0 .25em; color: #f3f4f6; }
.content-alert .alert-body > :last-child { margin-bottom: 0; }
.content-alert p { margin-bottom: .6em; line-height: 1.7; }
.alert-info    { border-color: rgba(59,130,246,.35);  background: rgba(59,130,246,.06);  }
.alert-info    .alert-icon { color: #60a5fa; }
.alert-success { border-color: rgba(16,185,129,.35);  background: rgba(16,185,129,.06);  }
.alert-success .alert-icon { color: #34d399; }
.alert-warning { border-color: rgba(245,158,11,.38);  background: rgba(245,158,11,.06);  }
.alert-warning .alert-icon { color: #fbbf24; }
.alert-danger  { border-color: rgba(239,68,68,.38);   background: rgba(239,68,68,.06);   }
.alert-danger  .alert-icon { color: #f87171; }

/* ── Callout ──────────────────────────────────────────────────────────── */
.content-callout {
  display: flex; gap: .9rem; margin: 1.6em 0; padding: 1.1rem 1.25rem;
  border: 1px solid rgba(var(--accent-rgb), .25);
  background: rgba(var(--accent-rgb), .05);
  border-radius: 12px;
}
.content-callout .callout-emoji { font-size: 1.4rem; line-height: 1.3; flex-shrink: 0; }
.content-callout .callout-title { font-weight: 600; color: #f3f4f6; margin: 0 0 .3em; }
.content-callout .callout-body > :last-child { margin-bottom: 0; }

/* ── Accordion / details ──────────────────────────────────────────────── */
.content-accordion { margin: 1.6em 0; border: 1px solid #2a2a2a; border-radius: 12px; overflow: hidden; }
.content-accordion .accordion-item { border-bottom: 1px solid #2a2a2a; }
.content-accordion .accordion-item:last-child { border-bottom: none; }
.accordion-item { margin: 1.2em 0; }
.content-accordion .accordion-item { margin: 0; }
.accordion-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer; padding: .85rem 1.1rem; list-style: none;
  font-weight: 500; color: #e5e7eb; background: #141414;
  transition: background .15s;
}
.accordion-item > summary::-webkit-details-marker { display: none; }
.accordion-item > summary:hover { background: #1a1a1a; }
.accordion-chevron { width: 16px; height: 16px; color: var(--c-accent-muted); transition: transform .2s; flex-shrink: 0; }
.accordion-item[open] > summary .accordion-chevron { transform: rotate(90deg); }
.accordion-body { padding: .25rem 1.1rem 1rem; color: #d1d5db; }
.accordion-body > :first-child { margin-top: .6em; }
.accordion-body > :last-child { margin-bottom: 0; }
.content-details:not(.content-accordion *) { border: 1px solid #2a2a2a; border-radius: 12px; overflow: hidden; }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.content-tabs { margin: 1.6em 0; }
.tab-list {
  display: flex; flex-wrap: wrap; gap: .25rem;
  border-bottom: 1px solid #2a2a2a; margin-bottom: 0;
}
.tab-btn {
  appearance: none; background: transparent; border: none; cursor: pointer;
  padding: .6rem .95rem; font-size: .9rem; color: var(--muted, #9ca3af);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: inherit; transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: #e5e7eb; }
.tab-btn.is-active { color: var(--c-accent-light); border-bottom-color: var(--c-accent); font-weight: 500; }
.tab-panel { padding: 1.1rem .15rem .15rem; }
.tab-panel[hidden] { display: none; }
.tab-panel > :first-child { margin-top: 0; }

/* ── Cards / feature grid ─────────────────────────────────────────────── */
.content-card-grid { display: grid; gap: 1rem; margin: 1.75em 0; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .content-card-grid.cols-2, .content-card-grid.cols-3, .content-card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .content-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .content-card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.content-card {
  display: flex; flex-direction: column; text-decoration: none !important;
  background: #141414; border: 1px solid #2a2a2a; border-radius: 12px; overflow: hidden;
  transition: border-color .2s, transform .15s, box-shadow .2s; color: inherit;
}
a.content-card:hover { border-color: rgba(var(--accent-rgb), .45); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.content-card .card-media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin: 0; border-radius: 0; }
.content-card .card-content { padding: 1.1rem; }
.content-card .card-icon { font-size: 1.6rem; margin-bottom: .5rem; }
.content-card .card-title { font-size: 1.05rem; font-weight: 600; color: #f3f4f6; margin: 0 0 .35em; }
.content-card .card-text { color: #9ca3af; font-size: .9rem; line-height: 1.6; }
.content-card .card-text > :last-child { margin-bottom: 0; }

/* ── Quotes / pull quotes / testimonials ──────────────────────────────── */
.content-quote {
  position: relative; margin: 1.75em 0; padding: 1.25rem 1.5rem 1.25rem 3rem;
  border-left: 3px solid var(--c-accent); background: #141414; border-radius: 0 10px 10px 0;
  font-style: normal; color: #e5e7eb;
}
.content-quote .quote-mark { position: absolute; left: 1rem; top: 1.1rem; width: 22px; height: 22px; color: var(--c-accent-muted); opacity: .6; }
.content-quote .quote-body > :last-child { margin-bottom: 0; }
.content-quote .quote-cite { margin-top: .6em; font-size: .85rem; color: #9ca3af; font-style: normal; }
.content-quote .quote-cite a { color: var(--c-accent-light); }
.content-pullquote {
  margin: 1.5em 0; padding: .5em 0; border: none;
  font-size: 1.5rem; line-height: 1.4; font-weight: 600; color: #f9fafb;
  border-top: 2px solid rgba(var(--accent-rgb), .3); border-bottom: 2px solid rgba(var(--accent-rgb), .3);
}
@media (min-width: 900px) {
  .content-pullquote.pull-right { float: right; width: 42%; margin: .4em 0 1em 2em; font-size: 1.35rem; }
  .content-pullquote.pull-left  { float: left;  width: 42%; margin: .4em 2em 1em 0; font-size: 1.35rem; }
}
.content-testimonial { margin: 1.75em 0; padding: 1.4rem 1.6rem; background: #141414; border: 1px solid #2a2a2a; border-radius: 14px; }
.content-testimonial blockquote { border: none; margin: 0 0 1rem; padding: 0; font-style: italic; color: #e5e7eb; font-size: 1.05rem; }
.content-testimonial .testimonial-meta { display: flex; align-items: center; gap: .8rem; }
.content-testimonial .testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; margin: 0; }
.content-testimonial .testimonial-author { font-weight: 600; color: #f3f4f6; margin: 0; font-size: .92rem; }
.content-testimonial .testimonial-role { color: #9ca3af; margin: 0; font-size: .8rem; }

/* ── Figure / responsive image + alignment ────────────────────────────── */
.content-figure { margin: 1.75em 0; }
.content-figure img { width: 100%; height: auto; margin: 0; border-radius: 10px; }
.content-figure figcaption { margin-top: .55em; font-size: .82rem; color: #9ca3af; text-align: center; }
.content-figure.align-center { text-align: center; }
.content-figure.align-left  { text-align: left; }
.content-figure.align-right { text-align: right; }
@media (min-width: 900px) {
  .content-figure.align-left  { float: left;  max-width: 50%; margin: .4em 1.75em 1em 0; }
  .content-figure.align-right { float: right; max-width: 50%; margin: .4em 0 1em 1.75em; }
  .content-figure.align-wide  { width: min(120%, 100vw - 4rem); margin-left: 50%; transform: translateX(-50%); }
  .content-figure.align-full  { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; border-radius: 0; }
  .content-figure.align-full img { border-radius: 0; }
}

/* ── Video ────────────────────────────────────────────────────────────── */
.content-video { margin: 1.75em 0; }
.content-video .video-embed { margin: 0; }
.content-video figcaption { margin-top: .55em; font-size: .82rem; color: #9ca3af; text-align: center; }
.content-video .self-video { width: 100%; border-radius: 10px; background: #000; display: block; }

/* ── Download / file attachment ───────────────────────────────────────── */
.content-download {
  display: flex; align-items: center; gap: .9rem; margin: 1.25em 0; padding: .9rem 1.1rem;
  background: #141414; border: 1px solid #2a2a2a; border-radius: 12px;
  text-decoration: none !important; transition: border-color .2s, transform .15s; color: inherit !important;
}
.content-download:hover { border-color: rgba(var(--accent-rgb), .45); transform: translateY(-1px); }
.content-download .download-figure { display: flex; width: 40px; height: 40px; flex-shrink: 0;
  align-items: center; justify-content: center; border-radius: 9px;
  background: rgba(var(--accent-rgb), .12); color: var(--c-accent-light); }
.content-download .download-figure .ci { width: 20px; height: 20px; }
.content-download .download-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content-download .download-title { font-weight: 500; color: #f3f4f6; }
.content-download .download-meta { font-size: .75rem; color: #6b7280; font-family: 'JetBrains Mono', monospace; }
.content-download .download-cta { color: var(--c-accent-muted); flex-shrink: 0; }
.content-download .download-cta .ci { width: 20px; height: 20px; }

/* ── CTA buttons ──────────────────────────────────────────────────────── */
.content-btn {
  display: inline-flex; align-items: center; gap: .5rem; vertical-align: middle;
  border-radius: 9px; font-weight: 500; text-decoration: none !important;
  transition: background .18s, border-color .18s, box-shadow .2s, transform .15s; cursor: pointer;
}
.content-btn .btn-ext { width: 14px; height: 14px; opacity: .7; }
.content-btn.btn-sm { padding: .35rem .8rem;  font-size: .8rem; }
.content-btn.btn-md { padding: .55rem 1.15rem; font-size: .9rem; }
.content-btn.btn-lg { padding: .75rem 1.6rem; font-size: 1rem; }
.btn-primary   { background: var(--c-accent); color: #fff !important; }
.btn-primary:hover { background: var(--c-accent-dim); box-shadow: 0 6px 20px rgba(var(--accent-rgb), .35); transform: translateY(-1px); }
.btn-secondary { background: #1c1c1c; color: #e5e7eb !important; border: 1px solid #2a2a2a; }
.btn-secondary:hover { border-color: #3a3a3a; }
.btn-outline   { background: transparent; color: var(--c-accent-light) !important; border: 1px solid rgba(var(--accent-rgb), .5); }
.btn-outline:hover { background: rgba(var(--accent-rgb), .1); }
.btn-ghost     { background: transparent; color: var(--c-accent-light) !important; }
.btn-ghost:hover { background: rgba(var(--accent-rgb), .1); }
.btn-link      { background: transparent; color: var(--c-accent-light) !important; padding-left: 0; padding-right: 0; }
.btn-link:hover { text-decoration: underline !important; }

/* ── Badges / tags / labels ───────────────────────────────────────────── */
.content-badge {
  display: inline-flex; align-items: center; padding: .15em .6em; border-radius: 9999px;
  font-size: .72rem; font-weight: 600; line-height: 1.5; vertical-align: middle;
  text-decoration: none; white-space: nowrap;
}
.badge-accent { background: rgba(var(--accent-rgb), .14); color: var(--c-accent-faint); border: 1px solid rgba(var(--accent-rgb), .3); }
.badge-green  { background: rgba(16,185,129,.14);  color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.badge-red    { background: rgba(239,68,68,.14);   color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }
.badge-amber  { background: rgba(245,158,11,.14);  color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.badge-blue   { background: rgba(59,130,246,.14);  color: #93c5fd; border: 1px solid rgba(59,130,246,.3); }
.badge-gray   { background: rgba(107,114,128,.18); color: #d1d5db; border: 1px solid rgba(107,114,128,.32); }
.badge-purple { background: rgba(168,85,247,.14);  color: #d8b4fe; border: 1px solid rgba(168,85,247,.3); }
.badge-pink   { background: rgba(236,72,153,.14);  color: #f9a8d4; border: 1px solid rgba(236,72,153,.3); }

/* ── Keyboard keys ────────────────────────────────────────────────────── */
.content-kbd { display: inline-flex; align-items: center; gap: .25rem; }
.content-kbd kbd {
  font-family: 'JetBrains Mono', monospace; font-size: .78em; padding: .12em .45em;
  background: #1c1c1c; border: 1px solid #2a2a2a; border-bottom-width: 2px; border-radius: 5px; color: #e5e7eb;
}
.content-kbd .kbd-plus { color: #6b7280; font-size: .75em; }

/* ── Embed link card ──────────────────────────────────────────────────── */
.content-embed {
  display: flex; align-items: center; gap: .8rem; margin: 1.25em 0; padding: .85rem 1.05rem;
  background: #141414; border: 1px solid #2a2a2a; border-radius: 12px;
  text-decoration: none !important; transition: border-color .2s; color: inherit;
}
.content-embed:hover { border-color: rgba(var(--accent-rgb), .4); }
.content-embed .embed-ico { color: var(--c-accent-muted); flex-shrink: 0; }
.content-embed .embed-ico .ci { width: 18px; height: 18px; }
.content-embed .embed-info { display: flex; flex-direction: column; min-width: 0; }
.content-embed .embed-title { color: #f3f4f6; font-weight: 500; }
.content-embed .embed-host { color: #6b7280; font-size: .78rem; font-family: 'JetBrains Mono', monospace; }

/* ── Image comparison slider ──────────────────────────────────────────── */
.content-compare { position: relative; margin: 1.75em 0; border-radius: 12px; overflow: hidden; user-select: none; touch-action: none; line-height: 0; }
.content-compare img { width: 100%; display: block; margin: 0; border-radius: 0; }
.content-compare .compare-before-wrap { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.content-compare .compare-before-wrap img { width: auto; max-width: none; height: 100%; }
.content-compare .compare-after { display: block; }
.content-compare .compare-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff;
  transform: translateX(-1px); pointer-events: none;
}
.content-compare .compare-handle::after {
  content: '⇄'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #111;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.content-compare .compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.content-compare .compare-label {
  position: absolute; bottom: .6rem; padding: .15rem .55rem; font-size: .72rem; border-radius: 6px;
  background: rgba(0,0,0,.6); color: #fff; font-family: 'JetBrains Mono', monospace; pointer-events: none;
}
.content-compare .compare-label-before { left: .6rem; }
.content-compare .compare-label-after  { right: .6rem; }

/* ── Table of contents ────────────────────────────────────────────────── */
.content-toc {
  margin: 1.75em 0; padding: 1rem 1.25rem; background: #141414; border: 1px solid #2a2a2a; border-radius: 12px;
}
.content-toc .toc-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #6b7280; font-family: 'JetBrains Mono', monospace; margin: 0 0 .6em; }
.content-toc ol { list-style: none; padding-left: 0; margin: 0; counter-reset: toc; }
.content-toc ol ol { padding-left: 1rem; margin: .2em 0; }
.content-toc li { margin: .15em 0; }
.content-toc a { color: #9ca3af; text-decoration: none; font-size: .9rem; transition: color .15s; }
.content-toc a:hover, .content-toc a.is-active { color: var(--c-accent-light); }

/* Sidebar TOC variant (rendered from RenderResult on the article page) */
.toc-sidebar { position: sticky; top: 130px; font-size: .85rem; }
.toc-sidebar ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid #2a2a2a; }
.toc-sidebar ol ol { padding-left: .85rem; }
.toc-sidebar li { margin: 0; }
.toc-sidebar a { display: block; padding: .3rem .8rem; color: #6b7280; text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; transition: color .15s, border-color .15s; }
.toc-sidebar a:hover { color: #e5e7eb; }
.toc-sidebar a.is-active { color: var(--c-accent-light); border-left-color: var(--c-accent); }

/* ── Footnotes ────────────────────────────────────────────────────────── */
.footnotes { margin-top: 2.5em; font-size: .88rem; color: #9ca3af; }
.footnotes hr { margin-bottom: 1.25em; }
.footnotes ol { padding-left: 1.25em; }
.footnotes li { margin: .4em 0; }
.footnote-ref a { text-decoration: none; color: var(--c-accent-light); padding: 0 .15em; }
.footnote-backref { text-decoration: none; color: var(--c-accent-muted); margin-left: .25em; }

/* ── Responsive tables ────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 1.6em 0; border: 1px solid #2a2a2a; border-radius: 10px; -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; border-collapse: collapse; margin: 0; font-size: .9rem; }
.table-wrap th, .table-wrap td { padding: .65rem .9rem; border-bottom: 1px solid #2a2a2a; text-align: left; }
.table-wrap th { background: #0f0f0f; color: #f3f4f6; font-weight: 600; white-space: nowrap; }
.table-wrap tr:last-child td { border-bottom: none; }
.table-wrap tbody tr:hover { background: rgba(var(--accent-rgb), .04); }

/* ── Task lists ───────────────────────────────────────────────────────── */
.prose-dark ul.contains-task-list { list-style: none; padding-left: .25em; }
.prose-dark .task-list-item { display: flex; align-items: flex-start; gap: .5em; }
.prose-dark .task-list-item input { margin-top: .35em; accent-color: var(--c-accent); }

/* ── Mermaid & math ───────────────────────────────────────────────────── */
.mermaid { margin: 1.75em 0; text-align: center; background: #141414; border: 1px solid #2a2a2a; border-radius: 10px; padding: 1.25rem; overflow-x: auto; }
.math.math-block { margin: 1.5em 0; overflow-x: auto; text-align: center; }
.math-inline { white-space: nowrap; }
.katex { font-size: 1.05em; }

/* ── Spoiler (example plugin) ─────────────────────────────────────────── */
.content-spoiler > summary { color: var(--c-accent-light); }

/* ── Copy button on code blocks (enhanced by content.js) ──────────────── */
.prose-dark pre { position: relative; }