/* Shragafeivel theme.
 *
 * Ported from the Atacama site of the same name. This file is *not* a copy of
 * that stylesheet: Atacama's version was written against Jinja markup and a
 * different custom-property vocabulary (--text-color, --main-background,
 * --accent-color), none of which the reader's stylesheets read. It is rewritten
 * here in terms of the variables main.css actually consumes, so the palette
 * takes effect instead of sitting inert.
 *
 * Everything is scoped under [data-site-theme="shragafeivel"] so loading this
 * file cannot alter any other 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.
 */

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

[data-site-theme="shragafeivel"] {
    --accent:          #4a6bfa;
    --accent-hover:    #3451c6;
    --accent-bg:       #eef1ff;
    --accent-bg-hover: #dde3ff;

    --bg:              #ffffff;
    --bg-card:         #ffffff;
    --bg-header:       #ffffff;
    --bg-th:           #f3f4ff;
    --bg-toolbar:      #f3f4ff;

    --text:            #2d3748;
    --text-muted:      #718096;
    --text-nav:        #4a5568;
    --text-label:      #2d3748;
    --text-excerpt:    #4a5568;

    --border:          #e2e8f0;
    --border-input:    #cbd5e0;
    --border-header:   #dde0f3;

    --shadow-focus:    rgba(74, 107, 250, 0.15);
    --btn-secondary-hover: #eef1ff;
    --pagination-border: #cbd5e0;

    /* Sidebar geometry, read by the layout rules below. */
    --sidebar-width:   280px;
    --sidebar-bg:      #f3f4ff;
}

[data-site-theme="shragafeivel"][data-theme="dark"] {
    --accent:          #5a78ff;
    --accent-hover:    #7b93ff;
    --accent-bg:       #232c4d;
    --accent-bg-hover: #2c3760;

    --bg:              #1a202c;
    --bg-card:         #2d3748;
    --bg-header:       #2d3748;
    --bg-th:           #2d3748;
    --bg-toolbar:      #2d3748;

    --text:            #e2e8f0;
    --text-muted:      #a0aec0;
    --text-nav:        #cbd5e0;
    --text-label:      #e2e8f0;
    --text-excerpt:    #cbd5e0;

    --border:          #4a5568;
    --border-input:    #4a5568;
    --border-header:   #4a5568;

    --shadow-focus:    rgba(90, 120, 255, 0.25);
    --btn-secondary-hover: #3a4a63;
    --pagination-border: #4a5568;

    --sidebar-bg:      #2d3748;
}

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

/* Atacama's banner was a 120px fixed header. Here it stays in flow above the
   sticky site-header, which keeps the reader's existing header behavior. */
[data-site-theme="shragafeivel"] .site-banner {
    align-items: baseline;
    background: var(--accent);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding: 1.25rem 1.5rem;
    text-align: left;
}

[data-site-theme="shragafeivel"] .site-banner-title {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

[data-site-theme="shragafeivel"] .site-banner-description {
    color: #ffffff;
    font-size: 1rem;
    opacity: 0.8;
}

/* ── Two-column page ──────────────────────────────────────────────────────── */

[data-site-theme="shragafeivel"] .page-container {
    display: flex;
    align-items: flex-start;
    max-width: 1600px;
    margin: 0 auto;
}

/* main.css centers .main-content with a max-width and auto margins; inside the
   flex row it instead takes the space the sidebar leaves. */
[data-site-theme="shragafeivel"] .page-container > .main-content {
    flex: 1;
    min-width: 0;
    margin: 2rem 0;
    max-width: none;
    padding: 0 2rem;
}

[data-site-theme="shragafeivel"] .sidebar {
    background: var(--sidebar-bg);
    border-left: 1px solid var(--border-header);
    flex: 0 0 var(--sidebar-width);
    padding: 2rem 1.5rem;
    align-self: stretch;
}

/* ── Channel navigation ───────────────────────────────────────────────────── */

[data-site-theme="shragafeivel"] .channel-group {
    margin-bottom: 1.5rem;
}

[data-site-theme="shragafeivel"] .channel-group-heading {
    border-bottom: 2px solid var(--accent);
    color: var(--accent);
    display: block;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    text-transform: uppercase;
}

[data-site-theme="shragafeivel"] .channel-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

[data-site-theme="shragafeivel"] .channel-item {
    margin: 0.5rem 0;
}

[data-site-theme="shragafeivel"] .channel-link {
    border-radius: 8px;
    color: var(--text);
    display: block;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 0.95rem;
    padding: 0.6rem 0.75rem;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

[data-site-theme="shragafeivel"] .channel-link:hover {
    background: var(--accent-bg);
    color: var(--accent-hover);
}

[data-site-theme="shragafeivel"] .channel-item.active .channel-link {
    background: var(--accent);
    color: #ffffff;
    font-weight: 500;
}

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

/* Below the two-column breakpoint the sidebar moves under the content and its
   channels reflow into a horizontal wrap, as they did on the Atacama site. */
@media (max-width: 1024px) {
    [data-site-theme="shragafeivel"] .page-container {
        flex-direction: column;
    }

    [data-site-theme="shragafeivel"] .page-container > .main-content {
        width: 100%;
        padding: 0 1.5rem;
    }

    [data-site-theme="shragafeivel"] .sidebar {
        border-left: none;
        border-top: 1px solid var(--border-header);
        flex-basis: auto;
        width: 100%;
    }

    [data-site-theme="shragafeivel"] .channel-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    [data-site-theme="shragafeivel"] .channel-item {
        margin: 0;
    }

    [data-site-theme="shragafeivel"] .channel-link {
        padding: 0.4rem 0.75rem;
    }
}

@media (max-width: 640px) {
    [data-site-theme="shragafeivel"] .site-banner {
        justify-content: flex-start;
        padding: 1rem;
    }

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

    [data-site-theme="shragafeivel"] .page-container > .main-content {
        padding: 0 1rem;
    }

    [data-site-theme="shragafeivel"] .sidebar {
        padding: 1.5rem 1rem;
    }
}