/* Drug Courts (/Resource-Center/Substance-Abuse/Drug-Court) — the five-court icon picker.
   Loaded only by that page. Every rule hangs off .dc-court-tabs, which exists nowhere else, so
   the shared .division-icon and Bootstrap .nav-link styles are untouched everywhere else.

   The courts used to be a stacked .division-list. They are now a row of icon tabs with the
   selected court rendered below, so the Domestic Violence Drug Court content could move in here
   without making the page several screens long.

   Grid rather than flex on purpose: the tab strip is a <ul>, so its children are the <li>
   wrappers, not the buttons. Equal grid columns give equal tiles on one row without
   depending on how long each court name happens to be. Veterans Treatment Court was added as a
   fifth tile on request, so the column count went 4 -> 5. */

.dc-court-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 800px;
    border-bottom: 1px solid #e3e8ee;
    padding-bottom: 1rem;
}

.dc-court-tabs .nav-item { display: flex; }

/* Each tab is its icon above the court name, filling its column. */
.dc-court-tabs .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.85rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    background: none;
    color: var(--jud-navy);
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dc-court-name {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
}

.dc-court-tabs .nav-link:hover,
.dc-court-tabs .nav-link:focus-visible {
    background: #f1f4f7;
    border-color: #e3e8ee;
}

/* The selected court: a filled, bordered tile so the panel below has an obvious owner. */
.dc-court-tabs .nav-link.active {
    background: #f1f4f7;
    border-color: #cbd6e2;
    color: var(--jud-navy);
}

@media (prefers-reduced-motion: reduce) {
    .dc-court-tabs .nav-link { transition: none; }
}

/* Below a phone width, two up rather than five squeezed tiles. */
@media (max-width: 575.98px) {
    .dc-court-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
}