/* Pow3 theme (blog.pow3.com).
 *
 * Ported from the Atacama site of the same name, on the same terms as
 * themes/shragafeivel.css. Atacama's version was written against Jinja markup
 * and a different custom-property vocabulary (--text-color, --main-background,
 * --accent-color, --card-background), none of which the reader's stylesheets
 * read, so its indigo palette sat entirely inert and the domain rendered in the
 * reader's default green.
 *
 * Rewritten here against the variables main.css actually consumes. Everything
 * is scoped under [data-site-theme="pow3"] so loading this file cannot alter
 * another domain. Light and dark both come from the reader's explicit
 * data-theme toggle; there is deliberately no prefers-color-scheme block, which
 * would override a reader who has chosen lite and fight the toggle.
 *
 * The original's left-hand sidebar is dropped rather than ported: the sidebar
 * is gated on Layout == "shragafeivel" in both loadSidebarTopics and
 * sidebarEnabled, and pow3 is a single-column blog whose six channels do not
 * need standing navigation.
 */

/* ── Palette ──────────────────────────────────────────────────────────────── */

[data-site-theme="pow3"] {
    --accent:          #4f46e5;
    --accent-hover:    #4338ca;
    --accent-bg:       #eef2ff;
    --accent-bg-hover: #e0e7ff;

    --bg:              #f8fafc;
    --bg-card:         #ffffff;
    --bg-input:        #ffffff;
    --bg-header:       #ffffff;
    --bg-th:           #eef2ff;
    --bg-code:         #f1f5f9;
    --bg-toolbar:      #eef2ff;

    --text:            #1f2937;
    --text-muted:      #6b7280;
    --text-dimmer:     #9ca3af;
    --text-nav:        #4b5563;
    --text-label:      #374151;
    --text-excerpt:    #4b5563;

    --border:          #e5e7eb;
    --border-input:    #d1d5db;
    --border-header:   #e0e3ee;

    --shadow-focus:    rgba(79, 70, 229, 0.15);
    --btn-secondary-bg:#ffffff;
    --btn-secondary-hover: #eef2ff;
    --pagination-border: #d1d5db;

    /* Banner gradient, read by the banner rules below. */
    --banner-bg: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
}

[data-site-theme="pow3"][data-theme="dark"] {
    --accent:          #818cf8;
    --accent-hover:    #a5b4fc;
    --accent-bg:       #232048;
    --accent-bg-hover: #2d2854;

    --bg:              #0f0d1a;
    --bg-card:         #1a1730;
    --bg-input:        #161329;
    --bg-header:       #161329;
    --bg-th:           #232048;
    --bg-code:         #1e1b3a;
    --bg-toolbar:      #232048;

    --text:            #e5e7eb;
    --text-muted:      #9ca3af;
    --text-dimmer:     #6b7280;
    --text-nav:        #cbd5e1;
    --text-label:      #d1d5db;
    --text-excerpt:    #c7cad1;

    --border:          #2d2854;
    --border-input:    #3d3768;
    --border-header:   #2d2854;

    --shadow-focus:    rgba(129, 140, 248, 0.25);
    --btn-secondary-bg:#1a1730;
    --btn-secondary-hover: #262046;
    --pagination-border: #3d3768;

    --banner-bg: linear-gradient(135deg, #0f0a1e 0%, #1e1b4b 50%, #252166 100%);
}

/* ── Banner ───────────────────────────────────────────────────────────────── */

/* Atacama's banner was a 72px fixed header with the site title and description
   side by side. Here it stays in flow above the sticky site-header, which keeps
   the reader's existing header behavior. */
[data-site-theme="pow3"] .site-banner {
    align-items: baseline;
    background: var(--banner-bg);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 2rem;
}

[data-site-theme="pow3"] .site-banner-title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

[data-site-theme="pow3"] .site-banner-description {
    color: #ffffff;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    opacity: 0.7;
}

/* ── Post list ────────────────────────────────────────────────────────────── */

/* The original styled each entry as a raised card (.stream-message, which does
   not exist here). The equivalent in the reader's markup is .post-list-item. */
[data-site-theme="pow3"] .post-list-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-site-theme="pow3"] .post-list-item:hover {
    border-color: rgba(79, 70, 229, 0.3);
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
}

[data-site-theme="pow3"] .post-title {
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

[data-site-theme="pow3"] .topic-badge {
    background: var(--accent-bg);
    border: 1px solid rgba(79, 70, 229, 0.15);
    border-radius: 9999px;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.65rem;
    text-decoration: none;
}

[data-site-theme="pow3"] .topic-badge:hover {
    background: var(--accent-bg-hover);
}

/* ── Body copy and code ───────────────────────────────────────────────────── */

/* A technology blog runs long and code-heavy, so the reading column gets a
   little more leading than the reader's default. */
[data-site-theme="pow3"] .post-body {
    line-height: 1.75;
}

[data-site-theme="pow3"] code,
[data-site-theme="pow3"] pre {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
    font-size: 0.875em;
}

[data-site-theme="pow3"] code {
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0.15rem 0.4rem;
}

[data-site-theme="pow3"] pre {
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow-x: auto;
    padding: 1.25rem;
}

[data-site-theme="pow3"] pre code {
    background: transparent;
    border: none;
    padding: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    [data-site-theme="pow3"] .site-banner {
        gap: 0.375rem;
        padding: 1rem;
    }

    [data-site-theme="pow3"] .site-banner-title {
        font-size: 1.2rem;
    }

    [data-site-theme="pow3"] .post-list-item {
        padding: 1rem;
    }
}