/* ========================================
   COLOUR & WRITE FOR KIDS
   V2 GLOBAL DESIGN SYSTEM
   ======================================== */


/* ========================================
   LIGHT THEME
   ======================================== */

:root {

    /* ====================================
       BRAND COLOURS
    ==================================== */

    --primary: #4DA8FF;
    --primary-dark: #2F8EE5;

    --heading: #2E3A59;

    --text: #52627A;
    --text-muted: #666666;
    --text-light: #888888;

    --coral: #FF6B6B;
    --yellow: #FFD54F;
    --pink: #FF5B8F;
    --teal: #45C7BC;
    --purple: #8B6FD9;


    /* ====================================
       BACKGROUNDS / SURFACES
    ==================================== */

    --background: #F6F9FC;

    --surface: #FFFFFF;

    --surface-warm: #FFF9E8;

    --surface-teal: #F1FBFA;

    --surface-yellow: #FFF8E7;


    /* ====================================
       BORDERS
    ==================================== */

    --border: #E5EAF0;


    /* ====================================
       RADIUS
    ==================================== */

    --radius-small: 14px;

    --radius-button: 16px;

    --radius-card: 20px;

    --radius-pill: 50px;

    --radius-tag: 50px;

    --radius-large: 30px;


    /* ====================================
       SHADOWS
    ==================================== */

    --shadow-small:
        0 4px 12px rgba(30, 50, 80, 0.06);

    --shadow-card:
        0 8px 24px rgba(30, 50, 80, 0.08);

    --shadow-medium:
        0 10px 28px rgba(30, 50, 80, 0.10);

    --shadow-hover:
        0 14px 32px rgba(30, 50, 80, 0.12);


    /* ====================================
       EFFECTS
    ==================================== */

    --focus-ring:
        0 0 0 4px rgba(77, 168, 255, 0.18);

    --transition: 0.25s ease;
}


/* ========================================
   DARK THEME
   ======================================== */

[data-theme="dark"] {

    /* ====================================
       BACKGROUNDS / SURFACES
    ==================================== */

    --background: #111827;

    --surface: #1B2638;

    --surface-warm: #292A2D;

    --surface-teal: #182E31;

    --surface-yellow: #292A2D;


    /* ====================================
       TEXT
    ==================================== */

    --heading: #F3F6FA;

    --text: #DCE5F0;

    --text-muted: #B8C3D4;

    --text-light: #8F9CAF;


    /* ====================================
       BORDERS
    ==================================== */

    --border: #34445C;


    /* ====================================
       BRAND COLOURS
    ==================================== */

    --primary: #5AAFFF;

    --primary-dark: #79BCFF;

    --teal: #45C7BC;

    --yellow: #FFD968;

    --coral: #FF7777;

    --pink: #FF709D;

    --purple: #A17BE8;


    /* ====================================
       SHADOWS
    ==================================== */

    --shadow-small:
        0 4px 15px rgba(0, 0, 0, 0.18);

    --shadow-card:
        0 8px 25px rgba(0, 0, 0, 0.25);

    --shadow-medium:
        0 10px 28px rgba(0, 0, 0, 0.30);

    --shadow-hover:
        0 14px 30px rgba(0, 0, 0, 0.35);


    /* ====================================
       FOCUS
    ==================================== */

    --focus-ring:
        0 0 0 4px rgba(90, 175, 255, 0.22);
}


/* ========================================
   GLOBAL RESET
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ========================================
   HTML
   ======================================== */

html {
    scroll-behavior: smooth;
}


/* ========================================
   BODY
   ======================================== */

body {
    font-family: 'Nunito', sans-serif;

    background: var(--background);

    color: var(--text);

    min-height: 100vh;

    transition:
        background-color var(--transition),
        color var(--transition);
}


/* ========================================
   GLOBAL LINKS
   ======================================== */

a {
    color: inherit;
}


/* ========================================
   GLOBAL BUTTON
   ======================================== */

button {
    font-family: inherit;
}


/* ========================================
   GLOBAL FORM CONTROLS
   ======================================== */

input,
textarea,
select {
    font-family: inherit;

    background: var(--surface);

    color: var(--text);

    border-color: var(--border);

    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition);
}


/* ========================================
   FORM PLACEHOLDER
   ======================================== */

input::placeholder,
textarea::placeholder {
    color: var(--text-light);
}


/* ========================================
   FOCUS STATE
   ======================================== */

input:focus,
textarea:focus,
select:focus {
    outline: none;

    box-shadow: var(--focus-ring);
}


/* ========================================
   BUTTON ACCESSIBILITY FOCUS
   ======================================== */

button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--primary);

    outline-offset: 3px;
}


/* ========================================
   CTA
   ======================================== */

.cta {
    text-align: center;

    margin: 80px auto;
}


/* ========================================
   CTA HEADING
   ======================================== */

.cta h2 {
    font-size: 42px;

    color: var(--heading);

    margin-bottom: 0;

    line-height: 1.25;
}


/* ========================================
   CTA TEXT
   ======================================== */

.cta p {
    margin: 20px 0 35px;

    color: var(--text-muted);

    font-size: 18px;

    line-height: 1.7;
}


/* ========================================
   CTA BUTTON
   ======================================== */

.cta button {
    background: var(--primary);

    color: #FFFFFF;

    border: none;

    padding: 16px 32px;

    border-radius: var(--radius-button);

    cursor: pointer;

    font-size: 18px;

    font-weight: 700;

    transition:
        background-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


/* ========================================
   CTA BUTTON HOVER
   ======================================== */

.cta button:hover {
    background: var(--primary-dark);

    transform: translateY(-2px);

    box-shadow: var(--shadow-small);
}


/* ========================================
   GLOBAL SELECTION
   ======================================== */

::selection {
    background: var(--primary);

    color: #FFFFFF;
}


/* ========================================
   DARK MODE — FORM CONTROLS
   ======================================== */

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--surface);

    color: var(--text);

    border-color: var(--border);
}


[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-light);
}


/* ========================================
   DARK MODE — CONTENT TRANSITIONS
   ======================================== */

body,
.navbar,
.menu,
.card,
.category-card,
.worksheet-card,
.worksheet-row,
.worksheet-page,
.info-card,
.learn-card,
.content-card,
.video-container,
.video-card,
.teacher-tips,
.nav-card,
.related-card,
.newsletter,
footer {
    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}


/* ========================================
   MOBILE CTA
   ======================================== */

@media (max-width: 768px) {

    .cta {
        margin: 50px auto;

        padding: 0 20px;
    }


    .cta h2 {
        font-size: 32px;

        line-height: 1.3;
    }


    .cta p {
        font-size: 16px;
    }
}


/* ========================================
   SMALL MOBILE
   ======================================== */

@media (max-width: 480px) {

    .cta {
        margin: 40px auto;
    }


    .cta h2 {
        font-size: 29px;
    }
}

/* ========================================
   V2 DARK MODE — MASTER PAGE OVERRIDES
   Add this at the VERY END of style.css
======================================== */


/* ========================================
   ABOUT / CONTENT PAGES
======================================== */

[data-theme="dark"] .content-page {
    background: var(--background) !important;
    color: var(--text) !important;
}

[data-theme="dark"] .content-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-card);
}

[data-theme="dark"] .content-card h1,
[data-theme="dark"] .content-card h2,
[data-theme="dark"] .content-card h3,
[data-theme="dark"] .content-card h4 {
    color: var(--heading) !important;
}

[data-theme="dark"] .content-card p,
[data-theme="dark"] .content-card li,
[data-theme="dark"] .content-card span {
    color: var(--text-muted) !important;
}


/* ========================================
   PAGE HEADER
======================================== */

[data-theme="dark"] .page-header {
    background:
        linear-gradient(
            135deg,
            var(--surface-warm),
            var(--surface-teal)
        ) !important;

    border-color: var(--border) !important;
}

[data-theme="dark"] .page-header h1 {
    color: var(--heading) !important;
}

[data-theme="dark"] .page-header p {
    color: var(--text-muted) !important;
}


/* ========================================
   WHY US SECTION
======================================== */

[data-theme="dark"] .why-us {
    background: var(--background) !important;
    color: var(--text) !important;
}

[data-theme="dark"] .why-us h2 {
    color: var(--heading) !important;
}


/* ========================================
   WHY US CARDS
======================================== */

[data-theme="dark"] .why-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-card);
}

[data-theme="dark"] .why-card h3 {
    color: var(--heading) !important;
}

[data-theme="dark"] .why-card p {
    color: var(--text-muted) !important;
}


/* ========================================
   BLOG SECTION
======================================== */

[data-theme="dark"] .blog-posts {
    background: var(--background) !important;
}

[data-theme="dark"] .blog-posts h1,
[data-theme="dark"] .blog-posts h2,
[data-theme="dark"] .blog-posts h3 {
    color: var(--heading) !important;
}

[data-theme="dark"] .blog-posts p {
    color: var(--text-muted) !important;
}


/* ========================================
   COMING SOON
======================================== */

[data-theme="dark"] .coming-soon {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

[data-theme="dark"] .coming-soon h2 {
    color: var(--heading) !important;
}

[data-theme="dark"] .coming-soon p {
    color: var(--text-muted) !important;
}


/* ========================================
   GENERAL DARK PAGE TEXT
======================================== */

[data-theme="dark"] .content-page a {
    color: var(--primary);
}

[data-theme="dark"] .content-page strong {
    color: var(--heading);
}

/* ========================================
   V2 SPARKLE PAGE TRANSITION
======================================== */

.page-transition-overlay {

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 999999;

    opacity: 0;

    visibility: hidden;
}


/* ========================================
   ACTIVE OVERLAY
======================================== */

.page-transition-overlay.active {

    opacity: 1;

    visibility: visible;
}


/* ========================================
   SPARKLE 1 — MAIN
======================================== */

.sparkle-one {

    position: absolute;

    left: 50%;

    top: 50%;

    color: var(--primary);

    font-size: 30px;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.2);
}


.page-transition-overlay.active
.sparkle-one {

    animation:
        sparkleMain 350ms ease-out forwards;
}


/* ========================================
   SPARKLE 2
======================================== */

.sparkle-two {

    position: absolute;

    left: 46%;

    top: 47%;

    color: var(--yellow);

    font-size: 18px;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.2);
}


.page-transition-overlay.active
.sparkle-two {

    animation:
        sparkleSmall 350ms ease-out forwards;
}


/* ========================================
   SPARKLE 3
======================================== */

.sparkle-three {

    position: absolute;

    left: 55%;

    top: 53%;

    color: var(--pink);

    font-size: 16px;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.2);
}


.page-transition-overlay.active
.sparkle-three {

    animation:
        sparkleSmall 350ms ease-out 40ms forwards;
}


/* ========================================
   MAIN SPARKLE ANIMATION
======================================== */

@keyframes sparkleMain {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.2)
            rotate(0deg);
    }

    35% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.2)
            rotate(20deg);
    }

    100% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.8)
            rotate(45deg);
    }
}


/* ========================================
   SMALL SPARKLE ANIMATION
======================================== */

@keyframes sparkleSmall {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.2)
            rotate(0deg);
    }

    40% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(25deg);
    }

    100% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.5)
            rotate(50deg);
    }
}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

    .page-transition-overlay {

        display: none !important;
    }
}
/* ========================================
   V2 SPARKLE PAGE TRANSITION
======================================== */

.page-transition-overlay {

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 999999;

    opacity: 0;

    visibility: hidden;
}


/* ========================================
   ACTIVE OVERLAY
======================================== */

.page-transition-overlay.active {

    opacity: 1;

    visibility: visible;
}


/* ========================================
   ALL TRANSITION SPARKLES
======================================== */

.transition-sparkle {

    position: absolute;

    display: block;

    line-height: 1;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.2)
        rotate(0deg);

    will-change:
        transform,
        opacity;
}


/* ========================================
   ACTIVE SPARKLES
======================================== */

.page-transition-overlay.active
.transition-sparkle {

    animation:
        sparkleBurst 350ms ease-out forwards;
}


/* ========================================
   BLUE SPARKLES
======================================== */

.transition-sparkle:nth-child(3n + 1) {

    color: var(--primary);

    text-shadow:
        0 0 8px rgba(77, 168, 255, 0.50);
}


/* ========================================
   YELLOW SPARKLES
======================================== */

.transition-sparkle:nth-child(3n + 2) {

    color: var(--yellow);

    text-shadow:
        0 0 8px rgba(255, 213, 79, 0.50);
}


/* ========================================
   PINK SPARKLES
======================================== */

.transition-sparkle:nth-child(3n + 3) {

    color: var(--pink);

    text-shadow:
        0 0 8px rgba(255, 91, 143, 0.45);
}


/* ========================================
   SPARKLE BURST
======================================== */

@keyframes sparkleBurst {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.2)
            rotate(0deg);
    }


    30% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.15)
            rotate(20deg);
    }


    60% {

        opacity: 0.85;

        transform:
            translate(-50%, -50%)
            scale(1.35)
            rotate(45deg);
    }


    100% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.8)
            rotate(70deg);
    }
}


/* ========================================
   DARK MODE SPARKLES
   SLIGHTLY BRIGHTER
======================================== */

[data-theme="dark"]
.transition-sparkle:nth-child(3n + 1) {

    color: #8ED8FF;

    text-shadow:
        0 0 10px rgba(142, 216, 255, 0.55);
}


[data-theme="dark"]
.transition-sparkle:nth-child(3n + 2) {

    color: #FFE27A;

    text-shadow:
        0 0 10px rgba(255, 226, 122, 0.50);
}


[data-theme="dark"]
.transition-sparkle:nth-child(3n + 3) {

    color: #FF8FB2;

    text-shadow:
        0 0 10px rgba(255, 143, 178, 0.45);
}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

    .page-transition-overlay {

        display: none !important;
    }
}
/* =========================================================
   V2 DARK MODE — SEARCH PAGE
   Soothing dark theme
   ========================================================= */

html[data-theme="dark"] body .search-hero {

    background:
        linear-gradient(
            135deg,
            #202B32,
            #123B3B
        ) !important;

    border-color: #30464B !important;
}


/* SEARCH HERO TEXT */

html[data-theme="dark"] body .search-hero h1 {

    color: #F4F7FA !important;
}

html[data-theme="dark"] body .search-hero h1 span {

    color: #70B9FF !important;
}

html[data-theme="dark"] body .search-hero p {

    color: #B8C8D2 !important;
}


/* SEARCH BADGE */

html[data-theme="dark"] body .search-badge {

    color: #DCEAF2 !important;
}


/* MAIN SEARCH BOX */

html[data-theme="dark"] body .global-search-box {

    background: #26343B !important;

    border-color: #40555E !important;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.18) !important;
}


/* MAIN SEARCH INPUT */

html[data-theme="dark"] body #searchInput {

    background: #1D2930 !important;

    color: #F4F7FA !important;

    border-color: #40555E !important;
}


/* SEARCH INPUT PLACEHOLDER */

html[data-theme="dark"] body #searchInput::placeholder {

    color: #91A7B5 !important;

    opacity: 1 !important;
}


/* SEARCH INPUT FOCUS */

html[data-theme="dark"] body #searchInput:focus {

    background: #202F37 !important;

    border-color: #4DA8FF !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(77, 168, 255, 0.15) !important;
}


/* SEARCH BUTTON */

html[data-theme="dark"] body #searchButton {

    background: #4DA8FF !important;

    color: #FFFFFF !important;

    border-color: #3D96E8 !important;
}


/* SEARCH RESULTS AREA */

html[data-theme="dark"] body .search-results-section {

    background: transparent !important;

    color: #DCE6EC !important;
}


/* SEARCH STATUS */

html[data-theme="dark"] body .search-status {

    color: #8FB7D6 !important;
}


/* =========================================================
   NAVBAR SEARCH — DARK MODE
   ========================================================= */

html[data-theme="dark"] body .navbar .desktop-search {

    background: #26343B !important;

    border-color: #40555E !important;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.18) !important;
}


html[data-theme="dark"] body .navbar #nav-search-input {

    color: #F4F7FA !important;

    background: transparent !important;
}


html[data-theme="dark"] body .navbar #nav-search-input::placeholder {

    color: #91A7B5 !important;

    opacity: 1 !important;
}


html[data-theme="dark"] body .navbar .desktop-search:hover {

    background: #30434C !important;

    border-color: #527080 !important;
}
/* =========================================================
   SMOOTH PAGE TRANSITION
========================================================= */

html {
    opacity: 1;
    transition: opacity 0.35s ease;
}


/* Page leaving */

html.page-leaving {
    opacity: 0;
}


/* Page entering */

html.page-entering {
    animation: pageEnter 0.45s ease forwards;
}


@keyframes pageEnter {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* Do not interfere with accessibility */

@media (prefers-reduced-motion: reduce) {

    html {
        transition: none;
    }

    html.page-entering {
        animation: none;
    }

}