/*
Theme Name: MannaScroll
Theme URI: https://mannascroll.com
Author: MannaScroll
Description: Bold, modern scroll-feed theme — scripture, quotes, and reflections presented one at a time, snap-scroll style. Pairs with the MannaScroll Core plugin.
Version: 1.0
Requires PHP: 7.4
Text Domain: mannascroll
*/

:root {
    --ms-bg: #0E1116;
    --ms-card-bg: #16191F;
    --ms-text: #F5F2EA;
    --ms-muted: #8A8F98;
    --ms-rail-bg: #1B1F26;
    --ms-border: #2A2E36;

    --ms-gold: #E8B84B;       /* scripture */
    --ms-brick: #C4432B;      /* quote */
    --ms-teal: #4AA3A2;       /* reflection */

    --font-display: 'Fraunces', Georgia, serif;
    --font-ui: 'Space Grotesk', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--ms-bg);
    color: var(--ms-text);
    font-family: var(--font-ui);
    height: 100%;
}

a { color: inherit; text-decoration: none; }

/* ---------- Top bar ---------- */
.ms-topbar {
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: linear-gradient(to bottom, rgba(14,17,22,0.95), rgba(14,17,22,0));
}

.ms-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ms-text);
}
.ms-logo img { height: 28px; width: auto; }

.ms-topbar-links {
    display: flex;
    gap: 18px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--ms-muted);
}
.ms-topbar-links a:hover { color: var(--ms-text); }

/* ---------- Topic filter bar ---------- */
.ms-topic-bar {
    position: fixed;
    top: 64px;
    left: 0;
    width: 100%;
    z-index: 25;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 24px 14px;
    background: linear-gradient(to bottom, rgba(14,17,22,0.9), rgba(14,17,22,0));
    scrollbar-width: none;
}
.ms-topic-bar::-webkit-scrollbar { display: none; }

.ms-topic-pill {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--ms-border);
    color: var(--ms-muted);
    background: rgba(255,255,255,0.02);
}
.ms-topic-pill.is-active {
    color: var(--ms-bg);
    background: var(--ms-gold);
    border-color: var(--ms-gold);
}

/* ---------- Scroll feed ---------- */
.ms-feed {
    height: 100dvh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.ms-card {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 0 24px;
}
@media (min-width: 640px) { .ms-card { padding: 0 60px; } }
@media (min-width: 900px) { .ms-card { padding: 0 100px; } }

.ms-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 4px; height: 100%;
    background: var(--accent, var(--ms-teal));
    opacity: 0.9;
}

.ms-card-inner { max-width: 680px; margin: 0 auto; width: 100%; }

.ms-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    color: var(--accent, var(--ms-teal));
    margin-bottom: 24px;
}

.ms-body {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.15;
    font-size: clamp(1.6rem, 4.2vw, 2.75rem);
    color: var(--ms-text);
}
.ms-body.is-quote { font-style: italic; }

.ms-dropcap {
    float: left;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3.5rem, 9vw, 6rem);
    line-height: 0.8;
    padding-right: 0.15em;
    padding-top: 0.05em;
    color: var(--accent, var(--ms-teal));
}

.ms-meta-row {
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.ms-attribution {
    font-size: 0.9rem;
    color: var(--ms-muted);
}

.ms-actions { display: flex; gap: 10px; }

.ms-save-btn, .ms-share-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--ms-border);
    background: transparent;
    color: var(--ms-muted);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    cursor: pointer;
}
.ms-save-btn.is-saved {
    color: var(--ms-bg);
    background: var(--accent, var(--ms-gold));
    border-color: var(--accent, var(--ms-gold));
}
.ms-share-btn.is-copied { color: var(--ms-gold); border-color: var(--ms-gold); }

.ms-index-tick {
    position: absolute;
    bottom: 24px; right: 24px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #3A3E46;
}

/* ---------- Progress rail ---------- */
.ms-progress-rail {
    position: fixed;
    right: 0; top: 0;
    width: 3px; height: 100%;
    background: var(--ms-rail-bg);
    z-index: 20;
}
.ms-progress-fill {
    width: 100%;
    background: var(--ms-gold);
    height: 0%;
}

/* ---------- Static pages (About, Saved) ---------- */
.ms-page {
    max-width: 680px;
    margin: 0 auto;
    padding: 120px 24px 80px;
}
.ms-page h1 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    margin-bottom: 24px;
}
.ms-page p { line-height: 1.7; color: var(--ms-text); }

.ms-saved-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--ms-border);
}
.ms-saved-item a { color: var(--ms-gold); }

.ms-empty-state { color: var(--ms-muted); margin-top: 40px; }

/* ---------- Newsletter embed area ---------- */
.ms-newsletter {
    padding: 20px 24px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--ms-muted);
    border-top: 1px solid var(--ms-border);
}