/* ==========================================================
   THE OPEN SHELF
   Homepage Styles
========================================================== */

/* ==========================================================
   1. Design Tokens
========================================================== */

:root {

    --cream: #FAF8F3;
    --white: #FFFFFF;

    --navy: #22334A;

    --sage: #92A98A;

    --gold: #D8B66B;

    --text: #394A5A;

    --muted: #6D7A86;

    --border: #E8E3D9;

    --shadow:
        0 10px 30px rgba(34,51,74,.08);

    --radius: 22px;

}

/* ==========================================================
   2. Reset
========================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body {

    background: var(--cream);

    color: var(--text);

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

    line-height: 1.6;

}

/* ==========================================================
   3. Typography
========================================================== */

h1,
h2,
h3 {

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

    color: var(--navy);

}

a {

    text-decoration: none;

    color: inherit;

}

/* ==========================================================
   4. Site Header
========================================================== */

.site-header {

    width: min(1200px, 92%);

    margin: 0 auto;

    padding: 2rem 0 1rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.logo {

    display: flex;

    align-items: center;

    gap: 1rem;

}

.logo img {

    width: 90px;

    height: auto;

    display: block;

}

.logo span {

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

    font-size: 1.6rem;

    font-weight: 700;

    color: var(--navy);

}

nav {

    display: flex;

    gap: 2.5rem;

}

nav a {

    font-weight: 600;

    color: var(--text);

    transition: .25s;

}

nav a:hover {

    color: var(--sage);

}

/* ==========================================================
   5. Hero
========================================================== */

.hero {

    width: min(1200px, 92%);

    margin: 3rem auto 7rem;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 6rem;

}

.hero-content h1 {

    font-size: clamp(3rem, 5vw, 4.5rem);

    line-height: 1.05;

    letter-spacing: -.03em;

    margin-bottom: 1.5rem;

    max-width: 10ch;

}

.hero-content p {

    font-size: 1.2rem;

    color: var(--muted);

    max-width: 34rem;

    margin-bottom: 2.25rem;

}

.primary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 1rem 2.25rem;

    border-radius: 999px;

    background: linear-gradient(
        135deg,
        var(--navy),
        #304766
    );

    color: white;

    font-weight: 600;

    font-size: 1rem;

    box-shadow: var(--shadow);

    transition: all .25s ease;

}

.primary-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 16px 36px rgba(34,51,74,.18);

}

.shelf-btn {
    margin-top: 2rem;
}

.hero-image {

    width: 100%;

    max-width: 950px;

    height: auto;

    display: block;

}

.hero-illustration {

    display: flex;

    justify-content: center;

    align-items: center;

}

/* ==========================================================
   Shelf Preview
========================================================== */

.shelf-preview {

    max-width: 1200px;

    margin: 7rem auto;

    padding: 0 2rem;

    text-align: center;

}

/* ==========================================================
   Section Heading
========================================================== */

.section-heading {

    text-align: center;

    margin-bottom: 4rem;

}

.section-heading h2 {

    margin: 0;

    font-size: 3rem;

    letter-spacing: -.02em;

    color: var(--navy);

}

.section-divider {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    margin-top: 1rem;

}

.section-divider span {

    width: 80px;

    height: 1px;

    background: rgba(146,169,138,.35);

}

.divider-mark {

    color: #93A283;

    font-size: 1rem;

}

/* ==========================================================
   Generator Grid
========================================================== */

.generator-grid {

    display: grid;

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

    gap: 3.5rem 2.5rem;

    justify-items: center;

}

/* ==========================================================
   Generator Tile
========================================================== */

.generator-tile {

    background: white;

    border-radius: 28px;

    padding: 2.5rem 2rem;

    text-align: center;

    box-shadow: 0 10px 30px rgba(34, 51, 74, 0.08);

    border: 1px solid rgba(146, 169, 138, 0.18);

    transition: all .35s ease;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

}

.tile-illustration {

    width: 160px;
    height: 160px;

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

    margin-bottom: 1.5rem;

    border-radius: 24px;

    background:
        radial-gradient(
            circle,
            #FFFCF8,
            #F8F5EE
        );

}

.tile-illustration img {

    width: 150px;

    height: auto;

    display: block;

    transition: transform .35s ease;

}

.tile-title {

    margin: 0;

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

    font-size: 1.2rem;

    font-weight: 600;

    color: var(--navy);

}

.tile-status {

    margin-top: 1rem;

    padding: .45rem 1rem;

    border-radius: 999px;

    font-size: .8rem;

    font-weight: 600;

}

.tile-description {

    color: #6E6A61;

    font-size: .95rem;

    line-height: 1.6;

    margin: .9rem 0 1.6rem;

    flex-grow: 1;

}

.generator-tile:hover .tile-illustration img {

    transform: translateY(-6px);

}

.available {

    background: #EAF3E4;

    color: #617453;

}

.browse-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .8rem;

    margin-top: 4rem 

    padding: 1rem 2.25rem;

    background: white;

    border: 1px solid rgba(146,169,138,.20);

    border-radius: 999px;

    color: var(--navy);

    text-decoration: none;

    font-weight: 500;

    font-size: 1rem;

    box-shadow: 0 10px 25px rgba(34,51,74,.08);

    transition: all .3s ease;

}

.browse-icon {

    width: 28px;

    height: auto;

    flex-shrink: 0;

    transition: transform .3s ease;

}

.browse-button:hover {

    transform: translateY(-3px);

    box-shadow: 0 16px 32px rgba(34,51,74,.12);

}

.browse-button:hover .browse-icon {

    transform: rotate(-4deg);

}

.generator-tile:hover {

    transform: translateY(-8px);

    box-shadow: 0 22px 50px rgba(34, 51, 74, 0.15);

}

/* ==========================================================
   Why Teachers Love
========================================================== */

.why-open-shelf {

    max-width: 1200px;

    margin: 8rem auto;

    padding: 0 2rem;

}

.feature-grid {

    display: grid;

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

    gap: 2rem;

    margin-top: 4rem;

}

.feature-card {

    background: #FFFCF8;

    border-radius: 22px;

    padding: 2.5rem;

    text-align: center;

    box-shadow:
        0 10px 30px rgba(34, 51, 74, .06);

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

    border: 1px solid rgba(147, 162, 131, .10);

}

.feature-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 18px 38px rgba(34, 51, 74, .10);

}

.feature-icon {

    display: flex;

    justify-content: center;

    margin-bottom: 1.5rem;

}

.feature-icon img {

    width: 110px;

    height: 110px;

    object-fit: contain;

}

.feature-card h3 {

    margin: 0;

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

    font-size: 1.3rem;

    color: var(--navy);

}

.feature-card p {

    margin-top: 1rem;

    line-height: 1.8;

    font-size: .98rem;

    color: #66717D;

}

.feature-flourish {

    margin-top: 1.75rem;

    font-size: 1rem;

    color: #93A283;

}

/* ======================================
   Open Shelf Pro
====================================== */

.pro-section {

    max-width: 1200px;

    margin: 7rem auto;

    padding: 0 2rem;

}

.pro-card {

    display: grid;

    grid-template-columns: 320px 1fr;

    gap: 4rem;

    align-items: center;

    background: #FFFCF8;

    border-radius: 34px;

    padding: 3rem;

    border: 1px solid rgba(147,162,131,.12);

    box-shadow: 0 14px 36px rgba(34,51,74,.06);

}

.pro-illustration {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 1rem;

}

.pro-illustration img {

    width: 340px;

    max-width: 100%;

    height: auto;

    display: block;

}

.pro-content h2 {

    margin: .4rem 0 1rem;

}

.pro-content p {

    color: #66717D;

    line-height: 1.8;

}

.eyebrow {

    letter-spacing: .18em;

    font-size: .82rem;

    color: #93A283;

    font-weight: 700;

}

.pro-features {

    list-style: none;

    padding: 0;

    margin: 2rem 0;

}

.pro-features li {

    margin-bottom: .9rem;

    color: #22334A;

}

.pro-card {

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

}

.pro-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 20px 42px rgba(34,51,74,.10);

}

/* ======================================
   Meet Amanda
====================================== */

.meet-amanda {

    max-width: 1200px;

    margin: 7rem auto;

    padding: 0 2rem;

    display: grid;

    grid-template-columns: 320px 1fr;

    gap: 5rem;

    align-items: center;

}

.meet-photo {

    display: flex;

    justify-content: center;

}

.meet-photo img {

    width: 280px;

    height: 280px;

    object-fit: cover;

    border-radius: 50%;

    border: 8px solid white;

    box-shadow: 0 18px 40px rgba(34,51,74,.10);

}

.meet-content {

    text-align: left;

    background: white;

    padding: 3rem;

    border-radius: 30px;

    box-shadow: 0 12px 35px rgba(34,51,74,.08);

    border: 1px solid rgba(146,169,138,.15);

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

}

.meet-content h2 {

    margin-bottom: 1.5rem;

    color: var(--navy);

    font-size: 2.6rem;

    line-height: 1.15;

}

.meet-content p {

    color: #6E6A61;

    font-size: 1.08rem;

    line-height: 1.9;

    margin-bottom: 1.5rem;

    max-width: 640px;

}

.meet-content:hover {

    transform: translateY(-6px);

    box-shadow: 0 20px 45px rgba(34,51,74,.12);

}

.signature {

    margin-top: 2rem;

    margin-left: .75rem;

}

.signature-name {

    margin: .2rem 0 0;

    font-family: "Dancing Script", cursive;

    font-size: 3.5rem;

    font-weight: 600;

    color: rgba(34, 51, 74, .92);

    line-height: 1;

}

.signature-message {

    margin: 0;

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

    font-size: .9rem;

    opacity: .75;

    font-style: italic;

    font-weight: 400;

    color: #7C7A73;

}

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

.site-footer {

    width: 100%;

    margin-top: 6rem;

    padding: 4rem 2rem 2rem;

    background: #F4F0E8;

    border-top: 1px solid #E8E3D9;

    text-align: center;

}


.site-footer-content {

    width: min(900px, 100%);

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

}


/* ==========================================================
   Footer Logo
========================================================== */

.site-footer-logo {

    width: 55px;

    height: auto;

    margin-bottom: .75rem;

}


/* ==========================================================
   Footer Name
========================================================== */

.site-footer-name {

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

    font-size: 1.35rem;

    font-weight: 700;

    color: var(--navy);

}


/* ==========================================================
   Footer Tagline
========================================================== */

.site-footer-tagline {

    margin: .5rem 0 1.75rem;

    font-size: .95rem;

    line-height: 1.6;

    color: #6D7A86;

}


/* ==========================================================
   Footer Navigation
========================================================== */

.site-footer-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 2rem;

}


.site-footer-nav a {

    font-size: .9rem;

    font-weight: 600;

    color: var(--navy);

    text-decoration: none;

    transition:
        color .2s ease;

}


.site-footer-nav a:hover {

    color: var(--sage);

}


/* ==========================================================
   Footer Bottom
========================================================== */

.site-footer-bottom {

    width: 100%;

    margin-top: 2.5rem;

    padding-top: 1.5rem;

    border-top: 1px solid #E8E3D9;

}


.site-footer-bottom p {

    margin: 0;

    font-size: .75rem;

    letter-spacing: .03em;

    color: #8A949C;

}


.site-footer-signoff {

    margin-top: .5rem !important;

    font-size: .85rem !important;

    font-style: italic;

    color: #7F9276 !important;

}

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

@media (max-width: 700px) {

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

@media (max-width: 700px) {

    /* ------------------------------------------------------
       What's on the Shelf
    ------------------------------------------------------ */

    .generator-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .generator-tile {
        width: 100%;
    }


    /* ------------------------------------------------------
       Why Teachers Love The Open Shelf
    ------------------------------------------------------ */

    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .feature-card {
        width: 100%;
    }


    /* ------------------------------------------------------
       Open Shelf Pro
    ------------------------------------------------------ */

    .pro-card {
        display: flex;
        flex-direction: column;
    }

    .pro-illustration {
        width: 100%;
    }

    .pro-illustration img {
        width: 100%;
        height: auto;
        display: block;
    }

    .pro-content {
        width: 100%;
    }


    /* ------------------------------------------------------
       Built by a Teacher
    ------------------------------------------------------ */

    .meet-amanda {
        display: flex;
        flex-direction: column;
    }

    .meet-content {
        order: 1;
        width: 100%;
    }

    .meet-photo {
        order: 2;
        width: 100%;
        margin-top: 2rem;
    }

    .meet-photo img {
        width: 100%;
        max-width: 320px;
        height: auto;
        display: block;
        margin: 0 auto;
    }

}

}