/* ============================================================
   Site Alert Banner
   Reusable component. Use modifier classes for different tones:
   .site-banner--advisory  → warm amber (energy/weather alerts)
   .site-banner--info      → brand blue (general notices)
   .site-banner--success   → green (positive confirmations)
   ============================================================ */

:root {
    --banner-advisory-bg: #FEF3CD;
    --banner-advisory-border: #E8C84A;
    --banner-advisory-text: #3D2E00;
    --banner-advisory-link: #7A5C00;
    --banner-info-bg: #D9EAF7;
    --banner-info-border: #5A9EC9;
    --banner-info-text: #0C2D48;
    --banner-info-link: #1A5276;
    --banner-success-bg: #D4EDDA;
    --banner-success-border: #5CA875;
    --banner-success-text: #155724;
    --banner-success-link: #0B4619;
    --banner-font-size: 0.9rem;
    --banner-padding-y: 0.6rem;
    --banner-padding-x: 1rem;
    --banner-transition: opacity 0.3s ease, max-height 0.4s ease;
}
/* --- Base --- */
.site-banner {
    width: 100%;
    border-bottom: 2px solid transparent;
    font-size: var(--banner-font-size);
    transition: var(--banner-transition);
    overflow: hidden;
    max-height: 200px; /* Needed for collapse animation */
}

    .site-banner.is-hidden {
        opacity: 0;
        max-height: 0;
        border: none;
        pointer-events: none;
    }
/* --- Modifier: Advisory (default for this use case) --- */
.site-banner--advisory {
    background-color: var(--banner-advisory-bg);
    border-color: var(--banner-advisory-border);
    color: var(--banner-advisory-text);
}

.site-banner--info {
    background-color: var(--banner-info-bg);
    border-color: var(--banner-info-border);
    color: var(--banner-info-text);
}

.site-banner--success {
    background-color: var(--banner-success-bg);
    border-color: var(--banner-success-border);
    color: var(--banner-success-text);
}
/* --- Inner layout --- */
.site-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--banner-padding-y) var(--banner-padding-x);
    position: relative;
}
/* --- Icon --- */
.site-banner__icon {
    flex-shrink: 0;
    font-size: 1rem;
}
/* --- Message text --- */
.site-banner__message {
    margin: 0;
    text-align: center;
    line-height: 1.5;
    width: 100%;
}
/* --- Link --- */
.site-banner__link {
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.site-banner--advisory .site-banner__link {
    color: var(--banner-advisory-link);
}

.site-banner--info .site-banner__link {
    color: var(--banner-info-link);
}

.site-banner--success .site-banner__link {
    color: var(--banner-success-link);
}

.site-banner__link:hover,
.site-banner__link:focus {
    text-decoration: none;
    outline-offset: 2px;
}
/* --- Close button --- */
.site-banner__close {
    position: absolute;
    right: var(--banner-padding-x);
    top: 0.3rem;
    transform: none;
    background: transparent;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 3px;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

    .site-banner__close:hover,
    .site-banner__close:focus {
        opacity: 1;
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
/* --- Responsive --- */
@media (max-width: 576px) {
    .site-banner__inner {
        justify-content: flex-start;
        padding-top: 1.8rem;
    }

    .site-banner__message {
        text-align: center;
    }
}