/* ========================================
   COLOUR & WRITE FOR KIDS
   V2 RESPONSIVE SYSTEM
======================================== */


/* ========================================
   TABLET — MAX 1100px
======================================== */

@media (max-width: 1100px) {

    /* ------------------------------------
       GLOBAL CONTAINERS
    ------------------------------------ */

    .categories,
    .featured,
    .why-us,
    .category-page,
    .category-results,
    .worksheet-library,
    .worksheet-navigation {

        max-width: 100%;
    }


    /* ------------------------------------
       HERO
    ------------------------------------ */

    .hero {

        margin-left: 25px;

        margin-right: 25px;
    }


    /* ------------------------------------
       CATEGORY GRID
    ------------------------------------ */

    .category-grid,
    .category-page .category-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    /* ------------------------------------
       WORKSHEET GRID
    ------------------------------------ */

    .worksheet-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    /* ------------------------------------
       WHY US
    ------------------------------------ */

    .why-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    /* ------------------------------------
       FOOTER
    ------------------------------------ */

    .footer-container {

        grid-template-columns: 2fr 1fr 1fr;

        gap: 30px;
    }

}


/* ========================================
   TABLET — MAX 992px
======================================== */

@media (max-width: 992px) {

    /* ------------------------------------
       HERO
    ------------------------------------ */

    .hero {

        padding: 35px;
    }


    /* ------------------------------------
       WORKSHEET DETAIL
    ------------------------------------ */

    .worksheet-page {

        grid-template-columns: 44% 1fr;

        column-gap: 35px;
    }


    /* ------------------------------------
       RELATED WORKSHEETS
    ------------------------------------ */

    #relatedWorksheets {

        grid-template-columns: repeat(2, 1fr);
    }


    /* ------------------------------------
       WHY US
    ------------------------------------ */

    .why-grid {

        grid-template-columns: repeat(2, 1fr);
    }

}


/* ========================================
   MOBILE — MAX 768px
======================================== */

@media (max-width: 768px) {

    /* ------------------------------------
       GLOBAL
    ------------------------------------ */

    html {

        overflow-x: hidden;
    }


    body {

        width: 100%;

        min-width: 0;

        overflow-x: hidden;
    }


    /* ------------------------------------
       HERO
    ------------------------------------ */

    .hero {

        width: calc(100% - 16px);

        margin-left: 8px;

        margin-right: 8px;
    }


    /* ------------------------------------
       CATEGORY
    ------------------------------------ */

    .category-grid,
    .category-page .category-grid {

        grid-template-columns: 1fr;
    }


    /* ------------------------------------
       FEATURED WORKSHEETS
    ------------------------------------ */

    .worksheet-grid {

        grid-template-columns: 1fr;
    }


    /* ------------------------------------
       WHY US
    ------------------------------------ */

    .why-grid {

        grid-template-columns: 1fr;
    }


    /* ------------------------------------
       WORKSHEET DETAIL
    ------------------------------------ */

    .worksheet-page {

        width: 100%;

        max-width: none;

        grid-template-columns: 1fr;

        grid-template-areas:
            "image"
            "details"
            "description"
            "buttons";
    }


    /* ------------------------------------
       WORKSHEET LIBRARY
    ------------------------------------ */

    .worksheet-row {

        flex-direction: column;

        text-align: center;
    }


    .worksheet-details {

        width: 100%;
    }


    /* ------------------------------------
       RELATED WORKSHEETS
    ------------------------------------ */

    #relatedWorksheets {

        grid-template-columns: 1fr;
    }


    /* ------------------------------------
       FOOTER
    ------------------------------------ */

    .footer-container {

        grid-template-columns: 1fr;

        gap: 35px;

        text-align: center;
    }


    /* ------------------------------------
       NEWSLETTER
    ------------------------------------ */

    .newsletter-box {

        flex-direction: column;

        align-items: stretch;
    }


    .newsletter input {

        width: 100%;
    }


    .newsletter button {

        width: 100%;
    }


    /* ------------------------------------
       YOUTUBE
    ------------------------------------ */

    .youtube-section {

        flex-direction: column;
    }


    .youtube-left,
    .youtube-right {

        width: 100%;
    }


    /* ------------------------------------
       CONTENT PAGES
    ------------------------------------ */

    .content-page {

        padding: 50px 15px;
    }


    .content-card {

        padding: 35px 25px;
    }


    /* ------------------------------------
       CATEGORY PAGE
    ------------------------------------ */

    .category-page {

        padding-left: 15px;

        padding-right: 15px;
    }


    /* ------------------------------------
       SEARCH
    ------------------------------------ */

    .search-section {

        padding-left: 15px;

        padding-right: 15px;
    }


    /* ------------------------------------
       WORKSHEET LIBRARY
    ------------------------------------ */

    .worksheet-library {

        padding-left: 15px;

        padding-right: 15px;
    }


    /* ------------------------------------
       RESULTS
    ------------------------------------ */

    .results-count {

        padding-left: 15px;

        padding-right: 15px;
    }

}


/* ========================================
   SMALL PHONES — MAX 480px
======================================== */

@media (max-width: 480px) {

    /* ------------------------------------
       GLOBAL CONTAINERS
    ------------------------------------ */

    .categories,
    .featured,
    .why-us {

        padding-left: 15px;

        padding-right: 15px;
    }


    /* ------------------------------------
       CATEGORY
    ------------------------------------ */

    .category-card {

        padding: 28px 18px;
    }


    /* ------------------------------------
       WORKSHEET LIBRARY
    ------------------------------------ */

    .worksheet-thumb {

        width: 200px;

        height: 125px;
    }


    .worksheet-btn {

        width: 100%;
    }


    /* ------------------------------------
       CONTENT
    ------------------------------------ */

    .content-page {

        padding: 40px 12px;
    }


    .content-card {

        padding: 30px 20px;
    }


    /* ------------------------------------
       BUTTONS
    ------------------------------------ */

    .btn {

        max-width: 100%;
    }


    /* ------------------------------------
       FOOTER
    ------------------------------------ */

    .footer-container {

        padding-left: 20px;

        padding-right: 20px;
    }


    /* ------------------------------------
       NEWSLETTER
    ------------------------------------ */

    .newsletter {

        width: calc(100% - 24px);
    }


    /* ------------------------------------
       YOUTUBE
    ------------------------------------ */

    .youtube-section {

        width: 100%;
    }

}


/* ========================================
   VERY SMALL PHONES — MAX 360px
======================================== */

@media (max-width: 360px) {

    /* ------------------------------------
       HERO
    ------------------------------------ */

    .hero {

        padding-left: 15px;

        padding-right: 15px;
    }


    /* ------------------------------------
       WORKSHEET THUMB
    ------------------------------------ */

    .worksheet-thumb {

        width: 180px;

        height: 115px;
    }


    /* ------------------------------------
       INFO GRID
    ------------------------------------ */

    .info-grid {

        gap: 8px;
    }


    .info-card {

        padding-left: 7px;

        padding-right: 7px;
    }


    /* ------------------------------------
       BUTTONS
    ------------------------------------ */

    .btn {

        padding-left: 18px;

        padding-right: 18px;
    }

}


/* =========================================================
   INNER PAGE HERO
   RESPONSIVE THEME-SAFE SYSTEM
========================================================= */


/* =========================================================
   DESKTOP / TABLET HERO
========================================================= */

.page-hero,
.about-hero,
.contact-hero,
.blog-hero,
.worksheets-hero {

    width: 100%;

    height: 320px;

    min-height: 320px;

    max-height: 320px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    margin: 0;

    padding: 40px 20px;

    background:
        linear-gradient(
            135deg,
            var(--surface-warm),
            var(--surface-teal)
        );

    border-bottom: 1px solid var(--border);

    color: var(--heading);

    overflow: hidden;

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


/* =========================================================
   HERO CONTAINER
========================================================= */

.page-hero .container,
.about-hero .container,
.contact-hero .container,
.blog-hero .container,
.worksheets-hero .container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0;

    box-sizing: border-box;
}


/* =========================================================
   HERO TITLE
========================================================= */

.page-hero h1,
.about-hero h1,
.contact-hero h1,
.blog-hero h1,
.worksheets-hero h1 {

    margin: 0 0 18px 0;

    padding: 0;

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

    font-size: 52px;

    font-weight: 800;

    line-height: 1.15;

    color: var(--heading);
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.page-hero p,
.about-hero p,
.contact-hero p,
.blog-hero p,
.worksheets-hero p {

    max-width: 900px;

    margin: 0 auto;

    padding: 0;

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

    font-size: 19px;

    font-weight: 400;

    line-height: 1.6;

    color: var(--text-muted);
}


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

html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .about-hero,
html[data-theme="dark"] .contact-hero,
html[data-theme="dark"] .blog-hero,
html[data-theme="dark"] .worksheets-hero {

    background:
        linear-gradient(
            135deg,
            #10223A 0%,
            #142B47 55%,
            #0C1B2F 100%
        );

    color: #F7F9FC;

    border-bottom-color: #294968;
}


html[data-theme="dark"] .page-hero h1,
html[data-theme="dark"] .about-hero h1,
html[data-theme="dark"] .contact-hero h1,
html[data-theme="dark"] .blog-hero h1,
html[data-theme="dark"] .worksheets-hero h1 {

    color: #F7F9FC;
}


html[data-theme="dark"] .page-hero p,
html[data-theme="dark"] .about-hero p,
html[data-theme="dark"] .contact-hero p,
html[data-theme="dark"] .blog-hero p,
html[data-theme="dark"] .worksheets-hero p {

    color: #B9CCE0;
}


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

@media (max-width: 768px) {

    .page-hero,
    .about-hero,
    .contact-hero,
    .blog-hero,
    .worksheets-hero {

        height: 260px;

        min-height: 260px;

        max-height: 260px;

        padding: 30px 18px;
    }


    .page-hero h1,
    .about-hero h1,
    .contact-hero h1,
    .blog-hero h1,
    .worksheets-hero h1 {

        font-size: 38px;

        line-height: 1.15;

        margin-bottom: 14px;
    }


    .page-hero p,
    .about-hero p,
    .contact-hero p,
    .blog-hero p,
    .worksheets-hero p {

        font-size: 16px;

        line-height: 1.6;

        max-width: 95%;
    }

}


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

@media (max-width: 480px) {

    .page-hero,
    .about-hero,
    .contact-hero,
    .blog-hero,
    .worksheets-hero {

        height: 240px;

        min-height: 240px;

        max-height: 240px;

        padding: 25px 15px;
    }


    .page-hero h1,
    .about-hero h1,
    .contact-hero h1,
    .blog-hero h1,
    .worksheets-hero h1 {

        font-size: 32px;
    }


    .page-hero p,
    .about-hero p,
    .contact-hero p,
    .blog-hero p,
    .worksheets-hero p {

        font-size: 15px;
    }

}


/* =========================================================
   WORKSHEETS PAGE STRIP
========================================================= */

body .page-strip.worksheets-hero {

    height: 190px;

    min-height: 190px;

    max-height: 190px;

    padding-top: 20px;

    padding-bottom: 20px;

    margin-top: 0;

    margin-bottom: 0;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;
}


body .page-strip.worksheets-hero h1 {

    margin-top: 0;

    margin-bottom: 8px;

    padding: 0;

    font-size: 42px;

    line-height: 1.15;
}


body .page-strip.worksheets-hero p {

    margin-top: 0;

    margin-bottom: 0;

    padding: 0;

    font-size: 18px;

    line-height: 1.5;
}


/* WORKSHEETS STRIP MOBILE */

@media (max-width: 768px) {

    body .page-strip.worksheets-hero {

        height: 175px;

        min-height: 175px;

        max-height: 175px;

        padding: 15px;
    }


    body .page-strip.worksheets-hero h1 {

        font-size: 32px;
    }


    body .page-strip.worksheets-hero p {

        font-size: 16px;
    }

}


@media (max-width: 480px) {

    body .page-strip.worksheets-hero {

        height: 160px;

        min-height: 160px;

        max-height: 160px;
    }


    body .page-strip.worksheets-hero h1 {

        font-size: 29px;
    }


    body .page-strip.worksheets-hero p {

        font-size: 15px;
    }

}


/* =========================================================
   CATEGORIES PAGE STRIP
========================================================= */

body .page-strip.categories-hero {

    height: 190px;

    min-height: 190px;

    max-height: 190px;

    padding-top: 20px;

    padding-bottom: 20px;

    margin-top: 0;

    margin-bottom: 0;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;
}


body .page-strip.categories-hero h1 {

    margin-top: 0;

    margin-bottom: 8px;

    padding: 0;

    font-size: 42px;

    line-height: 1.15;
}


body .page-strip.categories-hero p {

    margin-top: 0;

    margin-bottom: 0;

    padding: 0;

    font-size: 18px;

    line-height: 1.5;
}


/* CATEGORIES STRIP MOBILE */

@media (max-width: 768px) {

    body .page-strip.categories-hero {

        height: 175px;

        min-height: 175px;

        max-height: 175px;

        padding: 15px;
    }


    body .page-strip.categories-hero h1 {

        font-size: 32px;
    }


    body .page-strip.categories-hero p {

        font-size: 16px;
    }

}


@media (max-width: 480px) {

    body .page-strip.categories-hero {

        height: 160px;

        min-height: 160px;

        max-height: 160px;
    }


    body .page-strip.categories-hero h1 {

        font-size: 29px;
    }


    body .page-strip.categories-hero p {

        font-size: 15px;
    }

}


/* =========================================================
   CLEAN DESKTOP NAVBAR
   LOGO → MENU → SEARCH → THEME
========================================================= */

@media (min-width: 769px) {

    body .navbar {

        width: 100%;

        min-height: 100px;

        height: 100px;

        display: flex;

        align-items: center;

        box-sizing: border-box;

        padding: 0 48px;

        gap: 28px;

        flex-wrap: nowrap;

        overflow: visible;
    }


    /* LOGO */

    body .navbar .logo {

        flex: 0 0 auto;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        margin: 0;

        padding: 0;

        width: 105px;

        min-width: 105px;
    }


    body .navbar .logo img {

        display: block;

        width: auto;

        height: 60px;

        max-width: 105px;

        object-fit: contain;
    }


    /* MAIN MENU */

    body .navbar .menu {

        flex: 1 1 auto;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 10px;

        width: auto;

        min-width: 0;

        margin: 0;

        padding: 0;

        flex-wrap: nowrap;

        list-style: none;
    }


    body .navbar .menu li {

        flex: 0 1 auto;

        min-width: 0;

        list-style: none;

        white-space: nowrap;
    }


    body .navbar .menu li a {

        white-space: nowrap;
    }


    /* SEARCH */

    body .navbar .desktop-nav-search {

        flex: 0 0 220px;

        width: 220px;

        max-width: 220px;

        min-width: 220px;

        height: 52px;

        display: flex;

        align-items: center;

        justify-content: center;

        margin: 0;

        padding: 0;

        box-sizing: border-box;
    }


    body .navbar .nav-search-input {

        display: block;

        width: 100%;

        height: 52px;

        margin: 0;

        padding: 0 20px;

        box-sizing: border-box;

        border: 1px solid var(--border);

        border-radius: 28px;

        background: var(--surface);

        color: var(--text);

        font-family: inherit;

        font-size: 16px;

        outline: none;
    }


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

        border-color: var(--primary);

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


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

        color: var(--text-muted);
    }


    /* THEME */

    body .navbar .desktop-theme-toggle {

        flex: 0 0 74px;

        width: 74px;

        min-width: 74px;

        height: 52px;

        display: flex;

        align-items: center;

        justify-content: center;

        margin: 0;

        padding: 0;

        box-sizing: border-box;
    }


    body .navbar .desktop-download {

        display: none;
    }

}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .navbar {

        padding-left: 30px;

        padding-right: 30px;

        gap: 20px;
    }


    body .navbar .logo {

        width: 95px;

        min-width: 95px;
    }


    body .navbar .logo img {

        max-width: 95px;

        height: 56px;
    }


    body .navbar .desktop-nav-search {

        flex-basis: 190px;

        width: 190px;

        min-width: 190px;

        max-width: 190px;
    }


    body .navbar .desktop-theme-toggle {

        flex-basis: 64px;

        width: 64px;

        min-width: 64px;
    }

}


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

@media (min-width: 769px) and (max-width: 1100px) {

    body .navbar {

        padding-left: 20px;

        padding-right: 20px;

        gap: 14px;
    }


    body .navbar .logo {

        width: 82px;

        min-width: 82px;
    }


    body .navbar .logo img {

        max-width: 82px;

        height: 50px;
    }


    body .navbar .menu {

        gap: 6px;
    }


    body .navbar .menu li a {

        padding-left: 9px;

        padding-right: 9px;

        font-size: 14px;
    }


    body .navbar .desktop-nav-search {

        flex-basis: 155px;

        width: 155px;

        min-width: 155px;

        max-width: 155px;
    }


    body .navbar .nav-search-input {

        font-size: 14px;

        padding-left: 14px;

        padding-right: 14px;
    }


    body .navbar .desktop-theme-toggle {

        flex-basis: 56px;

        width: 56px;

        min-width: 56px;
    }

}


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

@media (max-width: 768px) {

    body .navbar .desktop-nav-search,
    body .navbar .desktop-theme-toggle,
    body .navbar .desktop-download {

        display: none;
    }

}


/* =========================================================
   COMPACT ABOUT PAGE STRIP
========================================================= */

body .about-hero {

    height: 190px;

    min-height: 190px;

    max-height: 190px;

    padding: 20px;

    margin: 0;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;
}


body .about-hero h1 {

    margin: 0 0 8px;

    padding: 0;

    font-size: 42px;

    line-height: 1.15;
}


body .about-hero p {

    margin: 0 auto;

    padding: 0;

    font-size: 18px;

    line-height: 1.5;
}


/* ABOUT MOBILE */

@media (max-width: 768px) {

    body .about-hero {

        height: 175px;

        min-height: 175px;

        max-height: 175px;

        padding: 15px;
    }


    body .about-hero h1 {

        font-size: 32px;
    }


    body .about-hero p {

        font-size: 16px;
    }

}


@media (max-width: 480px) {

    body .about-hero {

        height: 160px;

        min-height: 160px;

        max-height: 160px;
    }


    body .about-hero h1 {

        font-size: 29px;
    }


    body .about-hero p {

        font-size: 15px;
    }

}


/* =========================================================
   COMPACT CONTACT PAGE STRIP
========================================================= */

body .contact-hero {

    height: 190px;

    min-height: 190px;

    max-height: 190px;

    padding: 20px;

    margin: 0;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;
}


body .contact-hero h1 {

    margin: 0 0 8px;

    padding: 0;

    font-size: 42px;

    line-height: 1.15;
}


body .contact-hero p {

    margin: 0 auto;

    padding: 0;

    font-size: 18px;

    line-height: 1.5;
}


/* CONTACT MOBILE */

@media (max-width: 768px) {

    body .contact-hero {

        height: 175px;

        min-height: 175px;

        max-height: 175px;

        padding: 15px;
    }


    body .contact-hero h1 {

        font-size: 32px;
    }


    body .contact-hero p {

        font-size: 16px;
    }

}


@media (max-width: 480px) {

    body .contact-hero {

        height: 160px;

        min-height: 160px;

        max-height: 160px;
    }


    body .contact-hero h1 {

        font-size: 29px;
    }


    body .contact-hero p {

        font-size: 15px;
    }

}


/* =========================================================
   FINAL LIGHT MODE HERO THEME
========================================================= */

html:not([data-theme="dark"]) body .page-hero,
html:not([data-theme="dark"]) body .about-hero,
html:not([data-theme="dark"]) body .contact-hero,
html:not([data-theme="dark"]) body .blog-hero,
html:not([data-theme="dark"]) body .worksheets-hero,
html:not([data-theme="dark"]) body .page-strip {

    background:
        linear-gradient(
            135deg,
            var(--surface-warm),
            var(--surface-teal)
        );

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


html:not([data-theme="dark"]) body .page-hero h1,
html:not([data-theme="dark"]) body .about-hero h1,
html:not([data-theme="dark"]) body .contact-hero h1,
html:not([data-theme="dark"]) body .blog-hero h1,
html:not([data-theme="dark"]) body .worksheets-hero h1,
html:not([data-theme="dark"]) body .page-strip h1 {

    color: var(--heading);
}


html:not([data-theme="dark"]) body .page-hero p,
html:not([data-theme="dark"]) body .about-hero p,
html:not([data-theme="dark"]) body .contact-hero p,
html:not([data-theme="dark"]) body .blog-hero p,
html:not([data-theme="dark"]) body .worksheets-hero p,
html:not([data-theme="dark"]) body .page-strip p {

    color: var(--text-muted);
}


/* =========================================================
   MOBILE THEME TOGGLE — FINAL
========================================================= */

@media (max-width: 768px) {

    .theme-toggle {

        width: 140px;

        min-width: 140px;

        max-width: 140px;

        height: 48px;

        padding: 0 14px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

        box-sizing: border-box;

        border-radius: 999px;

        white-space: nowrap;

        overflow: visible;

        font-size: 14px;

        line-height: 1;
    }


    .theme-toggle i,
    .theme-toggle svg,
    .theme-toggle img,
    .theme-toggle .theme-icon {

        width: 24px;

        height: 24px;

        flex: 0 0 24px;
    }


    .theme-toggle span,
    .theme-toggle .theme-text {

        width: auto;

        min-width: max-content;

        flex: 0 0 auto;

        display: inline-block;

        white-space: nowrap;

        overflow: visible;

        line-height: 1;
    }

}


/* =========================================================
   NAVBAR — WIDER + SHORTER TILES
========================================================= */

@media (min-width: 1201px) {

    body .navbar .menu {

        gap: 12px;
    }


    body .navbar .menu li a {

        min-width: 135px;

        height: 52px;

        min-height: 52px;

        padding: 8px 22px;

        font-size: 16px;

        line-height: 1;

        white-space: nowrap;

        overflow: visible;

        text-overflow: clip;
    }


    /* Longer names */

    body .navbar .menu li:nth-child(2) a {

        min-width: 165px;
    }


    body .navbar .menu li:nth-child(3) a {

        min-width: 165px;
    }


    body .navbar .menu li:nth-child(5) a {

        min-width: 145px;
    }


    body .navbar .menu li:nth-child(6) a {

        min-width: 150px;
    }


    /* SEARCH */

    body .navbar .desktop-nav-search {

        flex: 0 0 250px;

        width: 250px;

        min-width: 250px;

        max-width: 250px;

        height: 52px;

        margin-left: 12px;
    }


    body .navbar .nav-search-input {

        width: 100%;

        height: 52px;

        padding: 0 22px;

        font-size: 16px;
    }


    /* THEME */

    body .navbar .desktop-theme-toggle {

        width: 70px;

        min-width: 70px;

        height: 52px;
    }

}


/* =========================================================
   769px — 1200px
========================================================= */

@media (min-width: 769px) and (max-width: 1200px) {

    body .navbar .menu {

        gap: 7px;
    }


    body .navbar .menu li a {

        min-width: 105px;

        height: 48px;

        min-height: 48px;

        padding: 7px 12px;

        font-size: 14px;
    }


    body .navbar .menu li:nth-child(2) a,
    body .navbar .menu li:nth-child(3) a {

        min-width: 125px;
    }


    body .navbar .desktop-nav-search {

        flex: 0 0 185px;

        width: 185px;

        min-width: 185px;

        max-width: 185px;

        height: 48px;
    }


    body .navbar .nav-search-input {

        height: 48px;

        font-size: 14px;
    }


    body .navbar .desktop-theme-toggle {

        width: 58px;

        min-width: 58px;

        height: 48px;
    }

}


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

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

    .page-hero,
    .about-hero,
    .contact-hero,
    .blog-hero,
    .worksheets-hero,
    .page-strip,
    .theme-toggle {

        transition: none !important;
    }

}