/*
 * Luna Seeds Elements — Global CSS
 * Shared utilities for all widgets.
 * Tokens inherit from child theme :root variables.
 */

/* ── Section header ─────────────────────────────────────────────────────── */
.lse-section__header {
    margin-bottom: 3rem;
}
.lse-section__header--center {
    text-align: center;
}
.lse-section__header--center .lse-section__desc {
    margin-left: auto;
    margin-right: auto;
}
.lse-section__header--left {
    text-align: left;
}

.lse-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lsol-teal, #14A89D);
    margin-bottom: .875rem;
}
.lse-eyebrow::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: currentColor;
    flex-shrink: 0;
}
.lse-eyebrow--white  { color: rgba(255,255,255,.85); }
.lse-eyebrow--coral  { color: var(--lsol-coral, #E8523A); }
.lse-eyebrow--gold   { color: var(--lsol-gold, #F5B944); }

.lse-section__title {
    font-family: var(--luc-font-secondary, 'Fraunces', serif);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color: var(--lsol-navy, #0C2340);
    line-height: 1.18;
    letter-spacing: -.025em;
    margin: 0 0 1rem;
}
.lse-section__title em {
    font-style: italic;
    color: var(--lsol-teal, #14A89D);
}

.lse-section__desc {
    font-size: 1.05rem;
    color: var(--lsol-gray-600, #5A6B7A);
    line-height: 1.75;
    max-width: 580px;
    margin: 0 0 .5rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.lse-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 2rem;
    border-radius: 999px;
    font-family: var(--luc-font-primary, 'Plus Jakarta Sans', sans-serif);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .3s ease;
    line-height: 1;
    white-space: nowrap;
}
.lse-btn--primary {
    background: var(--lsol-teal, #14A89D);
    color: #fff;
    border-color: var(--lsol-teal, #14A89D);
}
.lse-btn--primary:hover {
    background: var(--lsol-teal-dark, #0D8E84);
    border-color: var(--lsol-teal-dark, #0D8E84);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(20,168,157,.35);
}
.lse-btn--donate {
    background: var(--lsol-coral, #E8523A);
    color: #fff;
    border-color: var(--lsol-coral, #E8523A);
    box-shadow: 0 4px 20px rgba(232,82,58,.3);
}
.lse-btn--donate:hover {
    background: var(--lsol-coral-dark, #C4422D);
    border-color: var(--lsol-coral-dark, #C4422D);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(232,82,58,.45);
}
.lse-btn--outline {
    background: transparent;
    color: var(--lsol-navy, #0C2340);
    border-color: var(--lsol-navy, #0C2340);
}
.lse-btn--outline:hover {
    background: var(--lsol-navy, #0C2340);
    color: #fff;
    transform: translateY(-2px);
}
.lse-btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.6);
}
.lse-btn--ghost:hover {
    background: #fff;
    color: var(--lsol-navy, #0C2340);
    border-color: #fff;
}
.lse-btn--lg {
    padding: 1.1rem 2.75rem;
    font-size: 1rem;
}
.lse-btn--sm {
    padding: .55rem 1.3rem;
    font-size: .8rem;
}

/* ── Donate pulse ────────────────────────────────────────────────────────── */
@keyframes lse-pulse {
    0%,100% { box-shadow: 0 4px 20px rgba(232,82,58,.3); }
    50%      { box-shadow: 0 4px 32px rgba(232,82,58,.6); }
}
.lse-btn--donate-pulse { animation: lse-pulse 2.5s infinite; }

/* ── Reveal animations ───────────────────────────────────────────────────── */
[data-lse-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}
[data-lse-reveal].is-visible {
    opacity: 1;
    transform: none;
}
[data-lse-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}
[data-lse-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0s;    opacity:1; transform:none; }
[data-lse-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: .1s;   opacity:1; transform:none; }
[data-lse-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: .2s;   opacity:1; transform:none; }
[data-lse-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: .3s;   opacity:1; transform:none; }
[data-lse-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: .4s;   opacity:1; transform:none; }
[data-lse-reveal-stagger].is-visible > *:nth-child(6)    { transition-delay: .5s;  opacity:1; transform:none; }
[data-lse-reveal-stagger].is-visible > *:nth-child(7)    { transition-delay: .6s;  opacity:1; transform:none; }
[data-lse-reveal-stagger].is-visible > *:nth-child(8)    { transition-delay: .7s;  opacity:1; transform:none; }
[data-lse-reveal-stagger].is-visible > *:nth-child(9)    { transition-delay: .8s;  opacity:1; transform:none; }
[data-lse-reveal-stagger].is-visible > *:nth-child(10)   { transition-delay: .9s;  opacity:1; transform:none; }
[data-lse-reveal-stagger].is-visible > *:nth-child(n+11) { transition-delay: 1s;   opacity:1; transform:none; }

/* ── Scroll to top btn (plugin-wide) ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [data-lse-reveal],[data-lse-reveal-stagger]>* { transition: none; }
}