/* ============================================================================
 * Heliomath BLOG — the /posts reading pages, ported from grokkoli_blog.css onto
 * the Sunset token system.
 *
 * LOADED ON: alpha_base.html, heliomath brand only, gated by grokkoli_blog_css_
 * needed (blog_posts/views.py). alpha_base has NO design-system foundation, so
 * the blog branch pulls Nunito + heliomath_tokens.css just ahead of this file —
 * everything here is token-driven and SCOPED to .blog-area / .post so it never
 * reaches the surrounding app chrome (base is deliberately not loaded here, per
 * the account-access precedent).
 *
 * PORT NOTES (what changed from the Grokkoli original):
 *   - Dropped `font-family: avenir` — Heliomath rides Nunito (--font-family-base);
 *     no bespoke blog font.
 *   - Dropped the extra-light `font-weight: 200` body — Nunito that thin reads
 *     fragile; back to the regular weight.
 *   - Off-brand paints → tokens: the Grokkoli-green title → --accent-primary
 *     (cornflower, our primary accent); grey rules/borders → --border-warm; the
 *     acceleration-stat green (which happens to equal our --winter-green) →
 *     --accent-secondary, the "positive / value" accent — a perfect fit for stats.
 *   - The article + sidebar now read as white cards on the beige page, in the
 *     same language as the rest of the rebrand.
 * ========================================================================== */

/* heliomath_base (which normally paints the page) isn't loaded on alpha_base, so set
 * the beige reading surface + Nunito here. Without this the page (nav + footer text
 * included) inherits legacy grokkoli_base's Quicksand + letter-spacing, which reads
 * off-brand. Scoped to the blog by virtue of the file only loading on /posts. */
body {
    background-color: var(--surface-default);
    font-family: var(--font-family-base);
    letter-spacing: normal;
}

/* PAGE SHELL — grokkoli_base normally provides the flex column that sticks the footer to
 * the bottom, plus #main's fixed-nav clearance. Ported here (scoped to the blog — this file
 * only loads on /posts) so the page survives grokkoli_base's removal:
 *   - #vertical-flex-wrapper: flex column, min 100vh → the footer sits at the bottom even
 *     on short pages.
 *   - #main: grows to fill (flex:1); top padding clears the fixed nav (= the nav min-height
 *     in heliomath_components.css); overflow:unset lets the sticky sidebar escape (grokkoli_
 *     base clipped it with overflow:hidden). */
#vertical-flex-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#main {
    flex: 1;
    position: relative;
    overflow: unset;
    padding-top: calc(4vh + 2.5rem);
}

/* --- Layout -------------------------------------------------------------- */
.blog-area {
    display: flex;
    justify-content: space-around;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
    color: var(--text-primary);
    width: 90vw;
    max-width: 1100px;
    margin: 50px auto;
}
.blog-area h4 {
    font-size: calc(1.5rem + 0.2vw);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.blog-area p, .blog-area li {
    font-size: calc(1.1rem + 0.1vw);
    margin-bottom: calc(1rem + 1vw);
}
.blog-area a:focus {
    text-decoration: none;   /* drop underline on press; the pill fill is the affordance (out-specifies base.css a:focus) */
}
.blog-area a {
    color: var(--link);
    text-decoration: underline;
    font-size: calc(0.8rem + 0.4vw);
}
.blog-area a:hover {
    color: var(--link-hover);
}

/* --- The article, as a white card on beige ------------------------------- */
.post {
    box-sizing: border-box;
    min-width: 350px;
    max-width: 750px;
    padding: calc(1.5rem + 1.5vw);
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-elevated);
}
.post h1 {
    color: var(--accent-primary);   /* cornflower title — heliomath's primary accent (was the grokkoli green) */
    font-size: calc(1.8rem + 1vw);
    font-weight: var(--font-weight-semibold);
    line-height: initial;
}
.authorship {
    margin-top: 1.2rem;
    margin-bottom: 1.5rem;
}
.authorship p {
    font-size: 85%;
    margin-bottom: 0;
    color: var(--text-lively);   /* softly muted byline / date */
}
.post-content li {
    margin-top: -10px;
}
.post-content .compact {
    margin-bottom: calc(1rem + 1vw);
}
.post-content .compact li, .post-content .compact p {
    margin-bottom: 18px;
}
.post-content strong {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}
.italicize {
    font-style: italic;
}
.post-content .ref {
    font-weight: var(--font-weight-bold);
}

.footnotes {
    font-size: 95%;
    border-top: 1px solid var(--border-warm);
    padding-top: 1.5rem;
}
.footnotes .footnote {
    margin-bottom: 15px;
}
.footnotes .footnote a {
    font-weight: var(--font-weight-bold);
}
.footnotes .footnote a.out-link {
    font-size: 100%;
    font-weight: var(--font-weight-semibold);
}

/* --- Sidebar — same card language as .post ------------------------------- */
.right-menu {
    position: -webkit-sticky;
    position: sticky;
    top: 120px;
    height: fit-content;
    min-width: 25vw;
    max-width: 200px;
    margin-left: 40px;
    padding: 30px;
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-elevated);
}
.right-menu .post-link {
    margin-bottom: 0.8rem;
}
.right-menu p, .right-menu a {
    font-size: 85%;
}
.right-menu a {
    font-size: 95%;
}
.right-menu .post-link a {
    font-weight: var(--font-weight-semibold);   /* nudge the post links out from the blurb */
}

@media (max-width: 800px) {
    .blog-area {
        flex-wrap: wrap;
        justify-content: left;
    }
    .right-menu {
        min-width: 300px;
        max-width: 500px;
        margin-top: 20px;
        margin-left: 0;
    }
    .blog-area a {
        font-size: 16px;
    }
}

/* --- Tables -------------------------------------------------------------- */
.blog-area .pros-and-cons, .blog-area .learning-acceleration-stats {
    margin-bottom: 25px;
}
.blog-area .pros-and-cons th {
    width: 50%;
    font-weight: var(--font-weight-bold);
}
.blog-area .pros-and-cons tr, .blog-area .learning-acceleration-stats tr {
    width: 50%;
    vertical-align: top;
}
.blog-area .pros-and-cons td, .blog-area .learning-acceleration-stats td {
    padding-right: 20px;
}
/* Acceleration stats — the "value / positive" story, so they carry the winter-green
 * accent (--accent-secondary) rather than the primary blue. */
.blog-area .learning-acceleration-stats {
    font-weight: var(--font-weight-bold);
    margin-left: 25px;
}
.blog-area .learning-acceleration-stats td {
    line-height: 28px;
    padding: 12px 20px;
    background-color: var(--surface-elevated);
    border: 1px solid var(--accent-secondary);
}
.blog-area .learning-acceleration-stats .stat {
    font-size: larger;
    color: var(--accent-secondary);
}