/* ekenberg.se — site theme
 * Light mode by default, dark via [data-theme="dark"].
 * Both modes share the same structure; only CSS variables differ.
 */

/* ── Light mode (default) ─────────────────────────────────────────── */
:root {
    --bg: #c9c4bb;
    --surface: #f5f0e8;
    --border: #c4b9a8;
    --text: #1a1a1a;
    --dim: #5a5347;
    --orange: #c96518;
    --cyan: #0c6577;
    --green: #146932;
    --purple: #6d2fd4;
    --orange-glow: rgba(201,101,24,0.1);
    --link: #0369a1;
    --nav-link: #4a4440;
    --card-title: #1a1008;
    --card-text: #4a4440;
    --article-text: #333;
    --article-heading: #1a1a1a;
    --article-em: #555;
    --article-strong: #1a1a1a;
    --blockquote-bg: rgba(0,0,0,0.03);
    --blockquote-text: #555;
    --inline-code-bg: rgba(0,0,0,0.05);
    --inline-code-border: #ddd;
    --code-block-bg: #2a2a2a;
    --code-block-border: #ddd;
    --selection-bg: var(--orange);
    --selection-text: white;
    --nav-footer-bg: #b5b0a7;
    --nav-footer-border: #9a958c;
}

/* ── Dark mode ────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --link: var(--orange);
    --bg: #111;
    --surface: #1a1a1a;
    --border: #2e2e2e;
    --text: #ececec;
    --dim: #9a9a9a;
    --orange: #e8842c;
    --cyan: #22d3ee;
    --green: #4ade80;
    --purple: #a78bfa;
    --orange-glow: rgba(232,132,44,0.12);
    --nav-link: #aaa;
    --card-title: white;
    --card-text: #aaa;
    --article-text: #ccc;
    --article-heading: white;
    --article-em: #bbb;
    --article-strong: white;
    --blockquote-bg: var(--surface);
    --blockquote-text: #bbb;
    --inline-code-bg: var(--surface);
    --inline-code-border: var(--border);
    --code-block-bg: var(--bg);
    --code-block-border: var(--border);
    --selection-text: black;
}

a { -webkit-tap-highlight-color: transparent; }
/* ── Base ─────────────────────────────────────────────────────────── */
html { background: var(--nav-footer-bg, #b5b0a7); }
html[data-theme="dark"] { background: var(--bg); }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.9rem;
}
::selection { background: var(--selection-bg); color: var(--selection-text); }

/* ── Navbar ───────────────────────────────────────────────────────── */
.navbar { background: var(--nav-footer-bg) !important; border-bottom: 1px solid var(--nav-footer-border); }
[data-theme="dark"] .navbar { background: var(--surface) !important; border-bottom-color: var(--border); }
.navbar-item { color: var(--nav-link) !important; font-size: 0.85rem; background: transparent !important; }
a.navbar-item:hover, a.navbar-item:focus, a.navbar-item:active, .navbar-item:hover, .navbar-item:focus, .navbar-item:active { color: var(--link) !important; background: transparent !important; background-color: transparent !important; text-decoration: none; }
.navbar-menu, .navbar-menu.is-active { background: var(--nav-footer-bg) !important; }
@media (max-width: 1023px) {
    .navbar-menu .navbar-item { text-align: right; }
}
[data-theme="dark"] .navbar-menu, [data-theme="dark"] .navbar-menu.is-active { background: var(--surface) !important; }
.navbar-burger span { background-color: var(--text) !important; }
.prompt { color: var(--link); }
.navbar-portrait { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin-right: 0.5rem; }

/* ── Site header (front page) ─────────────────────────────────────── */
.site-header { border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; }
.portrait { width: 144px; height: 144px; border-radius: 50%; border: 2px solid var(--border); overflow: hidden; flex-shrink: 0; background: var(--surface); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.header-text .name { font-size: 1.1rem; font-weight: 400; color: var(--article-heading); }
.header-text .bio { color: var(--card-text); font-size: 0.85rem; margin-top: 0.3rem; }
.header-text .bio a { color: var(--link); text-decoration: none; }
.header-text .bio a:hover { text-decoration: underline; }

/* ── Section label ────────────────────────────────────────────────── */
.section-label { text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1.25rem; }

/* ── Article cards (front page) ───────────────────────────────────── */
.articles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.article-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 4px;
    padding: 1.1rem 1.25rem;
    transition: border-left-color 0.2s, box-shadow 0.2s;
    min-width: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.article-card:hover { box-shadow: 0 2px 12px var(--orange-glow); }
.article-card:has(.cat-emacs):hover { border-left-color: var(--purple); }
.article-card:has(.cat-linux):hover { border-left-color: var(--green); }
.article-card:has(.cat-silly):hover { border-left-color: var(--orange); }
.article-card:has(.cat-projects):hover { border-left-color: var(--cyan); }

/* ── Category tags ───────────────────────────────────────────────── *
 * Adding a new category:
 *   1. index.php — add 'category' and 'cat_label' to the article entry
 *   2. :root — add a --newcat CSS variable (and dark override)
 *   3. Here — add .cat-newcat color/background rules (light + dark)
 *   4. Below — add :has(.cat-newcat) rules for card + article-page-card borders
 *   5. helpers.php cat_class() maps category slug → CSS class automatically
 */
.cat { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; padding: 0.2em 0.6em; border-radius: 4px; line-height: 1.9; }
.cat-emacs { color: var(--purple); background: rgba(124,58,237,0.12); }
.cat-linux { color: var(--green); background: rgba(20,105,50,0.12); }
.cat-silly { color: var(--orange); background: rgba(201,101,24,0.12); }
.cat-projects { color: var(--cyan); background: rgba(12,101,119,0.12); }
[data-theme="dark"] .cat-emacs { background: rgba(167,139,250,0.15); }
[data-theme="dark"] .cat-linux { background: rgba(74,222,128,0.15); }
[data-theme="dark"] .cat-silly { background: rgba(232,132,44,0.15); }
[data-theme="dark"] .cat-projects { background: rgba(34,211,238,0.15); }

.article-card h3 { font-size: 0.95rem; font-weight: 400; margin-top: 0.35rem; }
.article-card h3 a { color: var(--card-title); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
[data-theme="dark"] .article-card h3 a { text-decoration: none; }
.article-card h3 a:hover { color: var(--link); text-decoration-color: var(--link); }
.article-card p { color: var(--card-text); font-size: 0.82rem; margin-top: 0.3rem; line-height: 1.55; }
.article-card.wide { grid-column: 1 / -1; }

/* ── Article page card ────────────────────────────────────────────── */
.article-page-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 4px;
    padding: 2rem 2.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.article-page-card:has(.cat-emacs) { border-left-color: var(--purple); }
.article-page-card:has(.cat-linux) { border-left-color: var(--green); }
.article-page-card:has(.cat-silly) { border-left-color: var(--orange); }
.article-page-card:has(.cat-projects) { border-left-color: var(--cyan); }
[data-theme="dark"] .article-page-card { box-shadow: none; }

/* ── Article meta ─────────────────────────────────────────────────── */
.article-meta { margin-bottom: 1.5rem; }
.article-meta .date { color: var(--dim); font-size: 0.78rem; margin-left: 0.75rem; }
.article-title { font-size: 1.5rem; font-weight: 600; color: var(--article-heading); margin-top: 0.5rem; line-height: 1.3; }
.article-subtitle { color: var(--card-text); font-size: 0.88rem; margin-top: 0.4rem; line-height: 1.5; }

/* ── Article body ─────────────────────────────────────────────────── */
.article-body h2 { font-size: 1.15rem; font-weight: 600; color: var(--article-heading); margin-top: 2rem; margin-bottom: 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--code-block-border); }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-size: 1rem; font-weight: 500; color: var(--article-heading); margin-top: 1.5rem; margin-bottom: 0.5rem; }
.article-body p { color: var(--article-text); font-size: 0.88rem; line-height: 1.7; margin-bottom: 1rem; }
.article-body a { color: var(--link); text-decoration: none; }
.article-body a:hover { text-decoration: underline; }
.article-body ul, .article-body ol { color: var(--article-text); font-size: 0.88rem; line-height: 1.7; margin-bottom: 1rem; margin-left: 1.5rem; }
.article-body li { margin-bottom: 0.3rem; }
.article-body strong { color: var(--article-strong); font-weight: 600; }
.article-body em { font-style: italic; color: var(--article-em); }
.article-body blockquote { border-left: 3px solid var(--orange); background: var(--blockquote-bg); padding: 0.75rem 1rem; margin: 1rem 0; border-radius: 0 4px 4px 0; }
.article-body blockquote p { margin-bottom: 0; color: var(--blockquote-text); }

/* ── AI addendum ─────────────────────────────────────────────────── */
.ai-addendum {
    border-left: 3px solid var(--cyan);
    background: var(--blockquote-bg);
    padding: 1.25rem 1.25rem 0.5rem;
    margin: 2rem 0 1rem;
    border-radius: 0 4px 4px 0;
}
.ai-addendum .ai-addendum-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cyan);
    margin-bottom: 0.75rem;
    font-weight: 600;
}
.ai-addendum .ai-addendum-header i { margin-right: 0.4rem; }
.ai-addendum p {
    font-style: italic;
    color: var(--blockquote-text);
    font-size: 0.85rem;
    line-height: 1.65;
    margin-bottom: 0.75rem;
}
.ai-addendum a { color: var(--cyan) !important; }
.ai-addendum strong { color: var(--article-strong); font-style: italic; }

/* ── Inline code ──────────────────────────────────────────────────── */
.article-body code:not([class*="language-"]) {
    background: var(--inline-code-bg);
    border: 1px solid var(--inline-code-border);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.84rem;
    color: #be123c;
}
[data-theme="dark"] .article-body code:not([class*="language-"]) { color: var(--cyan); }

/* ── KaTeX math ──────────────────────────────────────────────────── */
.article-body .katex { color: #be123c; }
[data-theme="dark"] .article-body .katex { color: var(--cyan); }
.article-body .katex-display { background: var(--inline-code-bg); border: 1px solid var(--inline-code-border); border-radius: 3px; padding: 1rem; margin: 1rem 0; }

/* ── Code blocks ──────────────────────────────────────────────────── */
.code-label { font-size: 0.7rem; color: var(--dim); margin-bottom: 0.2rem; }
pre[class*="language-"] { background: var(--code-block-bg) !important; border: 1px solid var(--code-block-border); font-size: 0.82rem; border-radius: 3px; overflow-x: auto; margin-bottom: 1rem; }
code { font-family: inherit !important; }

/* Front page code preview */
.article-card pre[class*="language-"] { font-size: 0.85rem; }

/* ── Article nav (prev/next) ──────────────────────────────────────── */
.article-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--code-block-border); }
.article-nav a { color: var(--dim); font-size: 0.82rem; text-decoration: none; max-width: 45%; }
.article-nav a:hover { color: var(--link); text-decoration: underline; }
.article-nav a:hover .nav-label { color: var(--link); }
.article-nav .nav-label { font-size: 0.7rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 0.2rem; }
.article-nav .next { text-align: right; }

/* ── Footer ───────────────────────────────────────────────────────── */
.footer { background: var(--nav-footer-bg) !important; border-top: 1px solid var(--nav-footer-border); }
[data-theme="dark"] .footer { background: var(--surface) !important; border-top-color: var(--border); }
.footer p { color: var(--dim); font-size: 0.72rem; }
.footer a { color: var(--link); text-decoration: none; }

/* ── Theme toggle ─────────────────────────────────────────────────── */
.theme-toggle { cursor: pointer; font-size: 0.85rem; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .section { padding-left: 0.75rem; padding-right: 0.75rem; }
    .article-page-card { padding: 1.5rem 1.25rem; }
}
@media (max-width: 768px) {
    .articles-grid { grid-template-columns: 1fr; }
    .article-card.wide { grid-column: 1; }
    .header-inner { gap: 1rem; }
    .portrait { width: 96px; height: 96px; }
    .article-page-card { padding: 1.25rem 1rem; }
    .article-title { font-size: 1.25rem; }
    pre[class*="language-"] { font-size: 0.76rem; }
    .article-nav a { font-size: 0.75rem; }
    .article-nav .nav-label { font-size: 0.65rem; }
}