﻿/* Filter Bar Styling */
.schedule-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
}

.filter-label {
    font-family: 'Oswald', sans-serif;
    color: #666;
    text-transform: uppercase;
    width: 100%;
    margin-bottom: 10px;
    font-size: 0.8rem;
}

/* Division Cards */
/* Tile Base */
.division-card.map-bg {
    position: relative;
    min-height: 450px; /* Fixed height for consistency */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* Resizes to best fit space */
    border: 1px solid #333;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    /* 1. The Dimming Overlay */
    .division-card.map-bg::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Gradient from 80% opaque at bottom to 40% at top */
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 100%);
        z-index: 1;
        transition: opacity 0.3s ease;
    }

    .division-card.map-bg:hover::before {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 75, 150, 0.4) 100%);
    }

/* 2. Content Positioning */
.division-card-content {
    position: relative;
    z-index: 2; /* Sits above the dimming overlay */
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.map img{
    max-width:100%;
}

/* 3. Text Visibility (Box Shadow / Text Shadow) */
.division-title {
    font-family: 'Oswald', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 5px;
    /* Strong text shadow for visibility against map pins */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.division-circuit-label {
    color: #007bff; /* Brand Blue */
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.division-day-badge {
    align-self: flex-end;
    background: rgba(0, 123, 255, 0.8);
    color: #fff;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

.next-event-preview {
    background: rgba(0,0,0,0.3);
    padding: 10px;
    border-left: 2px solid #FF6B00;
    font-size: 0.9rem;
}
 

/* Custom Dark Select */
.custom-dark-select {
    background-color: #1a1a1a;
    color: #fff;
    border: 1px solid #333;
    border-radius: 0; /* Sharp edges */
    height: 45px;
    text-transform: uppercase;
    padding: 0 15px;
}

    .custom-dark-select:focus {
        background-color: #222;
        border-color: #007bff;
        color: #fff;
        box-shadow: none;
    }

/* Archive Toggle Button */
#archiveToggleBtn {
    border-radius: 0;
    height: 45px;
    font-size: 0.85rem;
    border-color: #333;
    color: #888;
}

#archiveToggleBtn.active {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

[aria-expanded="true"] i.fa-filter {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}