/*
Theme Name: Many Petals React Runtime
Author: Many Petals
Description: WordPress shell that preserves the approved Many Petals React/Vite runtime and exposes curated copy/link/SEO fields in WordPress admin.
Version: 2.1.0
Text Domain: manypetals-react
*/

/* Small readability polish for the home hero headline. */
.home-hero-desktop .hero-world__title {
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    word-spacing: 0.12em !important;
}

.home-hero-desktop .hero-title-line {
    margin-block: 0.03em !important;
}

.home-hero-desktop .hero-title-line--bottom {
    word-spacing: 0.14em !important;
}

@media (max-width: 760px) {
    .home-frontispiece-hero__title {
        line-height: 1.08 !important;
        letter-spacing: -0.02em !important;
        word-spacing: 0.08em !important;
    }
}


/* Book shop masthead: reduce height while keeping the premium hero artwork. */
.bs-masthead {
    min-height: 72vh !important;
    min-height: 72svh !important;
    background-position: 0% calc(100% - 35px) !important;
}

.bs-masthead__stage {
    padding-top: clamp(95px, 8.5vw, 130px) !important;
    padding-bottom: clamp(14px, 1.8vw, 26px) !important;
}

.bs-masthead__sub {
    margin-top: clamp(18px, 2vw, 28px) !important;
}

@media (max-width: 760px) {
    .bs-masthead {
        min-height: 76vh !important;
        min-height: 76svh !important;
    }

    .bs-masthead__stage {
        padding-top: clamp(90px, 12svh, 120px) !important;
        padding-bottom: clamp(36px, 7svh, 58px) !important;
    }
}

/* Book shop masthead QA adjustment: prevent headline/book-cover collision. */
.bs-masthead {
    min-height: 80vh !important;
    min-height: 80svh !important;
    background-position: 0% calc(100% + 22px) !important;
}

.bs-kinetic__row--em {
    font-size: clamp(38px, 5.8vw, 82px) !important;
    padding-left: clamp(180px, 24vw, 360px) !important;
}

.bs-masthead__stage {
    padding-top: clamp(88px, 8vw, 122px) !important;
}

@media (max-width: 760px) {
    .bs-masthead {
        min-height: 82vh !important;
        min-height: 82svh !important;
        background-position: 34% calc(100% + 18px) !important;
    }
}

/* Book shop masthead QA: remove top dead space and keep headline away from books. */
.bs-masthead {
    min-height: 78vh !important;
    min-height: 78svh !important;
    background-position: 0% 0% !important;
    background-size: 112% auto !important;
}

.bs-masthead__stage {
    padding-top: clamp(54px, 5.5vw, 82px) !important;
    padding-left: clamp(34px, 4vw, 70px) !important;
    padding-bottom: clamp(16px, 2vw, 28px) !important;
}

.bs-masthead__stage > * {
    max-width: min(58vw, 760px) !important;
}

.bs-kinetic {
    max-width: min(58vw, 760px) !important;
}

.bs-kinetic__row--lead {
    font-size: clamp(48px, 6.6vw, 96px) !important;
}

.bs-kinetic__row--em {
    justify-content: flex-start !important;
    padding-left: clamp(150px, 17vw, 250px) !important;
    font-size: clamp(36px, 5.2vw, 72px) !important;
}

.bs-masthead__sub {
    max-width: 520px !important;
    margin-top: clamp(18px, 2.2vw, 30px) !important;
}

@media (max-width: 760px) {
    .bs-masthead {
        min-height: 82vh !important;
        min-height: 82svh !important;
        background-position: 34% 0% !important;
        background-size: auto 104% !important;
    }

    .bs-masthead__stage,
    .bs-masthead__stage > *,
    .bs-kinetic {
        max-width: 100% !important;
    }

    .bs-kinetic__row--em {
        padding-left: clamp(70px, 20vw, 130px) !important;
    }
}

/* Shop masthead: hide small breadcrumb text that competes with the hero headline. */
.bs-masthead__crest {
    display: none !important;
}

/* Shop masthead: hide small breadcrumb text that competes with the hero headline. */
.bs-masthead__crest {
    display: none !important;
}


/* Homepage lead magnet: Look Beyond the Behaviour. */
.home-leadmagnet {
    padding: clamp(3rem, 7vw, 5.5rem) 1.5rem;
    background: #f4eddf;
    color: #172817;
}

.home-leadmagnet__inner {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid rgba(40, 50, 31, 0.16);
    border-radius: 30px;
    background: rgba(255, 252, 243, 0.72);
    box-shadow: 0 22px 60px rgba(32, 24, 12, 0.10);
}

.home-leadmagnet__copy .section-title {
    max-width: 720px;
}

.home-leadmagnet__points {
    margin: 1.35rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem;
    font-weight: 700;
}

.home-leadmagnet__points li::before {
    content: "•";
    color: #b27608;
    margin-right: 0.6rem;
}

.home-leadmagnet__form {
    min-height: 220px;
    padding: clamp(1rem, 3vw, 1.5rem);
    border-radius: 24px;
    background: #fffaf0;
    border: 1px solid rgba(178, 118, 8, 0.22);
}

.home-leadmagnet__form .ml-embedded {
    min-height: 180px;
}

@media (max-width: 860px) {
    .home-leadmagnet__inner {
        grid-template-columns: 1fr;
    }
}


.home-leadmagnet__form--cta {
    display: grid;
    gap: 0.9rem;
    align-content: center;
}

.home-leadmagnet__form-kicker {
    margin: 0;
    color: #9a6508;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.home-leadmagnet__form--cta h3 {
    margin: 0;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    line-height: 1.08;
}

.home-leadmagnet__form--cta p {
    margin: 0;
}

.home-leadmagnet__button {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    margin-top: 0.45rem;
    padding: 0.9rem 1.25rem;
    border-radius: 999px;
    background: #175337;
    color: #fffaf0;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(23, 83, 55, 0.24);
}

.home-leadmagnet__button:hover,
.home-leadmagnet__button:focus {
    background: #0f3d28;
    color: #fff;
}