/* style.css - Article/format page styles for binarybacktrace.com */
/* Requires: base.css, components.css */

/* Links (article-specific: accent-colored) */
a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* Typography */
h1, h2, h3, h4 { color: var(--text-primary); line-height: 1.3; }
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.35rem; font-weight: 600; margin: 3rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-subtle); }
h3 { font-size: 1.1rem; font-weight: 500; margin: 2rem 0 0.75rem; }
p { margin-bottom: 1.25rem; color: var(--text-secondary); line-height: 1.7; }

/* Lists */
ul, ol { margin-bottom: var(--space-m); padding-left: var(--space-l); color: var(--text-secondary); }
li { margin-bottom: var(--space-xs); }

/* Article layout */
.layout { display: grid; grid-template-columns: 200px 1fr; max-width: 1100px; margin: 0 auto; gap: 2.5rem; padding: 2rem; }
.main-content { max-width: 72ch; padding: 0 0 4rem; }

/* Sidebar TOC */
.sidebar { position: sticky; top: 5rem; height: fit-content; max-height: calc(100vh - 6rem); overflow-y: auto; }
.toc { padding: 0; }
.toc h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin: 0 0 var(--space-m); font-weight: 600; }
.toc-list, .toc-sub { list-style: none; padding: 0; margin: 0; }
.toc-list > li { border-left: 1px solid var(--border-subtle); }
.toc-list a {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
  padding: 4px 0 4px 12px;
  transition: color 0.15s, border-color 0.15s;
  margin-left: -1px;
  border-left: 2px solid transparent;
}
.toc-list a:hover { color: var(--text-primary); text-decoration: none; }
.toc-list a.active { color: var(--accent); border-left-color: var(--accent); }
.toc-sub { margin-top: 2px; }
.toc-sub a { font-size: 11px; padding-left: 24px; }

/* Hero */
.hero-section { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border-subtle); }
.hero-section h1 { margin-bottom: 0.5rem; }
.hero-tags { display: flex; gap: 8px; }
.hero-tag { font-size: 9px; padding: 2px 6px; background: color-mix(in oklch, var(--accent) 12%, transparent); border-radius: 3px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; font-family: var(--font-mono); }
.hero-meta { display: flex; gap: 1.5rem; color: var(--text-muted); font-size: 0.9rem; }

/* Copy button */
.copy-btn { background: color-mix(in oklch, var(--text-primary) 5%, transparent); border: 1px solid var(--border-subtle); color: var(--text-muted); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s; font-family: var(--font-mono); text-transform: none; font-weight: 400; letter-spacing: normal; }
.copy-btn:hover { background: color-mix(in oklch, var(--text-primary) 10%, transparent); color: var(--text-primary); }
.copy-btn.copied { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* Syntax highlighting - xcode-inspired palette for format articles */
.code-themed {
  --fmt-keyword: #fc5fa3;
  --fmt-call: #67b7a4;
  --fmt-comment: #6c7986;
  --fmt-string: #fc6a5d;
  --fmt-type: #5dd8ff;
  --fmt-number: #d0bf69;
  --fmt-property: #dfdfe0;
  --fmt-directive: #fd8f3f;
  --fmt-punctuation: #a0a0a8;
}
[data-theme="light"] .code-themed {
  --fmt-keyword: #ad3da4;
  --fmt-call: #326d74;
  --fmt-comment: #707f8c;
  --fmt-string: #d12f1b;
  --fmt-type: #3e8087;
  --fmt-number: #1c00cf;
  --fmt-property: #1f1f1f;
  --fmt-directive: #804000;
  --fmt-punctuation: #525252;
}
[data-theme="ayu-mirage"] .code-themed {
  --fmt-keyword: #ffad65;
  --fmt-call: #ffd580;
  --fmt-comment: #5c6773;
  --fmt-string: #bae67e;
  --fmt-type: #73d0ff;
  --fmt-number: #ffcc66;
  --fmt-property: #d9d7ce;
  --fmt-directive: #f28779;
  --fmt-punctuation: #9a9a98;
}
[data-theme="nord"] .code-themed {
  --fmt-keyword: #81a1c1;
  --fmt-call: #88c0d0;
  --fmt-comment: #616e88;
  --fmt-string: #a3be8c;
  --fmt-type: #8fbcbb;
  --fmt-number: #d08770;
  --fmt-property: #d8dee9;
  --fmt-directive: #ebcb8b;
  --fmt-punctuation: #7b88a1;
}
[data-theme="dracula"] .code-themed {
  --fmt-keyword: #ff79c6;
  --fmt-call: #50fa7b;
  --fmt-comment: #6272a4;
  --fmt-string: #f1fa8c;
  --fmt-type: #8be9fd;
  --fmt-number: #bd93f9;
  --fmt-property: #f8f8f2;
  --fmt-directive: #ffb86c;
  --fmt-punctuation: #bfc2d0;
}
.comment { color: var(--fmt-comment); font-style: italic; }
.keyword { color: var(--fmt-keyword); }
.function { color: var(--fmt-call); }
.string { color: var(--fmt-string); }
.number { color: var(--fmt-number); }
.constant { color: var(--fmt-type); }
.operator { color: var(--fmt-punctuation); }
.property { color: var(--fmt-property); }
.punctuation { color: var(--fmt-punctuation); }

/* Article notes and captions */
.note { margin-top: var(--space-xs); font-size: 0.875rem; color: var(--text-secondary); }
.note-muted { font-size: 0.875rem; color: var(--text-muted); }
.binary-caption { margin-top: var(--space-xs); color: var(--text-muted); font-size: 0.8rem; }

/* Binary view (format articles) */
.binary-view { background: var(--code-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-m); margin-bottom: var(--space-m); font-family: var(--font-mono); font-size: 0.875rem; overflow-x: auto; }
.binary-row { display: flex; gap: var(--space-m); padding: var(--space-xs) 0; }
.binary-offset { color: var(--text-muted); min-width: 80px; }
.binary-hex { color: var(--text-secondary); flex: 1; }
.binary-hex span { margin-right: var(--space-xs); }
.binary-hex .highlight { background: color-mix(in oklch, var(--accent) 20%, transparent); color: var(--accent); padding: 0 0.25rem; border-radius: 3px; }
.binary-ascii { color: var(--text-muted); min-width: 180px; }

/* Responsive */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.2rem; }
}