/*=========================================================
=                        PROMO BAR                        =
=========================================================*/
/* Slim scrolling strip of short promo messages, sits above the header.
   Pure-CSS marquee: main.js clones .promo-bar__track once so the
   loop is seamless regardless of how many messages are authored. */

.promo-bar{
    overflow:hidden;
    background:var(--primary-dark);
    background-image:
        radial-gradient(circle at 10% 50%, rgba(216,169,49,.18), transparent 55%),
        radial-gradient(circle at 90% 50%, rgba(216,169,49,.18), transparent 55%);
    color:var(--text-invert);
}

.promo-bar__inner{
    display:flex;
    width:max-content;
}

.promo-bar__track{
    display:flex;
    align-items:center;
    flex-shrink:0;
    animation:marquee-scroll 32s linear infinite;
}

.promo-bar:hover .promo-bar__track{
    animation-play-state:paused;
}

.promo-bar__item{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.55rem var(--space-3);
    white-space:nowrap;

    font-family:var(--font-title);
    font-size:.78rem;
    font-weight:var(--fw-medium);
    text-transform:uppercase;
    letter-spacing:.08em;
}

.promo-bar__item::before{
    content:"✿";
    color:var(--sunflower);
    font-size:.85em;
}

.promo-bar__item::after{
    content:"";
    width:4px;
    height:4px;
    margin-left:var(--space-3);
    border-radius:50%;
    background:rgba(251,249,242,.4);
}

@media (prefers-reduced-motion:reduce){
    .promo-bar__track{
        animation:none;
        flex-wrap:wrap;
        width:100%;
        justify-content:center;
    }
}

@media (max-width:600px){
    .promo-bar__item{
        font-size:.7rem;
        padding:.5rem var(--space-2);
    }
}