/* ==========================================================================
   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: #8B8494;        /* ink-faint */
    --hairline: #E3DFD9;

    /* 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); }
.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 {
    background: var(--glass-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: var(--glass-shadow);
    transition: border-color 0.2s ease;
}

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

.audience-card .eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
    display: block;
}

/* Two audiences, two accents — Teachers in plum (the primary accent),
   Students in teal, so the split is legible at a glance, not decorative. */
.audience-card:nth-of-type(2) .eyebrow { 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.5rem; }
.audience-card p { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1rem; }

.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 .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);
}

.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(--glass-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: var(--glass-shadow);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.18s ease;
}

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

.glass-tool-card .tool-meta {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    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 {
    background: var(--tertiary-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 ---- */
.blog-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 760px;
}

.blog-list-item {
    background: var(--secondary-dark);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    text-decoration: none;
    color: inherit;
    display: block;
}

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

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

.blog-list-item h2 { font-size: 1.4rem; margin: 0.35rem 0 0.5rem; }
.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; }
}