/* ==========================================================================
   Edu Preview theme — replaces the dark "dev network" look with a light,
   glass-forward palette aimed at teachers/students. Loads after style.css
   and mobile-enhanced.css so it wins the cascade for the tokens below;
   layout/structure rules in those files are left alone.
   ========================================================================== */

:root {
    /* Re-mapped onto the original variable names so every existing
       var(--accent-blue) etc. reference in style.css repaints for free.
       Palette: a warm near-black ink, a warm putty paper (not cream —
       stays clear of the serif+cream+terracotta cliché since Fraunces is
       already our display face), and one confident primary accent (plum)
       used everywhere something is actionable, with gold and teal held
       back for two specific, meaningful jobs rather than scattered around. */
    --primary-dark: #F6F4F1;      /* page background ("paper") */
    --secondary-dark: #FFFFFF;    /* surface (nav, cards) */
    --tertiary-dark: #EFEAE6;     /* elevated surface / hover */
    --accent-blue: #96305F;       /* "plum" — the one primary accent (renamed in spirit, not name, to avoid touching every call site) */
    --accent-purple: #D9A441;     /* "gold" — highlighter/anticipation accent, used sparingly (coming-soon, achievement) */
    --accent-green: #2F7A6B;      /* "teal" — second audience/category accent, used sparingly */
    --accent-deep: #7A2650;       /* darker plum for text-on-white (links, body-size accent text) */
    --text-primary: #1B1720;      /* ink */
    --text-secondary: #565160;    /* ink-soft */
    --text-muted: #6E6878;        /* ink-faint (darkened for WCAG AA on white/paper) */
    --hairline: #E3DFD9;

    /* Aliases some project stylesheets reference; without them their dark fallbacks win */
    --border: var(--hairline);
    --card-bg: var(--secondary-dark);
    --text: var(--text-primary);
    --accent: var(--accent-blue);

    /* New tokens the old sheet didn't need */
    --glass-surface: rgba(255, 255, 255, 0.55);
    --glass-border: rgba(255, 255, 255, 0.75);
    --glass-shadow: 0 10px 30px -14px rgba(40, 20, 30, 0.25);

    /* The signature "chalk-light" mesh — soft plum/gold/teal glow behind
       glass. Defined once, reused by .hero and .cta so the motif reads as
       one deliberate idea rather than two different backgrounds. */
    --chalk-mesh:
        radial-gradient(circle at 12% 15%, rgba(150, 48, 95, 0.16), transparent 42%),
        radial-gradient(circle at 88% 20%, rgba(47, 122, 107, 0.14), transparent 45%),
        radial-gradient(circle at 55% 92%, rgba(217, 164, 65, 0.16), transparent 50%);
}

/* ---- Type: display Fraunces, body IBM Plex Sans, data IBM Plex Mono ---- */
h1, h2, h3, h4, .nav-logo a, .section-title, .hero-title, .page-header h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    text-wrap: balance;
}

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--primary-dark);
    background-image:
        radial-gradient(circle at 15% 8%, rgba(150, 48, 95, 0.05), transparent 35%),
        radial-gradient(circle at 85% 25%, rgba(47, 122, 107, 0.045), transparent 38%),
        radial-gradient(circle at 50% 95%, rgba(217, 164, 65, 0.05), transparent 40%);
    background-attachment: fixed;
}

.mono, .stat-number, .tool-meta {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
}

a { color: var(--accent-deep); }

/* ---- Nav: frosted glass bar, pill links ---- */
.navbar {
    background: rgba(247, 249, 252, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 1px 0 rgba(20, 30, 60, 0.02);
}

.nav-logo a {
    color: var(--text-primary);
    font-weight: 600;
}

.nav-logo a::before {
    background: var(--accent-blue);
    box-shadow: none;
    animation: none;
}

.nav-link {
    color: var(--text-secondary);
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-link::after { display: none; }

.nav-link:hover {
    color: var(--text-primary);
    background: var(--tertiary-dark);
}

.nav-link.active {
    color: var(--accent-deep);
    background: rgba(150, 48, 95, 0.1);
    font-weight: 600;
}

/* ---- Buttons: plum primary, glass outline secondary, no shimmer sweep ---- */
.btn::before { display: none; }

.btn-primary {
    background: var(--accent-blue);
    color: #fff;
    box-shadow: 0 6px 20px -8px rgba(150, 48, 95, 0.5);
}

.btn-primary:hover {
    background: var(--accent-deep);
    box-shadow: 0 8px 24px -8px rgba(122, 38, 80, 0.5);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-primary);
    border: 1px solid var(--hairline);
}

.btn-secondary:hover {
    background: #fff;
    border-color: var(--accent-blue);
    color: var(--accent-deep);
    box-shadow: none;
    transform: translateY(-2px);
}

/* ---- Hero: the signature "chalk-light" glass mesh, no node-graph ---- */
.hero {
    padding: 5rem 0 4rem;
    background: var(--chalk-mesh), var(--primary-dark);
    text-align: left;
}

.hero::before { display: none; }

.hero-title {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
    max-width: 16ch;
}

.hero-subtitle {
    color: var(--text-secondary);
    font-size: 1.2rem;
    margin-left: 0;
    text-align: left;
    max-width: 52ch;
}

.hero-buttons { justify-content: flex-start; }

/* ---- Section titles: quieter underline ---- */
.section-title::after {
    background: var(--accent-blue);
    width: 48px;
    height: 3px;
}

/* ---- Feature / project cards: flat surface, hairline border ---- */
.feature-card, .project-card {
    background: var(--secondary-dark);
    border: 1px solid var(--hairline);
    box-shadow: 0 1px 2px rgba(20, 30, 60, 0.04);
}

.feature-card::before { display: none; }

.project-card:hover, .feature-card:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 12px 28px -16px rgba(60, 20, 40, 0.2);
}

.filter-tab {
    background: var(--secondary-dark);
    color: var(--text-secondary);
    border: 1px solid var(--hairline);
}

.filter-tab:hover { border-color: var(--accent-blue); color: var(--text-primary); }

.filter-tab.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
    box-shadow: none;
}

.search-input {
    background: var(--secondary-dark);
    color: var(--text-primary);
    border: 1px solid var(--hairline);
}

.search-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(150, 48, 95, 0.15);
}

/* ---- Footer ---- */
.footer {
    background: var(--secondary-dark);
    border-top: 1px solid var(--hairline);
    color: var(--text-secondary);
}

.footer-logo { color: var(--text-primary); font-family: 'Fraunces', Georgia, serif; }
/* mobile-enhanced.css pads every .footer p by 1rem, which indents the brand
   blurb relative to its logo; drop that and let the blurb use the width. */
.footer-tagline { padding: 0 !important; max-width: 320px; }
.footer-links a, .footer-social a { color: var(--text-secondary); }
.footer-links a:hover, .footer-social a:hover { color: var(--accent-deep); }

/* ---- CTA band: fix inherited color:white (illegible on this light theme)
   and replace the old neon cyan/purple diagonal streaks with the same
   chalk-mesh motif as the hero, so the two bookend the page consistently. ---- */
.cta {
    background: var(--chalk-mesh), linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-dark) 100%);
    color: var(--text-primary);
}

.cta::before { display: none; }
.cta h2 { color: var(--text-primary); }
.cta p { color: var(--text-secondary); opacity: 1; }

/* ==========================================================================
   New components: audience cards, stat strip, glass tool cards, blog type
   ========================================================================== */

.audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin: 3rem 0;
}

.audience-card {
    /* A soft wash of the card's own accent, not a plain white/glass box --
       the tint doubles as wayfinding (plum = self-learners, teal =
       teachers) instead of being decoration. Plain background first as a
       fallback where color-mix() isn't supported -- otherwise the whole
       declaration drops and the card goes transparent. */
    background: var(--secondary-dark);
    background: color-mix(in srgb, var(--accent-blue) 7%, var(--secondary-dark));
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.audience-card:nth-of-type(2) {
    background: color-mix(in srgb, var(--accent-green) 7%, var(--secondary-dark));
}

.audience-card:hover { border-color: rgba(150, 48, 95, 0.4); }

.audience-illustration {
    display: block;
    width: calc(100% + 3.5rem);
    margin: -1.75rem -1.75rem 1.25rem;
    height: 190px;
    object-fit: cover;
}

/* The teach photo is a portrait-orientation source (900x1200) cropped into
   this wide, short box -- default center framing cuts off the hand/pen/
   planner rows this card is actually about. Bias the crop down to keep them
   in frame at every breakpoint. */
.audience-illustration-portrait {
    object-position: 50% 45%;
}

.audience-card-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.audience-icon {
    color: var(--accent-blue);
    flex-shrink: 0;
}

/* Two kinds of learners, two accents — self-learners in plum (the primary
   accent), teachers in teal, so the split is legible at a glance, not
   decorative. */
.audience-card:nth-of-type(2) .audience-icon { color: var(--accent-green); }
.audience-card:nth-of-type(2):hover { border-color: rgba(47, 122, 107, 0.4); }
.audience-card:nth-of-type(2) .btn-secondary:hover { border-color: var(--accent-green); color: var(--accent-green); }

.audience-card h3 { font-size: 1.35rem; margin-bottom: 0; }
.audience-card p { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1rem; }

/* CTA chevron drawn from borders, not a literal arrow character/glyph. */
.audience-cta::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    vertical-align: middle;
}

.stat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    margin: 2.5rem 0;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stat-icon {
    color: var(--accent-blue);
    flex-shrink: 0;
}

.stat-text {
    display: flex;
    flex-direction: column;
}

.stat-item .stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
}

.stat-item .stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Popular right now: a tinted band, not more flat white -- color in this
   site otherwise only lives in the hero and the closing CTA, which left the
   whole middle of the page looking flat. Reuses the existing "elevated
   surface" token rather than a new color. */
.popular-section {
    background: var(--tertiary-dark);
    padding-top: 3rem;
    padding-bottom: 1rem;
}

.glass-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}

.glass-tool-card {
    background: var(--secondary-dark);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: var(--glass-shadow);
    text-decoration: none;
    color: inherit;
    display: block;
    overflow: hidden;
    transition: transform 0.18s ease;
}

.glass-tool-card:hover { transform: translateY(-3px); }

.tool-image {
    display: block;
    width: calc(100% + 2.5rem);
    margin: -1.25rem -1.25rem 0.85rem;
    /* 140px, not a shorter banner crop -- these tile illustrations are 4:3
       and not all center-safe (e.g. pendulum_lab's ceiling mount sits near
       the top edge); a shorter box would crop into the artwork itself at
       the grid's narrower column widths. */
    height: 140px;
    object-fit: cover;
}

.glass-tool-card .tool-meta {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-blue);
    display: block;
    margin-bottom: 0.4rem;
}

.glass-tool-card h4 { font-size: 1.05rem; margin-bottom: 0.35rem; color: var(--text-primary); }
.glass-tool-card p { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }

/* "Coming soon" reads as anticipation (gold, highlighter-style), not just
   a dimmed/disabled card — it's a promise, not a dead end. */
.glass-tool-card.coming-soon {
    background: rgba(217, 164, 65, 0.08);
    border-style: dashed;
    border-color: rgba(217, 164, 65, 0.5);
    pointer-events: none;
}

.glass-tool-card.coming-soon .tool-meta { color: #A97817; }
.glass-tool-card.coming-soon h4 { color: var(--text-secondary); }

.value-note {
    /* Sits on .popular-section's tinted background now -- needs its own
       lighter surface to still read as a distinct box rather than blending
       into the section tint. */
    background: var(--secondary-dark);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 2rem 0;
}

.value-note strong { color: var(--text-primary); }

/* ---- Archive disclosure (dev/hobbyist projects kept but de-emphasized) ---- */
.archive-details {
    margin-top: 3rem;
    border-top: 1px solid var(--hairline);
    padding-top: 1.5rem;
}

.archive-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* ---- Blog ----
   Deliberately NOT another card grid -- a plain divided list, so an article
   reads as a different kind of content from an interactive tool rather than
   the same box restyled. The one place on the homepage that stays quiet. */
.blog-list {
    display: flex;
    flex-direction: column;
    max-width: 760px;
}

.blog-list-item {
    border-bottom: 1px solid var(--hairline);
    padding: 1.5rem 0;
    text-decoration: none;
    color: inherit;
    display: block;
}

.blog-list-item:first-child { padding-top: 0; }
.blog-list-item:last-child { border-bottom: none; padding-bottom: 0; }

.blog-list-item:hover h2,
.blog-list-item:hover h3 { color: var(--accent-blue); }

.blog-list-item .blog-eyebrow {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-blue);
}

.blog-list-item h2,
.blog-list-item h3 { font-size: 1.4rem; margin: 0.35rem 0 0.5rem; transition: color 0.15s; }
.blog-list-item p { color: var(--text-secondary); margin: 0; }

.blog-article {
    max-width: 700px;
    margin: 0 auto;
}

.blog-article .blog-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-blue);
}

.blog-article h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin: 0.5rem 0 1.5rem; }
.blog-article .blog-dek { font-size: 1.15rem; color: var(--text-secondary); margin-bottom: 2rem; }

.blog-article-body { font-size: 1.05rem; line-height: 1.75; color: var(--text-primary); }
.blog-article-body h2 { font-size: 1.5rem; margin: 2rem 0 0.75rem; }
.blog-article-body h3 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.blog-article-body p { margin: 0 0 1.1rem; }
.blog-article-body ul, .blog-article-body ol { margin: 0 0 1.1rem 1.4rem; }
.blog-article-body li { margin-bottom: 0.4rem; }
.blog-article-body a { text-decoration: underline; }
.blog-article-body strong { color: var(--text-primary); }

@media (max-width: 640px) {
    .hero { text-align: center; padding: 3.5rem 0 2.5rem; }
    .hero-title, .hero-subtitle { max-width: 100%; text-align: center; }
    .hero-buttons { justify-content: center; }
    .stat-strip { justify-content: center; text-align: center; gap: 1.75rem; }
}