/* ===========================================================================
   Jud11 Judicial Website — site styles
   Mobile-first. Accessibility-first: readable sizing, strong visible focus,
   sufficient contrast. Palette + layout inspired by the 11th Circuit site.
   See ACCESSIBILITY.md for the conventions these styles support.
   =========================================================================== */

:root {
    --jud-navy: #123a5e;          /* deep brand navy */
    --jud-blue: #2c6cae;          /* accent blue */
    --jud-ink: #1f2d3d;           /* header/nav text */
    --jud-footer-bg: #232a31;     /* dark footer */
    --jud-footer-bar: #1b2127;    /* darker copyright bar */
    --jud-footer-text: #c3cbd4;
    --jud-focus: #1c4ed8;
    --jud-page-bg: #eef2f6;                                  /* light page background */
    --jud-card-shadow: 0 2px 10px rgba(18, 58, 94, 0.07);   /* subtle card lift */
    --jud-card-shadow-hover: 0 8px 22px rgba(18, 58, 94, 0.13);
}

html {
    font-size: 16px;              /* readable base; do not go below 16px */
    position: relative;
    min-height: 100%;
}

body {
    color: #1a1a1a;              /* near-black => well above WCAG AA contrast */
    background-color: var(--jud-page-bg);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-main {
    padding: 1.5rem 0 2.5rem;
    flex: 1 0 auto;              /* push footer to the bottom on short pages */
}

/* White content card for interior (non-home) pages — see _LayoutPage.cshtml. */
.content-panel {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 1.4rem;
    box-shadow: var(--jud-card-shadow);
    padding: 1.5rem 1.75rem;
}
@media (max-width: 575.98px) {
    .content-panel { padding: 1.15rem 1.15rem; }
}

/* Reusable "page with sidebar" layout — see Pages/Shared/_LayoutSidebar.cshtml. The sidebar is a
   separate card next to (not nested inside) the main content-panel card, on desktop; it stacks
   above the content on mobile. */
.page-with-sidebar {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}
.sidebar-panel {
    width: 280px;
    flex-shrink: 0;
}
.page-with-sidebar-content {
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 991.98px) {
    .page-with-sidebar { flex-direction: column; }
    /* Main content leads on mobile; the sidebar box follows below it. */
    .sidebar-panel { width: 100%; order: 2; }
    .page-with-sidebar-content { order: 1; }
}

/* --- Visible focus for every interactive element (keyboard users) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-check-input:focus-visible {
    outline: 3px solid var(--jud-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.btn:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(28, 78, 216, 0.45);
}

/* --- Skip link: hidden until focused -------------------------------------- */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 1100;
    padding: 0.5rem 1rem;
    background: var(--jud-blue);
    color: #fff;
    border-radius: 0 0 0.25rem 0;
}
.skip-link:focus { left: 0; }
main:focus { outline: none; }

/* =========================== Header / nav ================================= */
.site-header {
    background: #fff;    
    box-shadow: 0 2px 10px rgba(18, 58, 94, 0.07);
}
.site-header .navbar { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* The logo SVG is white (built for dark backgrounds); invert it to dark on the
   light header. On the dark footer it is used as-is. */
.site-logo {
    height: 42px;
    width: auto;
    filter: invert(1);
}
@media (min-width: 992px) {
    .site-logo { height: 65px; }
}

.site-header .nav-link {
    color: var(--jud-ink);
    font-weight: 500;
    padding: 0.5rem 0.85rem;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus {
    color: var(--jud-blue);
}
.site-header .nav-link.active {
    color: var(--jud-navy);
    box-shadow: inset 0 -3px 0 var(--jud-blue);
}
/* button that acts as a nav link (Sign out) */
.site-header .btn-link.nav-link {
    text-decoration: none;
    border: 0;
}
/* Site search box — sits to the right of the primary nav on desktop (the nav's own ms-auto pushes
   both it and this form together to the header's right edge); stacks full-width below the nav
   links on mobile, inside the same collapsing menu.

   Icon-only until clicked: the input starts at width:0/invisible and expands to its real width
   over 0.3s when site.js adds .is-expanded (first click on the button just triggers this — see
   site.js for why the button doesn't submit until the input is already showing). */
.site-header-search {
    gap: 0.4rem;
    margin: 0.5rem 0 0.25rem;
    align-items: center;
}
.site-header-search .form-control {
    min-width: 0;
    width: 0;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    border-width: 0;
    transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
}
.site-header-search.is-expanded .form-control {
    width: 140px;
    opacity: 1;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-width: 1px;
}
@media (min-width: 992px) {
    .site-header-search {
        margin: 0 0 0 1rem;
    }
    .site-header-search.is-expanded .form-control {
        width: 160px;
    }
}

/* thin separator before the staff links (desktop only) */
.nav-divider {
    display: none;
}
@media (min-width: 992px) {
    .nav-divider {
        display: block;
        width: 1px;
        height: 1.4rem;
        margin: 0 0.4rem;
        background: rgba(0, 0, 0, 0.15);
    }
}

/* --- Primary nav dropdowns: vertical list + flyout submenus --------------- */
:root {
    --jud-dropdown-bg: #1b2836;
    --jud-dropdown-hover: #2c6cae;
    --jud-dropdown-text: #dfe6ee;
}

.site-header .nav-item.dropdown { position: relative; }

/* Top-level vertical list (opens below the nav link) */
.dnn-dropdown {
    top: 100%;
    left: 0;
    min-width: 260px;
    padding: 0.4rem 0;
    background: var(--jud-dropdown-bg);
    border: 0;
    border-radius: 0.6rem;
    box-shadow: var(--jud-card-shadow-hover);
}

/* Nested flyout (opens to the right of its parent item) */
.dnn-submenu-parent { position: relative; }
.dnn-flyout {
    top: -0.4rem;
    left: 100%;
    min-width: 260px;
    padding: 0.4rem 0;
    margin: 0;
    background: var(--jud-dropdown-bg);
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.6rem;
    box-shadow: var(--jud-card-shadow-hover);
    display: none;
}
.dnn-submenu-parent:hover > .dnn-flyout,
.dnn-submenu-parent:focus-within > .dnn-flyout {
    display: block;
}

/* Item styling shared by both levels */
.dnn-dropdown .dropdown-item,
.dnn-flyout .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--jud-dropdown-text);
    padding: 0.45rem 1.1rem;
    font-size: 0.9rem;
}
.dnn-dropdown .dropdown-item:hover,
.dnn-dropdown .dropdown-item:focus,
.dnn-flyout .dropdown-item:hover,
.dnn-flyout .dropdown-item:focus {
    background: var(--jud-dropdown-hover);
    color: #fff;
}
.dnn-caret { font-size: 0.75rem; opacity: 0.75; }

/* Desktop: open the top-level dropdown and every flyout level on hover, in addition to
   Bootstrap's own click/keyboard toggle (data-bs-toggle="dropdown" on the top level). */
@media (min-width: 992px) {
    .dnn-dropdown-root:hover > .dnn-dropdown,
    .dnn-dropdown-root:focus-within > .dnn-dropdown {
        display: block;
    }
}

/* Mobile (collapsed navbar): no hover, so flyouts render inline/indented instead of
   off to the side, and only open via tap (:focus-within) or Bootstrap's click toggle. */
@media (max-width: 991.98px) {
    .dnn-dropdown {
        position: static;
        box-shadow: none;
        border-radius: 0.4rem;
        margin: 0.25rem 0 0.5rem;
    }
    .dnn-flyout {
        position: static;
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
        padding-left: 0.5rem;
    }
    .dnn-caret { transform: rotate(90deg); }
}

/* =========================== Page title band ============================== */
.page-title-band {
    background: linear-gradient(135deg, var(--jud-navy), var(--jud-blue));
    color: #fff;
}
.page-title-band .container { padding-top: 1.4rem; padding-bottom: 1.4rem; }
.page-title-band h1 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
}
@media (min-width: 768px) {
    .page-title-band h1 { font-size: 2.3rem; }
}
.page-title-date {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

/* =========================== Footer ====================================== */
.site-footer {
    background: var(--jud-footer-bg);
    color: var(--jud-footer-text);
    flex-shrink: 0;
    margin-top: 3rem;
}
.site-footer > .container { padding-top: 2.5rem; padding-bottom: 2rem; }

.footer-heading {
    color: #fff;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 0.45rem; }
.footer-list a,
.footer-inline-links a {
    color: var(--jud-footer-text);
    text-decoration: none;
}
.footer-list a:hover,
.footer-list a:focus,
.footer-inline-links a:hover,
.footer-inline-links a:focus {
    color: #fff;
    text-decoration: underline;
}

.footer-brand { display: flex; align-items: flex-start; }
.footer-logo {
    width: 100%;
    max-width: 320px;
    height: auto;
    opacity: 0.9;               /* white SVG on the dark footer */
}

.footer-bar { background: var(--jud-footer-bar); }
.footer-bar .container { padding-top: 0.9rem; padding-bottom: 0.9rem; }
.footer-copy { font-size: 0.85rem; }

.footer-inline-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}
/* Title VI dropdown trigger, styled as a plain footer link */
.footer-titlevi {
    background: none;
    border: 0;
    padding: 0;
    color: var(--jud-footer-text);
    font-size: 0.85rem;
}
.footer-titlevi:hover,
.footer-titlevi:focus {
    color: #fff;
    text-decoration: underline;
}

.footer-social a {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    color: var(--jud-footer-text);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    margin-left: 0.4rem;
}
.footer-social a:hover,
.footer-social a:focus {
    color: #fff;
    border-color: #fff;
}
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }

/* =========================== FAQ (Q/A) list =============================== */
/* Reusable template for FAQ-style content (a series of question/answer pairs) — pilot page
   Frequently-Asked-Questions-for-Domestic-Violence. A colored "Q" badge marks each question, a
   lighter outlined "A" badge marks its answer, so the two are easy to tell apart at a glance
   without changing the underlying h3 (question) + free-form body (answer) structure already used
   throughout the site's other FAQ pages. Markers are aria-hidden — screen readers get the plain
   question text as the heading's accessible name, not "Q " + the text. */
.faq-item {
    border-bottom: 1px solid #dddedf;
    padding: 1.5rem 0;
}
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: 0; padding-bottom: 0; }

.faq-question,
.faq-answer {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.faq-question { margin-bottom: 0.75rem; }

.faq-marker {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.95rem;
}
.faq-question .faq-marker { background: var(--jud-blue); color: #fff; }
.faq-answer .faq-marker { background: #fff; color: var(--jud-blue); border: 2px solid var(--jud-blue); }

.faq-question-text {
    margin: 0;
    padding-top: 0.2rem;
    font-size: 1.1rem;
}
.faq-answer-body { min-width: 0; }  /* let long/wide content (tables, grids) wrap instead of overflowing the flex row */
.faq-answer-body > *:last-child { margin-bottom: 0; }

/* =========================== Article list ================================ */
.article-list-item {
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 0;
}
.article-list-item:last-child { border-bottom: 0; }
.article-list-thumb {
    width: 160px;
    height: 120px;
    object-fit: cover;
    border-radius: 0.25rem;
}
.article-meta {
    color: #595959;             /* >= 4.5:1 on white */
    font-size: 0.9rem;
}

/* Bootstrap's .pagination is display:flex with no wrap by default, so a list with many pages
   (e.g. Court Announcements) overflows its container width instead of wrapping to a new row. */
.pagination {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

/* =========================== Article detail ============================== */
.article-main-image {
    max-width: 320px;
    height: auto;
    border-radius: 0.25rem;
}
.article-body img { max-width: 100%; height: auto; }

/* =========================== Gallery ===================================== */
.gallery-thumb {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 0.25rem;
}
.gallery-thumb-button {
    padding: 0;
    border: 2px solid transparent;
    background: none;
    border-radius: 0.3rem;
}
.gallery-thumb-button:hover,
.gallery-thumb-button:focus-visible { border-color: var(--jud-blue); }
.gallery-carousel-image {
    max-height: 70vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

/* =========================== Home page =================================== */

/* Hero feature cards — horizontal "media" layout (gradient icon panel + content) */
.home-hero-band {
    margin-bottom: 1.5rem;   /* background + padding intentionally removed */
}
.hero-card {
    display: flex;
    align-items: stretch;
    height: 100%;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 1.4rem;
    overflow: hidden;
    box-shadow: var(--jud-card-shadow);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.hero-card:hover {
    box-shadow: var(--jud-card-shadow-hover);
    transform: translateY(-2px);
}
.hero-card-media {
    flex: 0 0 150px;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 3.1rem;
    position: relative;
}
.hero-card-media::after {   /* subtle diagonal sheen */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%);
}
.hero-media-1 { background: linear-gradient(150deg, #10375c, #2c6cae); }
.hero-media-2 { background: linear-gradient(150deg, #0d5b52, #1fa67a); }
.hero-card-body {
    display: flex;
    flex-direction: column;
    padding: 1.15rem 1.3rem;
}
.hero-card-body h2 {
    color: var(--jud-navy);
    font-size: 1.15rem;
    margin: 0 0 0.45rem;
}
.hero-card-body p {
    color: #4a5560;
    font-size: 0.9rem;
    flex-grow: 1;
    margin-bottom: 0.85rem;
}
/* Stack the panel on top on very narrow screens */
@media (max-width: 400px) {
    .hero-card { flex-direction: column; }
    .hero-card-media { flex-basis: auto; min-height: 96px; font-size: 2.6rem; }
}

/* Icon quick-nav */
.icon-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (min-width: 576px) { .icon-nav { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 992px) { .icon-nav { grid-template-columns: repeat(9, 1fr); } }
.icon-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    text-align: center;
    text-decoration: none;
    color: var(--jud-ink);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.25;
}
.icon-nav .icon-circle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e0e7ef;
    box-shadow: var(--jud-card-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jud-blue);
    font-size: 1.4rem;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.icon-nav a:hover .icon-circle,
.icon-nav a:focus-visible .icon-circle {
    background: var(--jud-blue);
    border-color: var(--jud-blue);
    color: #fff;
}

/* Featured rotator — "filmstrip": several same-size images visible at once; the centered one is
   fully opaque, everything else uniformly dimmer. Unlike a simple opacity swap, the strip
   genuinely slides: .rotator-viewport always fills the full width of its container (so it never
   floats as a narrow strip with empty space on either side) and clips whatever doesn't fit;
   home-rotator.js keeps whichever tile is "current" centered in that viewport, re-measuring on
   every resize. Tile size itself is fixed at every breakpoint — narrowing the screen never
   shrinks the images, it just leaves less room, so the edge tiles get clipped progressively
   (5 visible -> 3 -> 1) while the centered tile is always fully in view. */
.home-rotator {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 1.4rem;
    box-shadow: var(--jud-card-shadow);
    padding: 1.5rem 1rem 1.25rem;
    margin-bottom: 1.75rem;
}
.rotator-viewport {
    overflow: hidden;
    width: 100%;
}
.rotator-track {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    transition: transform 0.3s ease;
    will-change: transform;
}
.rotator-item {
    display: block;
    flex: 0 0 auto;
    width: 235px;
    height: 170px;
    border-radius: 0.6rem;
    overflow: hidden;
    opacity: 0.45;
    transition: opacity 0.3s ease;
}
.rotator-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rotator-item[data-dist="0"] {
    opacity: 1;
    box-shadow: var(--jud-card-shadow-hover);
}

.rotator-caption { display: none; text-align: center; padding-top: 1rem; }
.rotator-caption.active { display: block; }
.rotator-caption h2 { color: var(--jud-navy); font-size: 1.15rem; margin-bottom: 0.1rem; }
.rotator-caption .rotator-date { color: #595959; font-size: 0.85rem; margin: 0; }

/* Boxes with a coloured header bar */
.home-box,
.home-panel {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 1.4rem;
    box-shadow: var(--jud-card-shadow);
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.home-panel { padding: 1.15rem 1.25rem; }
.home-box h2 {
    color: var(--bs-heading-color);
    border-bottom: 1px solid #dddedf;
    font-size: 1rem;
    margin: -1rem -1.15rem 0.85rem;
    padding: 0.6rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Only for headings that also carry a trailing "See more" link (e.g. Upcoming Events) — pushes
   just that link to the far right without affecting every other .home-box heading's icon+label
   spacing (those are two flex items too: the icon <span> and the label text). */
.home-box h2.home-box-heading-split {
    justify-content: space-between;
}
/* The icon+label pair is wrapped in one <span> so justify-content: space-between above only
   splits it from the trailing "See more" link — restores the same icon-to-label gap the plain
   .home-box h2 case gets for free from its own flex gap. */
.home-box-heading-split > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.home-box-more-lg {
    font-size: 0.95rem;
}
.home-box-more {
    font-size: 0.8rem;
    font-weight: 400;
    white-space: nowrap;
}
.home-box-list { list-style: none; padding: 0; margin: 0; }
.home-box-list li { margin-bottom: 0.5rem; }
.home-box-list li:last-child { margin-bottom: 0; }
.home-box-list a {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--jud-ink);
    font-size: 0.9rem;
}
.home-box-list a:hover,
.home-box-list a:focus-visible { color: var(--jud-blue); text-decoration: underline; }
.home-box-list .bi { color: var(--jud-blue); flex-shrink: 0; }

/* Boxes for INTERIOR (non-home) pages — same look as .home-box but no bottom margin, since these
   typically sit alone (e.g. in the sidebar layout) rather than stacked with siblings. When a page
   DOES stack several in the sidebar, add "mb-3" to each one but the last (see e.g.
   CircuitCivil.cshtml) — that's the established convention, don't add a blanket gap here instead. */
.info-box,
.info-panel {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 1.4rem;
    box-shadow: var(--jud-card-shadow);
    padding: 1rem 1.15rem;
    overflow: hidden;
}
.info-panel { padding: 1.15rem 1.25rem; }
.info-box h2 {
    color: var(--bs-heading-color);
    border-bottom: 1px solid #dddedf;
    font-size: 1rem;
    margin: -1rem -1.15rem 0.85rem;
    padding: 0.6rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.info-box-list { list-style: none; padding: 0; margin: 0; }
.info-box-list li { margin-bottom: 0.5rem; }
.info-box-list li:last-child { margin-bottom: 0; }
.info-box-list a {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--jud-ink);
    font-size: 0.9rem;
}
.info-box-list a:hover,
.info-box-list a:focus-visible { color: var(--jud-blue); text-decoration: underline; }
.info-box-list .bi { color: var(--jud-blue); flex-shrink: 0; }
/* Icon + plain text list items (no <a> wrapper, e.g. "Our Hours" boxes) don't get the flex/gap
   treatment above since that's scoped to <a>, so give the icon its own right margin instead. */
.info-box-list li > .bi { margin-right: 0.5rem; }

/* Reusable icon "tile" links (colored circle icon + label) — used on courtMAP, Court Hearing
   Text Alerts, and similar simple content pages with a few call-to-action links. */
.icon-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 1rem;
    height: 100%;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 0.6rem;
    box-shadow: var(--jud-card-shadow);
    text-decoration: none;
    color: var(--jud-navy);
    font-weight: 600;
    text-align: center;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.icon-tile:hover, .icon-tile:focus-visible {
    box-shadow: var(--jud-card-shadow-hover);
    transform: translateY(-2px);
    color: var(--jud-navy);
}
.icon-tile-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
}
.icon-tile-icon-blue   { background: #4f78c5; }
.icon-tile-icon-orange { background: #ea4923; }
.icon-tile-icon-purple { background: #941bb1; }

/* Reusable "topic picker" grid — a responsive grid of image-icon panels linking to sub-topics.
   Used on Resource Center and similar hub/landing pages. */
.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 210px));
    gap: 1.25rem;
    justify-content: center;
}
.topic-panel {
    display: block;
    border: 1px solid #e3e8ee;
    border-radius: 1.4rem;
    text-align: center;
    padding: 1.1rem 0.75rem;
    background: #fff;
    box-shadow: var(--jud-card-shadow);
    text-decoration: none;
    color: var(--jud-ink);
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.topic-panel:hover, .topic-panel:focus-visible {
    border-color: var(--jud-blue);
    box-shadow: var(--jud-card-shadow-hover);
    transform: translateY(-2px);
    color: var(--jud-ink);
}
.topic-panel img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin: 0 auto 0.5rem;
    display: block;
}
/* Colored icon badge alternative to an image — set --icon-bg inline per instance (this pattern
   needs more distinct colors than the fixed .icon-tile-icon-* variants provide). */
.topic-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.6rem;
    color: #fff;
    font-size: 1.75rem;
    background: var(--icon-bg, var(--jud-blue));
}
.topic-panel h3 {
    font-size: 1rem;
    margin: 0;
    color: var(--jud-navy);
}

/* Reusable "icon + heading + description" list — a three-column grid of linked topics each with a
   colored icon badge, a linked heading, and a short description. Used on Court Divisions and
   similar pages that need more explanatory text per item than .topic-grid provides. */
.division-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 2rem;
}
@media (min-width: 768px) {
    .division-list { grid-template-columns: repeat(3, 1fr); }
}
/* Stacked variant — single flex column instead of a grid, for pages where a 3-column layout feels
   too cramped for the amount of description text per item (Court Divisions sub-pages). Shares
   .division-item/.division-icon styling with the grid version above. */
.service-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top:1.5rem;
}
.division-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.division-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    background: var(--icon-bg, var(--jud-blue));
}
.division-item h2,
.division-item h3 {
    font-size: 1.05rem;
    margin: 0 0 0.25rem;
}
.division-item h2 a,
.division-item h3 a {
    color: var(--jud-navy);
    text-decoration: none;
}
.division-item h2 a:hover, .division-item h2 a:focus-visible,
.division-item h3 a:hover, .division-item h3 a:focus-visible {
    color: var(--jud-blue);
    text-decoration: underline;
}
.division-item p { margin: 0; }

/* Quick-link pills (left rail) */
.quick-pills { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.quick-pills li { margin-bottom: 0.5rem; }
.quick-pills a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.7rem;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 2rem;
    box-shadow: var(--jud-card-shadow);
    text-decoration: none;
    color: var(--jud-ink);
    font-size: 0.85rem;
    font-weight: 500;
}
.quick-pills a:hover,
.quick-pills a:focus-visible { border-color: var(--jud-blue); color: var(--jud-blue); }
.quick-pills .bi {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--jud-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

/* Latest-news list with thumbnail */
.home-news-item {
    display: flex;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid #eef1f5;
}
.home-news-item:last-child { border-bottom: 0; }
.home-news-thumb {
    width: 110px;
    height: 80px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 0.3rem;
}

/* admin list status */
.status-draft { color: #8a6d00; }
.status-published { color: #1f6f3d; }

/* Softer warning alert — replaces Bootstrap's saturated default yellow with a muted, warm amber
   that fits the site's palette, and rounds the corners to match .info-box/.topic-panel elsewhere. */
.alert-warning {
    --bs-alert-bg: #fdf3e2;
    --bs-alert-border-color: #f0d9ab;
    --bs-alert-color: #6b4a17;
    border-radius: 1.4rem;
    box-shadow: var(--jud-card-shadow);
}

/* Softer info alert — same treatment as .alert-warning above (muted tint instead of Bootstrap's
   saturated default blue, corners matching .info-box/.topic-panel elsewhere). */
.alert-info {
    --bs-alert-bg: #e7f1fa;
    --bs-alert-border-color: #bcdaf2;
    --bs-alert-color: #1b4a72;
    border-radius: 1.4rem;
    box-shadow: var(--jud-card-shadow);
}

/* Softer danger alert — same treatment as .alert-warning/.alert-info above (muted tint instead
   of Bootstrap's saturated default red, corners matching .info-box/.topic-panel elsewhere). */
.alert-danger {
    --bs-alert-bg: #fbe9e9;
    --bs-alert-border-color: #f0c2c2;
    --bs-alert-color: #7a1f1f;
    border-radius: 1.4rem;
    box-shadow: var(--jud-card-shadow);
}

/* Softer success alert — same treatment as .alert-warning/.alert-info/.alert-danger above (muted
   tint instead of Bootstrap's saturated default green, corners matching .info-box/.topic-panel
   elsewhere). */
.alert-success {
    --bs-alert-bg: #e7f5ec;
    --bs-alert-border-color: #bfe3cc;
    --bs-alert-color: #1f6f3d;
    border-radius: 1.4rem;
    box-shadow: var(--jud-card-shadow);
}

/* Generic "photo card" — photo + name + short body, the whole card is one link when used that
   way (same single-link-per-tile convention as .topic-panel/.icon-tile), or a plain non-link box
   otherwise. First built for Courthouse Locations; also used (as plain boxes) on Court
   Administration Executive Team. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}
/* Narrower variant — columns size to content instead of stretching to fill the row (the "0fr"
   trick: auto-fit still wraps at minmax's minimum, but 0fr means a column claims none of the
   leftover space, so a short last row of cards stays compact instead of stretching wide). */
.card-grid-narrow {
    grid-template-columns: repeat(auto-fit, minmax(160px, 0fr));
    justify-content: center;
}
.photo-card {
    display: block;
    border: 1px solid #e3e8ee;
    border-radius: 1.4rem;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--jud-card-shadow);
    text-decoration: none;
    color: var(--jud-ink);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.photo-card:hover, .photo-card:focus-visible {
    box-shadow: var(--jud-card-shadow-hover);
    transform: translateY(-2px);
    color: var(--jud-ink);
}
.photo-card-image {
    aspect-ratio: 4 / 3;
    background: var(--jud-page-bg);
    overflow: hidden;
}
.photo-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.photo-card-body { padding: 1rem 1.15rem; }
.photo-card-body h2,
.photo-card-body h3 {
    font-size: 1.05rem;
    margin: 0 0 0.35rem;
    color: var(--jud-navy);
}
.photo-card-body address {
    font-style: normal;
    font-size: 0.88rem;
    color: var(--jud-ink);
    margin: 0 0 0.75rem;
}
.photo-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--jud-blue);
}

/* Sidebar building photo on an individual courthouse location page (natural aspect ratio, not
   cropped like .photo-card-image). */
.location-detail-photo {
    width: 100%;
    border-radius: 0.75rem;
    box-shadow: var(--jud-card-shadow);
    display: block;
    margin-bottom: 1rem;
}

/* "You are here" highlight for the current page's own entry in an .info-box-list (e.g. the
   Court Locations list repeated on every courthouse location page). */
.info-box-list a[aria-current="page"] {
    color: #e2902b;
    font-weight: 700;
}
.info-box-list a[aria-current="page"] .bi { color: #e2902b; }

/* Rounded-pill tab strip shared by any "N sibling pages, pick one" cluster (e.g.
   _CourtDivisionTabs.cshtml's 9 Court Divisions tabs, _LocalProfessionalismPanelNav.cshtml's 5
   Local Professionalism Panel tabs) — moved here from the Court-Divisions-only court-divisions.css
   once a second, unrelated cluster started reusing the same class. */
.division-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    border-bottom: 1px solid #ddd;
    padding: 0.6rem 0 1rem;
    margin-bottom: 1.25rem;
    list-style: none;
}
.division-tabs li {
    border: 1px solid #dde3ea;
    border-radius: 50rem;
    background: #f8f9fa;
    transition: background-color 0.15s ease;
}
.division-tabs a {
    display: block;
    padding: 0.25rem 0.55rem;
    color: var(--jud-ink);
    text-decoration: none;
    white-space: nowrap;
}
.division-tabs li:hover { background-color: #eaeaea; }
.division-tabs a[aria-current="page"] {
    background-color: var(--jud-navy);
    border-radius: 50rem;
    color: #fff;
}
.division-tabs li:has(a[aria-current="page"]) { background-color: var(--jud-navy); border-color: var(--jud-navy); }

/* Plain (non-card) heading for a form's own sections, separated by <hr>s instead of boxed panels
   — shared by native-form pages hitting the external Jud11API (ADAAccommodationRequest.cshtml,
   VideoRecordingRequest.cshtml). */
.form-section-heading {
    color: var(--jud-navy);
    font-weight: 700;
}