/* ═══════════════════════════════════════════════════════════
   Menfia Announcement Bar — Frontend Styles v1.1.0
   ═══════════════════════════════════════════════════════════ */

/* ── Bar container ── */
.mab-bar {
    position: relative;
    width: 100%;
    height: var(--mab-height, 40px);
    background-color: var(--mab-bg, #c8f400);
    color: var(--mab-text, #1a1a1a);
    font-size: var(--mab-font-size, 14px);
    overflow: hidden;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    z-index: 9999;
    transition: height 0.35s ease, opacity 0.35s ease;
}

.mab-bar.mab-hidden {
    height: 0 !important;
    opacity: 0;
    pointer-events: none;
}

/* ── Scrolling track wrapper ── */
.mab-track-wrapper {
    flex: 1;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    /* Mask edges for a clean fade-in effect */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 4%,
        black 96%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 4%,
        black 96%,
        transparent 100%
    );
}

/* ── Scrolling track ── */
.mab-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    /* 
     * Animate exactly -50% — because we render 6 copies of items,
     * -50% = 3 copies worth. When it snaps back to 0% it is invisible
     * because copy 1-3 looks identical to copy 4-6.
     * Result: perfectly seamless, truly infinite loop.
     */
    animation: mab-scroll var(--mab-speed, 30s) linear infinite;
}

/* Pause on hover */
.mab-bar:hover .mab-track {
    animation-play-state: paused;
}

@keyframes mab-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Individual items ── */
.mab-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    flex-shrink: 0;
}

.mab-sep {
    margin-right: 8px;
    opacity: 0.65;
    display: inline-block;
}

.mab-icon {
    line-height: 1;
}

/* ── Links ── */
.mab-bar a {
    color: var(--mab-link, #1a1a1a);
    text-decoration: none;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: opacity 0.15s;
}
.mab-bar a:hover {
    opacity: 0.7;
}

/* ── Close button ── */
.mab-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--mab-text, #1a1a1a);
    font-size: 16px;
    cursor: pointer;
    padding: 0 14px;
    height: 100%;
    opacity: 0.6;
    line-height: 1;
    transition: opacity 0.15s, background 0.15s;
    display: flex;
    align-items: center;
}
.mab-close:hover {
    opacity: 1;
    background: rgba(0,0,0,0.08);
}
.mab-close:focus {
    outline: 2px solid var(--mab-text, #1a1a1a);
    outline-offset: -2px;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .mab-bar {
        font-size: calc(var(--mab-font-size, 14px) - 1px);
    }
}

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
    .mab-track {
        animation-duration: 120s;
    }
}