/* ============================================================
   Leaf & Lush: Pages module
   Loaded on pages that use [leaflush_*] page shortcodes.
   Fully scoped under .ll-home (and future .ll-about etc).
   Uses local design tokens so it does not depend on frontend.css.
   ============================================================ */

.ll-home {
    /* Local tokens so this stylesheet is self-contained. */
    --llp-ink: #14201A;
    --llp-ink-soft: #2D3A30;
    --llp-muted: #6B7869;
    --llp-line: #D8D2C0;
    --llp-line-soft: rgba(216, 210, 192, 0.5);
    --llp-paper: #FBF8F1;
    --llp-paper-2: #F4EFE0;
    --llp-cream: #ECE5D0;
    --llp-leaf: #2D5A3D;
    --llp-leaf-dk: #1F4129;
    --llp-leaf-lt: #A8B9A0;
    --llp-earth: #B45D3A;
    --llp-earth-lt: #D89072;
    --llp-gold: #C8A44A;
    --llp-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --llp-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    color: var(--llp-ink);
    font-family: var(--llp-sans);
    line-height: 1.6;
    background: var(--llp-paper);
    overflow-x: hidden;
}

.ll-home *,
.ll-home *::before,
.ll-home *::after { box-sizing: border-box; }

.ll-home img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   Reveal animation: fade-and-rise as sections enter the viewport.
   IntersectionObserver-driven from JS. Respects prefers-reduced-motion.
   ============================================================ */
.ll-home [data-ll-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
                transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
    will-change: opacity, transform;
}
.ll-home [data-ll-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .ll-home [data-ll-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   Shared components
   ============================================================ */

.ll-home__eyebrow {
    display: block;
    margin: 0 0 20px;
    font-family: var(--llp-sans);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--llp-leaf);
}

.ll-home__section-head {
    max-width: 720px;
    margin: 0 auto 28px;
    text-align: center;
}

.ll-home__section-title {
    font-family: var(--llp-serif);
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--llp-ink);
    margin: 0;
}

.ll-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    font-family: var(--llp-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    border: 1px solid transparent;
    -webkit-tap-highlight-color: transparent;
}
.ll-btn--primary {
    background: var(--llp-leaf-dk);
    color: var(--llp-paper);
    box-shadow: 0 2px 6px rgba(31, 65, 41, 0.15);
}
.ll-btn--primary:hover,
.ll-btn--primary:focus-visible {
    background: var(--llp-leaf);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(31, 65, 41, 0.22);
    outline: none;
}
.ll-btn--ghost {
    background: transparent;
    color: var(--llp-ink);
    border-color: var(--llp-line);
}
.ll-btn--ghost:hover,
.ll-btn--ghost:focus-visible {
    background: var(--llp-paper-2);
    border-color: var(--llp-muted);
    outline: none;
}
.ll-btn--lg {
    padding: 18px 32px;
    font-size: 16px;
}

/* ============================================================
   Section 1: Hero
   ============================================================ */

.ll-home__hero {
    position: relative;
    /* Edge-to-edge on mobile, minimal breathing room.
       Desktop gets slightly more horizontal padding for readability at wide widths. */
    padding: 32px 5px 40px;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}
@media (min-width: 900px) {
    .ll-home__hero {
        grid-template-columns: 1.4fr 1fr;
        /* Enough top padding to clear an Astra header WITH tagline
           enabled. If the tagline is disabled in Customizer this reads as
           slightly generous rather than problematic. */
        padding: 120px 24px 72px;
        gap: 64px;
    }
}

.ll-home__hero-inner { max-width: 640px; }

.ll-home__hero-title {
    font-family: var(--llp-serif);
    font-size: clamp(40px, 8.5vw, 76px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--llp-ink);
    margin: 0 0 24px;
}

.ll-home__hero-lede {
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.55;
    color: var(--llp-ink-soft);
    margin: 0 0 32px;
    max-width: 560px;
}

.ll-home__hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 36px;
}

.ll-home__hero-signals {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 14px;
    color: var(--llp-ink-soft);
}
.ll-home__hero-signals li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ll-home__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--llp-leaf);
    color: var(--llp-paper);
    border-radius: 50%;
    flex-shrink: 0;
}

.ll-home__hero-mark {
    justify-self: center;
    max-width: 260px;
}
.ll-home__hero-mark img {
    width: 100%;
    height: auto;
    border-radius: 22%;
    box-shadow: 0 20px 50px rgba(31, 65, 41, 0.16),
                0 4px 10px rgba(31, 65, 41, 0.08);
    animation: ll-hero-mark-float 6s ease-in-out infinite;
}
@keyframes ll-hero-mark-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
    .ll-home__hero-mark img { animation: none; }
}

/* ============================================================
   Section 2: Features
   ============================================================ */

.ll-home__features {
    padding: 40px 5px;
    max-width: 1180px;
    margin: 0 auto;
}
@media (min-width: 900px) {
    .ll-home__features { padding: 72px 24px; }
}

.ll-home__feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 700px) {
    .ll-home__feature-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.ll-feature-card {
    display: block;
    background: var(--llp-paper);
    border: 1px solid var(--llp-line);
    border-radius: 16px;
    padding: 32px 28px;
    text-decoration: none;
    color: var(--llp-ink);
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1),
                border-color 0.2s ease,
                box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}
.ll-feature-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--llp-leaf);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ll-feature-card:hover,
.ll-feature-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--llp-leaf-lt);
    box-shadow: 0 20px 40px rgba(31, 65, 41, 0.10);
    outline: none;
}
.ll-feature-card:hover::before,
.ll-feature-card:focus-visible::before {
    transform: scaleX(1);
}
.ll-feature-card__num {
    font-family: var(--llp-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--llp-gold);
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}
.ll-feature-card__title {
    font-family: var(--llp-serif);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--llp-ink);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}
.ll-feature-card__lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--llp-ink-soft);
    margin: 0 0 20px;
}
.ll-feature-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--llp-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--llp-leaf);
    letter-spacing: 0.02em;
    transition: gap 0.2s ease;
}
.ll-feature-card:hover .ll-feature-card__link { gap: 10px; }

/* ============================================================
   Section 3: Pullquote / values
   ============================================================ */

.ll-home__values {
    padding: 40px 16px;
    background: var(--llp-leaf-dk);
    color: var(--llp-paper);
}
@media (min-width: 900px) {
    .ll-home__values { padding: 72px 40px; }
}
.ll-home__pullquote {
    max-width: 900px;
    margin: 0 auto;
    font-family: var(--llp-serif);
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.005em;
    text-align: center;
    color: var(--llp-paper);
}

/* ============================================================
   Section 4: Principles
   ============================================================ */

.ll-home__principles {
    padding: 40px 5px;
    max-width: 1180px;
    margin: 0 auto;
}
@media (min-width: 900px) {
    .ll-home__principles { padding: 72px 24px; }
}

.ll-home__principle-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 700px) {
    .ll-home__principle-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

.ll-principle-card {
    padding: 32px 24px;
    text-align: left;
}
.ll-principle-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--llp-paper-2);
    color: var(--llp-leaf);
    border-radius: 50%;
    margin-bottom: 20px;
}
.ll-principle-card__title {
    font-family: var(--llp-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--llp-ink);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}
.ll-principle-card__body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--llp-ink-soft);
    margin: 0;
}

/* ============================================================
   Section 5: Membership peek
   ============================================================ */

.ll-home__membership {
    padding: 40px 16px;
    background: var(--llp-paper-2);
}
@media (min-width: 900px) {
    .ll-home__membership { padding: 72px 40px; }
}
.ll-home__membership-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.ll-home__membership-lede {
    font-size: clamp(15px, 2vw, 17px);
    line-height: 1.6;
    color: var(--llp-ink-soft);
    margin: 24px auto 32px;
    max-width: 640px;
}
.ll-home__membership-ctas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
@media (min-width: 500px) {
    .ll-home__membership-ctas { flex-direction: row; justify-content: center; }
}
.ll-home__membership-note {
    font-family: var(--llp-serif);
    font-size: 15px;
    color: var(--llp-muted);
}

/* ============================================================
   Section 6: Closing CTA
   ============================================================ */

.ll-home__closing {
    padding: 48px 5px 56px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}
@media (min-width: 900px) {
    .ll-home__closing { padding: 96px 24px; }
}
.ll-home__closing-title {
    font-family: var(--llp-serif);
    font-size: clamp(40px, 7vw, 64px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--llp-ink);
    margin: 0 0 20px;
}
.ll-home__closing-lede {
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.55;
    color: var(--llp-ink-soft);
    margin: 0 0 32px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   App mode overrides
   When the page renders inside the app-mode shell, the theme
   header is suppressed, so the top padding that clears it becomes
   pure wasted real estate. Kill it, and tighten section spacing
   further for the tighter mobile app feel.
   ============================================================ */

body.leaflush-app .ll-home__hero {
    padding-top: 8px;
}

body.leaflush-app .ll-home__features,
body.leaflush-app .ll-home__principles {
    padding-top: 32px;
    padding-bottom: 32px;
}

body.leaflush-app .ll-home__values,
body.leaflush-app .ll-home__membership {
    padding-top: 32px;
    padding-bottom: 32px;
}

body.leaflush-app .ll-home__closing {
    /* Room for the bottom bar plus its safe-area padding is already handled
       by the app module. Compress inside that further. */
    padding-top: 40px;
    padding-bottom: 24px;
}