/* ── Accessibility Focus Styles ───────────────────────────── */

.day-section:focus {
    outline: 2px solid #8B0000;
    outline-offset: 4px;
    border-radius: 4px;
}

.route-card:focus {
    outline: 2px solid #8B0000;
    outline-offset: 4px;
    border-radius: 4px;
}

.table tbody tr:focus {
    outline: 2px solid #8B0000;
    outline-offset: -2px;
    background-color: rgba(139, 0, 0, 0.08);
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -999px;
    left: 0;
    background: #8B0000;
    color: white;
    padding: 8px 16px;
    z-index: 9999;
    border-radius: 0 0 4px 0;
    font-weight: bold;
}

    .skip-link:focus {
        top: 0;
    }


/* ── Filter bar ───────────────────────────────────────────── */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

    .filter-bar .filter-group {
        display: flex;
        flex-direction: column;
        gap: .3rem;
        min-width: 180px;
    }

    .filter-bar label {
        font-size: .8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #555;
    }

    .filter-bar select {
        padding: .4rem .7rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: .95rem;
        background: white;
        cursor: pointer;
    }

        .filter-bar select:focus {
            outline: 2px solid var(--midstate-red, #8B0000);
            outline-offset: 1px;
        }

    .filter-bar .btn-clear {
        align-self: flex-end;
        padding: .42rem .9rem;
        font-size: .875rem;
        border: 1px solid #aaa;
        border-radius: 4px;
        background: white;
        cursor: pointer;
        color: #333;
        white-space: nowrap;
        transition: background .15s;
    }

        .filter-bar .btn-clear:hover {
            background: #eee;
        }

    .filter-bar .btn-search {
        align-self: flex-end;
        padding: .42rem 1.1rem;
        font-size: .875rem;
        border: none;
        border-radius: 4px;
        background: var(--midstate-red, #8B0000);
        cursor: pointer;
        color: white;
        white-space: nowrap;
        font-weight: 600;
        transition: background .15s, opacity .15s;
    }

        .filter-bar .btn-search:hover {
            opacity: .85;
        }

        .filter-bar .btn-search:focus,
        .filter-bar .btn-clear:focus {
            outline: 2px solid var(--midstate-red, #8B0000);
            outline-offset: 2px;
        }


/* ── Route cards / accordion ───────────────────────────────── */

.route-card {
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: .75rem;
}

.route-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem 1rem;
    background-color: var(--midstate-red, #8B0000);
    color: white;
    cursor: pointer;
    user-select: none;
}

    .route-card-header:focus {
        outline: 3px solid #fff;
        outline-offset: -3px;
    }

    .route-card-header strong {
        display: flex;
        align-items: center;
        gap: .35rem;
    }


/* Chevron */

.chevron {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform .25s ease;
}

    .chevron svg {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: white;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.route-card-header[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}


/* Collapsible body */

.route-card-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}

    .route-card-body.open {
        grid-template-rows: 1fr;
    }

    .route-card-body > .inner {
        overflow: hidden;
    }


/* ── Highlight animation ───────────────────────────────────── */

@keyframes highlight-pulse {
    0% {
        box-shadow: 0 0 0 3px rgba(139,0,0,.6);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(139,0,0,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(139,0,0,0);
    }
}

.route-card.targeted {
    animation: highlight-pulse .7s ease forwards;
}


/* ── Day visibility ───────────────────────────────────────── */

.day-section[data-hidden="true"] {
    display: none;
}