/* ===== Horizon Finance Custom Styles ===== */

/* --- CSS Variables & Dark Mode (Finance Navy/Gold) --- */
/* Palette: Navy blue · Gold · Bull green · Bear red
   #0a2540 deep navy · #c9a227 gold · #1b7f3a bull green · #c0392b bear red  */
:root {
  --hz-bg: #f8f9fa;          /* clean financial white */
  --hz-surface: #eef1f5;     /* light blue-gray surface */
  --hz-border: #d4dae3;      /* blue-gray border */
  --hz-text: #1a2332;        /* deep navy ink */
  --hz-text-muted: #5a6a7e;  /* muted slate gray */
  --hz-link: #0a6ebd;        /* financial blue */
  --hz-code-bg: #e8ecf1;     /* light code bg */
  --hz-accent: #c9a227;      /* gold accent */
}

@media (prefers-color-scheme: dark) {
  :root {
    --hz-bg: #0d1521;        /* deep navy black */
    --hz-surface: #16213a;   /* navy surface */
    --hz-border: #2a3a55;    /* blue border */
    --hz-text: #e2e8f0;      /* ice white */
    --hz-text-muted: #8a9bb0; /* muted steel */
    --hz-link: #4dabe3;      /* bright blue */
    --hz-code-bg: #131f33;   /* deep code bg */
    --hz-accent: #d4af37;    /* bright gold */
  }
}

/* Apply variables to base elements */
body {
  background-color: var(--hz-bg) !important;
  color: var(--hz-text) !important;
}

a {
  color: var(--hz-link) !important;
}

code {
  background-color: var(--hz-code-bg) !important;
  color: var(--hz-text) !important;
}

pre {
  background-color: var(--hz-code-bg) !important;
  color: var(--hz-text) !important;
  border: 1px solid var(--hz-border) !important;
}

hr {
  border-color: var(--hz-border) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--hz-text) !important;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 800 !important;
}

/* Override Cayman header gradient — Finance Navy/Gold */
.page-header {
  background: linear-gradient(120deg, #0a2540, #0a6ebd, #c9a227) !important;
}

.page-header h1,
.page-header h2,
.page-header .project-tagline,
.page-header a {
  color: #fff !important;
}

/* --- Score Badge --- */
.score-badge {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.75em;
  font-weight: 700;
  color: #fff;
  margin-left: 0.4em;
  vertical-align: middle;
}

.score-badge[data-tier="high"] { background: #0a6ebd; } /* financial blue — major event */
.score-badge[data-tier="good"] { background: #1b7f3a; } /* bull green — positive */
.score-badge[data-tier="mid"]  { background: #c9a227; } /* gold — neutral */
.score-badge[data-tier="low"]  { background: #5a6a7e; } /* slate gray — low value */

/* --- Tag Pills --- */
.tag-line code {
  border-radius: 3px;
  padding: 0.1em 0.5em;
  font-size: 0.8em;
  background: var(--hz-accent) !important;
  color: #fff !important;
}

@media (prefers-color-scheme: dark) {
  .tag-line code {
    background: #2a3a55 !important;   /* navy border */
    color: #d4af37 !important;        /* gold */
  }
}

/* --- Source Line --- */
.source-line {
  font-size: 0.85em;
  color: var(--hz-text-muted);
  border-left: 2px solid var(--hz-accent);
  padding-left: 0.6em;
}

/* --- Collapsible References --- */
.main-content details {
  border: 1px solid var(--hz-border);
  border-radius: 4px;
  margin: 0.8em 0;
}

.main-content details summary {
  cursor: pointer;
  padding: 0.4em 0.8em;
  font-weight: 600;
  color: var(--hz-text-muted);
}

.main-content details > ul {
  padding: 0.4em 0.8em 0.4em 2em;
  margin: 0;
}

/* --- TOC Ordered List --- */
.main-content > ol {
  border: 1px solid var(--hz-border);
  border-radius: 4px;
  padding: 0.8em 0.8em 0.8em 2em;
  background: var(--hz-surface);
}

.main-content > ol > li {
  padding: 0.3em 0;
}

/* --- Summary Blockquote --- */
.main-content > blockquote:first-of-type {
  border-left-color: var(--hz-accent);
  color: var(--hz-text-muted);
  font-style: normal;
}

/* --- Language Toggle (fixed top-right) --- */
.lang-toggle {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 1000;
  display: flex;
  gap: 0;
}

.lang-toggle button {
  padding: 0.3em 1em;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.15);
  color: #fff;
  font-size: 0.8em;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.lang-toggle button:first-child {
  border-radius: 3px 0 0 3px;
}

.lang-toggle button:last-child {
  border-radius: 0 3px 3px 0;
  border-left: none;
}

.lang-toggle button.active {
  background: var(--hz-accent);
  color: #fff;
  border-color: var(--hz-accent);
}

.lang-section.hidden {
  display: none;
}