/**
 * Bondgenoot — components/maintenance-banner.css
 * /assets/css/components/maintenance-banner.css
 *
 * Cluster D — Pakket D4 — Fase F083
 *
 * Sticky-top banner voor onderhoud-aankondigingen. 3 severities:
 *   info     — goud/perkament (rustige aankondiging)
 *   warning  — amber (let op, gepland onderhoud nadert)
 *   critical — rood (acuut, niet-dismissable)
 *
 * Banner zit BOVEN de site-header zodat hij niet wegvalt op scroll.
 */

.bg-maint-banner {
    position: sticky;
    top: 0;
    z-index: 1100; /* boven sitter-banner & header */
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.30);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
}

.bg-maint-banner-inner {
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
}

.bg-maint-banner-icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
}

.bg-maint-banner-text {
    flex: 1 1 auto;
    font-weight: 500;
}

.bg-maint-banner-countdown {
    flex: 0 0 auto;
    font-family: var(--font-content);
    font-style: italic;
    opacity: 0.92;
    white-space: nowrap;
}

.bg-maint-banner-close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    color: inherit;
    border: 1px solid rgba(0, 0, 0, 0.28);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease;
}

.bg-maint-banner-close:hover {
    background: rgba(0, 0, 0, 0.32);
}

/* ============ Severity-varianten ============ */

.bg-maint-banner--info {
    background: linear-gradient(180deg, #3a2a14 0%, #2a1d0c 100%);
    color: var(--gold-pale, var(--gold-pale));
}
.bg-maint-banner--info .bg-maint-banner-icon { color: var(--gold-bright, var(--gold-bright)); }

.bg-maint-banner--warning {
    background: linear-gradient(180deg, #C99230 0%, #A07423 100%);
    color: #2A1F0E;
}
.bg-maint-banner--warning .bg-maint-banner-close {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(0, 0, 0, 0.30);
}
.bg-maint-banner--warning .bg-maint-banner-close:hover {
    background: rgba(255, 255, 255, 0.32);
}

.bg-maint-banner--critical {
    background: linear-gradient(180deg, #B84A3A 0%, #8E3A2D 100%);
    color: #FFF1EA;
}
.bg-maint-banner--critical .bg-maint-banner-close {
    display: none; /* niet dismissable */
}

@media (max-width: 600px) {
    .bg-maint-banner-inner {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    .bg-maint-banner-text {
        flex: 1 1 100%;
        order: 1;
    }
    .bg-maint-banner-icon { order: 0; }
    .bg-maint-banner-countdown {
        order: 2;
        font-size: 12px;
    }
    .bg-maint-banner-close {
        order: 0;
        margin-left: auto;
    }
}