/* =========================================================
   LITTLE EXPLORERS LEARNING HUB
   ALPHABET & LITERACY PRINTABLES
   ---------------------------------------------------------
   File:
   styles/alphabet.css

   Design direction:
   Warm • Playful • Inviting • Teacher Friendly
   Free Printable Resource Library

   Built specifically around alphabet.html
========================================================= */


/* =========================================================
   01. ROOT VARIABLES
========================================================= */

:root {

    --ink:
        #263238;

    --ink-soft:
        #56646b;

    --white:
        #ffffff;

    --paper:
        #fffdf9;

    --cream:
        #fff8ee;

    --cream-deep:
        #f7eee1;

    --border:
        #e8dfd3;

    --shadow-soft:
        0 10px 30px rgba(38, 50, 56, .08);

    --shadow-card:
        0 16px 42px rgba(38, 50, 56, .10);

    --shadow-hover:
        0 22px 55px rgba(38, 50, 56, .15);

    --alphabet-red:
        #e87868;

    --alphabet-yellow:
        #f2c95c;

    --alphabet-blue:
        #6fa8c9;

    --alphabet-green:
        #7fae8a;

    --alphabet-purple:
        #9b86b7;

    --alphabet-teal:
        #63aaa4;

    --soft-red:
        #fbe8e4;

    --soft-yellow:
        #fff4d6;

    --soft-blue:
        #eaf4fa;

    --soft-green:
        #eaf4ec;

    --soft-purple:
        #f1ecf7;

    --soft-teal:
        #e8f5f3;

    --primary:
        #6fa8c9;

    --primary-dark:
        #4e86a8;

    --radius-sm:
        12px;

    --radius:
        20px;

    --radius-lg:
        30px;

    --container:
        1180px;

}


/* =========================================================
   02. RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    background:
        var(--paper);

    color:
        var(--ink);

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

    font-size:
        16px;

    line-height:
        1.7;

    overflow-x:
        hidden;

}


img {

    display:
        block;

    max-width:
        100%;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button,
input {

    font:
        inherit;

}


button {

    cursor:
        pointer;

}


.container {

    width:
        min(100% - 40px, var(--container));

    margin-inline:
        auto;

}


/* =========================================================
   03. TYPOGRAPHY
========================================================= */

h1,
h2,
h3 {

    margin:
        0;

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

    line-height:
        1.12;

    color:
        var(--ink);

}


h1 {

    font-size:
        clamp(2.7rem, 6vw, 5.3rem);

    font-weight:
        900;

    letter-spacing:
        -.045em;

}


h2 {

    font-size:
        clamp(2rem, 4vw, 3.25rem);

    font-weight:
        900;

    letter-spacing:
        -.035em;

}


h3 {

    font-size:
        1.35rem;

    font-weight:
        800;

}


p {

    margin:
        0;

    color:
        var(--ink-soft);

}


ul {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


/* =========================================================
   04. HEADER
========================================================= */

header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    background:
        rgba(255, 253, 249, .96);

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

    box-shadow:
        0 4px 18px rgba(38, 50, 56, .06);

    backdrop-filter:
        blur(14px);

}


.nav-container {

    min-height:
        84px;

    display:
        flex;

    align-items:
        center;

    gap:
        24px;

}


.logo {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    flex:
        0 0 auto;

}


.logo img {

    width:
        56px;

    height:
        56px;

    object-fit:
        contain;

}


.logo h1 {

    margin:
        0;

    font-size:
        1.28rem;

    line-height:
        1;

    letter-spacing:
        -.025em;

}


.logo span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--primary-dark);

    font-size:
        .7rem;

    font-weight:
        800;

    letter-spacing:
        .1em;

    line-height:
        1.1;

    text-transform:
        uppercase;

}


.search-bar {

    display:
        flex;

    align-items:
        center;

    min-width:
        190px;

    max-width:
        260px;

    margin-left:
        auto;

    background:
        var(--white);

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

    border-radius:
        999px;

    box-shadow:
        0 4px 14px rgba(38, 50, 56, .04);

    overflow:
        hidden;

}


.search-bar input {

    width:
        100%;

    min-width:
        0;

    padding:
        10px 14px;

    background:
        transparent;

    border:
        0;

    outline:
        none;

    color:
        var(--ink);

}


.search-bar input::placeholder {

    color:
        #8c989d;

}


.search-bar button {

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    border:
        0;

    background:
        var(--soft-blue);

    color:
        var(--primary-dark);

}


nav ul {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

}


nav a {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        42px;

    padding:
        8px 11px;

    border-radius:
        999px;

    color:
        var(--ink-soft);

    font-size:
        .82rem;

    font-weight:
        700;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;

}


nav a:hover {

    background:
        var(--soft-blue);

    color:
        var(--primary-dark);

    transform:
        translateY(-1px);

}


nav a.active {

    background:
        var(--ink);

    color:
        var(--white);

}


.mobile-menu {

    display:
        none;

    width:
        44px;

    height:
        44px;

    border:
        0;

    border-radius:
        12px;

    background:
        var(--soft-yellow);

    color:
        var(--ink);

    font-size:
        1.35rem;

}


/* =========================================================
   05. SHARED SECTION STRUCTURE
========================================================= */

section {

    position:
        relative;

}


section:nth-of-type(even) {

    background:
        var(--cream);

}


.section-heading {

    max-width:
        820px;

    margin:
        0 auto 52px;

    text-align:
        center;

}


.section-heading p {

    max-width:
        720px;

    margin:
        18px auto 0;

    font-size:
        1.03rem;

}


.section-tag {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        14px;

    padding:
        7px 13px;

    background:
        var(--soft-yellow);

    border:
        1px solid rgba(242, 201, 92, .45);

    border-radius:
        999px;

    color:
        #8a6b18;

    font-size:
        .72rem;

    font-weight:
        800;

    letter-spacing:
        .075em;

    text-transform:
        uppercase;

}


.section-tag i {

    font-size:
        .9rem;

}


/* =========================================================
   06. BUTTONS
========================================================= */

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        12px 20px;

    border:
        2px solid transparent;

    border-radius:
        999px;

    font-size:
        .9rem;

    font-weight:
        800;

    line-height:
        1.2;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        color .2s ease;

}


.btn:hover {

    transform:
        translateY(-2px);

}


.btn-primary {

    background:
        var(--ink);

    color:
        var(--white);

    box-shadow:
        0 8px 18px rgba(38, 50, 56, .16);

}


.btn-primary:hover {

    background:
        var(--primary-dark);

    box-shadow:
        0 12px 26px rgba(38, 50, 56, .18);

}


.btn-secondary {

    background:
        var(--white);

    border-color:
        var(--border);

    color:
        var(--ink);

}


.btn-secondary:hover {

    background:
        var(--soft-blue);

    border-color:
        var(--alphabet-blue);

}


.btn-outline {

    background:
        transparent;

    border-color:
        var(--border);

    color:
        var(--primary-dark);

}


.btn-outline:hover {

    background:
        var(--soft-blue);

    border-color:
        var(--alphabet-blue);

}


.btn-full {

    width:
        100%;

}


/* =========================================================
   07. HERO
========================================================= */

.printable-hero {

    padding:
        34px 0 80px;

    background:
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #fff8ee 48%,
            #edf6fa 100%
        );

    overflow:
        hidden;

}


.printable-hero::before {

    content:
        "A";

    position:
        absolute;

    top:
        -90px;

    right:
        4%;

    color:
        rgba(111, 168, 201, .08);

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

    font-size:
        24rem;

    font-weight:
        900;

    line-height:
        1;

    pointer-events:
        none;

}


.printable-hero::after {

    content:
        "b";

    position:
        absolute;

    bottom:
        -130px;

    left:
        2%;

    color:
        rgba(232, 120, 104, .07);

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

    font-size:
        20rem;

    font-weight:
        900;

    line-height:
        1;

    pointer-events:
        none;

}


.breadcrumb {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-bottom:
        38px;

    color:
        #7b878c;

    font-size:
        .8rem;

    font-weight:
        600;

}


.breadcrumb a:hover {

    color:
        var(--primary-dark);

}


.hero-grid {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, .92fr);

    align-items:
        center;

    gap:
        70px;

}


.hero-content {

    max-width:
        690px;

}


.hero-content .section-tag {

    background:
        var(--white);

}


.hero-content h1 {

    margin-bottom:
        24px;

}


.hero-content h1::after {

    content:
        "";

    display:
        block;

    width:
        94px;

    height:
        8px;

    margin-top:
        18px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--alphabet-red),
            var(--alphabet-yellow),
            var(--alphabet-blue)
        );

}


.hero-content > p {

    max-width:
        650px;

    font-size:
        1.08rem;

    line-height:
        1.8;

}


.hero-badges {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin:
        28px 0 32px;

}


.hero-badges span {

    padding:
        8px 12px;

    background:
        rgba(255,255,255,.78);

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

    border-radius:
        999px;

    box-shadow:
        0 4px 12px rgba(38,50,56,.04);

    font-size:
        .76rem;

    font-weight:
        700;

}


.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

}


.hero-image {

    position:
        relative;

    max-width:
        520px;

    margin-left:
        auto;

}


.hero-image::before {

    content:
        "";

    position:
        absolute;

    inset:
        -18px;

    z-index:
        -1;

    background:
        var(--soft-yellow);

    border-radius:
        36px;

    transform:
        rotate(3deg);

}


.hero-image::after {

    content:
        "";

    position:
        absolute;

    width:
        95px;

    height:
        95px;

    right:
        -28px;

    bottom:
        -22px;

    background:
        var(--soft-red);

    border:
        10px solid var(--white);

    border-radius:
        50%;

}


.hero-image img {

    width:
        100%;

    aspect-ratio:
        1 / 1;

    object-fit:
        cover;

    border:
        12px solid var(--white);

    border-radius:
        34px;

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

}


/* =========================================================
   08. QUICK STATS
========================================================= */

.resource-stats {

    padding:
        24px 0;

    background:
        var(--white);

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

}


.stats-grid {

    display:
        grid;

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

    gap:
        0;

}


.stat-card {

    position:
        relative;

    padding:
        18px 24px;

    text-align:
        center;

}


.stat-card:not(:last-child)::after {

    content:
        "";

    position:
        absolute;

    top:
        20%;

    right:
        0;

    width:
        1px;

    height:
        60%;

    background:
        var(--border);

}


.stat-card h2 {

    color:
        var(--primary-dark);

    font-size:
        2rem;

}


.stat-card p {

    margin-top:
        2px;

    font-size:
        .78rem;

    font-weight:
        700;

}


/* =========================================================
   09. FEATURED RESOURCE
========================================================= */

.featured-resource {

    padding:
        90px 0;

    background:
        var(--paper);

}


.featured-resource-card {

    display:
        grid;

    grid-template-columns:
        minmax(380px, .9fr)
        minmax(0, 1.1fr);

    align-items:
        stretch;

    background:
        var(--white);

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

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

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

    overflow:
        hidden;

}


.featured-image {

    min-height:
        520px;

    background:
        var(--cream);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

}


.featured-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    object-position:
        center;

    display:
        block;

}


.featured-content {

    padding:
        clamp(35px, 6vw, 70px);

}


.featured-label {

    display:
        inline-block;

    margin-bottom:
        16px;

    color:
        var(--alphabet-red);

    font-size:
        .75rem;

    font-weight:
        900;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;

}


.featured-content h2 {

    margin-bottom:
        22px;

}


.featured-content > p {

    max-width:
        700px;

}


.feature-list {

    display:
        grid;

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

    gap:
        12px 20px;

    margin-top:
        30px;

}


.feature-list div {

    padding:
        11px 14px;

    background:
        var(--cream);

    border-radius:
        12px;

    color:
        var(--ink);

    font-size:
        .84rem;

    font-weight:
        700;

}


/* =========================================================
   10. FEATURED COLLECTIONS
========================================================= */

.featured-collections {

    padding:
        100px 0;

    background:
        var(--cream);

}


.collection-grid {

    display:
        grid;

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

    gap:
        24px;

}


.collection-card {

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

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

    overflow:
        hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.collection-card:hover {

    transform:
        translateY(-7px);

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

}


.collection-image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--soft-blue);
}

.collection-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}


.collection-card:hover .collection-image img {

    transform:
        scale(1.045);

}


.collection-content {

    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    padding:
        25px;

}


.collection-tag,
.download-category {

    display:
        inline-flex;

    align-self:
        flex-start;

    margin-bottom:
        11px;

    padding:
        5px 10px;

    border-radius:
        999px;

    font-size:
        .68rem;

    font-weight:
        900;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

}


.collection-tag.blue {

    background:
        var(--soft-blue);

    color:
        var(--primary-dark);

}


.collection-tag.green {

    background:
        var(--soft-green);

    color:
        #4c7d58;

}


.collection-tag.orange {

    background:
        var(--soft-yellow);

    color:
        #9a741d;

}


.collection-tag.purple {

    background:
        var(--soft-purple);

    color:
        #755f91;

}


.collection-tag.teal {

    background:
        var(--soft-teal);

    color:
        #43847e;

}


.collection-tag.red {

    background:
        var(--soft-red);

    color:
        #a85448;

}


.collection-content h3 {

    margin-bottom:
        10px;

}


.collection-content > p {

    font-size:
        .88rem;

    line-height:
        1.65;

}


.collection-list {

    display:
        grid;

    gap:
        6px;

    margin:
        18px 0 22px;

}


.collection-list li {

    position:
        relative;

    padding-left:
        18px;

    color:
        var(--ink-soft);

    font-size:
        .78rem;

}


.collection-list li::before {

    content:
        "•";

    position:
        absolute;

    left:
        2px;

    color:
        var(--alphabet-blue);

    font-weight:
        900;

}


.collection-content .btn {

    margin-top:
        auto;

    align-self:
        flex-start;

}


/* =========================================================
   11. PRINTABLE RESOURCE LIBRARY
========================================================= */

.resource-library {

    padding:
        105px 0;

    background:
        var(--paper);

}


.resource-grid {

    display:
        grid;

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

    gap:
        20px;

}


.resource-card {

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--white);

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

    border-radius:
        18px;

    box-shadow:
        0 8px 24px rgba(38,50,56,.06);

    overflow:
        hidden;

    transition:
        transform .22s ease,
        box-shadow .22s ease;

}


.resource-card:hover {

    transform:
        translateY(-5px);

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

}


.resource-card > img {

    width:
        100%;

    aspect-ratio:
        1 / 1;

    object-fit:
        cover;

    background:
        var(--cream);

}


.resource-content {

    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    padding:
        20px;

}


.resource-content h3 {

    margin-bottom:
        8px;

    font-size:
        1.15rem;

}


.resource-content p {

    font-size:
        .8rem;

    line-height:
        1.6;

}


.resource-content a {

    margin-top:
        auto;

    padding-top:
        18px;

    color:
        var(--primary-dark);

    font-size:
        .78rem;

    font-weight:
        900;

}


.resource-content a:hover {

    color:
        var(--alphabet-red);

}


/* =========================================================
   12. WHY SECTION
========================================================= */

.why-section {

    padding:
        100px 0;

    background:
        linear-gradient(
            135deg,
            var(--soft-blue),
            var(--cream)
        );

}


.why-grid {

    display:
        grid;

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

    gap:
        18px;

}


.why-card {

    padding:
        28px;

    background:
        rgba(255,255,255,.82);

    border:
        1px solid rgba(232,223,211,.9);

    border-radius:
        var(--radius);

    box-shadow:
        0 8px 24px rgba(38,50,56,.05);

}


.why-icon {

    display:
        grid;

    place-items:
        center;

    width:
        52px;

    height:
        52px;

    margin-bottom:
        18px;

    background:
        var(--white);

    border-radius:
        16px;

    box-shadow:
        0 6px 16px rgba(38,50,56,.08);

    font-size:
        1.55rem;

}


.why-card:nth-child(3n + 1) .why-icon {

    background:
        var(--soft-red);

}


.why-card:nth-child(3n + 2) .why-icon {

    background:
        var(--soft-yellow);

}


.why-card:nth-child(3n) .why-icon {

    background:
        var(--soft-blue);

}


.why-card h3 {

    margin-bottom:
        7px;

}


.why-card p {

    font-size:
        .84rem;

}


/* =========================================================
   13. SKILLS
========================================================= */

.skills-section {

    padding:
        100px 0;

    background:
        var(--paper);

}


.skills-grid {

    display:
        grid;

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

    gap:
        18px;

}


.skill-card {

    min-height:
        230px;

    padding:
        26px;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

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

    transition:
        transform .2s ease,
        border-color .2s ease;

}


.skill-card:hover {

    transform:
        translateY(-4px);

    border-color:
        var(--alphabet-blue);

}


.skill-icon {

    display:
        grid;

    place-items:
        center;

    width:
        54px;

    height:
        54px;

    margin-bottom:
        20px;

    background:
        var(--soft-blue);

    border-radius:
        16px;

    font-size:
        1.6rem;

}


.skill-card:nth-child(2) .skill-icon,
.skill-card:nth-child(6) .skill-icon {

    background:
        var(--soft-yellow);

}


.skill-card:nth-child(3) .skill-icon,
.skill-card:nth-child(7) .skill-icon {

    background:
        var(--soft-green);

}


.skill-card:nth-child(4) .skill-icon,
.skill-card:nth-child(8) .skill-icon {

    background:
        var(--soft-purple);

}


.skill-card h3 {

    margin-bottom:
        8px;

    font-size:
        1.12rem;

}


.skill-card p {

    font-size:
        .8rem;

}


/* =========================================================
   14. CLASSROOM APPLICATIONS
========================================================= */

.classroom-section {

    padding:
        100px 0;

    background:
        var(--cream);

}


.application-grid {

    display:
        grid;

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

    gap:
        18px;

}


.application-card {

    padding:
        30px;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

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

}


.application-icon {

    margin-bottom:
        16px;

    font-size:
        2rem;

}


.application-card h3 {

    margin-bottom:
        8px;

}


.application-card p {

    font-size:
        .84rem;

}


/* =========================================================
   15. TEACHER FAVORITES
========================================================= */

.teacher-favorites {

    padding:
        100px 0;

    background:
        var(--paper);

}


.favorites-grid {

    display:
        grid;

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

    gap:
        18px;

}


.favorite-card {

    padding:
        28px;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

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

}


.favorite-icon {

    display:
        grid;

    place-items:
        center;

    width:
        52px;

    height:
        52px;

    margin-bottom:
        16px;

    background:
        var(--soft-yellow);

    border-radius:
        15px;

    font-size:
        1.45rem;

}


.favorite-card:nth-child(2) .favorite-icon,
.favorite-card:nth-child(5) .favorite-icon {

    background:
        var(--soft-blue);

}


.favorite-card:nth-child(3) .favorite-icon,
.favorite-card:nth-child(6) .favorite-icon {

    background:
        var(--soft-green);

}


.favorite-card h3 {

    margin-bottom:
        8px;

}


.favorite-card p {

    font-size:
        .82rem;

}


/* =========================================================
   16. FEATURED DOWNLOADS
========================================================= */

.featured-downloads {

    padding:
        105px 0;

    background:
        linear-gradient(
            135deg,
            #fff8ee,
            #edf6fa
        );

}


.download-grid {

    display:
        grid;

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

    gap:
        24px;

}


.download-card {

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

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

    overflow:
        hidden;

}


.download-card > img {

    width:
        100%;

    aspect-ratio:
        1 / 1;

    height:
        auto;

    object-fit:
        cover;

    object-position:
        center;

}


.download-content {

    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    padding:
        26px;

}


.download-category {

    background:
        var(--soft-blue);

    color:
        var(--primary-dark);

}


.download-card:nth-child(2) .download-category,
.download-card:nth-child(5) .download-category {

    background:
        var(--soft-yellow);

    color:
        #8a6b18;

}


.download-card:nth-child(3) .download-category,
.download-card:nth-child(6) .download-category {

    background:
        var(--soft-green);

    color:
        #4c7d58;

}


.download-content h3 {

    margin-bottom:
        9px;

}


.download-content p {

    font-size:
        .84rem;

}


.download-content .btn {

    margin-top:
        24px;

}


/* =========================================================
   17. TEACHER TIPS
========================================================= */

.teacher-tips {

    padding:
        100px 0;

    background:
        var(--paper);

}


.tips-grid {

    display:
        grid;

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

    gap:
        18px;

}


.tip-card {

    position:
        relative;

    padding:
        30px;

    background:
        var(--white);

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

    border-radius:
        var(--radius);

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

    overflow:
        hidden;

}


.tip-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        5px;

    background:
        var(--alphabet-blue);

}


.tip-card:nth-child(2)::before {

    background:
        var(--alphabet-green);

}


.tip-card:nth-child(3)::before {

    background:
        var(--alphabet-yellow);

}


.tip-card:nth-child(4)::before {

    background:
        var(--alphabet-purple);

}


.tip-card:nth-child(5)::before {

    background:
        var(--alphabet-red);

}


.tip-card:nth-child(6)::before {

    background:
        var(--alphabet-teal);

}


.tip-icon {

    margin-bottom:
        15px;

    font-size:
        1.8rem;

}


.tip-card h3 {

    margin-bottom:
        8px;

}


.tip-card p {

    font-size:
        .82rem;

}


/* =========================================================
   18. FAQ
========================================================= */

.faq-section {

    padding:
        100px 0;

    background:
        var(--cream);

}


.faq-grid {

    max-width:
        900px;

    margin:
        0 auto;

    display:
        grid;

    gap:
        12px;

}


.faq-card {

    background:
        var(--white);

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

    border-radius:
        16px;

    overflow:
        hidden;

}


.faq-card h3 {

    position:
        relative;

    padding:
        21px 52px 21px 24px;

    font-size:
        1rem;

    cursor:
        pointer;

}


.faq-card h3::after {

    content:
        "+";

    position:
        absolute;

    top:
        50%;

    right:
        22px;

    transform:
        translateY(-50%);

    color:
        var(--primary-dark);

    font-size:
        1.45rem;

    font-weight:
        400;

}


.faq-card p {

    padding:
        0 24px 22px;

    font-size:
        .84rem;

}


/* =========================================================
   19. NEWSLETTER
========================================================= */

.newsletter-section {

    padding:
        100px 0;

    background:
        var(--paper);

}


.newsletter-wrapper {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(330px, .85fr);

    gap:
        50px;

    align-items:
        center;

    padding:
        clamp(35px, 6vw, 65px);

    background:
        linear-gradient(
            135deg,
            var(--soft-blue),
            var(--soft-green)
        );

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

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

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

}


.newsletter-content h2 {

    margin-bottom:
        18px;

}


.newsletter-content > p {

    max-width:
        680px;

}


.newsletter-features {

    display:
        grid;

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

    gap:
        8px 18px;

    margin-top:
        25px;

}


.newsletter-features div {

    font-size:
        .8rem;

    font-weight:
        700;

}


.newsletter-form-card {

    padding:
        30px;

    background:
        rgba(255,255,255,.9);

    border:
        1px solid rgba(255,255,255,.8);

    border-radius:
        22px;

    box-shadow:
        0 12px 32px rgba(38,50,56,.08);

}


.newsletter-form-card h3 {

    margin-bottom:
        7px;

}


.newsletter-form-card > p {

    margin-bottom:
        20px;

    font-size:
        .82rem;

}


.form-group {

    margin-bottom:
        14px;

}


.form-group label {

    display:
        block;

    margin-bottom:
        6px;

    font-size:
        .76rem;

    font-weight:
        800;

}


.form-group input {

    width:
        100%;

    min-height:
        46px;

    padding:
        10px 13px;

    background:
        var(--white);

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

    border-radius:
        12px;

    outline:
        none;

}


.form-group input:focus {

    border-color:
        var(--alphabet-blue);

    box-shadow:
        0 0 0 4px rgba(111,168,201,.13);

}


/* =========================================================
   20. FINAL CTA
========================================================= */

.final-cta {

    padding:
        70px 0 100px;

    background:
        var(--paper);

}


.cta-card {

    position:
        relative;

    padding:
        clamp(40px, 7vw, 80px);

    background:
        var(--ink);

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

    color:
        var(--white);

    text-align:
        center;

    overflow:
        hidden;

}


.cta-card::before {

    content:
        "A B C";

    position:
        absolute;

    inset:
        auto 0 -42px;

    color:
        rgba(255,255,255,.035);

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

    font-size:
        clamp(5rem, 16vw, 12rem);

    font-weight:
        900;

    line-height:
        1;

    white-space:
        nowrap;

    pointer-events:
        none;

}


.cta-card > * {

    position:
        relative;

    z-index:
        1;

}


.cta-card .section-tag {

    background:
        rgba(255,255,255,.1);

    border-color:
        rgba(255,255,255,.16);

    color:
        var(--white);

}


.cta-card h2 {

    max-width:
        850px;

    margin:
        0 auto 18px;

    color:
        var(--white);

}


.cta-card p {

    max-width:
        700px;

    margin:
        0 auto;

    color:
        rgba(255,255,255,.78);

}


.cta-buttons {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        28px;

}


.cta-card .btn-primary {

    background:
        var(--white);

    color:
        var(--ink);

}


.cta-card .btn-primary:hover {

    background:
        var(--soft-yellow);

}


.cta-card .btn-secondary {

    background:
        transparent;

    border-color:
        rgba(255,255,255,.35);

    color:
        var(--white);

}


.cta-card .btn-secondary:hover {

    background:
        rgba(255,255,255,.08);

}


/* =========================================================
   21. FOOTER
========================================================= */

.site-footer {

    padding:
        70px 0 0;

    background:
        #202b30;

    color:
        rgba(255,255,255,.78);

}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.45fr
        repeat(3, 1fr);

    gap:
        45px;

    padding-bottom:
        55px;

}


.footer-column h3 {

    margin-bottom:
        15px;

    color:
        var(--white);

    font-size:
        1rem;

}


.footer-column p {

    max-width:
        430px;

    color:
        rgba(255,255,255,.65);

    font-size:
        .82rem;

}


.footer-column ul {

    display:
        grid;

    gap:
        8px;

}


.footer-column li a {

    color:
        rgba(255,255,255,.65);

    font-size:
        .8rem;

    transition:
        color .2s ease;

}


.footer-column li a:hover {

    color:
        var(--white);

}


.footer-social {

    display:
        flex;

    gap:
        8px;

    margin-top:
        20px;

}


.footer-social a {

    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    background:
        rgba(255,255,255,.08);

    border-radius:
        50%;

    color:
        var(--white);

    transition:
        background .2s ease,
        transform .2s ease;

}


.footer-social a:hover {

    background:
        var(--primary);

    transform:
        translateY(-2px);

}


.footer-bottom {

    padding:
        22px 0;

    border-top:
        1px solid rgba(255,255,255,.1);

    text-align:
        center;

}


.footer-bottom p {

    color:
        rgba(255,255,255,.48);

    font-size:
        .74rem;

}


/* =========================================================
   22. BACK TO TOP
========================================================= */

#backToTop {

    position:
        fixed;

    right:
        24px;

    bottom:
        24px;

    z-index:
        900;

    display:
        grid;

    place-items:
        center;

    width:
        48px;

    height:
        48px;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--ink);

    color:
        var(--white);

    box-shadow:
        0 10px 25px rgba(38,50,56,.2);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(12px);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease,
        background .2s ease;

}


#backToTop.show {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


#backToTop:hover {

    background:
        var(--primary-dark);

}


/* =========================================================
   23. FOCUS ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible {

    outline:
        3px solid rgba(111,168,201,.55);

    outline-offset:
        3px;

}


/* =========================================================
   24. RESPONSIVE — LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .nav-container {

        flex-wrap:
            wrap;

        padding:
            12px 0;

    }


    .search-bar {

        order:
            3;

        flex:
            1 1 100%;

        max-width:
            none;

    }


    nav {

        margin-left:
            auto;

    }


    .hero-grid {

        gap:
            45px;

    }


    .collection-grid {

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

    }


    .resource-grid {

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

    }


    .skills-grid {

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

    }

}


/* =========================================================
   25. RESPONSIVE — TABLET
========================================================= */

@media (max-width: 820px) {

    .container {

        width:
            min(100% - 30px, var(--container));

    }


    .nav-container {

        min-height:
            74px;

        flex-wrap:
            nowrap;

    }


    .logo img {

        width:
            48px;

        height:
            48px;

    }


    .logo h1 {

        font-size:
            1.12rem;

    }


    .search-bar {

        display:
            none;

    }


    nav {

        display:
            none;

    }


    .mobile-menu {

        display:
            block;

        margin-left:
            auto;

    }


    .hero-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .hero-content {

        max-width:
            none;

        text-align:
            center;

    }


    .hero-content h1::after {

        margin-inline:
            auto;

    }


    .hero-content > p {

        margin-inline:
            auto;

    }


    .hero-badges,
    .hero-buttons {

        justify-content:
            center;

    }


    .hero-image {

        width:
            min(100%, 500px);

        margin-inline:
            auto;

    }


    .featured-resource-card {

        grid-template-columns:
            1fr;

    }


    .featured-image {

        min-height:
            320px;

    }


    .why-grid,
    .application-grid,
    .favorites-grid,
    .tips-grid {

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

    }


    .download-grid {

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

    }


    .newsletter-wrapper {

        grid-template-columns:
            1fr;

    }


    .footer-grid {

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

    }

}


/* =========================================================
   26. RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    body {

        font-size:
            15px;

    }


    .container {

        width:
            min(100% - 24px, var(--container));

    }


    .printable-hero {

        padding:
            24px 0 60px;

    }


    .printable-hero::before {

        font-size:
            13rem;

        top:
            0;

        right:
            -30px;

    }


    .printable-hero::after {

        font-size:
            10rem;

        left:
            -25px;

    }


    .breadcrumb {

        margin-bottom:
            25px;

        font-size:
            .72rem;

    }


    h1 {

        font-size:
            clamp(2.35rem, 13vw, 3.5rem);

    }


    h2 {

        font-size:
            clamp(1.8rem, 9vw, 2.5rem);

    }


    .hero-content > p {

        font-size:
            .95rem;

    }


    .hero-badges {

        gap:
            7px;

    }


    .hero-badges span {

        font-size:
            .68rem;

    }


    .hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .hero-buttons .btn {

        width:
            100%;

    }


    .hero-image img {

        border-width:
            8px;

        border-radius:
            24px;

    }


    .hero-image::before {

        inset:
            -10px;

        border-radius:
            25px;

    }


    .hero-image::after {

        width:
            70px;

        height:
            70px;

        right:
            -10px;

        bottom:
            -15px;

        border-width:
            7px;

    }


    .resource-stats {

        padding:
            8px 0;

    }


    .stats-grid {

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

    }


    .stat-card {

        padding:
            13px 10px;

    }


    .stat-card:nth-child(2)::after {

        display:
            none;

    }


    .stat-card:nth-child(-n + 2) {

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

    }


    .stat-card h2 {

        font-size:
            1.65rem;

    }


    .stat-card p {

        font-size:
            .68rem;

    }


    .featured-resource,
    .featured-collections,
    .resource-library,
    .why-section,
    .skills-section,
    .classroom-section,
    .teacher-favorites,
    .featured-downloads,
    .teacher-tips,
    .faq-section,
    .newsletter-section {

        padding:
            70px 0;

    }


    .section-heading {

        margin-bottom:
            34px;

    }


    .section-heading p {

        font-size:
            .9rem;

    }


    .featured-image {

        min-height:
            260px;

    }


    .featured-content {

        padding:
            30px 24px;

    }


    .feature-list {

        grid-template-columns:
            1fr;

    }


    .collection-grid,
    .resource-grid,
    .why-grid,
    .skills-grid,
    .application-grid,
    .favorites-grid,
    .download-grid,
    .tips-grid {

        grid-template-columns:
            1fr;

    }


    .collection-content,
    .resource-content,
    .download-content {

        padding:
            22px;

    }


    .resource-card > img {

        aspect-ratio:
            1 / .82;

    }


    .skill-card {

        min-height:
            auto;

    }


    .newsletter-wrapper {

        padding:
            30px 22px;

        border-radius:
            22px;

    }


    .newsletter-features {

        grid-template-columns:
            1fr;

    }


    .newsletter-form-card {

        padding:
            23px;

    }


    .final-cta {

        padding:
            35px 0 70px;

    }


    .cta-card {

        padding:
            45px 22px;

        border-radius:
            24px;

    }


    .cta-buttons {

        flex-direction:
            column;

    }


    .cta-buttons .btn {

        width:
            100%;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .site-footer {

        padding-top:
            55px;

    }


    #backToTop {

        right:
            15px;

        bottom:
            15px;

        width:
            44px;

        height:
            44px;

    }

}


/* =========================================================
   27. REDUCED MOTION
========================================================= */

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

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

    }

}