/* ========================================
   COLOUR & WRITE FOR KIDS
   PAGES — V2 THEME
======================================== */


/* ========================================
   CONTENT PAGE
======================================== */

.content-page {

    padding: 70px 20px;

    background: var(--background);

    color: var(--text);

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


/* ========================================
   CONTENT CONTAINER
======================================== */

.content-page .container {

    max-width: 900px;

    margin: auto;
}


/* ========================================
   CONTENT CARD
======================================== */

.content-card {

    background: var(--surface);

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

    padding: 50px;

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

    box-shadow: var(--shadow-card);

    color: var(--text);

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


/* ========================================
   CONTENT HEADINGS
======================================== */

.content-card h2 {

    color: var(--heading);

    margin-top: 35px;

    margin-bottom: 15px;

    font-size: 28px;

    line-height: 1.35;
}


.content-card h2:first-child {

    margin-top: 0;
}


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

.content-card p {

    color: var(--text-muted);

    font-size: 17px;

    line-height: 1.9;

    margin-bottom: 15px;
}


/* ========================================
   CONTENT LINKS
======================================== */

.content-card a {

    color: var(--primary);

    transition:
        color var(--transition);
}


.content-card a:hover {

    color: var(--primary-dark);
}


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

.page-header {

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

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

    text-align: center;

    padding: 70px 20px;

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


.page-header h1 {

    font-size: 48px;

    color: var(--heading);

    margin-bottom: 15px;

    line-height: 1.2;
}


.page-header p {

    max-width: 700px;

    margin: auto;

    font-size: 18px;

    color: var(--text-muted);

    line-height: 1.7;
}


/* ========================================
   BLOG PAGE
======================================== */

.blog-posts {

    padding: 70px 20px;

    background: var(--background);

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


.blog-posts .container {

    max-width: 900px;

    margin: auto;
}


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

.coming-soon {

    background: var(--surface);

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

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

    padding: 60px;

    text-align: center;

    box-shadow: var(--shadow-card);

    color: var(--text);

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


.coming-soon h2 {

    font-size: 38px;

    color: var(--heading);

    margin-bottom: 20px;

    line-height: 1.3;
}


.coming-soon p {

    max-width: 700px;

    margin: 0 auto 35px;

    font-size: 18px;

    line-height: 1.8;

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


.coming-soon .worksheet-btn {

    display: inline-block;
}


/* ========================================
   BLOG BUTTON
======================================== */

.blog-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 34px;

    background: var(--primary);

    color: #ffffff;

    text-decoration: none;

    font-size: 18px;

    font-weight: 700;

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

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

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


.blog-btn:hover {

    background: var(--primary-dark);

    color: #ffffff;

    transform: translateY(-3px);

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


/* ========================================
   UNIVERSAL PAGE HERO
======================================== */

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

    min-height: 290px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

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

    color: var(--heading);

    padding: 60px 20px;

    box-sizing: border-box;

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

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


/* ========================================
   HERO CONTENT
======================================== */

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

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


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

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

    margin: 0 0 22px;

    font-size: 56px;

    line-height: 1.15;

    font-weight: 800;

    color: var(--heading);
}


/* ========================================
   HERO SUBTITLE
======================================== */

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

    max-width: 900px;

    margin: 0 auto;

    font-size: 20px;

    line-height: 1.7;

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


/* ========================================
   UNIVERSAL PAGE STRIP
   ALL NON-HOME PAGES
======================================== */

.page-strip {

    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),
        border-color var(--transition),
        color var(--transition);
}


/* ========================================
   STRIP CONTAINER
======================================== */

.page-strip .container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0;

    box-sizing: border-box;
}


/* ========================================
   STRIP TITLE
======================================== */

.page-strip 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);
}


/* ========================================
   STRIP SUBTITLE
======================================== */

.page-strip 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);
}


/* ========================================
   CATEGORY HERO CLEANUP
======================================== */

.categories-hero .featured-content {

    display: none;
}


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

html[data-theme="dark"] .page-strip,
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-strip h1,
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-strip p,
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
======================================== */

@media (max-width: 768px) {

    .content-page {

        padding: 50px 15px;
    }


    .content-card {

        padding: 35px 25px;
    }


    .page-header {

        padding: 55px 20px;
    }


    .page-header h1 {

        font-size: 40px;
    }


    .page-header p {

        font-size: 17px;
    }


    .blog-posts {

        padding: 50px 15px;
    }


    .coming-soon {

        padding: 45px 25px;
    }


    .coming-soon h2 {

        font-size: 32px;
    }


    .coming-soon p {

        font-size: 17px;
    }


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

        min-height: 240px;

        padding: 45px 20px;
    }


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

        font-size: 38px;
    }


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

        font-size: 17px;
    }


    .page-strip {

        height: 260px;

        min-height: 260px;

        max-height: 260px;

        padding: 30px 20px;
    }


    .page-strip h1 {

        font-size: 38px;

        margin-bottom: 14px;
    }


    .page-strip p {

        font-size: 17px;

        line-height: 1.55;
    }

}


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

@media (max-width: 480px) {

    .content-page {

        padding: 40px 12px;
    }


    .content-card {

        padding: 30px 20px;
    }


    .content-card h2 {

        font-size: 25px;
    }


    .content-card p {

        font-size: 16px;

        line-height: 1.8;
    }


    .page-header {

        padding: 45px 15px;
    }


    .page-header h1 {

        font-size: 34px;
    }


    .page-header p {

        font-size: 16px;
    }


    .coming-soon {

        padding: 35px 20px;
    }


    .coming-soon h2 {

        font-size: 29px;
    }


    .coming-soon p {

        font-size: 16px;

        line-height: 1.7;
    }


    .blog-btn {

        padding: 14px 25px;

        font-size: 16px;
    }


    .page-strip {

        height: 240px;

        min-height: 240px;

        max-height: 240px;

        padding: 25px 15px;
    }


    .page-strip h1 {

        font-size: 32px;
    }


    .page-strip p {

        font-size: 16px;
    }

}


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

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

    .content-page,
    .content-card,
    .page-header,
    .blog-posts,
    .coming-soon,
    .page-hero,
    .about-hero,
    .contact-hero,
    .blog-hero,
    .worksheets-hero,
    .page-strip {

        transition: none;
    }

}