/* ==========================================================================
   EDUSHARK TRAINING — 2026 visual layer
   Loaded AFTER style.css / blog.css / per-page <style> blocks so its rules
   win at equal specificity. No JavaScript, no external dependencies.

   Contents
   1.  Design tokens (light)
   2.  Base + typography upgrades
   3.  Accessibility: focus-visible everywhere
   4.  Micro-interaction system (buttons, cards, links, form fields)
   5.  Navbar polish
   6.  Bento grids (blog index, courses, homepage)
   7.  Kinetic typography (load-in) + CSS scroll-driven reveals
   8.  Reading progress bar (blog posts)
   9.  Blog reading experience
   10. Dark mode (prefers-color-scheme)
   11. Reduced motion kill-switch
   12. Small screens (375px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    --shadow: 0 2px 14px rgba(2, 32, 48, 0.08);
    --shadow-hover: 0 16px 38px rgba(2, 32, 48, 0.16);
    --radius-lg: 22px;
    --radius-md: 14px;
    --brand-grad: linear-gradient(120deg, #1a5f7a 0%, #159895 55%, #57c5b6 100%);
    --focus-ring: #0d7f7b;
    --surface-2: #eef4f6;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --font-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace;
}

/* --------------------------------------------------------------------------
   2. Base + typography upgrades
   -------------------------------------------------------------------------- */
body {
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
        "Helvetica Neue", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    text-wrap: balance;
    letter-spacing: -0.015em;
}

/* Anchored headings should not hide behind the sticky navbar */
[id] {
    scroll-margin-top: 96px;
}

/* Fluid display sizes */
.hero h2,
.hero-text h1 {
    font-size: clamp(2rem, 4.2vw + 0.8rem, 3.2rem);
}

.page-header h1,
.page-header h2,
.course-hero h1,
.content-header h1,
.blogs-hero h1,
.praxia-hero h1 {
    font-size: clamp(1.9rem, 3.4vw + 0.7rem, 2.8rem);
}

.section-title {
    font-size: clamp(1.7rem, 2.6vw + 0.7rem, 2.5rem);
}

/* Energetic gradient ink on the homepage hero highlight (static, no motion) */
/* Solid fill. The transparent text-fill overrode the fallback colour in
   every browser that supports it, so the "fallback" never actually ran, and
   clipped type over a live canvas reads as half-erased. */
.hero-text h1 .highlight {
    color: #9be8dc;
    position: relative;
}

.hero-text h1 .highlight::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.06em;
    height: 2px;
    background: linear-gradient(90deg, #9be8dc, rgba(155, 232, 220, 0));
}

/* --------------------------------------------------------------------------
   3. Focus visibility
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Focus ring must survive on dark / gradient surfaces */
.hero :focus-visible,
.hero-new :focus-visible,
.page-header :focus-visible,
.cta :focus-visible,
.cta-new :focus-visible,
.course-cta :focus-visible,
.content-cta :focus-visible,
.usp-box :focus-visible,
.learning-path :focus-visible,
.blogs-hero :focus-visible,
.praxia-hero :focus-visible,
.praxia-game :focus-visible,
.praxia-cta :focus-visible,
footer :focus-visible {
    outline-color: #9be8dc;
}

/* --------------------------------------------------------------------------
   4. Micro-interaction system
   Uses the standalone `translate` / `scale` properties so hover motion
   composes with (and is never overridden by) transform-based reveal
   animations.
   -------------------------------------------------------------------------- */

/* Buttons + button-like links */
.btn,
.nav-btn,
.filter-btn,
.author-link,
.btn-praxia,
.btn-praxia-outline,
.subscribe-form button {
    transition: translate 0.2s var(--ease-out), scale 0.2s var(--ease-out),
        box-shadow 0.2s ease, background-color 0.2s ease,
        border-color 0.2s ease, color 0.2s ease;
    will-change: translate;
}

.btn {
    border-radius: 999px;
}

.btn:hover,
.nav-btn:hover,
.filter-btn:hover,
.author-link:hover,
.btn-praxia:hover,
.btn-praxia-outline:hover,
.subscribe-form button:hover {
    translate: 0 -2px;
    transform: none;
    box-shadow: 0 10px 24px rgba(2, 32, 48, 0.18);
}

.btn:active,
.nav-btn:active,
.filter-btn:active,
.author-link:active,
.btn-praxia:active,
.subscribe-form button:active {
    translate: 0 0;
    scale: 0.97;
}

/* Cards — one shared lift interaction */
.feature-card,
.course-card,
.why-card,
.project-card,
.blog-card,
.blog-preview-card,
.skills-card,
.faq-item,
.praxia-feature-card,
.praxia-use-case,
.eligibility-item,
.team-member,
.benefit-item,
.graduate-item,
.capstone-category,
.value-item {
    transition: translate 0.25s var(--ease-out), box-shadow 0.25s ease,
        border-color 0.25s ease, background-color 0.25s ease;
}

.feature-card:hover,
.course-card:hover,
.why-card:hover,
.project-card:hover,
.blog-card:hover,
.blog-preview-card:hover,
.skills-card:hover,
.faq-item:hover,
.praxia-feature-card:hover,
.praxia-use-case:hover,
.eligibility-item:hover,
.team-member:hover,
.benefit-item:hover,
.capstone-category:hover {
    translate: 0 -6px;
    transform: none;
    box-shadow: var(--shadow-hover);
}

.roadmap-item {
    transition: translate 0.25s var(--ease-out), box-shadow 0.25s ease;
}

.roadmap-item:hover {
    translate: 8px 0;
    transform: none;
}

/* Card emoji icons get a playful nudge */
.feature-icon,
.course-icon,
.why-icon,
.project-icon,
.eligibility-icon,
.blog-preview-icon span,
.blog-card-image > span:last-child {
    display: inline-block;
    transition: translate 0.25s var(--ease-out), scale 0.25s var(--ease-out);
}

.feature-card:hover .feature-icon,
.course-card:hover .course-icon,
.why-card:hover .why-icon,
.project-card:hover .project-icon,
.eligibility-item:hover .eligibility-icon {
    translate: 0 -4px;
    scale: 1.08;
}

.blog-card:hover .blog-card-image > span:last-child {
    scale: 1.15;
    translate: 0 -3px;
}

/* Text links — consistent hover affordance */
.toc a,
.read-more,
.blog-preview-link,
.series-nav a {
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-underline-offset 0.2s ease;
}

.toc a:hover,
.read-more:hover,
.blog-preview-link:hover,
.series-nav a:hover {
    text-underline-offset: 5px;
}

.nav-links a {
    position: relative;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Form fields */
.form-group input,
.form-group select,
.form-group textarea,
.subscribe-form input {
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.subscribe-form input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 4px rgba(21, 152, 149, 0.18);
}

/* --------------------------------------------------------------------------
   5. Navbar polish
   -------------------------------------------------------------------------- */
.navbar {
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 1px 0 rgba(2, 32, 48, 0.08);
}

@media screen and (max-width: 768px) {
    .nav-links {
        background-color: rgba(255, 255, 255, 0.96);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
}

/* --------------------------------------------------------------------------
   6. Bento grids
   -------------------------------------------------------------------------- */

/* Blog index — modular tile rhythm: one wide tile leading each band */
.blogs-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
}

.blogs-grid .blog-card {
    grid-column: span 2;
    border-radius: var(--radius-lg);
}

.blogs-grid .blog-card:nth-child(7n + 1) {
    grid-column: span 4;
}

@media screen and (max-width: 1024px) {
    .blogs-grid .blog-card,
    .blogs-grid .blog-card:nth-child(7n + 1) {
        grid-column: span 3;
    }
}

@media screen and (max-width: 700px) {
    .blogs-grid .blog-card,
    .blogs-grid .blog-card:nth-child(7n + 1) {
        grid-column: span 6;
    }
}

.blog-card-image {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Courses page — flagship programme gets a full-width bento tile */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
}

.courses-grid .course-card {
    grid-column: span 2;
    border-radius: var(--radius-lg);
}

.courses-grid .course-card.featured {
    grid-column: span 6;
}

/* Spanning the full row gave the flagship card prominence and then left about
   sixty percent of it empty, because its contents went on stacking in one
   narrow column at the left. It is the widest element on the page and the most
   important one, and it read as unfinished. Its own contents get two columns at
   the width where there is room for them. */
@media screen and (min-width: 861px) {
    .courses-grid .course-card.featured {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        grid-template-areas:
            "icon  features"
            "title features"
            "desc  features"
            "meta  features"
            "cta   features";
        column-gap: 3.5rem;
        align-content: start;
    }

    .courses-grid .course-card.featured .course-icon { grid-area: icon; }
    .courses-grid .course-card.featured h3 { grid-area: title; }
    .courses-grid .course-card.featured > p { grid-area: desc; }
    .courses-grid .course-card.featured .course-duration { grid-area: meta; }

    .courses-grid .course-card.featured .course-features {
        grid-area: features;
        align-self: center;
        margin: 0;
    }

    .courses-grid .course-card.featured .btn {
        grid-area: cta;
        justify-self: start;
        margin-top: 0.75rem;
    }
}

@media screen and (max-width: 992px) {
    .courses-grid .course-card {
        grid-column: span 3;
    }

    .courses-grid .course-card.featured {
        grid-column: span 6;
    }
}

@media screen and (max-width: 640px) {
    .courses-grid .course-card,
    .courses-grid .course-card.featured {
        grid-column: span 6;
    }
}

/* Homepage "why us" — 4/2 + 2/2/2 bento rhythm */
.why-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
}

.why-grid .why-card {
    grid-column: span 2;
    border-radius: var(--radius-lg);
    text-align: left;
}

.why-grid .why-card:nth-child(1) {
    grid-column: span 4;
}

@media screen and (max-width: 992px) {
    .why-grid .why-card,
    .why-grid .why-card:nth-child(1) {
        grid-column: span 3;
    }
}

@media screen and (max-width: 640px) {
    .why-grid .why-card,
    .why-grid .why-card:nth-child(1) {
        grid-column: span 6;
    }
}

/* Generous rounding across remaining tiles */
.feature-card,
.blog-preview-card,
.skills-card,
.capstone-category,
.eligibility-item,
.team-member,
.project-card,
.praxia-feature-card,
.content-block,
.day-section,
.toc,
.author-section,
.quiz-section {
    border-radius: var(--radius-lg);
}

.faq-item,
.benefit-item,
.value-item,
.graduate-item,
.deliver-item,
.praxia-use-case {
    border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   7. Kinetic typography + scroll-driven reveals
   All motion sits behind prefers-reduced-motion: no-preference.
   Scroll-driven animation sits additionally behind @supports so
   non-supporting browsers simply get the static layout.
   Only transform and opacity are animated.
   -------------------------------------------------------------------------- */
@keyframes esk-rise {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes esk-reveal {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes esk-progress {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: no-preference) {

    /* Kinetic headlines: staged entrance on every page header */
    .hero-content h2,
    .hero-text h1,
    .page-header h1,
    .page-header h2,
    .course-hero h1,
    .content-header h1,
    .blogs-hero h1,
    .praxia-hero h1,
    .blog-header h1,
    .thank-you-content h1 {
        animation: esk-rise 0.7s var(--ease-out) both;
    }

    .hero-content p,
    .hero-description,
    .page-header p,
    .course-tagline,
    .content-subtitle,
    .blogs-hero p,
    .praxia-hero .lead,
    .blog-header .subtitle {
        animation: esk-rise 0.7s var(--ease-out) 0.12s both;
    }

    .hero-buttons,
    .hero-highlights,
    .course-meta,
    .content-meta,
    .blog-meta,
    .praxia-cta-row {
        animation: esk-rise 0.7s var(--ease-out) 0.22s both;
    }

    /* Scroll-driven reveals — native scroll timeline only */
    @supports (animation-timeline: view()) {
        .feature-card,
        .why-card,
        .course-card,
        .blog-card,
        .blog-preview-card,
        .project-card,
        .skills-card,
        .faq-item,
        .roadmap-item,
        .eligibility-item,
        .team-member,
        .capstone-category,
        .praxia-feature-card,
        .praxia-use-case,
        .praxia-game-tile,
        .featured-highlight,
        .section-title,
        .section-subtitle,
        .blog-content > h2,
        .day-section {
            animation: esk-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        /* Stagger inside uniform grids via sibling order */
        .feature-card:nth-child(3n + 2),
        .why-card:nth-child(3n + 2),
        .blog-card:nth-child(3n + 2),
        .course-card:nth-child(3n + 2) {
            animation-range: entry 5% entry 60%;
        }

        .feature-card:nth-child(3n),
        .why-card:nth-child(3n),
        .blog-card:nth-child(3n),
        .course-card:nth-child(3n) {
            animation-range: entry 10% entry 65%;
        }
    }
}

/* --------------------------------------------------------------------------
   8. Reading progress bar (blog posts)
   The bare <div class="reading-progress"> stays invisible (zero height)
   unless scroll-driven animation is supported and motion is allowed.
   -------------------------------------------------------------------------- */
.reading-progress {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
        .reading-progress {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            z-index: 2000;
            background: var(--brand-grad);
            transform-origin: 0 50%;
            transform: scaleX(0);
            animation: esk-progress linear both;
            animation-timeline: scroll(root);
            pointer-events: none;
        }
    }
}

/* --------------------------------------------------------------------------
   9. Blog reading experience
   -------------------------------------------------------------------------- */
.blog-content {
    font-size: 1.08rem;
    line-height: 1.8;
}

.blog-content p {
    text-align: left; /* justify hurts ragged mobile reading */
}

.blog-header h1 {
    font-size: clamp(1.7rem, 3.4vw + 0.7rem, 2.5rem);
    line-height: 1.25;
}

.blog-content h2 {
    letter-spacing: -0.01em;
    border-bottom-width: 2px;
}

.blog-content h3 {
    margin-top: 2.2em;
}

/* Code blocks: monospace stack, comfortable rhythm, no reformatting */
.code-block,
.python-code {
    font-family: var(--font-mono);
    font-size: 0.93rem;
    line-height: 1.65;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    tab-size: 4;
}

.code-filename {
    font-family: var(--font-mono);
}

.sql-syntax {
    font-family: var(--font-mono);
    border-radius: 10px;
}

/* Inline code */
.blog-content code {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

/* Content imagery */
.content-image,
.blog-content img {
    border-radius: var(--radius-md);
}

.toc {
    border-left: 4px solid var(--blog-theme-color, var(--primary-color));
}

/* --------------------------------------------------------------------------
   9b. Light-mode contrast fixes (WCAG AA)
   -------------------------------------------------------------------------- */
.filter-btn:hover,
.filter-btn.active {
    background: #00639a;
    border-color: #00639a;
}

.read-more,
.blog-preview-link {
    color: #00639a;
}

.subscribe-form button {
    background: #00639a;
}

.subscribe-form button:hover {
    background: #004d78;
}

.blog-card-meta {
    color: #667180;
}

.toc a {
    color: var(--blog-theme-dark, var(--primary-color));
}

.nav-btn {
    background: var(--blog-theme-dark, var(--blog-theme-color));
}

/* --------------------------------------------------------------------------
   10. Dark mode
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        /* Core token flips — most of style.css re-skins itself from these */
        --white: #141b29;        /* raised surface */
        --light-color: #0d1220;  /* page / alternate sections */
        --text-color: #dde5f0;
        --text-light: #a3aebf;
        --dark-color: #e9eef8;   /* "ink" flips to light */
        --primary-color: #5cc1d8;
        --secondary-color: #3ecfc9;
        --accent-color: #57c5b6;
        --shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
        --shadow-hover: 0 16px 38px rgba(0, 0, 0, 0.55);
        --surface-2: #10182a;
        --focus-ring: #7fd6cb;
    }

    body {
        background-color: #0d1220;
    }

    /* ---- Chrome ---- */
    .navbar {
        background-color: rgba(13, 18, 32, 0.82);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    .nav-links a {
        color: var(--text-color);
    }

    .nav-links a:hover,
    .nav-links a.active {
        color: #7fd0e4;
        background-color: rgba(92, 193, 216, 0.12);
    }

    @media screen and (max-width: 768px) {
        .nav-links {
            background-color: rgba(13, 18, 32, 0.96);
        }
    }

    footer {
        background-color: #0a0f1a;
    }

    /* ---- Big gradient sections need deep-dark treatment (their tokens
       flipped light above) ---- */
    .hero,
    .page-header {
        background: linear-gradient(135deg, #0e2c3d 0%, #0d474b 100%);
        color: #ecf5f6;
    }

    .cta,
    .course-hero,
    .content-header,
    .certification-box,
    .content-cta,
    .hero-new {
        background: linear-gradient(135deg, #0a1626 0%, #10394d 100%);
        color: #eaf2f8;
    }

    .usp-box,
    .learning-path,
    .no-experience,
    .takeaways-block,
    .course-cta {
        background: linear-gradient(135deg, #0c3540 0%, #0f4c56 100%);
        color: #e7f5f4;
    }

    .cta-new {
        background: #0a0f1a;
    }

    .hero-badge {
        background: rgba(87, 197, 182, 0.14);
    }

    /* Chips / numbers that flipped to light backgrounds keep readable ink
       automatically because their text color is var(--white). Buttons that
       pair accent backgrounds with --dark-color ink need re-inking: */
    .btn-primary {
        color: #04251f;
    }

    .btn-primary:hover {
        background-color: #9be8dc;
        color: #04251f;
    }

    .coming-tag,
    .course-badge {
        color: #04251f;
    }

    .hero-card {
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    }

    .hero-card h3 {
        color: #7fd0e4;
    }

    /* ---- Cards & borders ---- */
    .course-card,
    .day-item,
    .week-collapsed {
        border-color: #232d3f;
    }

    .feature-card,
    .why-card,
    .blog-preview-card,
    .skills-card,
    .team-member,
    .eligibility-item,
    .capstone-category,
    .faq-item,
    .praxia-feature-card,
    .praxia-use-case,
    .content-block {
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .tool-badge.optional {
        border-color: #2a3446;
        background-color: #141b29;
        color: var(--text-color);
    }

    .comparison-table th {
        background-color: #1d2636;
        color: var(--text-color);
    }

    .comparison-table th.highlight-col {
        background-color: #155e63;
        color: #eafffb;
    }

    .comparison-table td.highlight-col {
        background-color: rgba(62, 207, 201, 0.1);
        color: var(--text-color);
    }

    .comparison-table th,
    .comparison-table td {
        border-color: #2a3446;
    }

    .comparison-table tbody tr:hover,
    .comparison-table tr:hover {
        background: #1a2334;
    }

    .comparison-table tr:nth-child(even) {
        background: #111827;
    }

    .comp-fill.other {
        background: #3a4457;
        color: #dde5f0;
    }

    /* ---- Forms ---- */
    .form-group input,
    .form-group select,
    .form-group textarea,
    .subscribe-form input {
        background-color: #0f1522;
        border-color: #2a3446;
        color: var(--text-color);
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder,
    .subscribe-form input::placeholder {
        color: #7d8798;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus,
    .subscribe-form input:focus {
        border-color: #3ecfc9;
        box-shadow: 0 0 0 4px rgba(62, 207, 201, 0.2);
    }

    /* ---- Homepage blog preview strip (literal colors upstream) ---- */
    .blog-preview {
        background: #0d1220;
    }

    .blog-preview-card {
        background: #141b29;
    }

    .blog-preview-content h3,
    .blog-preview-content h3 a {
        color: #e6ecf7;
    }

    .blog-preview-content h3 a:hover {
        color: #7fd0e4;
    }

    .blog-preview-content p {
        color: var(--text-light);
    }

    .blog-preview-category {
        background: #12352c;
        color: #86dcba;
    }

    .blog-preview-link {
        color: #7fd0e4;
    }

    /* ---- Blog index (blogs.html carries literal colors inline) ---- */
    .filter-btn {
        background: #141b29;
        border-color: #2a3446;
        color: var(--text-color);
    }

    .filter-btn:hover,
    .filter-btn.active {
        background: #46b1d6;
        border-color: #46b1d6;
        color: #06131d;
    }

    .blog-card {
        background: #141b29;
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .blog-card h3,
    .blog-card h3 a {
        color: #e6ecf7;
    }

    .blog-card h3 a:hover {
        color: #7fd0e4;
    }

    .blog-card p {
        color: var(--text-light);
    }

    .blog-card-category {
        background: #1d2636;
        color: #b3bfd1;
    }

    .blog-card-meta {
        border-top-color: #232d3f;
        color: #93a0b3;
    }

    .read-more {
        color: #7fd0e4;
    }

    .subscribe-section {
        background: #0f1522;
    }

    .subscribe-section h2 {
        color: #e6ecf7;
    }

    .subscribe-section p,
    .no-blogs {
        color: var(--text-light);
    }

    .subscribe-form button {
        background: #46b1d6;
        color: #06131d;
    }

    .subscribe-form button:hover {
        background: #7fd0e4;
    }

    /* ---- Blog articles ---- */
    .blog-header {
        border-bottom-color: #232d3f;
    }

    .blog-header h1 {
        color: #e9eef8;
    }

    .blog-header .subtitle {
        color: #aab6c8;
    }

    .blog-meta {
        color: #93a0b3;
    }

    .blog-content {
        color: #d5deea;
    }

    .blog-content h2 {
        color: var(--blog-theme-color, #7fd0e4);
        color: color-mix(in srgb, var(--blog-theme-color, #46b1d6) 55%, #f4f8ff);
        border-bottom-color: color-mix(in srgb, var(--blog-theme-color, #46b1d6) 55%, #0d1220);
    }

    .blog-content h3 {
        color: #e6ecf7;
    }

    .blog-content h4 {
        color: #ccd7e5;
    }

    .day-section {
        background: #141b29;
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
    }

    .day-header h2 {
        color: #e9eef8;
    }

    .day-header .day-subtitle {
        color: var(--text-light);
    }

    .toc {
        background: #10182a;
    }

    .toc h3 {
        color: #e6ecf7;
    }

    .toc a {
        color: var(--blog-theme-color, #7fd0e4);
        color: color-mix(in srgb, var(--blog-theme-color, #46b1d6) 50%, #f4f8ff);
    }

    /* Theme-tinted callout keeps its identity via color-mix */
    .highlight-box {
        background: #10182a;
        background: color-mix(in srgb, var(--blog-theme-color, #1a5f7a) 14%, #0f1522);
        color: #d5deea;
    }

    .highlight-box h4 {
        color: #cfe3f2;
        color: color-mix(in srgb, var(--blog-theme-color, #46b1d6) 50%, #f4f8ff);
    }

    .example-box {
        background: #1f1a0d;
        border-color: #8a6d1a;
        color: #d5deea;
    }

    .example-box h4,
    .quiz-question h4 {
        color: #e6c65e;
    }

    .definition-box {
        background: #101c2e;
        border-color: #2a4e7e;
        color: #d5deea;
    }

    .definition-box strong {
        color: #86bdf5;
    }

    .warning-box {
        background: #271417;
        border-left-color: #e57373;
        color: #d5deea;
    }

    .warning-box h4 {
        color: #f2a2a2;
    }

    .tip-box,
    .excel-tip {
        background: #0f2117;
        border-color: #2e7d32;
        color: #d5deea;
    }

    .type1-error {
        background: #2a1216;
        border-color: #e57373;
        color: #d5deea;
    }

    .type2-error {
        background: #271c0c;
        border-color: #ffb74d;
        color: #d5deea;
    }

    /* Generic light panels defined ad hoc inside individual posts.
       All become quiet dark cards with readable ink. */
    .series-nav,
    .formula-box,
    .hypothesis-box,
    .math-block,
    .progress-tracker,
    .comparison-item,
    .comparison-row,
    .prob-item,
    .distribution-card,
    .aug-card,
    .arch-card,
    .trick-card,
    .ensemble-card,
    .interview-card,
    .role-card,
    .domain-card,
    .chart-card,
    .error-card,
    .journey-step,
    .grad-box,
    .variant-box,
    .variant-a,
    .variant-b,
    .h0-box,
    .h1-box,
    .formula,
    .checklist,
    .leaderboard,
    .leaderboard-row,
    .schedule-diagram,
    .architecture-diagram,
    .ensemble-diagram,
    .probability-visual,
    .ab-test-visual,
    .chart-guide,
    .sql-syntax {
        background: #131c2e;
        color: #d5deea;
    }

    .series-nav h4,
    .series-nav a,
    .series-nav .current {
        color: #beaef0;
    }

    .series-nav li {
        border-bottom-color: #2a3446;
    }

    /* Data tables inside posts */
    .stats-table td,
    .compare-table td,
    .verb-table td,
    .chart-table td,
    .benchmark-table td {
        border-color: #2a3446;
        color: #d5deea;
    }

    .stats-table tr:nth-child(even),
    .compare-table tr:nth-child(even),
    .verb-table tr:nth-child(even),
    .chart-table tr:nth-child(even),
    .benchmark-table tr:nth-child(even) {
        background: #111827;
    }

    .stats-table tr:hover,
    .compare-table tr:hover,
    .verb-table tr:hover,
    .chart-table tr:hover,
    .benchmark-table tr:hover {
        background: #1a2334;
    }

    .progress-bar {
        background: #232d3f;
    }

    .quiz-section {
        background: #1c170e;
    }

    .quiz-question {
        background: #171307;
        border-color: #6b5510;
        color: #d5deea;
    }

    .quiz-question details p {
        background: #0f2117;
        color: #d5deea;
    }

    .author-section {
        background: #10182a;
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .author-section h3 {
        color: #8fc1f5;
    }

    .author-info p {
        color: #aab6c8;
    }

    .nav-buttons {
        border-top-color: #232d3f;
    }

    .code-block,
    .python-code {
        background: #10141f;
        border-color: rgba(255, 255, 255, 0.09);
    }

    .content-image {
        filter: brightness(0.85);
    }

    /* ---- Praxia page (fixed navy palette upstream) ---- */
    .praxia-stats {
        background: #0f1522;
        border-bottom-color: #232d3f;
    }

    .praxia-stat-number {
        color: #9db8f9;
    }

    .praxia-features,
    .praxia-how {
        background: #0d1220;
    }

    .praxia-feature-card h3,
    .praxia-use-case h4,
    .praxia-how-step h4,
    .praxia-faq-item h4 {
        color: #c3d3fb;
    }

    .praxia-feature-icon {
        background: rgba(96, 140, 245, 0.16);
        color: #9db8f9;
    }

    /* ---- Legal pages ---- */
    .legal-meta {
        border-bottom-color: #232d3f;
    }

    .legal-callout {
        background: rgba(92, 193, 216, 0.08);
        border-color: rgba(92, 193, 216, 0.25);
    }

    /* ---- Misc ---- */
    .thank-you-icon {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .career-advantage {
        background-color: rgba(62, 207, 201, 0.1);
    }

    .project-brief {
        background: rgba(92, 193, 216, 0.08);
    }

    .next-week {
        background: rgba(92, 193, 216, 0.06);
    }

    .legal-container a {
        color: #7fd0e4;
    }
}

/* --------------------------------------------------------------------------
   11. Reduced motion — non-negotiable global kill-switch
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto;
    }

    .reading-progress {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   12. Small screens (375px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
    .blogs-grid,
    .courses-grid,
    .why-grid {
        gap: 16px;
    }

    .blog-container {
        padding: 28px 16px;
    }

    .blog-content {
        font-size: 1.02rem;
    }

    .code-block,
    .python-code {
        font-size: 0.82rem;
        border-radius: 10px;
    }

    .day-section,
    .content-block {
        border-radius: var(--radius-md);
    }

    .btn {
        width: auto;
    }

    .nav-buttons .nav-btn {
        text-align: center;
    }
}

/* ------------------------------------------------------------- icons ----- */
/* Inline SVG replacing the emoji that used to sit in these containers. Sized
   in em so the container's font-size keeps driving it, and filled with
   currentColor so it inherits text colour instead of arriving in whatever
   palette the operating system's emoji font happens to use. */

.ic {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* These icon containers carried emoji, which bring their own colour, so almost
   none of them declared one. The SVGs that replaced the emoji inherit instead,
   and inherited on a near-white card that is a pale tint nobody can see. Give
   them the brand colour explicitly. */
.why-icon,
.course-icon,
.project-icon,
.graduate-icon,
.fh-icon,
.eligibility-icon,
.cert-icon,
.info-icon,
.hero-card-icon,
.blog-preview-icon,
.thank-you-icon,
.praxia-feature-icon {
    color: var(--primary-color);
    line-height: 1;
}

.usp-icon,
.highlight-icon,
.check-icon,
.benefit-icon {
    color: var(--secondary-color);
}

/* Cards sit on a light surface, so a mid-tone brand colour reads; the ones on
   the navy sections need the light end of the palette instead. */
.section-dark .why-icon,
.section-dark .course-icon,
.praxia-hero .praxia-feature-icon {
    color: var(--accent-color);
}

/* ---------------------------------------------- inherited text colour ----- */
/* aero.css sets body colour to the light lilac that the dark hero, dark bands
   and footer are designed around. Anything that does not declare its own
   colour inherits it, and on this site several light sections contain elements
   that do exactly that: 27 of them on the data analytics page were pale lilac
   on near-white, between 1.42:1 and 1.05:1.

   The body rule is left alone, because seven elements on other pages rely on
   inheriting it over a dark background. These are the light-context elements
   that need to opt out. */

.deliver-item span,
.graduate-item span,
.why-content p,
.comparison-table td {
    color: var(--text-color);
}

.section-subtitle a {
    color: var(--primary-color);
    font-weight: 600;
}
/* The header row takes a dark navy fill from style.css. With the body colour
   now opted out for the cells, the header was left inheriting whatever was
   nearest and came out dark on dark. State it. */
.comparison-table th,
.comparison-table th.highlight-col {
    color: var(--on-dark);
}
/* ------------------------------------------------- blog post surfaces ----- */
/* blog.css was written when the page behind it was white. aero.css makes the
   body near-black, and the post template puts its header and several content
   blocks straight onto it: the article title was #1a1a2e on #0e0b1c at 1.14:1,
   effectively invisible, on every post on the site.

   The header sits on the dark hero and takes light type. The content column
   gets its own light surface, so everything inside it keeps the colours
   blog.css already gives it and nothing has to be restated one rule at a time. */

.blog-header h1 {
    color: var(--on-dark);
}

.blog-header .subtitle {
    color: #cfd8e6;
}

/* The meta line lands on two different surfaces depending on the post. On the
   dark backdrop it needs the pale value; inside the white content section it
   needs a dark one, and inheriting the pale value there measured 1.77.
   Scoping to .blog-content is what separates the two -- .blog-container is
   present in both cases and is too broad. */
.blog-meta {
    color: #b8c4d4;
}

.blog-content .blog-meta {
    color: #5b6a76;
}

.blog-content {
    background: var(--white);
    border-radius: 14px;
    padding: 32px clamp(20px, 4vw, 44px);
    box-shadow: 0 18px 44px rgba(4, 2, 16, 0.35);
}

/* The summary box is the one block that sets no background of its own. */
.summary-box {
    background: var(--light-color);
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    padding: 22px 26px;
}
/* ------------------------------------------------------ praxia section ---- */
/* praxia-use-cases and praxia-faq paint no background of their own, so they sit
   on the dark body, and everything in them is styled for that. The two generic
   heading classes are the exception: .section-title is navy and
   .section-subtitle is mid grey, both written for the light pages where those
   classes are normally used, and here they came out at 1.38:1 and 3.38:1. */

.praxia-use-cases .section-title,
.praxia-faq .section-title,
.praxia-gallery .section-title {
    color: var(--on-dark);
}

.praxia-use-cases .section-subtitle,
.praxia-faq .section-subtitle,
.praxia-gallery .section-subtitle {
    color: #c3cede;
}

/* Game-tile heading: white on the indigo tile, to match the new brand. */
.praxia-game-tile h4 {
    color: var(--on-dark);
}
/* Blog table headers take var(--blog-theme-color) as a fill with white type.
   Each post sets its own theme colour and several are a mid tone rather than a
   dark one: the CIFAR posts use an orange that puts white text at 3.79:1. Every
   post also defines --blog-theme-dark for exactly this kind of use. */
.comparison-table th {
    background: var(--blog-theme-dark, var(--blog-theme-color));
}
/* ------------------------------------------------------- dark mode pills -- */
/* The chip colour rules that used to live here turned out to be wrong: these
   classes cover both an accent-filled state and a plain dark one, so no single
   text colour suits them. They are handled further down by scoping the accent
   variable instead, which leaves one text colour correct for both. */

@media (prefers-color-scheme: dark) {
    /* Outlined on the dark hero rather than filled, so this one needs the
       opposite treatment: a gold light enough to read on near-black. */
    .praxia-hero-badge {
        color: #fbe3a0;
    }

    /* The Praxia button keeps its gold fill in both themes, so its label keeps
       the deep indigo. It was losing the fill and inheriting the panel colour. */
    .btn-praxia {
        background: var(--praxia-cyan);
        color: var(--praxia-navy-deep);
    }
}
/* ------------------------------------------- dark mode: inline callouts --- */
/* The blog posts predate the dark theme. Their callout boxes carry their fill
   as an inline style, a pale pink or cream or mint, and the type inside is
   inherited rather than declared. In dark mode the type turns light and lands
   on those pale fills at around 1.2:1.

   Inline styles beat any selector, so these have to be marked important. The
   alternative is editing several hundred inline attributes across twenty-four
   posts, which is worse. Matching on the value keeps it honest: only the known
   pale fills are touched. */

@media (prefers-color-scheme: dark) {
    [style*="#ffe6e6"],
    [style*="#fff3e0"],
    [style*="#e8f5e9"],
    [style*="#e3f2fd"],
    [style*="#f0fff0"],
    [style*="#fff8e1"],
    [style*="#f3e5f5"],
    [style*="#e0f7fa"] {
        background: var(--surface-2) !important;
        border-color: #2a3446 !important;
    }

    /* Mid greys written inline, which were readable on the white the posts were
       designed against and are not on a dark panel. */
    [style*="color: #666"],
    [style*="color:#666"],
    [style*="color: #555"],
    [style*="color:#555"] {
        color: var(--text-light) !important;
    }

    /* Near-blacks written inline, same cause and a worse result. The author
       panel on the week posts carries an inline light-blue gradient, which the
       rule above rewrites to a dark surface — but the heading inside it kept
       its #1a1a2e and came out at 1.04:1, which is invisible rather than merely
       dim. Anything this dark has to be lifted with the surface it sits on. */
    [style*="color: #1a1a2e"],
    [style*="color:#1a1a2e"],
    [style*="color: #333"],
    [style*="color:#333"],
    [style*="color: #222"],
    [style*="color:#222"],
    [style*="color: #000"],
    [style*="color:#000"] {
        color: var(--heading, var(--text-color)) !important;
    }

    /* A few accent colours are too dark to sit on a dark panel. */
    .journey-step .part {
        color: #b39ddb;
    }
}
/* ------------------------------------- dark mode: blog content surfaces --- */
/* The surfaces blog.css paints white or near-white, plus the same colours
   written inline in the older weekly posts. In dark mode the type inverts to
   light and these stayed pale, so body copy, list items and table cells landed
   at about 1.36:1. */

@media (prefers-color-scheme: dark) {
    .highlight-box,
    .example-box,
    .definition-box,
    .summary-box,
    .toc,
    .key-takeaway,
    .author-section {
        background: var(--surface-2);
        border-color: #2a3446;
    }

    .comparison-table td,
    .comparison-table tr,
    .comparison-table tr:nth-child(even) {
        background: var(--surface-2);
        color: var(--text-color);
    }

    [style*="background: #fff"],
    [style*="background:#fff"],
    [style*="background: white"],
    [style*="background:white"],
    [style*="background: #f9f9f9"],
    [style*="background: #f8f9fa"],
    [style*="background: #fff9e6"] {
        background: var(--surface-2) !important;
    }

    /* Headings inside those boxes were picked for a white card. */
    .highlight-box h4,
    .example-box h4,
    .definition-box h4 {
        color: var(--primary-color);
    }
}
/* Several weekly posts define their own table class rather than reusing
   .comparison-table, and each paints the table white. Matching on the name
   covers those without having to find every one by hand. */
@media (prefers-color-scheme: dark) {
    .blog-content table,
    .blog-content [class*="-table"],
    .blog-content [class*="table-"] {
        background: var(--surface-2);
        color: var(--text-color);
    }

    .blog-content table td,
    .blog-content table th:not([class]) {
        border-color: #2a3446;
    }
}
/* ------------------------------------------------ the pill family, completed */
/* Every one of these is a small label filled with --primary-color and set in
   light type. In the dark theme --primary-color inverts to a light cyan, so
   the light type needs to become dark type. The earlier, shorter list missed
   several and was also being beaten by more specific rules in style.css, hence
   the important. */

@media (prefers-color-scheme: dark) {
    /* These chips have two states. One is filled with --primary-color and one
       is a plain dark panel, and the same class covers both, so no single text
       colour works: forcing dark type fixed the filled state and broke the
       plain one at 1.08:1.

       Redefining the variable on the element instead means any rule that fills
       it resolves to a teal dark enough for light type, and the plain state is
       untouched. Light type then works for both. */
    .featured-label,
    .core-badge,
    .optional-badge,
    .project-tag,
    .tool-badge,
    .week-nav-item,
    .day-label,
    .obj-number,
    .preview-topics span,
    .blog-card-category {
        --primary-color: #0f6d80;
        --secondary-color: #0f6d80;
        color: var(--text-color);
    }

    /* Links styled as buttons inside blog callouts: a mid accent on a dark
       panel. Take the light end of the palette instead. */
    .next-week-cta .btn,
    .author-section .author-link {
        color: var(--primary-color);
    }

    /* Author block heading and the model parameter captions were both picked
       for a white card. */
    .author-section h4,
    .author-section h3 {
        color: var(--dark-color);
    }

    .arch-card .params {
        color: var(--text-light);
    }
}

/* These two table headers take a mid blue and a mid amber as their fill with
   white type, in both themes: 3.86:1 and 1.97:1. Amber especially never works
   under white. */
.blog-content th[style*="#0288d1"],
.blog-content th[style*="#f9a825"],
.blog-content [style*="background: #0288d1"],
.blog-content [style*="background: #f9a825"] {
    color: #10182a !important;
}
/* ------------------------------------------------- the last three in dark -- */
/* Each was still losing to a more specific rule elsewhere, so these carry the
   context they appear in rather than relying on the bare class. */

@media (prefers-color-scheme: dark) {
    /* Filled with --text-light, a pale grey in this theme. Same treatment as
       the other chips: darken the fill rather than fight over the text. */
    .roadmap-content .optional-badge,
    .optional-badge {
        --text-light: #47536b;
        color: var(--text-color);
    }

    /* Outlined on near-black; light gold to match the brand accent. */
    .praxia-hero .praxia-hero-badge,
    .praxia-hero-badge {
        color: #fbe3a0;
    }

    /* Keeps its gold fill in both themes, so it keeps its deep indigo label. It
       was losing the fill and inheriting the panel colour. */
    .praxia-cta-row .btn-praxia,
    .praxia-cta .btn-praxia {
        background: var(--praxia-cyan);
        color: var(--praxia-navy-deep);
    }
}