/*
Theme Name: ChemFusion
Theme URI: https://mathletebysaad.com/chem
Author: Antigravity AI
Author URI: https://google.com
Description: A highly creative, modern, chemistry-themed dark mode WordPress theme compatible with WooCommerce and Tutor LMS.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chemfusion
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&display=swap');

/* Light Mode (Default) - ChemFusion Academic Theme */
:root,
[data-theme="periodictable"] {
    /* Primary (Electric Cyan) - Used for primary actions, focus states, links */
    --primary: #00A8FF;
    --on-primary: #ffffff;
    --primary-container: #CBEBFC;
    --on-primary-container: #083D56;

    /* Secondary (Marigold Yellow) - Used for high-conversion CTA buttons */
    --secondary: #FFC542;
    --on-secondary: #083D56;
    --secondary-container: #F59E0B;
    --on-secondary-container: #ffffff;

    /* Backgrounds & Surfaces (Ice Blue & Pure White) */
    --background: #F4FAFE; 
    --on-background: #083D56; /* Dark Azure text for high readability */
    --surface: #ffffff;
    --on-surface: #083D56;
    --surface-variant: #E1F3FD;
    --on-surface-variant: #789DAC; /* Muted Slate for secondary text/icons */
    
    /* Borders & Utilities */
    --outline: #CBEBFC;
    --error-container: #F9B4A4; /* Pastel Orange */
    --on-error-container: #A83A00;
    --ignition-red: #E65F00; /* Reaction Orange */
    
    /* Shadows & Grids */
    --shadow-color: rgba(8, 61, 86, 0.15); /* Tinted shadow matching the dark azure */
    --grid-line: rgba(8, 61, 86, 0.05);

    /* Surface M3 container levels */
    --surface-lowest: #ffffff;
    --surface-low: #F9FCFF;
    --surface-high: #E1F3FD;
    --surface-card: #ffffff;
    
    /* Glassmorphism settings */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: #CBEBFC;

    /* Core Design System & CSS Variables fallback mappings */
    --color-bg-base: var(--background);
    --color-surface: var(--surface);
    --color-surface-card: var(--surface-card);
    --color-surface-elevated: var(--surface-high);
    --color-primary: var(--primary);
    --color-primary-dim: var(--primary-container);
    --color-secondary: var(--secondary);
    --color-tertiary: var(--primary);
    --color-on-background: var(--on-background);
    --color-on-surface-variant: var(--on-surface-variant);
    --color-ignition-red: var(--ignition-red);
}

/* Dark Mode Overrides - ChemFusion Laboratory Mode */
[data-theme="periodictable"][data-mode="dark"],
[data-mode="dark"] {
    /* Primary (Soft Cyan for dark mode contrast) */
    --primary: #38BDF8;
    --on-primary: #083D56;
    --primary-container: #00A8FF;
    --on-primary-container: #ffffff;

    /* Secondary (Keeps the Marigold Yellow pop) */
    --secondary: #FFC542;
    --on-secondary: #083D56;
    --secondary-container: #E65F00; /* Reaction Orange */
    --on-secondary-container: #ffffff;

    /* Backgrounds & Surfaces (Deep Azure & Charcoal) */
    --background: #052A3D; /* Deepest Navy */
    --on-background: #F4FAFE; /* Ice Blue text */
    --surface: #083D56; /* Dark Azure cards */
    --on-surface: #ffffff;
    --surface-variant: #114C6B;
    --on-surface-variant: #CBEBFC;
    
    /* Borders & Utilities */
    --outline: #38BDF8;
    --error-container: #7A2800;
    --on-error-container: #F9B4A4;
    --ignition-red: #E65F00;
    
    /* Shadows & Grids */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --grid-line: rgba(255, 255, 255, 0.05);

    /* Surface M3 container levels dark overrides */
    --surface-lowest: #031E2C;
    --surface-low: #052A3D;
    --surface-high: #114C6B;
    --surface-card: #083D56;
    
    /* Glassmorphism settings */
    --glass-bg: rgba(8, 61, 86, 0.85);
    --glass-border: #38BDF8;
}

/* Global Box-Sizing & Resets */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--background);
    color: var(--on-background);
    font-family: 'Lato', sans-serif;
    overflow-x: hidden;
    position: relative;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Container Constraints */
.max-w-container-max,
.container,
.site-content > .tutor-wrap,
.site-content > .woocommerce {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Plugin Wrapper Padding & Layout */
.site-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.site-content > .tutor-wrap,
.site-content > .woocommerce {
    padding-top: 120px;
    padding-bottom: 80px;
    width: 100%;
}



.primary-chip {
    font-family: 'Courier New', ui-monospace, monospace;
    letter-spacing: 1px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-base);
}

::-webkit-scrollbar-thumb {
    background: rgba(138, 235, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(138, 235, 255, 0.4);
}

/* ── Chemistry Background Canvas ─────────────────────────────────────────────
   The <canvas id="chem-bg-canvas"> element is created and managed by
   js/chem-background.js which draws three tiled organic molecules:
     • Chlorobenzene  (aromatic ring + –Cl)
     • Phenol         (Kekulé ring  + –OH)
     • 1-Butanol      (sp3 zig-zag  + –OH)
   These CSS rules just guarantee the canvas stays fixed and transparent.  */

#chem-bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -2;
    pointer-events: none;
    display: block;
    opacity: 1.0 !important;
}

/* Utility shims – kept for any template that still uses these class names */
.benzene-bg,
.hex-bg {
    /* background pattern is now provided by the canvas element */
}


/* Graduated Cylinder Side-Rail */
.cylinder-rail {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    border-left: 1px solid var(--glass-border);
    z-index: 40;
    pointer-events: none;
    background-image: repeating-linear-gradient(transparent,
            transparent 19px,
            var(--outline) 19px,
            var(--outline) 20px);
    background-size: 100% 200px;
}

/* Glow CTAs */
.btn-ignition {
    background-color: var(--ignition-red);
    color: #ffffff !important;
    box-shadow: 0 0 15px var(--shadow-color);
    border: 1px solid var(--ignition-red);
    transition: all 0.2s ease-in-out;
}

.btn-ignition:hover {
    box-shadow: 0 0 25px var(--shadow-color);
    transform: scale(0.98);
}

.btn-primary-fusion {
    background-color: var(--primary);
    color: var(--on-primary) !important;
    transition: all 0.2s ease-in-out;
}

.btn-primary-fusion:hover {
    background-color: var(--primary);
    opacity: 0.85;
    transform: scale(0.98);
}

.glow-base {
    background: radial-gradient(circle at bottom, var(--shadow-color) 0%, transparent 60%);
}

/* Glass Panels */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}

.active-glass {
    border: 2px solid var(--primary);
    box-shadow: 0 0 15px var(--shadow-color);
}

/* Periodic Table Squares */
.periodic-square {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--outline);
    background: var(--surface-card, var(--surface));
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    position: relative;
    border-radius: 6px;
}

.periodic-square:hover,
.periodic-square.active {
    border-color: var(--primary);
    box-shadow: 0 0 10px var(--shadow-color);
    background: var(--primary-container);
}

.periodic-num {
    font-size: 8px;
    position: absolute;
    top: 4px;
    left: 4px;
    color: var(--color-on-surface-variant);
}

.orbital-ring {
    border: 0.5px solid rgba(138, 235, 255, 0.3);
    border-radius: 50%;
    position: relative;
}

.orbital-ring::before {
    content: '';
    position: absolute;
    inset: -3px;
    border: 0.5px solid rgba(138, 235, 255, 0.1);
    border-radius: 50%;
}

/* --- WooCommerce Dark Theme Overrides --- */
.woocommerce {
    color: var(--color-on-background);
}

.woocommerce span.onsale {
    background-color: var(--color-secondary) !important;
    color: var(--on-primary) !important;
}

.woocommerce ul.products li.product {
    background-color: var(--color-surface-card) !important;
    border: none !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05) !important;
    border-radius: 24px;
    padding: 16px !important;
    transition: all 0.3s ease;
}

.woocommerce ul.products li.product:hover {
    border-color: var(--primary);
    background-color: var(--color-surface-elevated) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--color-primary) !important;
}

.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--color-surface) !important;
    color: var(--color-primary) !important;
    border: none !important;
    border-radius: 24px !important;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px !important;
    transition: all 0.2s ease;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: var(--color-primary) !important;
    color: var(--on-primary) !important;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background-color: var(--color-surface-card) !important;
    color: var(--color-on-background) !important;
    border-top-color: var(--color-primary) !important;
    box-shadow: 0 0 10px rgba(138, 235, 255, 0.1);
}

.woocommerce-checkout,
.woocommerce-cart {
    background: transparent;
}

.woocommerce-checkout #payment,
.woocommerce-cart table.cart,
.woocommerce-cart .cart-collaterals .cart_totals {
    background-color: var(--color-surface-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    color: var(--color-on-background);
}

.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.login,
.woocommerce-checkout form.register {
    border-color: rgba(255, 255, 255, 0.07) !important;
    background-color: var(--color-surface-card) !important;
}

.select2-container--default .select2-selection--single {
    background-color: var(--color-surface) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-on-background) !important;
}

/* --- Tutor LMS Dark Theme Overrides --- */
.tutor-wrap,
.tutor-container {
    color: var(--color-on-background);
}

.tutor-course-filter-wrap {
    background-color: var(--color-surface-card) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

.tutor-card,
.tutor-course-card {
    background-color: var(--color-surface-card) !important;
    border: none !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05) !important;
    border-radius: 24px !important;
    transition: all 0.3s ease;
}

.tutor-card:hover,
.tutor-course-card:hover {
    border-color: rgba(47, 217, 244, 0.3) !important;
    background-color: var(--color-surface-elevated) !important;
}

.tutor-btn-primary,
.tutor-btn-outline-primary {
    background-color: var(--color-primary) !important;
    color: #001f25 !important;
    border: none !important;
    border-radius: 24px !important;
    transition: all 0.2s ease !important;
}

.tutor-btn-primary:hover,
.tutor-btn-outline-primary:hover {
    background-color: var(--color-primary-dim) !important;
    box-shadow: 0 0 10px rgba(138, 235, 255, 0.3);
}

.tutor-color-primary,
.tutor-course-loop-price .price {
    color: var(--color-primary) !important;
}

.tutor-course-loop-title a {
    color: var(--color-on-background) !important;
}

.tutor-course-loop-title a:hover {
    color: var(--color-primary) !important;
}

.tutor-course-loop-meta {
    color: var(--color-on-surface-variant) !important;
}

.tutor-course-content-list {
    background-color: var(--color-surface) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

.tutor-single-course-sidebar {
    background-color: var(--color-surface-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.tutor-lesson-sidebar {
    background-color: var(--color-surface-card) !important;
    border-right-color: rgba(255, 255, 255, 0.07) !important;
}

.tutor-dashboard-left-menu {
    border-right-color: rgba(255, 255, 255, 0.07) !important;
}

.tutor-dashboard-menu-item a {
    color: var(--color-on-background) !important;
}

.tutor-dashboard-menu-item.active a,
.tutor-dashboard-menu-item a:hover {
    color: var(--color-primary) !important;
    background-color: rgba(138, 235, 255, 0.08) !important;
}

/* Bohr Atom Visualizer CSS */
#bohr-visualizer {
    position: relative;
    width: 100%;
    height: 300px;
    background: var(--surface);
    border: 2px solid rgba(255, 138, 101, 0.8);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 20px rgba(255, 138, 101, 0.35);
    backdrop-filter: blur(8px);
}

.bohr-nucleus {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--color-secondary, #4de082);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 0 20px rgba(77, 224, 130, 0.4);
    z-index: 10;
    user-select: none;
}

.bohr-shell {
    position: absolute;
    border: 1.5px dashed rgba(255, 138, 101, 0.65);
    border-radius: 50%;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
}

.bohr-electron {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary, #00A8FF);
    box-shadow: 0 0 10px var(--color-primary, #00A8FF);
    top: 50%;
    left: 50%;
    margin-left: -4px;
    margin-top: -4px;
}

/* Orbit animations */
@keyframes float-slow {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.float-slow {
    animation: float-slow 4s ease-in-out infinite;
}

/* Constrain WordPress Custom Logo */
.custom-logo {
    max-height: 40px;
    width: auto;
}

@keyframes orbit-clockwise {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes orbit-counter {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

/* Glassmorphism Orbital Nodes */
.glass-node {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(10, 20, 30, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(79, 209, 197, 0.5);
    box-shadow: inset 0 0 10px rgba(79, 209, 197, 0.2), 0 0 15px rgba(79, 209, 197, 0.15);
    animation: breathe-glow 4s ease-in-out infinite;
}

.glass-node span {
    text-shadow: 0 0 8px rgba(79, 209, 197, 0.8);
}

@keyframes breathe-glow {

    0%,
    100% {
        transform: scale(1);
        box-shadow: inset 0 0 10px rgba(79, 209, 197, 0.2), 0 0 15px rgba(79, 209, 197, 0.15);
    }

    50% {
        transform: scale(1.05);
        /* Slight scale up */
        box-shadow: inset 0 0 15px rgba(79, 209, 197, 0.4), 0 0 25px rgba(79, 209, 197, 0.4);
    }
}

/* pH Scale Progress Bar Coloring (Tutor LMS) */
/* 0% to 29% - Highly Acidic (Ignition Red) */
.tutor-progress-value[style^="width: 0"],
.tutor-progress-value[style^="width:0"],
.tutor-progress-value[style^="width: 1"],
.tutor-progress-value[style^="width:1"],
.tutor-progress-value[style^="width: 2"],
.tutor-progress-value[style^="width:2"] {
    background-color: #7F1D1D !important;
}

/* 30% to 59% - Weakly Acidic (Warm Orange/Yellow) */
.tutor-progress-value[style^="width: 3"],
.tutor-progress-value[style^="width:3"],
.tutor-progress-value[style^="width: 4"],
.tutor-progress-value[style^="width:4"],
.tutor-progress-value[style^="width: 5"],
.tutor-progress-value[style^="width:5"] {
    background-color: #ffb74d !important;
}

/* 60% to 89% - Neutral/Alkaline (Barium Green) */
.tutor-progress-value[style^="width: 6"],
.tutor-progress-value[style^="width:6"],
.tutor-progress-value[style^="width: 7"],
.tutor-progress-value[style^="width:7"],
.tutor-progress-value[style^="width: 8"],
.tutor-progress-value[style^="width:8"] {
    background-color: #00b55d !important;
}

/* 90% to 100% - Highly Alkaline (Deep Purple/Blue) */
.tutor-progress-value[style^="width: 9"],
.tutor-progress-value[style^="width:9"],
.tutor-progress-value[style^="width: 100"],
.tutor-progress-value[style^="width:100"] {
    background-color: #3842ab !important;
}

/* Fix single digits (0-9%) mapping back to Highly Acidic */
.tutor-progress-value[style^="width: 0%"],
.tutor-progress-value[style^="width:0%"],
.tutor-progress-value[style^="width: 1%"],
.tutor-progress-value[style^="width:1%"],
.tutor-progress-value[style^="width: 2%"],
.tutor-progress-value[style^="width:2%"],
.tutor-progress-value[style^="width: 3%"],
.tutor-progress-value[style^="width:3%"],
.tutor-progress-value[style^="width: 4%"],
.tutor-progress-value[style^="width:4%"],
.tutor-progress-value[style^="width: 5%"],
.tutor-progress-value[style^="width:5%"],
.tutor-progress-value[style^="width: 6%"],
.tutor-progress-value[style^="width:6%"],
.tutor-progress-value[style^="width: 7%"],
.tutor-progress-value[style^="width:7%"],
.tutor-progress-value[style^="width: 8%"],
.tutor-progress-value[style^="width:8%"],
.tutor-progress-value[style^="width: 9%"],
.tutor-progress-value[style^="width:9%"] {
    background-color: #7F1D1D !important;
}

/* Custom Scrollbar */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--background);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--background);
}

::-webkit-scrollbar-thumb {
    background-color: var(--outline);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary);
}

::-webkit-scrollbar-corner {
    background-color: var(--background);
}

/* =============================================================================
   Soft Painterly / Premium Display Aesthetic Overrides
   ============================================================================= */

/* 1. Typography & Text Outlines */
h1,
h2,
h3,
h4,
.font-headline-lg,
.font-display-lg {
    font-family: 'Bangers', 'Anton', Impact, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    line-height: 1.1 !important;
}

/* Clear outlines/text-shadows */
h1,
h2,
h3,
.comic-text-shadow {
    text-shadow: none !important;
}

/* Slanted dynamic headings */
h1,
h2,
h3,
.comic-slant {
    transform: skewX(-5deg) rotate(-3deg);
    display: inline-block;
}

/* Soft display headings directly on background */
.comic-display-heading {
    color: #1a1a1a !important;
    /* Soft dark charcoal */
    text-shadow: none !important;
}

/* 2. Paint Mark SVG Containers (Dry-brush stroke masks) */
.brush-container {
    position: relative;
    display: inline-block;
    padding: 10px 24px;
    color: #ffffff !important;
    font-family: 'Bangers', sans-serif !important;
    font-size: 1.2rem;
    font-weight: normal;
    letter-spacing: 1px;
    z-index: 1;
}

/* Red brush stroke container offset behind */
.brush-container::before {
    content: '';
    position: absolute;
    inset: 4px -6px -4px 6px;
    background-color: var(--secondary, #cc0000);
    z-index: -2;
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNTAgNzAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxwYXRoIGQ9Ik0gMiwyOAogICAgICAgICAgIEMgMjIsMTggNDIsMzIgNzIsMjIgCiAgICAgICAgICAgQyAxMDIsMTIgMTMyLDMyIDE2MiwxOSAKICAgICAgICAgICBDIDE5Miw2IDIyMiwyOCAyNTIsMTggCiAgICAgICAgICAgQyAyODIsOCAzMDIsMjQgMzIyLDE0IAogICAgICAgICAgIEMgMzMyLDkgMzMyLDE2IDM0MiwxMSAKICAgICAgICAgICBMIDM0NiwzOCAKICAgICAgICAgICBDIDM0Myw0NCAzNDYsNTEgMzQwLDQ4IAogICAgICAgICAgIEMgMzIwLDU4IDMwMCw0NCAyNzAsNTQgCiAgICAgICAgICAgQyAyNDAsNjQgMjEwLDQ0IDE4MCw1NiAKICAgICAgICAgICBDIDE1MCw2OCAxMjAsNDggOTAsNTggCiAgICAgICAgICAgQyA2MCw2OCA0MCw1NCAyMCw2MCAKICAgICAgICAgICBDIDEwLDYzIDUsNTYgMCw1OCBaIiBmaWxsPSIjMDAwMDAwIi8+CiAgPCEtLSByb3VnaCBicmlzdGxlIHN0cm9rZXMgLS0+CiAgPHBhdGggZD0iTSg4LDE2IEMgNzAsMTIgMTQwLDIwIDIxMCwxNCBDIDI2MCw5IDMwMCwxNyAzMzgsMTMiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtZGFzaGFycmF5PSIxMCA4IDE4IDQgMTQgMTIiLz4KICA8cGF0aCBkPSJNIDEyLDMyIEMgOTIsMzAgMTcyLDM0IDI1MiwzMCBDIDI4MiwyOCAzMTIsMzQgMzQwLDI5IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZT0iMiIgc3Ryb2tlLWRhc2hhcnJheT0iMjAgNiAxMiA4IDI0IDEwIi8+CiAgPHBhdGggZD0iTSAxOCw1MiBDIDg4LDQ4IDE1OCw1NCAyMjgsNTAgQyAyNjgsNDYgMzA4LDUyIDMzNCw0OCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTUgNyA5IDYgMTggMTEiLz4KPC9zdmc+");
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNTAgNzAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxwYXRoIGQ9Ik0gMiwyOAogICAgICAgICAgIEMgMjIsMTggNDIsMzIgNzIsMjIgCiAgICAgICAgICAgQyAxMDIsMTIgMTMyLDMyIDE2MiwxOSAKICAgICAgICAgICBDIDE5Miw2IDIyMiwyOCAyNTIsMTggCiAgICAgICAgICAgQyAyODIsOCAzMDIsMjQgMzIyLDE0IAogICAgICAgICAgIEMgMzMyLDkgMzMyLDE2IDM0MiwxMSAKICAgICAgICAgICBMIDM0NiwzOCAKICAgICAgICAgICBDIDM0Myw0NCAzNDYsNTEgMzQwLDQ4IAogICAgICAgICAgIEMgMzIwLDU4IDMwMCw0NCAyNzAsNTQgCiAgICAgICAgICAgQyAyNDAsNjQgMjEwLDQ0IDE4MCw1NiAKICAgICAgICAgICBDIDE1MCw2OCAxMjAsNDggOTAsNTggCiAgICAgICAgICAgQyA2MCw2OCA0MCw1NCAyMCw2MCAKICAgICAgICAgICBDIDEwLDYzIDUsNTYgMCw1OCBaIiBmaWxsPSIjMDAwMDAwIi8+CiAgPCEtLSByb3VnaCBicmlzdGxlIHN0cm9rZXMgLS0+CiAgPHBhdGggZD0iTSg4LDE2IEMgNzAsMTIgMTQwLDIwIDIxMCwxNCBDIDI2MCw5IDMwMCwxNyAzMzgsMTMiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtZGFzaGFycmF5PSIxMCA4IDE4IDQgMTQgMTIiLz4KICA8cGF0aCBkPSJNIDEyLDMyIEMgOTIsMzAgMTcyLDM0IDI1MiwzMCBDIDI4MiwyOCAzMTIsMzQgMzQwLDI5IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZT0iMiIgc3Ryb2tlLWRhc2hhcnJheT0iMjAgNiAxMiA4IDI0IDEwIi8+CiAgPHBhdGggZD0iTSAxOCw1MiBDIDg4LDQ4IDE1OCw1NCAyMjgsNTAgQyAyNjgsNDYgMzA4LDUyIDMzNCw0OCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTUgNyA5IDYgMTggMTEiLz4KPC9zdmc+");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* Black brush stroke container on top */
.brush-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--on-background, #000000);
    z-index: -1;
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNTAgNzAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxwYXRoIGQ9Ik0gNSwyMiAKICAgICAgICAgICBDIDI1LDEyIDQ1LDI4IDc1LDE4IAogICAgICAgICAgIEMgMTA1LDggMTM1LDI4IDE2NSwxNSAKICAgICAgICAgICBDIDE5NSwyIDIyNSwyNCAyNTUsMTQgCiAgICAgICAgICAgQyAyODUsNCAzMDUsMjAgMzI1LDEwIAogICAgICAgICAgIEMgMzM1LDUgMzQyLDEyIDM0NSw3IAogICAgICAgICAgIEwgMzQ4LDMyIAogICAgICAgICAgIEMgMzQ1LDM4IDM0OCw0NSAzNDIsNDIgCiAgICAgICAgICAgQyAzMjIsNTIgMzAyLDM4IDI3Miw0OCAKICAgICAgICAgICBDIDE0Miw1OCAyMTIsMzggMTgyLDUwIAogICAgICAgICAgIEMgMTUyLDYyIDEyMiw0MiA5Miw1MiAKICAgICAgICAgICBDIDYyLDYyIDQyLDQ4IDIyLDU0IAogICAgICAgICAgIEMgMTIsNTcgNyw1MCAyLDUyIFoiIGZpbGw9IiMwMDAwMDAiLz4KICA8IS0tIHJvdWdoIGJyaXN0bGUgc3Ryb2tlcyAtLT4KICA8cGF0aCBkPSJNIDEyLDE0IEMgODAsMTAgMTYwLDE4IDI0MCwxMiBDIDI4MCw5IDMxMCwxNSAzMzgsMTEiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1kYXNoYXJyYXk9IjEyIDYgMjIgNSA4IDE4Ii8+CiAgPHBhdGggZD0iTSg4LDI2IEMgOTAsMjggMTcwLDIyIDI1MCwyNiBDIDI5MCwyOCAzMTUsMjIgMzQyLDI3IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtZGFzaGFycmF5PSIyNSA4IDE1IDEwIDMwIDciLz4KICA8cGF0aCBkPSJNIDE1LDQ4IEMgNzUsNDQgMTQ1LDUyIDIxNSw0NiBDIDI2NSw0MiAzMDUsNDggMzM1LDQ1IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWRhc2hhcnJheT0iMTggMTAgMTAgNSAxNSAxMiIvPgogIDxwYXRoIGQ9Ik0gMjIsNTYgQyA4NSw1NCAxNTUsNTkgMjI1LDU0IEMgMjc1LDUwIDMxMCw1NiAzMzAsNTIiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1kYXNoYXJyYXk9IjggMTIgMTggNCAxMiAxMCIvPgo8L3N2Zz4=");
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNTAgNzAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxwYXRoIGQ9Ik0gNSwyMiAKICAgICAgICAgICBDIDI1LDEyIDQ1LDI4IDc1LDE4IAogICAgICAgICAgIEMgMTA1LDggMTM1LDI4IDE2NSwxNSAKICAgICAgICAgICBDIDE5NSwyIDIyNSwyNCAyNTUsMTQgCiAgICAgICAgICAgQyAyODUsNCAzMDUsMjAgMzI1LDEwIAogICAgICAgICAgIEMgMzM1LDUgMzQyLDEyIDM0NSw3IAogICAgICAgICAgIEwgMzQ4LDMyIAogICAgICAgICAgIEMgMzQ1LDM4IDM0OCw0NSAzNDIsNDIgCiAgICAgICAgICAgQyAzMjIsNTIgMzAyLDM4IDI3Miw0OCAKICAgICAgICAgICBDIDE0Miw1OCAyMTIsMzggMTgyLDUwIAogICAgICAgICAgIEMgMTUyLDYyIDEyMiw0MiA5Miw1MiAKICAgICAgICAgICBDIDYyLDYyIDQyLDQ4IDIyLDU0IAogICAgICAgICAgIEMgMTIsNTcgNyw1MCAyLDUyIFoiIGZpbGw9IiMwMDAwMDAiLz4KICA8IS0tIHJvdWdoIGJyaXN0bGUgc3Ryb2tlcyAtLT4KICA8cGF0aCBkPSJNIDEyLDE0IEMgODAsMTAgMTYwLDE4IDI0MCwxMiBDIDI4MCw5IDMxMCwxNSAzMzgsMTEiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1kYXNoYXJyYXk9IjEyIDYgMjIgNSA4IDE4Ii8+CiAgPHBhdGggZD0iTSg4LDI2IEMgOTAsMjggMTcwLDIyIDI1MCwyNiBDIDI5MCwyOCAzMTUsMjIgMzQyLDI3IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtZGFzaGFycmF5PSIyNSA4IDE1IDEwIDMwIDciLz4KICA8cGF0aCBkPSJNIDE1LDQ4IEMgNzUsNDQgMTQ1LDUyIDIxNSw0NiBDIDI2NSw0MiAzMDUsNDggMzM1LDQ1IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWRhc2hhcnJheT0iMTggMTAgMTAgNSAxNSAxMiIvPgogIDxwYXRoIGQ9Ik0gMjIsNTYgQyA4NSw1NCAxNTUsNTkgMjI1LDU0IEMgMjc1LDUwIDMxMCw1NiAzMzAsNTIiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1kYXNoYXJyYXk9IjggMTIgMTggNCAxMiAxMCIvPgo8L3N2Zz4=");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* 3. Strip Halftone Dots Background */
.halftone-bg {
    display: none !important;
}

/* 4. Element Styling: Soft diffused shadows and warm premium borders */
.glass-panel,
.bg-surface-card,
.woocommerce ul.products li.product,
.tutor-card,
.tutor-course-card {
    border: none !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05) !important;
    border-radius: 24px !important;
    background-color: var(--surface-card) !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
}

/* Card hover states */
.glass-panel:hover,
.bg-surface-card:hover,
.woocommerce ul.products li.product:hover,
.tutor-card:hover,
.tutor-course-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12) !important;
}

/* Premium Periodic Table Flashcards */
.periodic-square,
.element-tile {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    border-radius: 16px !important;
    transition: all 0.2s ease !important;
}

.periodic-square *,
.element-tile * {
    color: #1a1a1a !important;
}

.periodic-square:hover,
.element-tile:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(230, 184, 0, 0.15) !important;
    border-color: rgba(230, 184, 0, 0.8) !important;
}

/* Bohr visualizer premium panel */
#bohr-visualizer {
    background: var(--surface) !important;
    border: 2px solid rgba(0, 168, 255, 0.8) !important;
    box-shadow: 0 0 20px rgba(0, 168, 255, 0.35) !important;
    border-radius: 24px !important;
}

/* Buttons pop-art transition to soft display layout */
.btn-ignition,
.btn-primary-fusion,
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.tutor-btn-primary,
.tutor-btn-outline-primary {
    border: none !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
    color: #000000 !important;
    font-family: 'Bangers', sans-serif !important;
    letter-spacing: 1px !important;
    font-size: 14px !important;
    background-color: var(--primary) !important;
    border-radius: 24px !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.btn-ignition:hover,
.btn-primary-fusion:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.tutor-btn-primary:hover,
.tutor-btn-outline-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(255, 204, 0, 0.45) !important;
    background-color: var(--primary-container) !important;
}

/* Red Ignition Button specific style */
.btn-ignition {
    background-color: var(--secondary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(204, 0, 0, 0.3) !important;
}

.btn-ignition:hover {
    background-color: var(--secondary-container) !important;
    box-shadow: 0 6px 20px rgba(204, 0, 0, 0.45) !important;
}

/* Central logo container & outer molecular orbits float fix */
.logo-container-float {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.glass-node {
    background-color: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.glass-node span {
    color: #1a1a1a !important;
    text-shadow: none !important;
}

/* Extra premium style tweaks */
.woocommerce ul.products li.product,
.tutor-course-card {
    padding: 20px !important;
}

/* =============================================================================
   UI Polish overrides
   ============================================================================= */

/* 1. Hero Section backdrop cleanup */
.glow-base {
    background: transparent !important;
    box-shadow: none !important;
}

/* 2. Premium Content Cards styling */
.competency-card,
.syllabus-card,
.report-card,
.premium-card,
.woocommerce ul.products li.product,
.tutor-course-card {
    background-color: #ffffff !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04) !important;
    border: none !important;
    padding: 2rem !important;
    border-radius: 24px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.competency-card:hover,
.syllabus-card:hover,
.report-card:hover,
.premium-card:hover,
.woocommerce ul.products li.product:hover,
.tutor-course-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

/* 3. Text Contrast Inside Cards: Yellow to dark Charcoal / Red */
.competency-card .text-primary,
.syllabus-card .text-primary,
.report-card .text-primary,
.premium-card .text-primary,
.woocommerce ul.products li.product .price,
.tutor-course-card .price,
.syllabus-card span.font-semibold {
    color: #cc0000 !important;
    /* Rich Dark Red for high contrast */
}

.competency-card .text-secondary,
.syllabus-card .text-secondary,
.report-card .text-secondary {
    color: #1a1a1a !important;
    /* Dark charcoal */
}

/* 4. Structured Chemistry Simulator Matrix */
.simulator-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 10px !important;
}

/* 5. Refined yellow CTA buttons */
.btn-primary-fusion,
.btn-yellow-cta {
    color: #1a1a1a !important;
    background-color: var(--primary) !important;
    font-weight: 750 !important;
    box-shadow: 0 4px 14px rgba(255, 204, 0, 0.2) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-primary-fusion:hover,
.btn-yellow-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(255, 204, 0, 0.45) !important;
    background-color: var(--primary-container) !important;
}

/* ==========================================================================
   COMMUNITY STATS & SOCIAL PILLS
   ========================================================================== */

.lab-community-section {
    text-align: center;
    padding: 4rem 2rem;
    background-color: #1e293b;
    border-radius: 24px;
    margin: 4rem auto;
    max-width: 1000px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 2rem auto;
}

.stat-card {
    padding: 4rem 1.5rem;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-8px);
}

.stat-card h3 {
    font-size: 3rem !important;
    margin: 0 0 10px 0;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em;
}

.stat-card p {
    font-size: 1rem !important;
    margin: 0;
    color: #D1D5DB !important;
}

.social-pills-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}

.social-pill {
    padding: 10px 30px;
    border-radius: 50px;
    color: white !important;
    text-decoration: none;
    font-weight: bold;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.social-pill svg {
    width: 20px;
    height: 20px;
    fill: white;
    transition: fill 0.2s ease;
}

.social-pill:hover, .social-pill.primary-pill:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    border-color: #CBEBFC;
    color: #083D56 !important;
    background-color: #CBEBFC !important;
}

.social-pill:hover svg, .social-pill.primary-pill:hover svg {
    fill: #083D56;
}

.social-pill.primary-pill {
    background-color: #00A8FF !important;
    border-color: #00A8FF;
}

/* ==========================================================================
   DARK SECTION BACKGROUNDS (Below Hero)
   Colors only — no layout/structure changes.
   ========================================================================== */

/* Sections below the hero get a dark charcoal background */
main>section:nth-child(n+4) {
    background-color: #083D56 !important;
    color: #F4FAFE !important;
}

/* Keep hero, results, trust-layer, and competencies-section on their original backgrounds */
main>section:first-child,
main>section:nth-child(2),
main>section:nth-child(3),
#competencies-section {
    background-color: transparent !important;
}

#track-selector-section, #simulator-section {
    background-color: transparent !important;
}

#meet-the-teacher {
    background-color: transparent !important;
}


/* Text contrast adjustments on dark backgrounds */
main>section:nth-child(n+3) .text-on-surface,
main>section:nth-child(n+3) .text-on-background {
    color: #e8e8e8 !important;
}

main>section:nth-child(n+3) .text-on-surface-variant {
    color: #a0a0a0 !important;
}

/* Card backgrounds on dark sections stay light/cream */
main>section:nth-child(n+3) .bg-surface-card,
main>section:nth-child(n+3) .competency-card,
main>section:nth-child(n+3) .syllabus-card,
main>section:nth-child(n+3) .report-card {
    background-color: var(--surface-card) !important;
    color: var(--on-surface) !important;
}

/* Card text stays dark on light cards */
main>section:nth-child(n+3) .bg-surface-card .text-on-surface,
main>section:nth-child(n+3) .bg-surface-card .text-on-surface-variant,
main>section:nth-child(n+3) .competency-card .text-on-surface-variant,
main>section:nth-child(n+3) .report-card .text-on-surface-variant,
main>section:nth-child(n+3) .report-card .text-on-surface {
    color: var(--on-surface-variant) !important;
}

main>section:nth-child(n+3) .bg-surface-card h3,
main>section:nth-child(n+3) .competency-card h3,
main>section:nth-child(n+3) .report-card p.font-body-md {
    color: var(--on-surface) !important;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY OVERRIDES
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
h1, h2, h3, h4, h5, h6,
.font-display-lg,
.font-headline-lg,
.comic-display-heading,
.comic-slant,
.comic-text-shadow,
.nav-text {
    font-family: 'Poppins', sans-serif !important;
    text-transform: none !important;
    font-style: normal !important;
    transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
}

body {
    font-family: 'Lato', sans-serif !important;
    font-weight: 400;
    line-height: 1.6rem;
}

.btn-primary-fusion,
.btn-ignition {
    text-transform: capitalize !important;
    font-family: 'Poppins', sans-serif !important;
    border-radius: 50px !important;
}

/* ==========================================================================
   HEADER SCROLL & ACTIVE STATE
   ========================================================================== */

#main-header.scrolled {
    background-color: rgba(255, 255, 255, 0.85) !important; 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--outline);
    box-shadow: 0px 4px 20px rgba(8, 61, 86, 0.08);
    transition: all 0.3s ease-in-out;
}

#main-header.scrolled .nav-text {
    max-width: 0 !important;
    opacity: 0 !important;
    margin-left: -0.5rem !important;
    /* Neutralize the gap-2 spacing when collapsed */
    padding: 0 !important;
}

#main-header.scrolled .nav-link:hover .nav-text {
    max-width: 200px !important;
    opacity: 1 !important;
    margin-left: 0 !important;
    /* Restore normal spacing */
}

.nav-link.active .nav-icon {
    background-color: #CBEBFC !important;
    color: #083D56 !important;
    border-color: #00A8FF !important;
    box-shadow: none;
}

/* ==========================================================================
   SVG ORBIT ANIMATIONS
   ========================================================================== */
@keyframes svg-trail {
    0% {
        stroke-dashoffset: 30;
    }

    100% {
        stroke-dashoffset: -70;
    }
}

@keyframes svg-trail-reverse {
    0% {
        stroke-dashoffset: -100;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes offset-travel {
    0% {
        offset-distance: 0%;
    }

    100% {
        offset-distance: 100%;
    }
}

@keyframes offset-travel-reverse {
    0% {
        offset-distance: 100%;
    }

    100% {
        offset-distance: 0%;
    }
}

.trail-1 {
    stroke: #00A8FF;
    animation: svg-trail 10s linear infinite;
    stroke-linecap: round;
}

.trail-2 {
    stroke: #ffb703;
    animation: svg-trail-reverse 14s linear infinite;
    stroke-linecap: round;
}

.node-1 {
    offset-path: path('M 24,300 a 276,92 0 1,0 552,0 a 276,92 0 1,0 -552,0');
    offset-rotate: 0deg;
    animation: offset-travel 10s linear infinite;
}

.node-2 {
    offset-path: path('M 24,300 a 276,92 0 1,0 552,0 a 276,92 0 1,0 -552,0');
    offset-rotate: 0deg;
    animation: offset-travel-reverse 14s linear infinite;
}

/* =============================================================================
   Funnel Timeline Animations & Shapes
   ============================================================================= */

/* Flow-in Animation Base States */
.timeline-row .timeline-panel {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.4s, border-color 0.4s;
}

/* UX / CRO Animations */
.timeline-row.is-visible .timeline-panel {
    opacity: 1;
    transform: translateX(0);
}

/* Neutral Base States */
.timeline-row .timeline-node {
    background-color: transparent;
    border: 2px solid rgba(64, 72, 80, 0.3); /* outline-variant */
    color: var(--on-surface);
    box-shadow: none;
    transition: all 0.4s ease-out;
}

.timeline-row .timeline-panel {
    background-color: var(--surface-container-lowest);
    border-color: rgba(64, 72, 80, 0.2);
    color: var(--on-surface-variant);
}

.timeline-row .timeline-arrow {
    background-color: var(--surface-container-lowest);
    border-color: rgba(64, 72, 80, 0.2);
    transition: all 0.4s ease-out;
}

/* Highlighted States (When is-visible) */
.timeline-row.is-visible .timeline-node {
    color: white;
    background-color: #00A8FF;
    border-color: #00A8FF;
    box-shadow: 0 0 8px rgba(0, 168, 255, 0.4);
}

.timeline-row.is-visible .timeline-panel {
    background-color: var(--surface);
    border-color: rgba(0, 168, 255, 0.4);
    color: #083D56;
}

.timeline-row.is-visible .timeline-arrow {
    background-color: var(--surface);
    border-color: rgba(0, 168, 255, 0.4);
}

/* Competency Cards Custom Hover (User Requested) */
.competency-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.competency-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.timeline-row.is-visible .timeline-arrow {
    background-color: #f0fdf4;
    border-color: rgba(77, 224, 130, 0.4);
}

/* Dark mode overrides for highlighted state */
[data-theme="periodictable"][data-mode="dark"] .timeline-row.is-visible .timeline-panel,
[data-mode="dark"] .timeline-row.is-visible .timeline-panel {
    background-color: rgba(20, 83, 45, 0.2);
    border-color: rgba(77, 224, 130, 0.4);
    color: #4de082;
}

[data-theme="periodictable"][data-mode="dark"] .timeline-row.is-visible .timeline-arrow,
[data-mode="dark"] .timeline-row.is-visible .timeline-arrow {
    background-color: rgba(20, 83, 45, 0.2);
    border-color: rgba(77, 224, 130, 0.4);
}

.funnel-glass {
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);
    backdrop-filter: blur(8px);
}

[data-theme="periodictable"][data-mode="dark"] .funnel-glass,
[data-mode="dark"] .funnel-glass {
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
}

@keyframes stream-flow {
    0% { transform: translate(-50%, -10px) scaleY(0.8); opacity: 0; }
    20% { opacity: 1; }
    80% { transform: translate(-50%, 80%) scaleY(1.2); opacity: 1; }
    100% { transform: translate(-50%, 100%) scaleY(0.8); opacity: 0; }
}
.animate-stream {
    animation: stream-flow 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   Testimonials Swiper & Cloud Bubble Styling
   ============================================================================= */

/* Cloud Bubble Shape */
.testimonial-cloud {
    border-radius: 40px; /* Highly rounded for cloud/bubble feel */
    position: relative;
    z-index: 1;
}

/* The Bubble Tail */
.testimonial-cloud::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 40px;
    width: 30px;
    height: 30px;
    background-color: var(--surface-card, #ffffff);
    border-bottom: 1px solid rgba(45, 50, 56, 0.15); /* Soft border for tail */
    border-right: 1px solid rgba(45, 50, 56, 0.15);
    border-bottom-right-radius: 50%; /* Curved tail effect */
    transform: rotate(45deg);
    z-index: -1;
}

[data-theme="periodictable"][data-mode="dark"] .testimonial-cloud::after,
[data-mode="dark"] .testimonial-cloud::after {
    border-color: rgba(253, 240, 227, 0.15);
}

/* Swiper Base Configuration */
.testimonials-swiper {
    position: relative;
    width: 100%;
    overflow: hidden; /* Prevent horizontal scrollbars on body */
    padding-top: 20px;
    padding-bottom: 40px;
}

.testimonials-swiper .swiper-wrapper {
    align-items: center;
}

/* Base state for all slides: faded and blurred */
.testimonials-swiper .swiper-slide {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 0.3 !important;
    filter: blur(4px) !important;
    transform: scale(0.85) !important;
    pointer-events: none !important; /* Disable interaction on blurred slides */
}

/* The immediate siblings (prev/next) are fully visible but slightly scaled down to let the center pop */
.testimonials-swiper .swiper-slide-next,
.testimonials-swiper .swiper-slide-prev {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: scale(0.95) !important;
    pointer-events: auto !important;
    z-index: 10 !important;
}

/* The active (center) slide pops up and is fully visible */
.testimonials-swiper .swiper-slide-active {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: scale(1.05) translateY(-10px) !important;
    pointer-events: auto !important;
    z-index: 20 !important;
}

/* Custom positioning for navigation arrows - pushed to edges of padded container */
.testimonials-swiper .swiper-button-next,
.testimonials-swiper .swiper-button-prev {
    top: 50%;
    transform: translateY(-50%);
    z-index: 50 !important;
    background-color: var(--surface) !important;
}

/* Force Swiper icons to show clearly */
.testimonials-swiper .swiper-button-next::after,
.testimonials-swiper .swiper-button-prev::after {
    color: var(--primary) !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

.testimonials-swiper .swiper-button-next {
    right: 0px !important;
}
.testimonials-swiper .swiper-button-prev {
    left: 0px !important;
}

/* On larger screens, position arrows properly in the container padding */
@media (min-width: 768px) {
    .testimonials-swiper .swiper-button-next {
        right: 15px !important;
    }
    .testimonials-swiper .swiper-button-prev {
        left: 15px !important;
    }
}

/* Beaker Grade Particles Styling */
#beaker-particles div {
    display: inline-block;
    user-select: none;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes particleFall {
    0% { transform: translateY(-150px) scale(0.5); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes particleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.particle-fall {
    animation: particleFall 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.particle-idle-bounce {
    animation: particleBounce 1.5s ease-in-out infinite;
}

/* Teacher Profile Card CSS */
/* Container must be taller than the circle to allow the head to "pop out" */
.teacher-profile-card {
  position: relative;
  width: min(320px, 100%);
  height: 400px; /* Taller than the circle */
  display: flex;
  justify-content: center;
  align-items: flex-end; /* Anchors the image to the bottom */
  margin: 0 auto;
}

/* The circular background exactly like the Mathlete reference */
.profile-circle {
  position: absolute;
  bottom: 0; /* Aligns circle to the bottom of the card */
  width: min(320px, 100%);
  height: min(320px, 100vw);
  background-color: #CBEBFC; /* Soft Light Azure */
  border: none;
  box-shadow: 0 0 40px rgba(0, 168, 255, 0.2);
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 1; /* Sits behind the image */
}

/* The client's transparent PNG */
.teacher-image {
  position: relative;
  z-index: 2; /* Sits on top of the circle */
  width: 85%; /* Slightly narrower than the circle so the side borders show */
  height: auto;
  max-height: 100%; /* Prevents massive images from breaking layout */
  object-fit: contain;
  margin-bottom: 16px; /* Moves the image up slightly from the bottom border */
  /* Optional: A slight drop shadow on the image makes it pop even more */
  filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.1)); 
}
/* Fix for WordPress admin bar overlapping fixed header */
.admin-bar #main-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar #main-header {
        top: 46px;
    }
}

/* Hero Logo Container */
.hero-logo-container {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--outline);
    border-radius: 50%;
    overflow: hidden;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(8, 61, 86, 0.1);
}


/* Global Responsive Overrides */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
}

/* Ensure timeline panels do not overflow small screens */
.timeline-panel {
    max-width: 100% !important;
}

/* Ensure chemistry simulator svg scales properly */
#condenser-svg {
    max-width: 100% !important;
}

/* Hide scrollbar for tab switcher */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Testimonial Pagination Styling */
.testimonials-swiper .swiper-pagination-bullet {
    background: #00A8FF !important;
    opacity: 0.3;
    width: 10px;
    height: 10px;
    margin: 0 6px !important;
}
.testimonials-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    box-shadow: 0 0 10px rgba(0, 168, 255, 0.6);
}

/* Student Portal Styling */
#cf-login-container, 
#cf-register-container {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--cf-light-azure);
    box-shadow: 0 10px 40px rgba(8, 61, 86, 0.1);
    border-radius: 16px;
    padding: 32px;
}

#cf-login-container input[type="text"]:focus,
#cf-login-container input[type="email"]:focus,
#cf-login-container input[type="password"]:focus,
#cf-register-container input[type="text"]:focus,
#cf-register-container input[type="email"]:focus,
#cf-register-container input[type="password"]:focus {
    border-color: var(--cf-vivid-azure-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.2) !important;
    outline: none !important;
}

/* Remove the default Tutor LMS light blue background */
.tutor-form-register-wrap {
    background-color: transparent !important;
    border: none !important;
}

/* Force the Register button to be Marigold Yellow */
.tutor-form-register-wrap button[type="submit"], 
.tutor-form-register-wrap input[type="submit"] {
    background-color: var(--cf-orange-canary) !important;
    color: var(--cf-dark-azure) !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 8px !important;
    transition: all 0.3s ease-in-out;
}

/* Add hover effect to the button */
.tutor-form-register-wrap button[type="submit"]:hover, 
.tutor-form-register-wrap input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(253, 197, 0, 0.3) !important;
}

/* 1. The Glassmorphic Container */
.tutor-login-wrap {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important; /* For Safari */
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 33, 71, 0.08) !important;
}

/* 2. Premium Input Fields */
.tutor-login-wrap input[type="text"],
.tutor-login-wrap input[type="password"] {
    background-color: #F4FAFE !important;
    border: 1px solid #B0D4EE !important; /* Soft Light Azure */
    border-radius: 8px !important;
    padding: 14px 16px !important;
    color: #003366 !important; /* Deep Azure Text */
    transition: all 0.3s ease !important;
}

/* 3. Glowing Focus State for Inputs */
.tutor-login-wrap input[type="text"]:focus,
.tutor-login-wrap input[type="password"]:focus {
    border-color: #00A8FF !important; /* Electric Cyan */
    box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.2) !important;
    outline: none !important;
}

/* 4. Brand-Aligned Checkbox */
.tutor-login-wrap input[type="checkbox"] {
    accent-color: #003366 !important; /* Deep Azure Check */
    transform: scale(1.1);
}

/* 5. Styled "Register Here" Link */
.tutor-login-wrap .tutor-text-center a {
    color: #003366 !important; /* Deep Azure */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.tutor-login-wrap .tutor-text-center a:hover {
    color: #00A8FF !important; /* Shifts to Cyan on hover */
    text-decoration: underline;
}