/**
 * promo-bar.css — site-wide promo announcement bar.
 *
 * Lived as an inline <style> inside patterns/promo-announcement-bar.php
 * until 9/15/2026, when it turned out WP Rocket's Remove Unused CSS strips
 * inline style blocks wholesale: the bar's markup shipped but none of its
 * styling did, so it rendered as bare text above the header. Every other
 * theme stylesheet survives RUCSS because it is a real enqueued file whose
 * selectors RUCSS can match against the DOM — so this is one too.
 *
 * Enqueued from inc/enqueue.php, gated on melody_magic_promo_bar_active().
 */

.mm-promo-bar {
    background: linear-gradient(90deg, #155C55 0%, #1F7A70 100%);
    color: #fff;
}

.mm-promo-bar__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem 1.1rem;
    flex-wrap: wrap;
    padding: .6rem 1.25rem;
    text-align: center;
}

.mm-promo-bar__text {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.mm-promo-bar__text strong {
    font-weight: 800;
}

.mm-promo-bar__sale {
    color: #F4D16A;
    font-weight: 800;
}

.mm-promo-bar__cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #F4D16A;
    color: #1F2A2E;
    font-weight: 800;
    font-size: .95rem;
    padding: .4rem 1.15rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 3px 0 rgba(14, 63, 58, .35);
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease;
}

.mm-promo-bar__cta:hover,
.mm-promo-bar__cta:focus-visible {
    transform: translateY(-2px) rotate(-1.5deg);
    box-shadow: 0 6px 0 rgba(14, 63, 58, .35);
}

@media (max-width: 600px) {
    .mm-promo-bar__text { font-size: .9rem; }
    .mm-promo-bar__cta  { font-size: .9rem; padding: .35rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mm-promo-bar__cta { transition: none; }
    .mm-promo-bar__cta:hover,
    .mm-promo-bar__cta:focus-visible { transform: none; }
}