/* ═══════════════════════════════════════════════════════════════
   RunkIntel — Custom CSS for Obsidian Publish
   Vault/publish.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Typography & Global ──────────────────────────────────────── */

.publish-article {
  max-width: 900px;
  line-height: 1.7;
}

.publish-article h1 {
  border-bottom: 2px solid var(--text-accent);
  padding-bottom: 0.3em;
  margin-bottom: 1em;
}

.publish-article h2 {
  margin-top: 2em;
  border-bottom: 1px solid var(--background-modifier-border);
  padding-bottom: 0.2em;
}

/* Horizontal rules — subtle, not dominant */
.publish-article hr {
  border: none;
  border-top: 1px solid var(--background-modifier-border);
  margin: 2em 0;
  opacity: 0.5;
}

/* ── Callouts — CTI Visual Identity ────────────────────────────── */

/* All callouts: subtle left border accent, clean background */
.callout {
  border-radius: 6px;
  margin: 1em 0;
  padding: 0.8em 1em;
  border-left-width: 4px;
}

/* Nested callouts — tighter spacing */
.callout .callout {
  margin: 0.5em 0;
  border-left-width: 3px;
}

/* Danger callouts — threat alerts, red accent */
.callout[data-callout="danger"] {
  border-left-color: #e74c3c;
}

/* Warning callouts — vulnerabilities, amber accent */
.callout[data-callout="warning"] {
  border-left-color: #f39c12;
}

/* Tip callouts — editorial highlights, teal accent */
.callout[data-callout="tip"] {
  border-left-color: #1abc9c;
}

/* Info callouts — techniques, blue accent */
.callout[data-callout="info"] {
  border-left-color: #3498db;
}

/* Bug callouts — malware, purple accent */
.callout[data-callout="bug"] {
  border-left-color: #9b59b6;
}

/* Example callouts — campaigns, orange accent */
.callout[data-callout="example"] {
  border-left-color: #e67e22;
}

/* Success callouts — playbooks/mitigations, green accent */
.callout[data-callout="success"] {
  border-left-color: #27ae60;
}

/* Abstract callouts — timeline/summary, slate accent */
.callout[data-callout="abstract"] {
  border-left-color: #7f8c8d;
}

/* Quote callouts — legal/attribution, muted */
.callout[data-callout="quote"] {
  border-left-color: #95a5a6;
  opacity: 0.85;
  font-size: 0.9em;
}

/* ── CTI Semantic Callouts — Severity ─────────────────────────── */

.callout[data-callout="critical"] {
  --callout-color: 220, 38, 38;
  border-left-color: #dc2626;
  background-color: rgba(220, 38, 38, 0.08);
}

.callout[data-callout="high"] {
  --callout-color: 234, 88, 12;
  border-left-color: #ea580c;
  background-color: rgba(234, 88, 12, 0.08);
}

.callout[data-callout="medium"] {
  --callout-color: 202, 138, 4;
  border-left-color: #ca8a04;
  background-color: rgba(202, 138, 4, 0.08);
}

.callout[data-callout="low"] {
  --callout-color: 37, 99, 235;
  border-left-color: #2563eb;
  background-color: rgba(37, 99, 235, 0.08);
}

/* ── CTI Semantic Callouts — TLP (Traffic Light Protocol) ──────── */

.callout[data-callout="tlp-red"] {
  --callout-color: 220, 38, 38;
  border-left-color: #dc2626;
  background-color: rgba(220, 38, 38, 0.06);
}

.callout[data-callout="tlp-amber"] {
  --callout-color: 217, 119, 6;
  border-left-color: #d97706;
  background-color: rgba(217, 119, 6, 0.06);
}

.callout[data-callout="tlp-green"] {
  --callout-color: 22, 163, 74;
  border-left-color: #16a34a;
  background-color: rgba(22, 163, 74, 0.06);
}

.callout[data-callout="tlp-clear"] {
  --callout-color: 107, 114, 128;
  border-left-color: #6b7280;
  background-color: rgba(107, 114, 128, 0.06);
}

/* ── CTI Semantic Callouts — IOC Block ─────────────────────────── */

.callout[data-callout="ioc"] {
  --callout-color: 139, 92, 246;
  border-left-color: #8b5cf6;
  background-color: rgba(139, 92, 246, 0.06);
}

.callout[data-callout="ioc"] .callout-content {
  font-family: var(--font-monospace);
  font-size: 0.85em;
}

/* ── CTI Semantic Callouts — LATAM Context ─────────────────────── */

.callout[data-callout="latam"] {
  --callout-color: 5, 150, 105;
  border-left-color: #059669;
  background-color: rgba(5, 150, 105, 0.06);
}

/* ── CTI Semantic Callouts — Investigation & Methodology ─────── */

.callout[data-callout="investigation"] {
  --callout-color: 59, 130, 246;
  border-left-color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.06);
}

.callout[data-callout="methodology"] {
  --callout-color: 100, 116, 139;
  border-left-color: #64748b;
  background-color: rgba(100, 116, 139, 0.06);
}

/* ── Callout titles — bold, no extra space ─────────────────────── */
.callout-title {
  font-weight: 700;
  font-size: 1em;
  padding: 0;
}

.callout-content {
  margin-top: 0.3em;
}

/* ── Tables — Clean, professional ──────────────────────────────── */

.markdown-preview-view table,
.publish-article table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.publish-article th {
  background-color: var(--background-secondary);
  font-weight: 700;
  text-align: left;
  padding: 0.6em 0.8em;
  border-bottom: 2px solid var(--background-modifier-border);
}

.publish-article td {
  padding: 0.5em 0.8em;
  border-bottom: 1px solid var(--background-modifier-border);
}

.publish-article tr:hover td {
  background-color: var(--background-secondary);
}

/* ── Mermaid Diagrams — Full width, scroll if needed ────────── */

.mermaid {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  display: block;
  margin: 1.5em 0;
  padding: 1em 0;
}

.mermaid svg {
  max-width: none !important;
  height: auto;
  display: block;
}

/* Scrollbar — visible but subtle */
.mermaid::-webkit-scrollbar {
  height: 5px;
}

.mermaid::-webkit-scrollbar-track {
  background: transparent;
}

.mermaid::-webkit-scrollbar-thumb {
  background-color: rgba(128, 128, 128, 0.4);
  border-radius: 3px;
}

.mermaid::-webkit-scrollbar-thumb:hover {
  background-color: rgba(128, 128, 128, 0.7);
}

/* Firefox */
.mermaid {
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.4) transparent;
}

/* ── Code blocks — Overflow protection ─────────────────────────── */

pre {
  overflow-x: auto;
  max-width: 100%;
  border-radius: 6px;
}

pre code {
  white-space: pre;
  word-wrap: normal;
  font-size: 0.85em;
}

/* ── Wikilinks — Accent color for internal links ───────────────── */

.internal-link {
  text-decoration: none;
  border-bottom: 1px dotted var(--text-accent);
}

.internal-link:hover {
  border-bottom-style: solid;
}

/* Unresolved links — clearly marked */
.internal-link.is-unresolved {
  opacity: 0.5;
  border-bottom-color: #e74c3c;
}

/* ── Tags — Compact, pill style ────────────────────────────────── */

.tag {
  font-size: 0.8em;
  padding: 0.1em 0.5em;
  border-radius: 10px;
  background-color: var(--background-secondary);
  white-space: nowrap;
}

/* ── Backlinks section — Cleaner ───────────────────────────────── */

.backlinks {
  border-top: 1px solid var(--background-modifier-border);
  margin-top: 3em;
  padding-top: 1em;
  opacity: 0.8;
}

/* ── Graph view — Larger nodes ─────────────────────────────────── */

.graph-view.color-fill-attachment {
  opacity: 0.8;
}

/* ── Print / Reading optimization ──────────────────────────────── */

/* ── Severity Tags — Inline colored pills ──────────────────────── */

a.tag[href*="P1"],
a.tag[href*="p1"] {
  background-color: rgba(220, 38, 38, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.3);
}

a.tag[href*="P2"],
a.tag[href*="p2"] {
  background-color: rgba(234, 88, 12, 0.15);
  color: #fdba74;
  border: 1px solid rgba(234, 88, 12, 0.3);
}

a.tag[href*="P3"],
a.tag[href*="p3"] {
  background-color: rgba(202, 138, 4, 0.15);
  color: #fde68a;
  border: 1px solid rgba(202, 138, 4, 0.3);
}

a.tag[href*="P4"],
a.tag[href*="p4"] {
  background-color: rgba(37, 99, 235, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(37, 99, 235, 0.3);
}

a.tag[href*="KEV"],
a.tag[href*="kev"] {
  background-color: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

a.tag[href*="zero-day"] {
  background-color: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.4);
}

/* ── Print / Reading optimization ──────────────────────────────── */

@media print {
  .callout {
    break-inside: avoid;
  }
  .mermaid {
    break-inside: avoid;
  }
}

/* ── Page Preview (hover popover) ────────────────────── */
.hover-popover {
  max-width: 500px;
  max-height: 300px;
  min-width: 350px;
}