/**
 * Volunteer Styles
 *
 * Scoped CSS for volunteer single pages, archive listing,
 * roster tables, branch badges, legend, and sidebar navigation.
 * All classes use the `israelvets-` prefix.
 */

/* ═══════════════════════════════════════════════════════════════════
   Single Volunteer Page
   ═══════════════════════════════════════════════════════════════════ */

.israelvets-volunteer-single {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.israelvets-volunteer-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e0e0e0;
}

.israelvets-volunteer-name {
    font-size: 2rem;
    margin: 0 0 0.5rem;
    color: #1a1a2e;
}

.israelvets-volunteer-nationality {
    font-size: 1.1rem;
    color: #555;
    margin: 0.25rem 0;
}

.israelvets-volunteer-aliases {
    font-size: 1rem;
    color: #555;
    margin: 0.25rem 0 0.5rem;
    font-style: italic;
}

.israelvets-volunteer-aliases span {
    display: inline-block;
    margin-right: 1rem;
}

.israelvets-volunteer-kia {
    font-weight: 700;
    color: #8b0000;
    margin: 0.25rem 0;
}

.israelvets-volunteer-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 768px) {
    .israelvets-volunteer-body {
        grid-template-columns: 1fr;
    }
}

.israelvets-volunteer-main {
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Meta Grid
   ═══════════════════════════════════════════════════════════════════ */

.israelvets-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.israelvets-meta-section {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 1rem 1.25rem;
}

.israelvets-meta-section h3 {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.israelvets-meta-list {
    margin: 0;
    padding: 0;
}

.israelvets-meta-list dt {
    font-weight: 600;
    font-size: 0.85rem;
    color: #495057;
    margin-top: 0.5rem;
}

.israelvets-meta-list dt:first-child {
    margin-top: 0;
}

.israelvets-meta-list dd {
    margin: 0.1rem 0 0;
    font-size: 0.95rem;
    color: #212529;
}

/* AVILC-sourced (unconfirmed sheet) death-date annotation */
.israelvets-date-source {
    font-size: 0.8rem;
    font-style: italic;
    color: #6c757d;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   Biographical Content
   ═══════════════════════════════════════════════════════════════════ */

.israelvets-volunteer-content {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.israelvets-volunteer-content h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════
   Sidebar
   ═══════════════════════════════════════════════════════════════════ */

.israelvets-volunteer-sidebar {
    position: sticky;
    top: 2rem;
}

.israelvets-volunteer-photo {
    margin-bottom: 1.5rem;
}

.israelvets-volunteer-portrait {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.israelvets-volunteer-appears-on {
    margin-bottom: 1.5rem;
}

.israelvets-volunteer-appears-on h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #495057;
}

.israelvets-volunteer-appears-on ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.israelvets-volunteer-appears-on li {
    margin-bottom: 0.35rem;
}

.israelvets-volunteer-appears-on a {
    font-size: 0.9rem;
    color: #0056b3;
    text-decoration: none;
}

.israelvets-volunteer-appears-on a:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════
   Branch Badges
   ═══════════════════════════════════════════════════════════════════ */

.israelvets-branch-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0;
}

.israelvets-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.israelvets-badge--army {
    background: #2d5016;
    color: #fff;
}

.israelvets-badge--air-force {
    background: #1a4480;
    color: #fff;
}

.israelvets-badge--navy {
    background: #003049;
    color: #fff;
}

.israelvets-badge--aliyah-bet {
    background: #6a4c93;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   Archive Page
   ═══════════════════════════════════════════════════════════════════ */

.israelvets-archive-volunteer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.israelvets-archive-header {
    margin-bottom: 1.5rem;
}

.israelvets-archive-title {
    font-size: 1.8rem;
    margin: 0 0 0.5rem;
}

.israelvets-archive-description {
    color: #555;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Roster Tables (shared between archive and roster-template)
   ═══════════════════════════════════════════════════════════════════ */

.israelvets-roster-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.israelvets-roster-table thead {
    background: #f1f3f5;
}

.israelvets-roster-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.israelvets-roster-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
}

.israelvets-roster-table tbody tr:hover {
    background: #f8f9fa;
}

.israelvets-roster-name a,
.israelvets-archive-name a {
    color: #0056b3;
    text-decoration: none;
    font-weight: 500;
}

.israelvets-roster-name a:hover,
.israelvets-archive-name a:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════
   Roster / archive tables — narrow screens (phones)
   Both the dynamic roster (Name, Nationality, Hometown, State, Unit) and the
   /volunteer/ archive (Name, Branch, Nationality, Hometown) reuse
   .israelvets-roster-table and have too many columns for a ~390px viewport,
   so the table overflowed and became horizontally swipeable. Collapse to the
   two most scannable columns (Name + Hometown) on both; the Name cell links to
   the full profile for the hidden fields. Hiding is CLASS-based (not nth-child)
   because the two tables order their columns differently.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    /* Hide every secondary column on both tables; keep Name + Hometown.
       Header cells are hidden by position per table below. */
    .israelvets-roster-table td.israelvets-roster-nationality,
    .israelvets-roster-table td.israelvets-roster-state,
    .israelvets-roster-table td.israelvets-roster-unit,
    .israelvets-roster-table td.israelvets-archive-branch,
    .israelvets-roster-table td.israelvets-archive-nationality {
        display: none;
    }

    /* Header cells must match the SURVIVING body columns (Name + Hometown).
       The two tables order columns differently, and both share
       .israelvets-roster-table, so hide all headers then re-show the correct
       positions PER TABLE:
         roster (Name,Nationality,Hometown,State,Unit): keep th1 + th3
         archive .israelvets-archive-table (Name,Branch,Nationality,Hometown): keep th1 + th4
       (Do NOT use :last-child — on the roster that is Unit, which would leave a
       'Unit' header above Hometown data.) */
    .israelvets-roster-table thead th {
        display: none;
    }
    /* roster: Name (1) + Hometown (3) */
    .israelvets-roster-table:not(.israelvets-archive-table) thead th:nth-child(1),
    .israelvets-roster-table:not(.israelvets-archive-table) thead th:nth-child(3) {
        display: table-cell;
    }
    /* archive: Name (1) + Hometown (4) */
    .israelvets-archive-table thead th:nth-child(1),
    .israelvets-archive-table thead th:nth-child(4) {
        display: table-cell;
    }

    /* Keep Name + Hometown body cells sized to fill the width */
    .israelvets-roster-table {
        font-size: 0.95rem;
        table-layout: fixed;
        width: 100%;
    }
    .israelvets-roster-table th,
    .israelvets-roster-table td {
        padding: 0.55rem 0.5rem;
        word-break: break-word;
    }
    .israelvets-roster-table td.israelvets-roster-name,
    .israelvets-roster-table td.israelvets-archive-name,
    .israelvets-roster-table:not(.israelvets-archive-table) thead th:nth-child(1),
    .israelvets-archive-table thead th:nth-child(1) {
        width: 60%;
    }
    .israelvets-roster-table td.israelvets-roster-hometown,
    .israelvets-roster-table td.israelvets-archive-hometown,
    .israelvets-roster-table:not(.israelvets-archive-table) thead th:nth-child(3),
    .israelvets-archive-table thead th:nth-child(4) {
        width: 40%;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Roster Page Layout
   ═══════════════════════════════════════════════════════════════════ */

.israelvets-roster-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.israelvets-roster-layout {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 768px) {
    .israelvets-roster-layout {
        grid-template-columns: 1fr;
    }

    .israelvets-roster-sidebar {
        order: -1;
    }
}

.israelvets-roster-main {
    min-width: 0;
}

.israelvets-roster-header {
    margin-bottom: 1.5rem;
}

.israelvets-roster-title {
    font-size: 1.6rem;
    margin: 0 0 0.25rem;
}

.israelvets-roster-count {
    color: #6c757d;
    margin: 0;
    font-size: 0.95rem;
}

/* Roster group sections */
.israelvets-roster-group {
    margin-bottom: 2rem;
}

.israelvets-roster-group-heading {
    font-size: 1.2rem;
    margin: 0 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #1a4480;
    color: #1a1a2e;
}

/* ═══════════════════════════════════════════════════════════════════
   Legend
   ═══════════════════════════════════════════════════════════════════ */

.israelvets-roster-legend {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.israelvets-legend-title {
    font-weight: 700;
    font-size: 0.85rem;
    margin: 0 0 0.3rem;
    color: #495057;
}

.israelvets-legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}

.israelvets-legend-list li {
    margin-bottom: 0.2rem;
}

.israelvets-legend-symbol {
    display: inline-block;
    width: 1.2em;
    font-weight: 700;
    color: #8b0000;
}

.israelvets-legend-symbols {
    font-weight: 700;
    color: #8b0000;
    margin-left: 0.3em;
}

/* ═══════════════════════════════════════════════════════════════════
   Sidebar Navigation
   ═══════════════════════════════════════════════════════════════════ */

.israelvets-roster-nav {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 1rem 1.25rem;
}

.israelvets-roster-nav-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.israelvets-roster-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.israelvets-roster-nav-item {
    margin-bottom: 0.4rem;
}

.israelvets-roster-nav-item a {
    display: block;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    color: #0056b3;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.15s;
}

.israelvets-roster-nav-item a:hover {
    background: #e9ecef;
    text-decoration: none;
}

.israelvets-roster-nav-active a {
    background: #0056b3;
    color: #fff;
    font-weight: 600;
}

.israelvets-roster-nav-active a:hover {
    background: #004494;
}

/* ═══════════════════════════════════════════════════════════════════
   Pagination
   ═══════════════════════════════════════════════════════════════════ */

.israelvets-pagination {
    margin-top: 2rem;
    text-align: center;
}

.israelvets-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.israelvets-pagination .page-numbers {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    color: #0056b3;
    text-decoration: none;
}

.israelvets-pagination .page-numbers.current {
    background: #0056b3;
    color: #fff;
    border-color: #0056b3;
}

.israelvets-pagination .page-numbers:hover:not(.current) {
    background: #e9ecef;
}

/* ═══════════════════════════════════════════════════════════════════
   No Results
   ═══════════════════════════════════════════════════════════════════ */

.israelvets-no-results {
    padding: 2rem;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   Filter Bar
   ═══════════════════════════════════════════════════════════════════ */

.israelvets-filter-bar {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.israelvets-filter-bar-fields {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.israelvets-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.israelvets-filter-field label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #495057;
}

.israelvets-filter-input {
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 100%;
}

.israelvets-filter-input:focus {
    outline: 2px solid #0056b3;
    outline-offset: 1px;
    border-color: #0056b3;
}

.israelvets-filter-count {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: #6c757d;
}

.israelvets-filter-hidden {
    display: none !important;
}

.israelvets-filter-no-results {
    /* Inherits from .israelvets-no-results */
    margin-top: 1rem;
}

/* Mobile: stack fields vertically */
@media (max-width: 768px) {
    .israelvets-filter-bar-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .israelvets-filter-input {
        width: 100%;
        min-width: unset;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Browse Link (archive → roster cross-link)
   ═══════════════════════════════════════════════════════════════════ */

.israelvets-roster-browse-link {
    margin: -0.75rem 0 1rem;
    font-size: 0.85rem;
    color: #6c757d;
}

.israelvets-roster-browse-link a {
    color: #0056b3;
}


/* =============================================
 * Dark-mode awareness (2026-10-01)
 * The volunteer / archive / roster templates hardcode near-black text,
 * light card fills, and blue links that assume a light page. Under the
 * global dark theme ([data-theme=dark]) they were invisible navy-on-navy.
 * Route them through the theme tokens so they read on the navy field.
 * Saturated branch badges keep their own bg + white text (fine on dark).
 * ============================================= */
[data-theme="dark"] .israelvets-volunteer-name,
[data-theme="dark"] .israelvets-roster-group-heading,
[data-theme="dark"] .israelvets-archive-title,
[data-theme="dark"] .israelvets-roster-title {
    color: var(--fg) !important;
}
[data-theme="dark"] .israelvets-volunteer-header {
    border-bottom-color: var(--line) !important;
}
[data-theme="dark"] .israelvets-volunteer-nationality,
[data-theme="dark"] .israelvets-volunteer-aliases,
[data-theme="dark"] .israelvets-archive-description,
[data-theme="dark"] .israelvets-roster-count {
    color: var(--muted) !important;
}
/* Meta "cards" (Location / Army / etc.) + roster legend + table head */
[data-theme="dark"] .israelvets-meta-section,
[data-theme="dark"] .israelvets-roster-legend {
    background: var(--surface) !important;
    border-color: var(--line) !important;
}
[data-theme="dark"] .israelvets-meta-section h2,
[data-theme="dark"] .israelvets-meta-section h3 {
    color: var(--muted) !important;
    border-bottom-color: var(--line) !important;
}
/* dl: labels (dt) -> muted slate, values (dd) -> primary cream.
   The template uses bare <dt>/<dd> inside .israelvets-meta-list, not
   .israelvets-meta-label/-value classes — target the elements directly. */
[data-theme="dark"] .israelvets-meta-list dt {
    color: var(--muted) !important;
}
[data-theme="dark"] .israelvets-meta-list dd {
    color: var(--fg) !important;
}
[data-theme="dark"] .israelvets-volunteer-content {
    border-top-color: var(--line) !important;
}
/* Links (archive appearances, roster entries) -> warm gold */
[data-theme="dark"] .israelvets-volunteer-appears-on a,
[data-theme="dark"] .israelvets-roster-table a,
[data-theme="dark"] .israelvets-archive-volunteer a {
    color: var(--gold) !important;
}
[data-theme="dark"] .israelvets-volunteer-appears-on {
    color: var(--muted) !important;
}
/* "Appears On" title: base .appears-on h3 hardcodes #495057 and outranks the
   container rule above, so override the h3 explicitly -> primary cream. */
[data-theme="dark"] .israelvets-volunteer-appears-on h3 {
    color: var(--fg) !important;
}
/* Roster + archive table: card fill, light rules, group heading accent */
[data-theme="dark"] .israelvets-roster-table th {
    background: var(--surface) !important;
    color: var(--muted) !important;
    border-bottom-color: var(--line) !important;
}
[data-theme="dark"] .israelvets-roster-table td {
    color: var(--fg) !important;
    border-bottom-color: var(--line) !important;
}
[data-theme="dark"] .israelvets-roster-table tr:nth-child(even) td,
[data-theme="dark"] .israelvets-roster-table tbody tr:hover td {
    background: var(--surface2) !important;
}
[data-theme="dark"] .israelvets-roster-group-heading {
    border-bottom-color: var(--gold) !important;
}
[data-theme="dark"] .israelvets-volunteer-portrait {
    border-color: var(--line) !important;
}