/* =========================================================
   LITTLE EXPLORERS LEARNING HUB
   SIGHT WORDS
   styles/sight-words.css
========================================================= */

:root {

    --reading-cream: #fffaf3;
    --reading-paper: #fffdf9;
    --reading-white: #ffffff;

    --reading-ink: #29363d;
    --reading-soft: #637179;

    --reading-plum: #776b91;
    --reading-plum-soft: #f1eff7;

    --reading-sage: #8da58d;
    --reading-sage-soft: #edf3eb;

    --reading-blue: #86aabd;
    --reading-blue-soft: #edf4f7;

    --reading-peach: #d99987;
    --reading-peach-soft: #faece7;

    --reading-gold: #d4b16c;
    --reading-gold-soft: #fbf4e4;

    --reading-border: #e4ddd4;

    --reading-shadow:
        0 18px 50px rgba(50,60,65,.09);

    --reading-shadow-small:
        0 8px 24px rgba(50,60,65,.07);

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: var(--reading-paper);

    color: var(--reading-ink);

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

}


button,
select {
    font: inherit;
}


img {
    max-width: 100%;
    height: auto;
}


a {
    color: inherit;
}


.container {

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin:
        0 auto;

}


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

.site-header {

    position:
        relative;

    z-index:
        50;

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

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

}


.nav-container {

    width:
        min(
            1280px,
            calc(100% - 40px)
        );

    min-height:
        82px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        28px;

}


.logo {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex-shrink:
        0;

    text-decoration:
        none;

}


.logo img {

    width:
        58px;

    height:
        58px;

    object-fit:
        contain;

}


.logo-text {

    display:
        flex;

    flex-direction:
        column;

}


.logo-text strong {

    color:
        #514779;

    font-family:
        "Baloo 2",
        sans-serif;

    font-size:
        1.25rem;

    line-height:
        1;

}


.logo-text small {

    margin-top:
        3px;

    color:
        #6c628e;

    font-size:
        .68rem;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.main-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        22px;

    flex:
        1;

}


.main-nav a {

    position:
        relative;

    padding:
        28px 0;

    color:
        #515762;

    font-size:
        .86rem;

    font-weight:
        800;

    text-decoration:
        none;

}


.main-nav a:hover,
.main-nav a.active {

    color:
        #66548f;

}


.main-nav a.active::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        14px;

    height:
        3px;

    border-radius:
        99px;

    background:
        #66548f;

}


.header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.header-resource-link {

    padding:
        12px 18px;

    border-radius:
        999px;

    background:
        var(--reading-plum-soft);

    color:
        #66548f;

    font-size:
        .76rem;

    font-weight:
        900;

    text-decoration:
        none;

}


.mobile-menu {

    display:
        none;

    width:
        44px;

    height:
        44px;

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

    border-radius:
        12px;

    background:
        white;

}


.mobile-menu span {

    display:
        block;

    width:
        20px;

    height:
        2px;

    margin:
        4px auto;

    background:
        var(--reading-ink);

}


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

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        11px 20px;

    border-radius:
        999px;

    font-size:
        .82rem;

    font-weight:
        900;

    text-decoration:
        none;

    cursor:
        pointer;

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

}


.btn:hover {

    transform:
        translateY(-2px);

}


.btn-primary {

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

    background:
        var(--reading-peach);

    color:
        white;

    box-shadow:
        0 8px 18px rgba(217,153,135,.18);

}


.btn-secondary {

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

    background:
        white;

    color:
        var(--reading-ink);

}


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

.sight-hero {

    padding:
        84px 0 78px;

    background:
        linear-gradient(
            135deg,
            var(--reading-cream),
            var(--reading-plum-soft) 57%,
            var(--reading-blue-soft)
        );

}


.sight-hero-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(380px,.85fr);

    align-items:
        center;

    gap:
        65px;

}


.page-tag {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        8px 14px;

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

    border-radius:
        999px;

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

    color:
        var(--reading-plum);

    font-size:
        .73rem;

    font-weight:
        900;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

}


.sight-hero h1 {

    margin:
        20px 0 15px;

    font-family:
        "Baloo 2",
        sans-serif;

    font-size:
        clamp(3.5rem,7vw,6rem);

    line-height:
        .88;

    letter-spacing:
        -.04em;

}


.sight-hero h1 span {

    display:
        block;

    color:
        var(--reading-plum);

}


.hero-description {

    max-width:
        660px;

    margin:
        0;

    color:
        var(--reading-soft);

    font-size:
        1.05rem;

    line-height:
        1.75;

}


.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        11px;

    margin-top:
        27px;

}


.sight-features {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        28px;

}


.sight-features span {

    padding:
        8px 12px;

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

    border-radius:
        999px;

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

    color:
        var(--reading-soft);

    font-size:
        .74rem;

    font-weight:
        900;

}


/* =========================================================
   HERO ART
========================================================= */

.sight-hero-art {

    min-height:
        430px;

    padding:
        28px;

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

    border-radius:
        32px;

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

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

}


.word-scene {

    position:
        relative;

    width:
        100%;

    height:
        375px;

    overflow:
        hidden;

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f5f1f8
        );

}


.word-card {

    position:
        absolute;

    display:
        grid;

    place-items:
        center;

    width:
        150px;

    height:
        105px;

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

    border-radius:
        18px;

    background:
        white;

    box-shadow:
        0 12px 25px rgba(50,60,65,.09);

    color:
        var(--reading-ink);

    font-family:
        "Baloo 2",
        sans-serif;

    font-size:
        2.1rem;

    font-weight:
        800;

}


.card-one {

    top:
        55px;

    left:
        42px;

    transform:
        rotate(-8deg);

    background:
        var(--reading-peach-soft);

}


.card-two {

    top:
        130px;

    right:
        35px;

    transform:
        rotate(7deg);

    background:
        var(--reading-sage-soft);

}


.card-three {

    bottom:
        35px;

    left:
        90px;

    transform:
        rotate(4deg);

    background:
        var(--reading-blue-soft);

}


.book-shape {

    position:
        absolute;

    right:
        80px;

    bottom:
        45px;

    display:
        grid;

    place-items:
        center;

    width:
        135px;

    height:
        100px;

    border-radius:
        12px 12px 20px 20px;

    background:
        var(--reading-gold-soft);

    color:
        #92743c;

    font-family:
        "Baloo 2",
        sans-serif;

    font-size:
        1.45rem;

    font-weight:
        800;

    transform:
        rotate(-5deg);

}


.book-shape::before {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        10px;

    bottom:
        10px;

    width:
        2px;

    background:
        rgba(146,116,60,.18);

}


.pencil-shape {

    position:
        absolute;

    top:
        25px;

    right:
        32px;

    color:
        var(--reading-peach);

    font-size:
        3rem;

    transform:
        rotate(25deg);

}


/* =========================================================
   DEVELOPMENTAL NOTE
========================================================= */

.developmental-section {

    padding:
        34px 0;

    background:
        white;

}


.developmental-card {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        17px;

    padding:
        24px 28px;

    border:
        1px solid #dce6da;

    border-radius:
        21px;

    background:
        var(--reading-sage-soft);

}


.developmental-icon {

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 48px;

    width:
        48px;

    height:
        48px;

    border-radius:
        15px;

    background:
        white;

    font-size:
        1.2rem;

}


.developmental-card strong {

    display:
        block;

    margin-bottom:
        5px;

    font-family:
        "Baloo 2",
        sans-serif;

    font-size:
        1.1rem;

}


.developmental-card p {

    margin:
        0;

    color:
        var(--reading-soft);

    font-size:
        .86rem;

    line-height:
        1.7;

}


/* =========================================================
   RESOURCES
========================================================= */

.resources-section {

    padding:
        94px 0;

    background:
        var(--reading-cream);

}


.section-heading {

    max-width:
        760px;

    margin:
        0 auto 44px;

    text-align:
        center;

}


.section-heading > span {

    color:
        var(--reading-plum);

    font-size:
        .72rem;

    font-weight:
        900;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;

}


.section-heading h2 {

    margin:
        10px 0 12px;

    font-family:
        "Baloo 2",
        sans-serif;

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

    line-height:
        1;

}


.section-heading p {

    margin:
        0;

    color:
        var(--reading-soft);

    font-size:
        .94rem;

    line-height:
        1.75;

}


.resource-grid {

    display:
        grid;

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

    gap:
        18px;

}


.resource-card {

    display:
        flex;

    flex-direction:
        column;

    padding:
        28px;

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

    border-radius:
        24px;

    background:
        white;

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

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

}


.resource-card:hover {

    transform:
        translateY(-5px);

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

}


.resource-icon {

    display:
        grid;

    place-items:
        center;

    width:
        54px;

    height:
        54px;

    margin-bottom:
        19px;

    border-radius:
        16px;

    font-family:
        "Baloo 2",
        sans-serif;

    font-size:
        1.1rem;

    font-weight:
        800;

}


.resource-icon.flash {

    background:
        var(--reading-plum-soft);

    color:
        var(--reading-plum);

}


.resource-icon.match {

    background:
        var(--reading-blue-soft);

    color:
        #638da3;

}


.resource-icon.sentence {

    background:
        var(--reading-peach-soft);

    color:
        var(--reading-peach);

}


.resource-icon.center {

    background:
        var(--reading-gold-soft);

    color:
        #9a793e;

}


.resource-card h3 {

    margin:
        0 0 9px;

    font-family:
        "Baloo 2",
        sans-serif;

    font-size:
        1.32rem;

}


.resource-card p {

    margin:
        0;

    color:
        var(--reading-soft);

    font-size:
        .84rem;

    line-height:
        1.7;

}


.resource-card ul {

    display:
        grid;

    gap:
        7px;

    margin:
        20px 0;

    padding:
        0;

    list-style:
        none;

}


.resource-card li {

    position:
        relative;

    padding-left:
        18px;

    color:
        var(--reading-soft);

    font-size:
        .76rem;

}


.resource-card li::before {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    color:
        var(--reading-sage);

    font-weight:
        900;

}


.resource-button {

    width:
        100%;

    margin-top:
        auto;

    padding:
        11px 14px;

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

    border-radius:
        999px;

    background:
        var(--reading-paper);

    color:
        var(--reading-ink);

    font-size:
        .76rem;

    font-weight:
        900;

    cursor:
        pointer;

}


.resource-button:hover {

    border-color:
        var(--reading-sage);

    background:
        var(--reading-sage-soft);

}


/* =========================================================
   BUILDER
========================================================= */

.builder-section {

    padding:
        94px 0;

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

}


.builder-panel {

    max-width:
        1020px;

    margin:
        0 auto;

    padding:
        40px;

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

    border-radius:
        30px;

    background:
        white;

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

}


.builder-heading {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        17px;

    margin-bottom:
        30px;

}


.builder-icon {

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 54px;

    width:
        54px;

    height:
        54px;

    border-radius:
        16px;

    background:
        var(--reading-plum-soft);

    color:
        var(--reading-plum);

    font-family:
        "Baloo 2",
        sans-serif;

    font-size:
        1.15rem;

    font-weight:
        800;

}


.builder-heading > div:last-child > span {

    color:
        var(--reading-plum);

    font-size:
        .71rem;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.builder-heading h2 {

    margin:
        5px 0 7px;

    font-family:
        "Baloo 2",
        sans-serif;

    font-size:
        clamp(1.8rem,4vw,2.6rem);

    line-height:
        1;

}


.builder-heading p {

    margin:
        0;

    color:
        var(--reading-soft);

    font-size:
        .86rem;

}


.builder-controls {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        18px;

    margin-bottom:
        20px;

}


.control-box {

    padding:
        18px;

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

    border-radius:
        17px;

    background:
        var(--reading-paper);

}


.control-box label {

    display:
        block;

    margin-bottom:
        9px;

    font-size:
        .76rem;

    font-weight:
        900;

}


.control-box select {

    width:
        100%;

    min-height:
        44px;

    padding:
        8px 11px;

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

    border-radius:
        10px;

    background:
        white;

    color:
        var(--reading-ink);

    font-size:
        .82rem;

    font-weight:
        700;

}


.builder-actions-small {

    display:
        flex;

    gap:
        8px;

}


.builder-actions-small button {

    padding:
        8px 14px;

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

    border-radius:
        999px;

    background:
        white;

    color:
        var(--reading-soft);

    font-size:
        .74rem;

    font-weight:
        900;

    cursor:
        pointer;

}


.builder-actions-small button:hover {

    border-color:
        var(--reading-sage);

    background:
        var(--reading-sage-soft);

}


.word-groups {

    display:
        grid;

    gap:
        14px;

}


.word-group {

    padding:
        20px;

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

    border-radius:
        18px;

    background:
        var(--reading-cream);

}


.group-title {

    margin-bottom:
        13px;

    color:
        var(--reading-plum);

    font-family:
        "Baloo 2",
        sans-serif;

    font-size:
        1rem;

    font-weight:
        800;

}


.word-grid {

    display:
        grid;

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

    gap:
        8px;

}


.word-choice {

    min-height:
        52px;

    padding:
        8px;

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

    border-radius:
        12px;

    background:
        white;

    color:
        var(--reading-ink);

    font-family:
        "Baloo 2",
        sans-serif;

    font-size:
        1rem;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;

}


.word-choice:hover {

    transform:
        translateY(-2px);

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

    background:
        var(--reading-blue-soft);

}


.word-choice.selected {

    border-color:
        var(--reading-plum);

    background:
        var(--reading-plum);

    color:
        white;

}


.builder-status {

    min-height:
        24px;

    margin:
        14px 0;

    color:
        var(--reading-soft);

    font-size:
        .8rem;

    font-weight:
        800;

}


.builder-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

}


.builder-note {

    margin-top:
        22px;

    padding:
        17px;

    border:
        1px solid rgba(134,170,189,.25);

    border-radius:
        15px;

    background:
        var(--reading-blue-soft);

}


.builder-note strong {

    display:
        block;

    margin-bottom:
        4px;

    font-family:
        "Baloo 2",
        sans-serif;

}


.builder-note p {

    margin:
        0;

    color:
        var(--reading-soft);

    font-size:
        .78rem;

    line-height:
        1.65;

}


/* =========================================================
   TEACHING IDEAS
========================================================= */

.teaching-section {

    padding:
        94px 0;

    background:
        white;

}


.ideas-grid {

    display:
        grid;

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

    gap:
        18px;

}


.ideas-grid article {

    padding:
        26px;

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

    border-radius:
        22px;

    background:
        var(--reading-paper);

}


.ideas-grid strong {

    display:
        grid;

    place-items:
        center;

    width:
        37px;

    height:
        37px;

    margin-bottom:
        17px;

    border-radius:
        11px;

    background:
        var(--reading-sage-soft);

    color:
        #6f936e;

    font-size:
        .72rem;

}


.ideas-grid h3 {

    margin:
        0 0 8px;

    font-family:
        "Baloo 2",
        sans-serif;

    font-size:
        1.23rem;

}


.ideas-grid p {

    margin:
        0;

    color:
        var(--reading-soft);

    font-size:
        .81rem;

    line-height:
        1.7;

}


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

.cta-section {

    padding:
        70px 0;

    background:
        var(--reading-cream);

}


.cta-card {

    max-width:
        820px;

    margin:
        0 auto;

    padding:
        55px 40px;

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

    border-radius:
        30px;

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

    text-align:
        center;

}


.cta-card > span {

    color:
        #6f936e;

    font-size:
        .72rem;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.cta-card h2 {

    margin:
        10px 0;

    font-family:
        "Baloo 2",
        sans-serif;

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

    line-height:
        1;

}


.cta-card p {

    max-width:
        620px;

    margin:
        0 auto 25px;

    color:
        var(--reading-soft);

    font-size:
        .9rem;

    line-height:
        1.7;

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    padding:
        70px 0 24px;

    background:
        #202532;

    color:
        #dce2e5;

}


.footer-grid {

    display:
        grid;

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

    gap:
        50px;

}


.footer-grid h3,
.footer-grid h4 {

    font-family:
        "Baloo 2",
        sans-serif;

}


.footer-grid h3 {

    margin:
        0 0 9px;

    color:
        #f1f3f4;

}


.footer-grid h4 {

    margin:
        0 0 13px;

    color:
        white;

}


.footer-grid p {

    max-width:
        330px;

    margin:
        0;

    color:
        #b9c4c9;

    font-size:
        .82rem;

    line-height:
        1.7;

}


.footer-grid a {

    display:
        block;

    margin-bottom:
        10px;

    color:
        #c9d2d6;

    font-size:
        .78rem;

    text-decoration:
        none;

}


.footer-grid a:hover {

    color:
        white;

}


.footer-bottom {

    margin-top:
        45px;

    padding-top:
        22px;

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

    text-align:
        center;

}


.footer-bottom p {

    max-width:
        none;

    margin:
        0;

    color:
        #aeb8bd;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1050px) {

    .main-nav {

        gap:
            14px;

    }


    .main-nav a {

        font-size:
            .78rem;

    }


    .sight-hero-grid {

        grid-template-columns:
            1fr 420px;

        gap:
            35px;

    }


    .resource-grid,
    .ideas-grid {

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

    }

}


@media (max-width:850px) {

    .nav-container {

        min-height:
            74px;

    }


    .main-nav {

        position:
            absolute;

        top:
            74px;

        left:
            0;

        right:
            0;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        padding:
            12px 20px 18px;

        background:
            white;

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

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

    }


    .main-nav.mobile-open {

        display:
            flex;

    }


    .main-nav a {

        padding:
            11px 8px;

    }


    .main-nav a.active::after {

        display:
            none;

    }


    .header-resource-link {

        display:
            none;

    }


    .mobile-menu {

        display:
            block;

    }


    .sight-hero-grid {

        grid-template-columns:
            1fr;

    }


    .sight-hero-content {

        text-align:
            center;

    }


    .hero-description {

        margin:
            0 auto;

    }


    .hero-buttons,
    .sight-features {

        justify-content:
            center;

    }


    .sight-hero-art {

        max-width:
            560px;

        margin:
            0 auto;

    }


    .builder-controls {

        grid-template-columns:
            1fr;

    }

}


@media (max-width:650px) {

    .container,
    .nav-container {

        width:
            min(
                100% - 28px,
                1180px
            );

    }


    .logo-text {

        display:
            none;

    }


    .sight-hero {

        padding:
            65px 0;

    }


    .sight-hero h1 {

        font-size:
            3.45rem;

    }


    .hero-description {

        font-size:
            .95rem;

    }


    .sight-features {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

    }


    .word-scene {

        height:
            330px;

    }


    .word-card {

        width:
            120px;

        height:
            85px;

        font-size:
            1.65rem;

    }


    .card-one {

        left:
            18px;

    }


    .card-two {

        right:
            18px;

    }


    .card-three {

        left:
            45px;

    }


    .book-shape {

        right:
            38px;

        width:
            110px;

        height:
            82px;

    }


    .resource-grid,
    .ideas-grid {

        grid-template-columns:
            1fr;

    }


    .developmental-card {

        padding:
            20px;

    }


    .builder-panel {

        padding:
            27px 18px;

        border-radius:
            23px;

    }


    .word-grid {

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

    }


    .builder-buttons {

        display:
            grid;

    }


    .builder-buttons .btn {

        width:
            100%;

    }


    .cta-card {

        padding:
            42px 22px;

    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            30px;

    }

}


@media (max-width:430px) {

    .sight-hero h1 {

        font-size:
            2.9rem;

    }


    .word-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

    }

}


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

    html {

        scroll-behavior:
            auto;

    }


    * {

        transition:
            none !important;

    }

}