/* =========================================================
   COLOUR & WRITE FOR KIDS
   NAVBAR — CLEAN FINAL VERSION
   ========================================================= */


/* =========================================================
   NAVBAR
   ========================================================= */

/* ================================
   NAVBAR SEARCH
================================ */

/* =========================================
   DESKTOP NAV SEARCH ONLY
   DO NOT AFFECT MOBILE MENU
========================================= */

@media (min-width: 769px) {

    .desktop-search {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .desktop-search .nav-search-form {
        width: 215px;
        height: 58px;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
    }

    .desktop-search #nav-search-input {
        width: 100%;
        height: 58px;
        box-sizing: border-box;

        border: 1px solid #c9def5;
        border-radius: 30px;

        background: #f8fbff;

        padding: 0 25px;

        font-family: inherit;
        font-size: 16px;
        font-weight: 600;

        color: #31527c;

        outline: none;
    }

    .desktop-search #nav-search-input::placeholder {
        color: #31527c;
        opacity: 1;
    }

    .desktop-search #nav-search-input:focus {
        border-color: #4da3f5;
        box-shadow: 0 0 0 3px rgba(77, 163, 245, 0.12);
    }

    .desktop-search #nav-search-input::-webkit-search-cancel-button,
    .desktop-search #nav-search-input::-webkit-search-decoration,
    .desktop-search #nav-search-input::-webkit-search-results-button,
    .desktop-search #nav-search-input::-webkit-search-results-decoration {
        -webkit-appearance: none;
        appearance: none;
    }
}


/* =========================================
   MOBILE
   LEAVE MOBILE MENU COMPLETELY ALONE
========================================= */

@media (max-width: 768px) {

    .desktop-search {
        display: none !important;
    }

}


/* =========================================================
   LOGO
   ========================================================= */

.navbar .logo {
    width: 100px;
    min-width: 100px;
    height: 82px;

    flex: 0 0 100px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    overflow: visible;

    margin-right: 18px;

    position: relative;
    z-index: 20;
}

.navbar .logo img {
    width: 90px;
    max-width: 90px;

    height: auto;
    max-height: 78px;

    object-fit: contain;

    display: block;
}


/* =========================================================
   MAIN MENU
   ========================================================= */

.navbar .menu {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    list-style: none;

    overflow: visible;
}


/* =========================================================
   MENU ITEMS
   ========================================================= */

.navbar .menu > li {
    list-style: none;

    margin: 0;
    padding: 0;

    flex: 0 1 auto;
    min-width: 0;

    overflow: visible;
}


/* =========================================================
   NAVIGATION BUTTON
   ========================================================= */

.navbar .nav-item {

    --nav-color: #4DA3FF;
    --nav-bg: #EAF4FF;
    --nav-bg-hover: #DCEEFF;

    width: 140px;
    min-width: 140px;

    height: 52px;;

    flex: 0 0 140px;

    box-sizing: border-box;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    /*
       Space is reserved on the left for the
       PNG which peeks outside the button.
    */
    padding: 0 12px 0 48px;

    border-radius: 20px;

    border: 1px solid transparent;

    background: var(--nav-bg);

    color: #243A62;

    text-decoration: none;

    font-family: "Nunito", sans-serif;

    font-size: 16px;
    font-weight: 800;

    line-height: 1.1;

    white-space: nowrap;

    /*
       IMPORTANT:
       The button itself must NOT clip the PNG.
    */
    overflow: visible;

    box-shadow: none;

    transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease,
        color 0.22s ease;
}


/* =========================================================
   INDIVIDUAL NAV COLOURS
   ========================================================= */

.navbar .nav-home {
    --nav-color: #3188D5;
    --nav-bg: #EAF4FF;
    --nav-bg-hover: #DCEEFF;
}

.navbar .nav-worksheets {
    --nav-color: #4B9F73;
    --nav-bg: #ECF9F2;
    --nav-bg-hover: #DDF4E8;
}

.navbar .nav-categories {
    --nav-color: #C49300;
    --nav-bg: #FFF8E8;
    --nav-bg-hover: #FFF0C8;
}

.navbar .nav-blog {
    --nav-color: #7955BE;
    --nav-bg: #F3EEFF;
    --nav-bg-hover: #E9E0FF;
}

.navbar .nav-about {
    --nav-color: #CF5E88;
    --nav-bg: #FFF0F5;
    --nav-bg-hover: #FFE3ED;
}

.navbar .nav-contact {
    --nav-color: #C7793D;
    --nav-bg: #FFF4E9;
    --nav-bg-hover: #FFE9D5;
}


/* =========================================================
   NAV BUTTON HOVER
   ========================================================= */

.navbar .nav-item:hover {
    background: var(--nav-bg-hover);

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

    color: var(--nav-color);

    transform: translateY(-3px);

    box-shadow:
        0 7px 16px rgba(30, 60, 90, 0.10);
}


/* =========================================================
   PNG ICON
   HALF INSIDE + HALF OUTSIDE
   ========================================================= */

/*
   IMPORTANT:

   We position .nav-art itself outside the left edge.

   Do NOT position .nav-art img absolutely.

   This prevents the PNG from being clipped or
   positioned relative to the wrong element.
*/

/* =========================================================
   NAV ICON — 125% DESKTOP SIZE
   ========================================================= */

.navbar .nav-art {
    position: absolute;

    left: -27px;
    top: 50%;

    transform: translateY(-50%);

    width: 85px;
    height: 85px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 10;
}

.navbar .nav-art img {
    width: 70px;
    height: 70px;

    max-width: 70px;
    max-height: 70px;

    object-fit: contain;
}


/* =========================================================
   PNG IMAGE
   ========================================================= */

/* =========================================================
   NAV ICON IMAGE
   ========================================================= */

.navbar .nav-art img {

    display: block;

    width: 70px;
    height: 70px;

    max-width: 70px;
    max-height: 70px;

    object-fit: contain;

    transform: none;

    overflow: visible;

    transition:
        transform 0.25s ease;
}

/* =========================================================
   IMAGE HOVER
   ========================================================= */

.navbar .nav-item:hover .nav-art img {
    transform: scale(1.07);
}


/* =========================================================
   NAV LABEL
   ========================================================= */

.navbar .nav-label {

    display: block;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    line-height: 1.2;

    text-align: center;

    color: inherit;

    position: relative;
    z-index: 2;

    transition:
        color 0.22s ease;
}


/* =========================================================
   SEARCH BUTTON
   ========================================================= */

.navbar .desktop-search {

    width: 180px;
    min-width: 180px;

    height: 58px;

    flex: 0 0 180px;

    margin-left: auto;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 0 20px;

    border-radius: 30px;

    border: 1px solid #C9DDF0;

    background: #F4F9FF;

    color: #2873AF;

    text-decoration: none;

    font-family: "Nunito", sans-serif;

    font-size: 15px;

    font-weight: 800;

    white-space: nowrap;

    overflow: hidden;

    position: relative;

    z-index: 20;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================================
   SEARCH ICON
   ========================================================= */

.navbar .nav-search-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    font-size: 25px;

    line-height: 1;
}


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

.navbar .nav-search-text {

    display: block;

    width: auto;

    white-space: nowrap;

    color: inherit;

    overflow: visible;
}


/* =========================================================
   SEARCH HOVER
   ========================================================= */

.navbar .desktop-search:hover {

    background: #E8F4FF;

    border-color: #9CC8ED;

    color: #1F659F;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(50, 120, 180, 0.12);
}


/* =========================================================
   DESKTOP THEME TOGGLE
   ========================================================= */

.navbar .desktop-theme-toggle {

    width: 64px;
    min-width: 64px;

    height: 58px;

    flex: 0 0 64px;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    border: 1px solid #CFE0F0;

    background: #F4F9FF;

    color: #3278B8;

    cursor: pointer;

    position: relative;

    z-index: 20;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================================
   THEME HOVER
   ========================================================= */

.navbar .desktop-theme-toggle:hover {

    background: #E8F4FF;

    border-color: #A9CDEB;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(50, 120, 180, 0.12);
}


/* =========================================================
   THEME ICON
   ========================================================= */

.navbar .theme-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    line-height: 1;

    font-size: 0;
}

.navbar .theme-icon svg {

    width: 30px;
    height: 30px;

    display: block;

    overflow: visible;
}


/* =========================================================
   LIGHT MODE — NIGHT THEME TOGGLE
   ========================================================= */

html[data-theme="light"] .navbar .desktop-theme-toggle {

    background: #173B63;

    border-color: #285580;

    box-shadow:
        0 3px 12px rgba(23, 59, 99, 0.20);
}


/* MOON + STARS */

html[data-theme="light"] .navbar .desktop-theme-toggle .theme-icon svg {

    width: 30px;
    height: 30px;

    display: block;
}


/* HOVER */

html[data-theme="light"] .navbar .desktop-theme-toggle:hover {

    background: #214B78;

    border-color: #3A6B9C;

    box-shadow:
        0 7px 18px rgba(23, 59, 99, 0.25);
}

/* =========================================================
   DARK MODE
   ========================================================= */

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

    background: #8ED8FF;

    border-color: #72C9F5;

    box-shadow:
        0 3px 12px rgba(72, 155, 200, 0.20);
}

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

    background: #7FD0F8;

    border-color: #62BDEB;
}


/* =========================================================
   MOBILE ELEMENTS — HIDDEN BY DEFAULT
   ========================================================= */

.navbar .mobile-search {
    display: none;
}

.navbar .mobile-theme-toggle {
    display: none;
}

.navbar .menu-toggle {
    display: none;
}

.navbar .hamburger {
    display: none;
}


/* =========================================================
   OLD DOWNLOAD BUTTON
   ========================================================= */

.navbar .download-btn,
.navbar .desktop-download,
.navbar .mobile-download {

    display: none !important;
}


/* =========================================================
   LARGE DESKTOP
   1351px+
   ========================================================= */

@media (min-width: 1351px) {

    .navbar {

        padding-left: 3.5%;
        padding-right: 3.5%;

        gap: 26px;
    }

    .navbar .logo {
        margin-right: 22px;
    }

    .navbar .menu {
        gap: 18px;
    }

    .navbar .nav-item {

        width: 145px;
        min-width: 145px;

        flex-basis: 145px;

        /* REDUCED NAV BUTTON HEIGHT */
        height: 42px;
    }
}


/* =========================================================
   SMALL LAPTOP
   1101px — 1350px
   ========================================================= */

@media (max-width: 1350px) {

    .navbar {

        padding-left: 20px;
        padding-right: 20px;

        gap: 18px;
    }


    /* LOGO */

    .navbar .logo {

        width: 88px;
        min-width: 88px;

        flex-basis: 88px;

        margin-right: 18px;
    }

    .navbar .logo img {

        width: 80px;
        max-width: 80px;

        max-height: 70px;
    }


    /* MENU */

    .navbar .menu {
        gap: 11px;
    }


    /* BUTTON */

    .navbar .nav-item {

        width: 125px;
        min-width: 125px;

        flex-basis: 125px;

        height: 54px;

        padding-left: 44px;
        padding-right: 7px;

        border-radius: 17px;

        font-size: 14px;
    }


    .navbar .nav-art {
    width: 63px;
    height: 63px;

    left: -22px;
}

.navbar .nav-art img {
    width: 63px;
    height: 63px;

    max-width: 63px;
    max-height: 63px;
}


    /* SEARCH */

    .navbar .desktop-search {

        width: 150px;
        min-width: 150px;

        flex-basis: 150px;

        height: 54px;

        padding: 0 15px;
    }


    /* THEME */

    .navbar .desktop-theme-toggle {

        width: 56px;
        min-width: 56px;

        flex-basis: 56px;

        height: 54px;
    }
}


/* =========================================================
   TABLET
   1000px — 1100px
   ========================================================= */

@media (max-width: 1100px) {

    .navbar {

        padding-left: 14px;
        padding-right: 14px;

        gap: 10px;
    }


    /* LOGO */

    .navbar .logo {

        width: 76px;
        min-width: 76px;

        flex-basis: 76px;

        margin-right: 10px;
    }

    .navbar .logo img {

        width: 70px;
        max-width: 70px;

        max-height: 52px;;
    }


    /* MENU */

    .navbar .menu {
        gap: 7px;
    }


    /* BUTTON */

    .navbar .nav-item {

        width: 105px;
        min-width: 105px;

        flex-basis: 105px;

        height: 56px;

        padding-left: 38px;
        padding-right: 5px;

        border-radius: 15px;

        font-size: 12px;
    }


    /* ICON */

.navbar .nav-art {
    width: 53px;
    height: 53px;

    left: -19px;
}

.navbar .nav-art img {
    width: 53px;
    height: 53px;

    max-width: 53px;
    max-height: 53px;
}


    /* SEARCH */

    .navbar .desktop-search {

        width: 120px;
        min-width: 120px;

        flex-basis: 120px;

        height: 50px;

        padding: 0 9px;

        gap: 5px;

        font-size: 12px;
    }


    .navbar .nav-search-icon {

        width: 23px;
        height: 23px;

        flex-basis: 23px;

        font-size: 20px;
    }


    /* THEME */

    .navbar .desktop-theme-toggle {

        width: 50px;
        min-width: 50px;

        flex-basis: 50px;

        height: 50px;
    }

    .navbar .theme-icon svg {

        width: 26px;
        height: 26px;
    }
}


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

@media (max-width: 768px) {

    .navbar {

        width: 100%;

        height: 70px;
        min-height: 70px;

        padding: 0 18px;

        display: flex;

        justify-content: center;
        align-items: center;

        position: sticky;

        top: 0;

        box-sizing: border-box;

        overflow: visible;
    }


    /* =====================================================
       MOBILE LOGO
       ===================================================== */

    .navbar .logo {

        position: absolute;

        left: 50%;
        top: 50%;

        transform: translate(-50%, -50%);

        width: auto;
        min-width: 0;

        height: auto;

        flex: none;

        z-index: 1002;

        overflow: visible;

        margin: 0;
    }

    .navbar .logo img {

        width: auto;

        height: 50px;

        max-width: none;
        max-height: 50px;
    }


    /* =====================================================
       HAMBURGER
       ===================================================== */

    .navbar .hamburger {

        display: flex;

        position: absolute;

        right: 18px;
        top: 50%;

        transform: translateY(-50%);

        width: 42px;
        height: 42px;

        flex-direction: column;

        justify-content: center;
        align-items: center;

        gap: 5px;

        cursor: pointer;

        z-index: 1003;

        box-sizing: border-box;
    }

    .navbar .hamburger span {

        display: block;

        width: 26px;
        height: 3px;

        background: var(--text, #243A62);

        border-radius: 5px;

        transition:
            transform 0.25s ease,
            opacity 0.25s ease,
            background-color 0.25s ease;
    }


    /* =====================================================
       HIDE DESKTOP SEARCH
       ===================================================== */

    .navbar .desktop-search {
        display: none !important;
    }


    /* =====================================================
       HIDE DESKTOP THEME
       ===================================================== */

    .navbar .desktop-theme-toggle {
        display: none;
    }


    /* =====================================================
       MOBILE MENU
       ===================================================== */

    .navbar .menu {

        position: absolute;

        top: 70px;

        left: 0;

        width: 100%;

        background: var(--surface, #ffffff);

        display: none;

        flex-direction: column;

        align-items: center;

        gap: 0;

        margin: 0;

        padding: 10px 18px 20px;

        box-sizing: border-box;

        box-shadow:
            0 12px 25px rgba(30, 60, 90, 0.12);

        border-top:
            1px solid var(--border, #e3eaf2);

        z-index: 1001;

        overflow: visible;
    }


    /* =====================================================
       MOBILE MENU ITEMS
       ===================================================== */

    .navbar .menu > li {

        width: 100%;

        margin: 0;

        padding: 0;

        text-align: center;

        overflow: visible;
    }


    /* =====================================================
       MOBILE NAV BUTTON
       ===================================================== */

    .navbar .menu .nav-item {

        width: 100%;
        min-width: 0;

        height: 56px;

        flex: none;

        padding: 0 20px;

        justify-content: center;

        border-radius: 14px;

        font-size: 16px;

        margin: 4px 0;

        /*
           Mobile buttons do not use the desktop
           peeking-icon arrangement.
        */
        overflow: visible;
    }


    /* =====================================================
       MOBILE IMAGE
       ===================================================== */

    .navbar .menu .nav-art {

        position: relative;

        top: auto;
        left: auto;

        transform: none;

        width: 42px;
        height: 42px;

        margin-right: 10px;

        overflow: visible;

        flex-shrink: 0;
    }

    .navbar .menu .nav-art img {

        width: 40px;
        height: 40px;

        max-width: 40px;
        max-height: 40px;
    }


    /* =====================================================
       MOBILE LABEL
       ===================================================== */

    .navbar .menu .nav-label {

        width: auto;

        overflow: visible;

        text-overflow: clip;

        white-space: nowrap;

        text-align: center;
    }


    /* =====================================================
       MOBILE SEARCH
       ===================================================== */

    .navbar .mobile-search {

        display: block;

        width: 100%;
    }

    .navbar .mobile-search-btn {

        width: 100%;

        height: 52px;

        display: flex;

        align-items: center;
        justify-content: center;

        gap: 8px;

        margin: 5px 0;

        padding: 0;

        box-sizing: border-box;

        border-radius: 14px;

        border: 1px solid #C9DDF0;

        background: #F4F9FF;

        color: #2873AF;

        font-size: 16px;

        font-weight: 800;

        text-decoration: none;
    }


    /* =====================================================
       MOBILE THEME
       ===================================================== */

    .navbar .mobile-theme-toggle {

        display: block;

        width: 100%;

        padding: 8px 0 0;

        text-align: center;
    }

    .navbar .mobile-theme-toggle .theme-toggle {

        display: inline-flex;

        width: 76px;
        height: 48px;

        margin: 0 auto;

        padding: 0;

        align-items: center;
        justify-content: center;

        border-radius: 18px;

        background: #315B7D;

        border: 1px solid #264B69;

        cursor: pointer;
    }

    .navbar .mobile-theme-toggle .theme-label {

        font-size: 15px;

        color: #ffffff;
    }


    /* =====================================================
       SHOW MOBILE MENU
       ===================================================== */

    .navbar .menu-toggle:checked ~ .menu {
        display: flex;
    }


    /* =====================================================
       HAMBURGER → X
       ===================================================== */

    .navbar .menu-toggle:checked + .hamburger span:nth-child(1) {

        transform:
            translateY(8px)
            rotate(45deg);
    }

    .navbar .menu-toggle:checked + .hamburger span:nth-child(2) {

        opacity: 0;
    }

    .navbar .menu-toggle:checked + .hamburger span:nth-child(3) {

        transform:
            translateY(-8px)
            rotate(-45deg);
    }
}


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

@media (max-width: 480px) {

    .navbar {

        height: 65px;
        min-height: 65px;

        padding: 0 15px;
    }


    .navbar .logo img {

        height: 47px;

        max-height: 47px;
    }


    .navbar .hamburger {

        right: 15px;

        width: 40px;
        height: 40px;
    }


    .navbar .hamburger span {

        width: 25px;
        height: 3px;
    }


    .navbar .menu {

        top: 65px;

        padding-left: 14px;
        padding-right: 14px;
    }


    .navbar .menu .nav-item {

        height: 53px;

        font-size: 15px;
    }


    .navbar .menu .nav-art {

        width: 39px;
        height: 39px;
    }


    .navbar .menu .nav-art img {

        width: 37px;
        height: 37px;

        max-width: 37px;
        max-height: 37px;
    }
}


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

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

    .navbar,
    .navbar *,
    .navbar *::before,
    .navbar *::after {

        transition: none !important;

        animation: none !important;
    }
}
/* =========================================================
   FINAL DESKTOP NAV ICON OVERRIDE
   ICONS = 1.35 × CURRENT SIZE
   50px × 1.35 = 67.5px
   ========================================================= */

@media (min-width: 1351px) {

    /* Allow PNG to come outside the button */
    .navbar .nav-item {
        overflow: visible !important;
    }

    /* PNG HOLDER */
    .navbar .nav-art {
        position: absolute !important;

        left: -22px !important;
        top: 50% !important;

        width: 68px !important;
        height: 68px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: visible !important;

        transform: translateY(-50%) !important;

        z-index: 20 !important;
        pointer-events: none !important;
    }

    /* ACTUAL PNG */
    .navbar .nav-art img {
        display: block !important;

        width: 68px !important;
        height: 68px !important;

        max-width: 68px !important;
        max-height: 68px !important;

        object-fit: contain !important;

        overflow: visible !important;

        transform: none !important;
    }

}
/* =========================================================
   FINAL NAV ICON BOTTOM ALIGNMENT
   Keeps current icon size — only adjusts vertical position
   ========================================================= */

@media (min-width: 1351px) {

    /* Default */
    .navbar .nav-art img {
        transform: translateY(0) !important;
    }

    /* Categories */
    .navbar .nav-categories .nav-art img {
        transform: translateY(2px) !important;
    }

    /* Blog */
    .navbar .nav-blog .nav-art img {
        transform: translateY(7px) !important;
    }

    /* About */
    .navbar .nav-about .nav-art img {
        transform: translateY(7px) !important;
    }

    /* Contact */
    .navbar .nav-contact .nav-art img {
        transform: translateY(7px) !important;
    }

    /* Keep alignment when hovering */
    .navbar .nav-categories:hover .nav-art img {
        transform: translateY(2px) scale(1.07) !important;
    }

    .navbar .nav-blog:hover .nav-art img {
        transform: translateY(7px) scale(1.07) !important;
    }

    .navbar .nav-about:hover .nav-art img {
        transform: translateY(7px) scale(1.07) !important;
    }

    .navbar .nav-contact:hover .nav-art img {
        transform: translateY(7px) scale(1.07) !important;
    }
}
/* =========================================================
   DARK MODE — NAVIGATION BUTTONS
   Darker backgrounds + LIGHT TEXT
   PNG ICONS ARE NOT CHANGED
   ========================================================= */

[data-theme="dark"] .navbar .nav-item:nth-child(1) {
    background: #26364A !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .navbar .nav-item:nth-child(2) {
    background: #263A32 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .navbar .nav-item:nth-child(3) {
    background: #403A27 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .navbar .nav-item:nth-child(4) {
    background: #342D43 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .navbar .nav-item:nth-child(5) {
    background: #432F35 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .navbar .nav-item:nth-child(6) {
    background: #293B38 !important;
    color: #FFFFFF !important;
}


/* =========================================================
   FORCE NAVIGATION TEXT TO REMAIN VISIBLE
   ========================================================= */

[data-theme="dark"] .navbar .nav-item a,
[data-theme="dark"] .navbar .nav-item .nav-label,
[data-theme="dark"] .navbar .nav-item span {
    color: #FFFFFF !important;
}


/* =========================================================
   HOVER
   ========================================================= */

[data-theme="dark"] .navbar .nav-item:hover a,
[data-theme="dark"] .navbar .nav-item:hover .nav-label,
[data-theme="dark"] .navbar .nav-item:hover span {
    color: #FFFFFF !important;
}
/* =========================================================
   FINAL NAV ICON HOVER — SAME EFFECT FOR ALL 6
   ========================================================= */

@media (min-width: 1351px) {

    .navbar .nav-item .nav-art img {
        transition: transform 0.22s ease !important;
        transform-origin: center center !important;
        filter: none !important;
    }

    /* HOME */
    .navbar .nav-item:nth-child(1):hover .nav-art img {
        transform: translateY(0) scale(1.07) !important;
    }

    /* WORKSHEETS */
    .navbar .nav-item:nth-child(2):hover .nav-art img {
        transform: translateY(0) scale(1.07) !important;
    }

    /* CATEGORIES */
    .navbar .nav-item:nth-child(3):hover .nav-art img {
        transform: translateY(2px) scale(1.07) !important;
    }

    /* BLOG */
    .navbar .nav-item:nth-child(4):hover .nav-art img {
        transform: translateY(7px) scale(1.07) !important;
    }

    /* ABOUT */
    .navbar .nav-item:nth-child(5):hover .nav-art img {
        transform: translateY(7px) scale(1.07) !important;
    }

    /* CONTACT */
    .navbar .nav-item:nth-child(6):hover .nav-art img {
        transform: translateY(7px) scale(1.07) !important;
    }
}
/* =========================================================
   FINAL NAVBAR CLEANUP
   Fixes:
   1. Smaller, properly aligned PNG icons
   2. Clean search box with placeholder
   3. Shorter navbar / buttons
   ========================================================= */


/* =========================================================
   1. DESKTOP NAVBAR HEIGHT
   ========================================================= */

@media (min-width: 769px) {

    body .navbar {
        height: 92px !important;
        min-height: 92px !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        box-sizing: border-box !important;

        align-items: center !important;

        overflow: visible !important;
    }


    /* =====================================================
       NAV BUTTONS
       ===================================================== */

    body .navbar .nav-item {

        height: 54px !important;
        min-height: 54px !important;

        box-sizing: border-box !important;

        overflow: visible !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        position: relative !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    /* =====================================================
       NAV ICON HOLDER
       Smaller than the current 68px
       ===================================================== */

    body .navbar .nav-art {

        width: 60px !important;
        height: 60px !important;

        left: -20px !important;

        top: 50% !important;

        transform: translateY(-50%) !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        overflow: visible !important;

        z-index: 20 !important;

        pointer-events: none !important;
    }


    /* =====================================================
       NAV PNG
       ===================================================== */

    body .navbar .nav-art img {

        width: 60px !important;
        height: 60px !important;

        max-width: 60px !important;
        max-height: 60px !important;

        object-fit: contain !important;

        display: block !important;

        overflow: visible !important;

        transform: none !important;

        transition:
            transform 0.22s ease !important;
    }


    /* =====================================================
       ICON HOVER
       ===================================================== */

    body .navbar .nav-item:hover .nav-art img {

        transform: scale(1.08) !important;
    }


    /* =====================================================
       KEEP SPECIAL ICON VERTICAL ALIGNMENT
       ===================================================== */

    body .navbar .nav-categories .nav-art img {
        transform: translateY(2px) !important;
    }

    body .navbar .nav-blog .nav-art img {
        transform: translateY(4px) !important;
    }

    body .navbar .nav-about .nav-art img {
        transform: translateY(4px) !important;
    }

    body .navbar .nav-contact .nav-art img {
        transform: translateY(4px) !important;
    }


    body .navbar .nav-categories:hover .nav-art img {
        transform:
            translateY(2px)
            scale(1.08) !important;
    }

    body .navbar .nav-blog:hover .nav-art img {
        transform:
            translateY(4px)
            scale(1.08) !important;
    }

    body .navbar .nav-about:hover .nav-art img {
        transform:
            translateY(4px)
            scale(1.08) !important;
    }

    body .navbar .nav-contact:hover .nav-art img {
        transform:
            translateY(4px)
            scale(1.08) !important;
    }


    /* =====================================================
       2. DESKTOP SEARCH
       ===================================================== */

    body .navbar .desktop-search {

        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;

        height: 54px !important;

        flex: 0 0 200px !important;

        margin-left: auto !important;

        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        border: 1px solid #C9DDF0 !important;

        border-radius: 28px !important;

        background: #F4F9FF !important;

        overflow: hidden !important;
    }


    /* =====================================================
       SEARCH FORM
       ===================================================== */

    body .navbar .nav-search-form {

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       SEARCH INPUT
       No magnifier
       ===================================================== */

    body .navbar .nav-search-form input,
    body .navbar #nav-search-input {

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;

        padding: 0 18px !important;

        box-sizing: border-box !important;

        border: none !important;
        outline: none !important;

        border-radius: 28px !important;

        background: transparent !important;

        color: #2873AF !important;

        font-family: "Nunito", sans-serif !important;

        font-size: 15px !important;
        font-weight: 700 !important;

        appearance: none !important;

        -webkit-appearance: none !important;
    }


    /* =====================================================
       SEARCH PLACEHOLDER
       ===================================================== */

    body .navbar #nav-search-input::placeholder {

        color: #6B8299 !important;

        opacity: 1 !important;
    }


    /* =====================================================
       SEARCH FOCUS
       Removes ugly browser dark/blue field
       ===================================================== */

    body .navbar #nav-search-input:focus {

        outline: none !important;

        border: none !important;

        box-shadow: none !important;

        background: transparent !important;
    }


    /* Remove browser clear button if present */

    body .navbar #nav-search-input::-webkit-search-cancel-button {

        -webkit-appearance: none !important;
        appearance: none !important;
    }


    /* =====================================================
       SEARCH HOVER
       ===================================================== */

    body .navbar .desktop-search:hover {

        background: #E8F4FF !important;

        border-color: #9CC8ED !important;

        transform: translateY(-2px) !important;

        box-shadow:
            0 7px 18px rgba(50, 120, 180, 0.12) !important;
    }


    /* =====================================================
       3. THEME BUTTON — MATCH NAVBAR HEIGHT
       ===================================================== */

    body .navbar .desktop-theme-toggle {

        width: 64px !important;
        min-width: 64px !important;

        height: 54px !important;

        flex: 0 0 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;
    }

}


/* =========================================================
   DARK MODE — NAV BUTTONS
   Keep text clearly visible
   ========================================================= */

@media (min-width: 769px) {

    html[data-theme="dark"] .navbar .nav-item,
    [data-theme="dark"] .navbar .nav-item {

        color: #FFFFFF !important;
    }


    html[data-theme="dark"] .navbar .nav-item:hover,
    [data-theme="dark"] .navbar .nav-item:hover {

        color: #FFFFFF !important;
    }


    html[data-theme="dark"] .navbar .nav-label,
    [data-theme="dark"] .navbar .nav-label {

        color: #FFFFFF !important;
    }


    html[data-theme="dark"] .navbar .nav-item:hover .nav-label,
    [data-theme="dark"] .navbar .nav-item:hover .nav-label {

        color: #FFFFFF !important;
    }


    /* Dark-mode button backgrounds */

    html[data-theme="dark"] .navbar .nav-home,
    [data-theme="dark"] .navbar .nav-home {
        background: #26364A !important;
    }

    html[data-theme="dark"] .navbar .nav-worksheets,
    [data-theme="dark"] .navbar .nav-worksheets {
        background: #263A32 !important;
    }

    html[data-theme="dark"] .navbar .nav-categories,
    [data-theme="dark"] .navbar .nav-categories {
        background: #403A27 !important;
    }

    html[data-theme="dark"] .navbar .nav-blog,
    [data-theme="dark"] .navbar .nav-blog {
        background: #342D43 !important;
    }

    html[data-theme="dark"] .navbar .nav-about,
    [data-theme="dark"] .navbar .nav-about {
        background: #422D36 !important;
    }

    html[data-theme="dark"] .navbar .nav-contact,
    [data-theme="dark"] .navbar .nav-contact {
        background: #43352A !important;
    }


    /* Search stays readable in dark mode */

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

        background: #F4F9FF !important;

        border-color: #C9DDF0 !important;
    }


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

        color: #2873AF !important;

        background: transparent !important;
    }


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

        color: #6B8299 !important;
    }

}


/* =========================================================
   MOBILE — DO NOT DISTURB
   ========================================================= */

@media (max-width: 768px) {

    .navbar .nav-art {
        width: 42px !important;
        height: 42px !important;
    }

    .navbar .nav-art img {
        width: 40px !important;
        height: 40px !important;

        max-width: 40px !important;
        max-height: 40px !important;
    }

}
/* =====================================================
   MOBILE MENU - KEEP MENU ABOVE ALL PAGE CONTENT
===================================================== */

@media (max-width: 768px) {

    /* Main mobile menu */
    .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        height: 100vh !important;

        z-index: 99999 !important;

        background: #ffffff !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Mobile menu content */
    .mobile-menu * {
        position: relative;
        z-index: 100000;
    }

    /* Keep page content underneath */
    body > * {
        position: relative;
        z-index: 1;
    }

    /* Navbar stays above page */
    header,
    .navbar,
    .site-header {
        position: relative;
        z-index: 100000 !important;
    }

}
/* =====================================================
   MOBILE SEARCH BAR
===================================================== */

@media (max-width: 768px) {

    .desktop-search {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 4px 0 8px !important;
        padding: 0 18px !important;
        box-sizing: border-box !important;
    }

    .desktop-search .nav-search-form {
        display: flex !important;
        width: 100% !important;
        max-width: 330px !important;
        height: 42px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: 6px !important;
        align-items: center !important;
    }

    .desktop-search #nav-search-input {
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        height: 42px !important;

        box-sizing: border-box !important;

        border: 1px solid #c9def5 !important;
        border-radius: 22px !important;

        background: #f8fbff !important;

        padding: 0 15px !important;

        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 500 !important;

        color: #31527c !important;
        outline: none !important;
    }

    .desktop-search #nav-search-input::placeholder {
        color: #6d829c !important;
        opacity: 1 !important;
    }

    .desktop-search #nav-search-input:focus {
        border-color: #4da3f5 !important;
        box-shadow: 0 0 0 2px rgba(77, 163, 245, 0.12) !important;
    }

    /* Search button */
    .desktop-search .nav-search-submit {
        flex: 0 0 auto !important;

        height: 42px !important;
        min-width: 65px !important;

        padding: 0 12px !important;

        border: none !important;
        border-radius: 22px !important;

        background: #4da3f5 !important;
        color: white !important;

        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 700 !important;

        cursor: pointer !important;
    }

    .desktop-search .nav-search-submit:active {
        transform: scale(0.97);
    }

}
/* =====================================================
   MOBILE SEARCH - FINAL DESIGN
   ===================================================== */

@media (max-width: 768px) {

    .mobile-search {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        width: 100% !important;
        padding: 4px 16px 6px !important;
        box-sizing: border-box !important;

        list-style: none !important;
    }

    .mobile-search-form {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 330px !important;
        height: 42px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        gap: 6px !important;
    }

    /* SEARCH INPUT */
    #mobile-search-input {
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;
        height: 42px !important;

        box-sizing: border-box !important;

        padding: 0 15px !important;

        border: 1px solid #c9def5 !important;
        border-radius: 22px !important;

        background: #f8fbff !important;

        color: #31527c !important;

        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 600 !important;

        outline: none !important;

        box-shadow: none !important;
    }

    #mobile-search-input::placeholder {
        color: #71859d !important;
        opacity: 1 !important;
    }

    #mobile-search-input:focus {
        border-color: #4da3f5 !important;

        box-shadow:
            0 0 0 3px rgba(77, 163, 245, 0.12) !important;
    }

    /* SEARCH BUTTON */
    .mobile-search-form button {
        flex: 0 0 auto !important;

        width: 72px !important;
        height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: none !important;
        border-radius: 22px !important;

        background: #4da3f5 !important;
        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 700 !important;

        cursor: pointer !important;

        box-shadow: none !important;
    }

    .mobile-search-form button:hover {
        background: #3d94e8 !important;
    }

    .mobile-search-form button:active {
        transform: scale(0.97);
    }

}