/* Minification failed. Returning unminified contents.
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,17): run-time error CSS1039: Token not allowed after unary operator: '-sspha-ink'
(49,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-surface'
(50,23): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-font-family'
(52,37): run-time error CSS1019: Unexpected token, found ' '
(52,37): run-time error CSS1019: Unexpected token, found ' '
(52,37): run-time error CSS1042: Expected function, found ' '
(52,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(57,17): run-time error CSS1039: Token not allowed after unary operator: '-sspha-navy'
(63,38): run-time error CSS1019: Unexpected token, found ' '
(63,38): run-time error CSS1019: Unexpected token, found ' '
(63,38): run-time error CSS1042: Expected function, found ' '
(63,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(67,38): run-time error CSS1019: Unexpected token, found ' '
(67,38): run-time error CSS1019: Unexpected token, found ' '
(67,38): run-time error CSS1042: Expected function, found ' '
(67,38): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(72,17): run-time error CSS1039: Token not allowed after unary operator: '-sspha-muted'
(86,17): run-time error CSS1039: Token not allowed after unary operator: '-sspha-blue'
(91,21): run-time error CSS1039: Token not allowed after unary operator: '-sspha-navy'
(102,29): run-time error CSS1039: Token not allowed after unary operator: '-sspha-focus'
(106,32): run-time error CSS1039: Token not allowed after unary operator: '-sspha-navy'
(122,22): run-time error CSS1039: Token not allowed after unary operator: '-sspha-navy'
(138,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-navy'
(183,41): run-time error CSS1039: Token not allowed after unary operator: '-sspha-focus'
(187,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(264,46): run-time error CSS1039: Token not allowed after unary operator: '-sspha-navy'
(264,68): run-time error CSS1039: Token not allowed after unary operator: '-sspha-blue'
(280,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(293,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-surface-alt'
(294,35): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(296,17): run-time error CSS1039: Token not allowed after unary operator: '-sspha-navy'
(300,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(301,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(302,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(303,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(304,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(305,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(316,35): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(338,17): run-time error CSS1039: Token not allowed after unary operator: '-sspha-muted'
(344,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(347,22): run-time error CSS1039: Token not allowed after unary operator: '-sspha-surface'
(354,21): run-time error CSS1039: Token not allowed after unary operator: '-sspha-navy'
(365,17): run-time error CSS1039: Token not allowed after unary operator: '-sspha-navy'
(369,17): run-time error CSS1039: Token not allowed after unary operator: '-sspha-muted'
(374,17): run-time error CSS1039: Token not allowed after unary operator: '-sspha-teal'
(405,32): run-time error CSS1039: Token not allowed after unary operator: '-sspha-surface-alt'
(406,32): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(413,22): run-time error CSS1039: Token not allowed after unary operator: '-sspha-surface-alt'
(414,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(430,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(455,35): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(463,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(534,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(553,46): run-time error CSS1039: Token not allowed after unary operator: '-sspha-surface-alt'
(588,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-secondary-color'
(621,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-link-color'
(652,46): run-time error CSS1039: Token not allowed after unary operator: '-sspha-navy'
(652,68): run-time error CSS1039: Token not allowed after unary operator: '-sspha-blue'
(657,37): run-time error CSS1019: Unexpected token, found ' '
(657,37): run-time error CSS1019: Unexpected token, found ' '
(657,37): run-time error CSS1042: Expected function, found ' '
(657,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(664,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-surface'
(665,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(666,32): run-time error CSS1039: Token not allowed after unary operator: '-sspha-teal'
(686,17): run-time error CSS1039: Token not allowed after unary operator: '-sspha-teal'
(698,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-teal'
(705,46): run-time error CSS1039: Token not allowed after unary operator: '-sspha-navy'
(705,68): run-time error CSS1039: Token not allowed after unary operator: '-sspha-blue'
(712,35): run-time error CSS1019: Unexpected token, found ' '
(712,35): run-time error CSS1019: Unexpected token, found ' '
(712,35): run-time error CSS1042: Expected function, found ' '
(712,35): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
(748,17): run-time error CSS1039: Token not allowed after unary operator: '-sspha-teal'
(757,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-surface-alt'
(763,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-surface'
(764,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(789,32): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(790,17): run-time error CSS1039: Token not allowed after unary operator: '-sspha-muted'
(810,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-surface'
(811,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(820,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-blue-light'
(832,46): run-time error CSS1039: Token not allowed after unary operator: '-sspha-navy'
(832,68): run-time error CSS1039: Token not allowed after unary operator: '-sspha-blue'
(880,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-surface'
(881,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(891,17): run-time error CSS1039: Token not allowed after unary operator: '-sspha-muted'
(899,32): run-time error CSS1039: Token not allowed after unary operator: '-sspha-border'
(927,32): run-time error CSS1039: Token not allowed after unary operator: '-sspha-teal'
(948,28): run-time error CSS1039: Token not allowed after unary operator: '-sspha-navy'
 */
/*!
 * SSPHA - Southern States Psychiatric Hospital Association
 * Modernized theme layered on top of Bootstrap 5.
 *
 * Design goals:
 *  - Preserve the existing SSPHA brand (deep navy/teal palette, logo, photography).
 *  - Mobile-first: every rule below is written for small screens first and then
 *    progressively enhanced with min-width media queries.
 *  - WCAG 2.1 AA: all foreground/background pairs below meet a 4.5:1 contrast
 *    ratio (3:1 for large text) and every interactive element has a visible focus ring.
 */

/* ---------------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------------- */
:root {
    /* Brand palette - navy is derived from the original dark navbar/footer. */
    --sspha-navy: #10263d;
    --sspha-navy-dark: #0a1a2b;
    --sspha-blue: #14558b; /* 5.9:1 on white - AA for body text and buttons */
    --sspha-blue-light: #2f7bbf;
    --sspha-teal: #0d6e6e;
    --sspha-gold: #c68a00;
    --sspha-ink: #1c2833; /* 13.8:1 on white */
    --sspha-muted: #55606b; /* 6.4:1 on white - safe "muted" text */
    --sspha-surface: #ffffff;
    --sspha-surface-alt: #f4f6f9;
    --sspha-border: #d6dce3;
    --sspha-focus: #ffbf47; /* high visibility focus ring on light and dark */
    /* Bootstrap 5 theme overrides so utility classes inherit the brand. */
    --bs-primary: var(--sspha-blue);
    --bs-link-color: var(--sspha-blue);
    --bs-link-hover-color: var(--sspha-navy);
    --bs-body-color: var(--sspha-ink);
    /* Bootstrap's default secondary text (#6c757d) drops below 4.5:1 on the alt surface. */
    --bs-secondary-color: var(--sspha-muted);
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   2. Base / typography
   --------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    color: var(--sspha-ink);
    background-color: var(--sspha-surface);
    font-family: var(--bs-body-font-family);
    /* Fluid type keeps line lengths readable from 320px to 4K. */
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sspha-navy);
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);
}

h2 {
    font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
}

/* The legacy markup uses <small> inside headings as a sub-title. */
h1 small, h2 small, h3 small {
    color: var(--sspha-muted);
    font-weight: 400;
    font-size: 0.55em;
    display: block;
}

@media (min-width: 768px) {
    h1 small, h2 small, h3 small {
        display: inline;
        font-size: 0.5em;
    }
}

a {
    color: var(--sspha-blue);
    text-underline-offset: 0.15em;
}

    a:hover {
        color: var(--sspha-navy);
    }

/* 3. Focus visibility - never remove the outline, only restyle it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--sspha-focus);
    outline-offset: 2px;
    border-radius: 2px;
    /* Dark inner ring keeps the indicator >= 3:1 on white (WCAG 1.4.11 / 2.4.13). */
    box-shadow: 0 0 0 2px var(--sspha-navy);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Skip link: visually hidden until it receives keyboard focus. */
.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -4rem;
    z-index: 1100;
    padding: 0.75rem 1.25rem;
    background: var(--sspha-navy);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 0.5rem 0.5rem;
    transition: top 0.2s ease-in-out;
}

    .skip-link:focus {
        top: 0;
        color: #fff;
    }

/* ---------------------------------------------------------------------------
   4. Header / navigation
   --------------------------------------------------------------------------- */
.site-header .navbar {
    background-color: var(--sspha-navy);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.site-header .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
}

.site-header .navbar-brand img {
    /* The transparent logo is dark; a light badge keeps it legible on the navy header. */
    height: 44px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    padding: 4px 10px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 0 2px rgba(255, 221, 158, 0.85), 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
}

.site-header .navbar-brand:hover img,
.site-header .navbar-brand:focus-visible img {
    transform: scale(1.05);
}

.site-header .nav-link {
    color: #e8eef5;
    font-weight: 500;
    padding-block: 0.6rem;
}

    .site-header .nav-link:hover,
    .site-header .nav-link:focus {
        color: #fff;
    }

    /* Current page is announced to screen readers via aria-current and shown visually. */
    .site-header .nav-link[aria-current="page"] {
        color: #fff;
        box-shadow: inset 0 -3px 0 var(--sspha-focus);
    }

.dropdown-menu {
    border: 1px solid var(--sspha-border);
    box-shadow: 0 8px 24px rgba(16, 38, 61, 0.14);
}

/* ---------------------------------------------------------------------------
   5. Hero / carousel
   --------------------------------------------------------------------------- */
.hero-carousel .carousel-item {
    height: 55vh;
    min-height: 260px;
    background: no-repeat center center;
    background-size: cover;
}

@media (min-width: 992px) {
    .hero-carousel .carousel-item {
        height: 62vh;
    }
}

/* Scrim guarantees caption text keeps a 4.5:1 ratio over any photograph. */
.hero-carousel .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 26, 43, 0.15) 0%, rgba(10, 26, 43, 0.75) 100%);
}

.hero-carousel .carousel-caption {
    z-index: 2;
    text-align: left;
    left: 8%;
    right: auto;
    bottom: 12%;
    max-width: 40rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    /* Solid backing (not just the photo scrim) so contrast is guaranteed and measurable: white on #0a1a2b is ~17:1. */
    background-color: #0a1a2b;
    color: #fff;
}

    .hero-carousel .carousel-caption h2,
    .hero-carousel .carousel-caption p {
        color: #fff;
        margin-bottom: 0.25rem;
    }

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
    top: 50%;
    bottom: auto;
    width: 3rem;
    height: 3rem;
    margin: 0 1rem;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #0a1a2b;
    color: #fff;
    opacity: 1;
}

    .hero-carousel .carousel-control-prev:hover,
    .hero-carousel .carousel-control-next:hover {
        background-color: #10263d;
    }

.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* ---------------------------------------------------------------------------
   6. Content components
   --------------------------------------------------------------------------- */
.page-header {
    background: linear-gradient(135deg, var(--sspha-navy) 0%, var(--sspha-blue) 100%);
    color: #fff;
    padding: 2.5rem 0 2rem;
}

    .page-header h1 {
        color: #fff;
        margin-bottom: 0.25rem;
    }

    .page-header h1 small,
    .page-header .lead {
        color: #d7e4f0;
    }

.card {
    border: 1px solid var(--sspha-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 38, 61, 0.06);
    /* Subtle, non-intrusive lift on hover; disabled for reduced-motion users. */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .card:hover, .card:focus-within {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(16, 38, 61, 0.12);
    }

.card-header {
    background-color: var(--sspha-surface-alt);
    border-bottom: 1px solid var(--sspha-border);
    font-weight: 700;
    color: var(--sspha-navy);
}

.btn-primary {
    --bs-btn-bg: var(--sspha-blue);
    --bs-btn-border-color: var(--sspha-blue);
    --bs-btn-hover-bg: var(--sspha-navy);
    --bs-btn-hover-border-color: var(--sspha-navy);
    --bs-btn-active-bg: var(--sspha-navy-dark);
    --bs-btn-disabled-bg: var(--sspha-muted);
    font-weight: 600;
}

.btn-outline-light {
    font-weight: 600;
}

/* Profile rows used by Officers / Board Members / Members pages. */
.profile-row {
    padding-block: 1.75rem;
    border-bottom: 1px solid var(--sspha-border);
}

    .profile-row img {
        border-radius: 0.75rem;
    }

    .profile-row:last-of-type {
        border-bottom: 0;
    }

/* Responsive tables: legacy fixed tables become scrollable on phones. */
.table-responsive table {
    min-width: 32rem;
}

.table > :not(caption) > * > * {
    padding: 0.75rem;
}

.table caption {
    caption-side: top;
    color: var(--sspha-muted);
    font-weight: 600;
}

/* Native-detail accordions (FAQ) without any JavaScript. */
.faq-item {
    border: 1px solid var(--sspha-border);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    background: var(--sspha-surface);
}

    .faq-item > summary {
        cursor: pointer;
        padding: 1rem;
        font-weight: 600;
        color: var(--sspha-navy);
        list-style-position: inside;
    }

    .faq-item > div {
        padding: 0 1rem 1rem;
    }

/* Forms */
.form-label {
    font-weight: 600;
    color: var(--sspha-navy);
}

.form-text, .text-muted {
    color: var(--sspha-muted) !important;
}

/* About page ---------------------------------------------------------------- */
.eyebrow {
    color: var(--sspha-teal);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.eyebrow-light {
    color: #ffdd9e;
}

.about-media {
    position: relative;
    isolation: isolate;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

    .about-media img {
        display: block;
        border-radius: 1rem;
        box-shadow: 0 1rem 2.5rem rgba(16, 38, 61, 0.2);
    }

    .about-media::before {
        content: "";
        position: absolute;
        inset: 0.75rem -0.75rem -0.75rem 0.75rem;
        border-radius: 1rem;
        background-color: var(--sspha-surface-alt);
        border: 2px solid var(--sspha-border);
        z-index: -1;
    }

/* State-filtered directory cards (Members, Hospitals) */
.state-filter {
    padding: 1.25rem 1.5rem;
    background: var(--sspha-surface-alt);
    border: 1px solid var(--sspha-border);
    border-radius: 1rem;
}

.state-filter-search {
    max-width: 28rem;
}

.state-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.state-chip {
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--sspha-border);
    border-radius: 999px;
    background: #fff;
    color: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .state-chip:hover {
        background: #e7eef6;
    }

    .state-chip.active {
        background: #10263d;
        border-color: #10263d;
        color: #fff;
    }

.state-group-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--sspha-border);
}

.directory-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--sspha-border);
    border-radius: 1rem;
    box-shadow: 0 0.25rem 1rem rgba(16, 38, 61, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow-wrap: anywhere;
}

    .directory-card:hover,
    .directory-card:focus-within {
        transform: translateY(-3px);
        box-shadow: 0 0.75rem 1.75rem rgba(16, 38, 61, 0.12);
    }

.directory-card-state,
.directory-card-board {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}

.directory-card-state {
    background: #e7eef6;
    color: #10263d;
}

.directory-card-board {
    background: #fff3d6;
    color: #6b4a00;
}

.directory-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .directory-card,
    .state-chip {
        transition: none;
    }

        .directory-card:hover,
        .directory-card:focus-within {
            transform: none;
        }
}

/* Board members */
.hero-carousel .carousel {
    position: relative;
}

.carousel-pause {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 3;
    min-height: 2rem;
}

/* Board members */
.board-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sspha-border);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0.25rem 1rem rgba(16, 38, 61, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .board-card:hover,
    .board-card:focus-within {
        transform: translateY(-4px);
        box-shadow: 0 1rem 2rem rgba(16, 38, 61, 0.14);
    }

.board-card-media {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: linear-gradient(135deg, var(--sspha-surface-alt), #dbe6f1);
}

    .board-card-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center top;
    }

.board-card-state {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(16, 38, 61, 0.85);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.board-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.25rem 1.5rem 1.5rem;
}

.board-card-title {
    color: var(--bs-secondary-color);
    font-size: 0.95rem;
}

.board-card-title,
.board-card-org {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.board-card-name {
    line-height: 1.4;
    min-height: 1.4em;
}

.board-card-title,
.board-card-org {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: 2.8em;
}

.board-card-bio p {
    max-height: 12rem;
    overflow-y: auto;
}

.board-card-bio summary {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-link-color);
}

.board-card-bio-slot {
    min-height: 1.5rem;
}

.board-card-contact {
    min-height: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.board-card-vacant {
    border-style: dashed;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .board-card {
        transition: none;
    }

        .board-card:hover,
        .board-card:focus-within {
            transform: none;
        }
}

.about-mission {
    background: linear-gradient(135deg, var(--sspha-navy) 0%, var(--sspha-blue) 100%);
    color: #fff;
}

.about-mission-quote {
    font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
    line-height: 1.6;
    font-weight: 300;
}

.about-card {
    padding: 1.75rem 1.5rem;
    background-color: var(--sspha-surface);
    border: 1px solid var(--sspha-border);
    border-top: 4px solid var(--sspha-teal);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(16, 38, 61, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .about-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 0.75rem 1.5rem rgba(16, 38, 61, 0.12);
    }

.about-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background-color: rgba(13, 110, 110, 0.1);
    color: var(--sspha-teal);
    font-size: 1.4rem;
}

.about-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.25rem;
    border-radius: 1rem;
    background-color: var(--sspha-teal);
    color: #fff;
}

/* Blog page ----------------------------------------------------------------- */
.blog-featured {
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--sspha-navy) 0%, var(--sspha-blue) 100%);
    color: #fff;
    box-shadow: 0 1rem 2.5rem rgba(16, 38, 61, 0.2);
    overflow: hidden;
}

.blog-featured-body {
    padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    max-width: 52rem;
}

    .blog-featured h3 {
        color: #fff;
    }

.blog-featured a:not(.btn) {
    color: #ffdd9e;
}

    .blog-featured a:not(.btn):hover,
    .blog-featured a:not(.btn):focus {
        color: #fff;
    }

.blog-event-time {
    font-weight: 600;
    color: #ffdd9e;
}

.blog-tag {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-tag-alt {
    background-color: rgba(13, 110, 110, 0.1);
    color: var(--sspha-teal);
}

.blog-meta {
    font-size: 0.9rem;
    opacity: 0.9;
}

.blog-archive {
    background-color: var(--sspha-surface-alt);
}

.blog-card {
    display: flex;
    flex-direction: column;
    background-color: var(--sspha-surface);
    border: 1px solid var(--sspha-border);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.75rem rgba(16, 38, 61, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .blog-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 0.75rem 1.5rem rgba(16, 38, 61, 0.12);
    }

.blog-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-card-body {
    flex: 1 1 auto;
    padding: 1.5rem;
}

.blog-card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--sspha-border);
    color: var(--sspha-muted);
    opacity: 1;
}

.blog-link {
    font-weight: 600;
    text-decoration: none;
}

    .blog-link:hover,
    .blog-link:focus {
        text-decoration: underline;
    }

/* Webinars page ------------------------------------------------------------- */
.webinar-card {
    position: relative;
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem;
    background-color: var(--sspha-surface);
    border: 1px solid var(--sspha-border);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(16, 38, 61, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .webinar-card:hover,
    .webinar-card:focus-within {
        transform: translateY(-4px);
        border-color: var(--sspha-blue-light);
        box-shadow: 0 0.75rem 1.5rem rgba(16, 38, 61, 0.12);
    }

.webinar-date {
    flex: 0 0 4.5rem;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 0.25rem;
    border-radius: 0.6rem;
    background: linear-gradient(160deg, var(--sspha-navy) 0%, var(--sspha-blue) 100%);
    color: #fff;
    line-height: 1.1;
}

.webinar-date-month {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffdd9e;
}

.webinar-date-day {
    font-size: 1.75rem;
    font-weight: 700;
}

.webinar-date-year {
    font-size: 0.8rem;
    opacity: 0.9;
}

.webinar-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

    .webinar-body .blog-link {
        margin-top: auto;
    }

.webinar-player {
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: #000;
    box-shadow: 0 1rem 2.5rem rgba(16, 38, 61, 0.2);
}

    .webinar-player video {
        width: 100%;
        height: 100%;
        background-color: #000;
    }

.webinar-details {
    padding: 1.5rem;
    background-color: var(--sspha-surface);
    border: 1px solid var(--sspha-border);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(16, 38, 61, 0.06);
}

.webinar-meta dt {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sspha-muted);
}

.webinar-meta dd {
    margin-bottom: 0.9rem;
}

.webinar-materials li + li {
    border-top: 1px solid var(--sspha-border);
}

.webinar-materials a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    text-decoration: none;
}

    .webinar-materials a:hover span:last-child,
    .webinar-materials a:focus span:last-child {
        text-decoration: underline;
    }

.webinar-file-badge {
    flex: 0 0 2.75rem;
    padding: 0.2rem 0;
    border-radius: 0.35rem;
    background-color: #a4161a;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
}

    .webinar-file-badge.is-video {
        background-color: var(--sspha-teal);
    }

.field-validation-error, .validation-summary-errors {
    color: #a4161a; /* 6.4:1 on white */
    font-weight: 600;
}

.input-validation-error {
    border-color: #a4161a;
    border-width: 2px;
}

.required-marker {
    color: #a4161a;
}

/* ---------------------------------------------------------------------------
   7. Footer
   --------------------------------------------------------------------------- */
.site-footer {
    background-color: var(--sspha-navy);
    color: #e8eef5;
    padding-block: 2.5rem;
}

    .site-footer a {
        color: #ffdd9e;
    }

        .site-footer a:hover,
        .site-footer a:focus {
            color: #fff;
        }

    .site-footer h2 {
        color: #fff;
        font-size: 1.05rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 0.75rem;
    }

    .site-footer address {
        line-height: 1.6;
    }

/* ---------------------------------------------------------------------------
   8. Motion preferences
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------------------------------------------------------------------------
   9. Forced colors / high contrast and print
   --------------------------------------------------------------------------- */
@media (forced-colors: active) {
    .card, .faq-item, .site-header .navbar {
        border: 1px solid CanvasText;
    }
}

@media print {
    .site-header, .site-footer, .hero-carousel, .skip-link {
        display: none !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
    }
}