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

/* --- CSS Variables & Dark Mode (Horizon Dawn) --- */
/* Palette derived from horizon-header.svg sunrise:
   #312e81 deep indigo · #be185d rose · #f97316 orange · #fbbf24 gold
   #4c1d95 mountain purple · #701a75 distant purple                  */
:root {
  --hz-bg: #faf8f5;          /* warm parchment white */
  --hz-surface: #f3f0eb;     /* slightly warm gray */
  --hz-border: #e0dbd3;      /* warm border */
  --hz-text: #2d2a3e;        /* deep indigo-ink */
  --hz-text-muted: #7c7891;  /* muted lavender gray */
  --hz-link: #6d4aaa;        /* mountain purple, lighter */
  --hz-code-bg: #f0ede7;     /* warm code bg */
  --hz-accent: #e0652e;      /* sunrise orange, toned down */
}

@media (prefers-color-scheme: dark) {
  :root {
    --hz-bg: #1a1726;        /* pre-dawn deep purple-black */
    --hz-surface: #231f33;   /* night sky surface */
    --hz-border: #342f4a;    /* indigo border */
    --hz-text: #e8e4f0;      /* moonlight white-lavender */
    --hz-text-muted: #8c86a0; /* muted twilight */
    --hz-link: #f0a848;      /* dawn gold */
    --hz-code-bg: #211d30;   /* deep code bg */
    --hz-accent: #e87040;    /* sunrise orange-coral */
  }
}

/* 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 — Horizon sunrise from SVG */
.page-header {
  background: linear-gradient(120deg, #312e81, #be185d, #f97316) !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: #be185d; } /* rose — from SVG */
.score-badge[data-tier="good"] { background: #e0652e; } /* sunrise orange */
.score-badge[data-tier="mid"]  { background: #d4a017; } /* warm gold */
.score-badge[data-tier="low"]  { background: #7c7891; } /* muted lavender */

/* --- 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: #342f4a !important;   /* indigo border */
    color: #f0a848 !important;        /* dawn 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;
}


/* Site layout */
body { margin: 0; font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC","Helvetica Neue",Arial,sans-serif; line-height:1.7; }
.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.page-header {
  background: linear-gradient(120deg, #312e81, #be185d, #f97316);
  color: #fff; padding: 32px 0 24px; text-align: center;
}
.page-header h1 { margin:0; font-size:2rem; color:#fff !important; }
.page-header p { margin:8px 0 0; opacity:.85; font-size:1rem; }
.page-header a { color:#fbbf24 !important; text-decoration:none; }
.site-nav {
  background: var(--hz-surface, #f3f0eb); border-bottom:1px solid var(--hz-border, #e0dbd3);
  padding:10px 0; text-align:center;
}
.site-nav a {
  display:inline-block; padding:6px 16px; margin:0 4px;
  border-radius:6px; text-decoration:none;
  color:var(--hz-text, #2d2a3e) !important; font-weight:600; font-size:0.9rem;
}
.site-nav a:hover, .site-nav a.active { background:var(--hz-accent, #e0652e); color:#fff !important; }
.day-list { list-style:none; padding:0; margin:24px 0; }
.day-list li {
  display:flex; align-items:center; padding:14px 16px;
  border-bottom:1px solid var(--hz-border, #e0dbd3); transition:background .15s;
}
.day-list li:hover { background:var(--hz-surface, #f3f0eb); }
.day-list .date { font-weight:700; font-size:1.05rem; min-width:130px; }
.day-list .count { margin-left:auto; font-size:0.85rem; color:var(--hz-text-muted, #7c7891); }
.day-list .badge { 
  display:inline-block; padding:2px 10px; border-radius:999px;
  font-size:0.78rem; font-weight:600; margin-left:10px;
}
.badge-zh { background:#4c1d95; color:#fff; }
.badge-en { background:#f97316; color:#fff; }
.day-content {
  max-width: 900px; margin: 24px auto; padding: 0 20px;
}
.day-content h1 { font-size:1.6rem; margin-top:0; }
.day-content h2 { font-size:1.25rem; margin-top:1.5em; }
.day-content h3 { font-size:1.05rem; margin-top:1em; }
.day-content .score-badge {
  display:inline-block; padding:2px 8px; border-radius:4px;
  font-family:monospace; font-size:0.8rem; font-weight:700; margin-left:6px;
}
.day-content blockquote {
  border-left:3px solid var(--hz-accent, #e0652e);
  margin:12px 0; padding:8px 16px; background:var(--hz-surface, #f3f0eb);
  border-radius:0 6px 6px 0;
}
.day-content details {
  margin:12px 0; padding:10px 14px;
  background:var(--hz-surface, #f3f0eb); border-radius:6px;
}
.day-content summary { cursor:pointer; font-weight:600; }
.day-content hr { margin:24px 0; border:none; border-top:1px solid var(--hz-border, #e0dbd3); }
.lang-tabs { text-align:center; margin:12px 0; }
.lang-tabs a {
  display:inline-block; padding:8px 20px; margin:0 4px;
  border-radius:8px; text-decoration:none; font-weight:600;
  background:var(--hz-surface, #f3f0eb); color:var(--hz-text, #2d2a3e) !important;
}
.lang-tabs a.active { background:var(--hz-accent, #e0652e); color:#fff !important; }
.footer {
  text-align:center; padding:24px; font-size:0.85rem;
  color:var(--hz-text-muted, #7c7891);
}
.search-box {
  width:100%; max-width:400px; padding:10px 14px;
  border:1px solid var(--hz-border, #e0dbd3); border-radius:8px;
  font-size:0.95rem; margin:16px auto; display:block;
  background:var(--hz-bg, #faf8f5); color:var(--hz-text, #2d2a3e);
}