/**
 * Spring Promotion 2026: mobile entry points (see inc/spring-promo-nav.php).
 * Mobile only: matches the 991px breakpoint where the top bar and desktop nav hide.
 */

.we-promo-pill,
.we-promo-card {
    display: none;
}

@media (max-width: 991px) {
    /* Header button, sits just left of the menu icon */
    .we-promo-pill {
        display: inline-flex;
        align-items: center;
        align-self: center; /* the header row stretches children to full height */
        height: 36px;
        margin-left: auto;
        margin-right: 16px;
        padding: 8px 14px;
        min-height: 36px;
        background: var(--green-3, #696A45);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
        transition: background-color 0.15s ease;
    }

    .we-promo-pill:hover,
    .we-promo-pill:focus-visible {
        background: var(--green-4, #363726);
        color: #fff;
    }

    /* Card at the top of the mobile menu */
    .we-promo-card {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 24px;
        padding: 20px;
        background: #F2ECE0; /* Earth 1 */
        border-left: 4px solid var(--green-3, #696A45);
        color: #231F20;
        text-decoration: none;
    }

    .we-promo-card__eyebrow {
        color: var(--green-3, #696A45);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .we-promo-card__title {
        font-size: 22px;
        line-height: 1.15;
        letter-spacing: -0.01em;
    }

    .we-promo-card__meta {
        color: #665542; /* Earth 4 */
        font-size: 14px;
        line-height: 1.4;
    }

    .we-promo-card__cta {
        margin-top: 6px;
        color: #363726; /* Green 4 */
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }
}