/* =============================================================================
   FCC design system
   -----------------------------------------------------------------------------
   Single source of truth for the public site's layout and list components.
   Loaded after the legacy theme so these canonical definitions win. Every page
   composes the Blade components that use these classes — no per-page <style>
   blocks, no duplicated .btn-download / .cause-card / container widths.
   ============================================================================= */

:root {
    /* Brand */
    --fcc-green: #014421;
    --fcc-green-2: #0a5c2f;
    --fcc-green-3: #128c4e;
    --fcc-gradient: linear-gradient(90deg, var(--fcc-green), var(--fcc-green-2));
    --fcc-gradient-hover: linear-gradient(90deg, var(--fcc-green-2), var(--fcc-green-3));

    /* Ink */
    --ink-900: #111827;
    --ink-700: #1f2937;
    --ink-500: #6b7280;
    --ink-300: #9ca3af;
    --line: rgba(229, 231, 235, 0.7);

    /* Layout — one content width for the whole site */
    /* Even 160px step scale: narrow / standard / wide */
    --page-narrow: 1040px;
    --page-max: 1200px;
    --page-max-wide: 1360px;
    --page-pad-inline: clamp(1rem, 4vw, 2rem);
    --page-pad-block: 2.5rem;

    /* Scale */
    --radius: 0.75rem;
    --radius-lg: 1rem;
    --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 20px 35px -10px rgba(0, 0, 0, 0.12), 0 10px 15px -3px rgba(0, 0, 0, 0.07);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -----------------------------------------------------------------------------
   Page shell — the one container. Replaces .judgments-container,
   .cause-list-container, .roster-container, .press-releases-container, … and the
   empty <div class="banner_section layout_padding"> spacer.
   -------------------------------------------------------------------------- */
.page {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding: var(--page-pad-block) var(--page-pad-inline);
}

.page--wide {
    max-width: var(--page-max-wide);
}

/* Narrower column for reading and profile pages — better line length, better card proportions. */
.page--narrow {
    max-width: var(--page-narrow);
}

.page__header {
    margin-bottom: 0;
}

.section-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--ink-900);
    margin: 0 0 1.5rem;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 60%;
    height: 3px;
    background: var(--fcc-gradient);
    border-radius: 3px;
}

/* Optional lead paragraph under a page title. Tightens the title when present. */
.page__header:has(.page__lead) .section-title {
    margin-bottom: 0.5rem;
}

.page__lead {
    margin: 0 0 1.5rem;
    max-width: 65ch;
    color: var(--ink-500);
    font-size: 1.05rem;
    line-height: 1.55;
}

/* -----------------------------------------------------------------------------
   Download action — canonical (was redefined in 16 files)
   -------------------------------------------------------------------------- */
.btn-download {
    display: inline-block;
    background: var(--fcc-gradient);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 10px -2px rgba(1, 68, 33, 0.4);
    transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), background 0.28s ease;
}

.btn-download:hover,
.btn-download:focus-visible {
    background: var(--fcc-gradient-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 20px -6px rgba(1, 68, 33, 0.5);
}

.btn-download:active {
    transform: translateY(0);
    box-shadow: 0 4px 8px -2px rgba(1, 68, 33, 0.45);
}

/* PDF glyph badge used in card lists */
.pdf-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fcc-gradient);
    color: #fff;
    border-radius: var(--radius);
}

.pdf-icon svg {
    width: 28px;
    height: 28px;
}

/* -----------------------------------------------------------------------------
   File list — CARD variant (cause lists, tenders, notifications, …)
   -------------------------------------------------------------------------- */
.file-card-list {
    display: grid;
    gap: 1.25rem;
}

.file-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 231, 235, 0.6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}

.file-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(1, 68, 33, 0.35);
}

.file-card__body {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    min-width: 0;
    flex: 1;
}

.file-card__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink-700);
    margin: 0 0 0.35rem;
    line-height: 1.3;
}

.file-card__meta {
    font-size: 0.875rem;
    color: var(--ink-500);
    margin: 0;
}

@media (max-width: 480px) {
    .file-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .file-card .btn-download {
        width: 100%;
        text-align: center;
    }
}

/* -----------------------------------------------------------------------------
   File list — TABLE variant (rosters, orders, press releases, judgements, …)
   Rows collapse into cards on narrow screens via the data-label pattern.
   -------------------------------------------------------------------------- */
.file-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.file-table th,
.file-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.file-table th {
    background: var(--fcc-gradient);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.file-table tr:last-child td {
    border-bottom: none;
}

.file-table tbody tr:hover {
    background: rgba(1, 68, 33, 0.06);
}

.file-table__icon {
    width: 44px;
}

.file-table__title {
    font-weight: 600;
    color: var(--ink-700);
}

.file-table__empty {
    text-align: center;
    color: var(--ink-500);
    padding: 2rem 1rem;
}

@media (max-width: 768px) {
    .file-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .file-table tr {
        display: block;
        margin-bottom: 1.25rem;
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: 0 6px 15px -4px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--line);
    }

    .file-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        border-bottom: 1px solid var(--line);
    }

    .file-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--ink-500);
    }

    .file-table td:last-child {
        border-bottom: none;
    }
}

/* -----------------------------------------------------------------------------
   Pagination — one themed definition (Bootstrap-5 markup from useBootstrapFive)
   -------------------------------------------------------------------------- */
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.pagination-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination-summary {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-500);
}

.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    color: var(--fcc-green);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pagination .page-link:hover {
    background: rgba(1, 68, 33, 0.06);
    border-color: rgba(1, 68, 33, 0.35);
}

.pagination .page-item.active .page-link {
    background: var(--fcc-gradient);
    border-color: var(--fcc-green);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: var(--ink-300);
    background: #fff;
    opacity: 0.6;
    pointer-events: none;
}

/* Prev/next buttons must match the number buttons. Bootstrap rounds only the
   outer corners of the first/last .page-link (its --bs-pagination-border-radius,
   at higher specificity), leaving them asymmetric — force the uniform radius. */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border-radius: var(--radius);
}

/* -----------------------------------------------------------------------------
   Secondary "clear" link beside a search/filter submit button
   -------------------------------------------------------------------------- */
.btn-search-clear {
    display: inline-block;
    margin-left: 14px;
    color: var(--fcc-green);
    font-weight: 600;
    text-decoration: none;
}

.btn-search-clear:hover {
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Table-page filter — a light two-row toolbar: full-width search on the first
   row, the remaining filters + action on the second. Deliberately distinct from
   the standalone .simple-case-form so a data table's filter reads as controls,
   not a search page. Reuses .form-field for the field styling.
   -------------------------------------------------------------------------- */
.table-filter {
    margin-bottom: 2rem;
}

.table-filter__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Same frosted-white surface as the table wrapper and file cards. */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 231, 235, 0.6);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 16px 18px;
}

/* Row 1 — the full-width search field (natural height in the column). */
.table-filter__form > .form-field {
    flex: 0 0 auto;
}

.table-filter__row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.table-filter__row .form-field {
    flex: 1 1 160px;
}

.table-filter__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.table-filter__actions .btn-simple-search {
    width: auto;
    min-width: 0;
    height: 42px;
    padding: 0 30px;
}

@media (max-width: 640px) {
    .table-filter__row .form-field,
    .table-filter__actions {
        flex-basis: 100%;
    }

    .table-filter__actions .btn-simple-search {
        width: 100%;
    }
}

/* -----------------------------------------------------------------------------
   Gallery grid
   -------------------------------------------------------------------------- */
.gallery-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 2.5rem 0 1.25rem;
    color: var(--fcc-green);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.6rem 1.4rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #f8fafc;
    box-shadow: var(--shadow);
    transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease);
}

.gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

.image-fit-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f1f5f9;
    overflow: hidden;
}

.gallery-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.45s ease;
}

.gallery-item:hover img {
    transform: scale(1.04);
}

.gallery-item figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.1rem 0.9rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent 80%);
    color: #fff;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover figcaption {
    opacity: 1;
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1.3rem;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* Long-form body copy (biographies, about text) */
.prose {
    text-align: justify;
    line-height: 1.8;
    font-size: 0.95rem;
    color: var(--ink-700);
    text-rendering: optimizeLegibility;
}

.prose p {
    margin: 0 0 1rem;
}

/* Screen-reader-only text */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================================================
   Case search — canonical form + results design. One search look site-wide;
   used by the case-search and case-search-summary components (was inline in
   case-search). The advocate autocomplete dropdown (.fccp-*) lives in the
   legacy theme and is unaffected.
   ============================================================================= */
.case-search-simple {
    width: 100%;
    margin: 0 auto 2rem;
}

.page-heading {
    font-size: 1.6rem;
    font-weight: 600;
    color: #003300;
    margin: 0 0 1.5rem 0;
    border-bottom: 3px solid var(--fcc-green);
    padding-bottom: 0.6rem;
}

.simple-case-form {
    background: #fff;
    border: 1px solid #d0d7d0;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(1, 68, 33, 0.08), 0 2px 6px rgba(1, 68, 33, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.simple-case-form:hover {
    box-shadow: 0 12px 32px rgba(1, 68, 33, 0.14), 0 6px 12px rgba(1, 68, 33, 0.10);
    transform: translateY(-2px);
}

.form-first-row,
.form-second-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.form-field,
.form-field.wide {
    width: 100%;
}

.form-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #2f4f4f;
    font-size: 0.95rem;
}

.form-field input,
.form-field select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #a0b0a0;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--fcc-green);
    box-shadow: 0 0 0 3px rgba(1, 68, 33, 0.12);
}

.field-error {
    display: block;
    margin-top: 4px;
    color: #dc2626;
    font-size: 0.85rem;
}

.form-submit {
    text-align: center;
    margin-top: 2.2rem;
}

.btn-simple-search {
    background: linear-gradient(to bottom, #006633, #004d26);
    color: #fff;
    border: none;
    padding: 14px;
    font-size: 1.05rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 3px 8px rgba(0, 51, 0, 0.35);
    transition: all 0.22s ease;
}

.btn-simple-search:hover {
    background: linear-gradient(to bottom, #005533, #003d1f);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 51, 0, 0.45);
}

.btn-simple-search:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 51, 0, 0.3);
}

/* Search results table */
.result-section {
    background: #fff;
    border: 1px solid #d0d7d0;
    border-radius: 8px;
    padding: 1.6rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 10px rgba(1, 68, 33, 0.08);
}

.result-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fcc-green);
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--fcc-green);
    padding-bottom: 0.4rem;
}

.result-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.result-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    font-size: 0.95rem;
    table-layout: fixed;
}

.result-table th,
.result-table td {
    display: table-cell;
    padding: 10px 12px;
    border: 1px solid #cfd8cf;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: top;
}

.result-table th {
    white-space: nowrap;
    background: #f0f6f2;
    color: var(--fcc-green);
    font-weight: 600;
}

.result-table tr:nth-child(even) {
    background: #fafdfb;
}

.case-detail-card {
    overflow-x: auto;
}

.case-detail-row td {
    white-space: normal !important;
}

.desktop-history-table {
    display: block;
}

.case-download-btn {
    width: auto;
    min-width: 220px;
    padding: 11px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
    background: linear-gradient(180deg, #0b7a3e 0%, #065f31 100%);
    box-shadow: 0 6px 16px rgba(6, 95, 49, 0.28);
    border: 1px solid #05522a;
    line-height: 1.2;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.case-download-btn:hover,
.case-download-btn:focus {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(6, 95, 49, 0.35);
    filter: brightness(1.04);
}

.case-download-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(6, 95, 49, 0.24);
}

@media screen and (max-width: 767px) {
    .result-section {
        padding: 1rem;
    }

    .case-detail-row td {
        padding: 8px !important;
    }

    .case-detail-card {
        padding: 1rem !important;
    }

    .case-download-btn {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        border-radius: 12px;
        font-size: 1rem;
        letter-spacing: 0.2px;
        box-shadow: 0 8px 18px rgba(6, 95, 49, 0.3);
    }
}

@media screen and (min-width: 768px) {
    .simple-case-form {
        padding: 1.8rem 1.4rem;
    }

    .form-first-row,
    .form-second-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }

    .form-field {
        flex: 1 1 180px;
        min-width: 180px;
    }

    .form-field.wide {
        flex: 2 1 400px;
    }

    .btn-simple-search {
        width: auto;
        padding: 12px 60px;
        min-width: 180px;
    }

    .result-table {
        min-width: 100%;
        table-layout: auto;
    }

    .result-table td {
        white-space: normal;
    }
}

/* -----------------------------------------------------------------------------
   Small shared utilities — extracted from inline style= attributes.
   -------------------------------------------------------------------------- */
.field-errors {
    margin: 0;
    padding-left: 18px;
}

.honeypot {
    display: none;
}

.search-loading {
    margin-top: 10px;
    color: var(--fcc-green);
    font-weight: 600;
}

/* Brand-green header/button surfaces on the public apply forms (Bootstrap-based markup). */
.fcc-surface {
    background-color: var(--fcc-green);
    border-color: var(--fcc-green);
}

.btn-fcc {
    background-color: var(--fcc-green);
    border-color: var(--fcc-green);
    color: #fff;
}

.btn-fcc:hover,
.btn-fcc:focus {
    background-color: var(--fcc-green-2);
    border-color: var(--fcc-green-2);
    color: #fff;
}

/* Preserve newlines in judge/lawyer lists rendered via nl2br. */
.pre-line {
    white-space: pre-line;
}