/* ============================================================
   File: wwwroot/css/coverage.css
   Rollout Ribbon + Coverage Page
   Mobile-first, minimal, ADA-compliant
   ============================================================ */

/* ─── Rollout Ribbon (Homepage Top Bar) ─── */
.rollout-ribbon {
    background-color: #1a1a2e;
    color: #f0f0f0;
    font-size: 0.8125rem;
    line-height: 1.4;
    padding: 0.4rem 0;
    text-align: center;
    width: 100%;
}

    .rollout-ribbon .container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

.rollout-ribbon__text {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.rollout-ribbon__link {
    color: #8ecae6;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.75rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

    .rollout-ribbon__link:hover,
    .rollout-ribbon__link:focus {
        color: #a8daef;
        border-bottom-color: #a8daef;
        text-decoration: none;
    }

    .rollout-ribbon__link:focus-visible {
        outline: 2px solid #8ecae6;
        outline-offset: 2px;
    }

/* ─── Coverage Page ─── */
.coverage-page {
    padding: 2.5rem 0 3rem;
}

.coverage-page__inner {
    max-width: 640px;
    margin: 0 auto;
}

.coverage-page__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #1a1a2e;
}

.coverage-page__subtitle {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 2rem;
}

/* ─── Coverage Sections ─── */
.coverage-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

    .coverage-section:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.coverage-section__heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2d3436;
    margin-bottom: 0.75rem;
}

.coverage-section__text {
    color: #6c757d;
    font-size: 0.9375rem;
    margin-bottom: 1.25rem;
}

/* ─── State List ─── */
.coverage-state-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.coverage-state-list__item {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.coverage-state-list__item--live {
    background-color: #d4edda;
    color: #155724;
}

.coverage-state-list__item--next {
    background-color: #e8f0fe;
    color: #1a56db;
}

.coverage-state-list__date {
    font-weight: 400;
    font-size: 0.75rem;
    color: #3c763d;
    margin-left: 0.25rem;
    opacity: 0.8;
}

/* ─── Coverage Form ─── */
.coverage-form__fields {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.coverage-form__group {
    flex: 1;
    min-width: 140px;
}

    .coverage-form__group .form-control {
        height: 2.75rem;
        font-size: 0.9375rem;
    }

.coverage-form__submit {
    height: 2.75rem;
    padding: 0 1.5rem;
    white-space: nowrap;
    font-weight: 600;
}

/* ─── Responsive ─── */
@media (max-width: 575.98px) {
    .coverage-page {
        padding: 1.5rem 0 2rem;
    }

    .coverage-page__title {
        font-size: 1.5rem;
    }

    .coverage-form__fields {
        flex-direction: column;
    }

    .coverage-form__group {
        min-width: 100%;
    }

    .coverage-form__submit {
        width: 100%;
    }

    .rollout-ribbon {
        font-size: 0.75rem;
        padding: 0.35rem 0;
    }

        .rollout-ribbon .container {
            gap: 0.5rem;
        }
}