/* Header — deep navy on the logo/nav bar only */
#header {
    background: #001e36;
    border-bottom: solid 1px #001020;
    box-shadow: inset 0px -1px 0px 0px #003058;
}

/* Banner — restore original dark gray so it reads as a separate section */
#banner {
    background: #3B4346;
}

#header nav a {
    color: #ffffff;
}

#header nav a:hover {
    color: #ffffff;
}

/* Mobile title bar — match header */
#titleBar {
    background: #001e36;
    box-shadow: inset 0px -1px 0px 0px #003058, 0px 1px 7px 0px rgba(0, 0, 0, 0.6);
}

/* Nav hover underline animation */
#header nav a {
    position: relative;
    padding-bottom: 6px;
    transition: color 0.2s ease;
}

#header nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #0068a9;
    transition: width 0.2s ease;
}

#header nav a:hover::after {
    width: 100%;
}

/* Social icons - clean flex layout, replaces   gaps */
.social-icons {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 1.25em;
    flex-wrap: wrap;
}

.social-icons a {
    display: inline-flex;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-icons a:hover {
    transform: translateY(-4px);
    opacity: 0.8;
}

.social-icons img {
    height: 58px;
    width: 58px;
    object-fit: contain;
}

/* Content section cards: accent top border + hover lift */
#content section {
    border-top: 3px solid #0068a9;
    border-radius: 0 0 4px 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#content section:hover {
    transform: translateY(-3px);
    box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.13);
}

/* Override red link color in content area */
#content a {
    color: #0068a9;
}

/* Divider line under content h2 */
#content h2 {
    padding-bottom: 0.45em;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.75em;
}

/* Button: blue override + subtle lift on hover */
.button-large {
    background-image: -webkit-linear-gradient(top, #0077bf, #0068a9);
    background-image: -moz-linear-gradient(top, #0077bf, #0068a9);
    background-image: linear-gradient(to bottom, #0077bf, #0068a9);
    background-color: #0068a9;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(150, 200, 255, 0.4), inset 0px 0px 0px 2px rgba(80, 160, 220, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.04em;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.button-large:hover {
    background-image: -webkit-linear-gradient(top, #0088d4, #0077bf);
    background-image: -moz-linear-gradient(top, #0088d4, #0077bf);
    background-image: linear-gradient(to bottom, #0088d4, #0077bf);
    background-color: #0077bf;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(150, 200, 255, 0.4), inset 0px 0px 0px 2px rgba(80, 160, 220, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.button-large:active {
    background-image: -webkit-linear-gradient(top, #004f80, #0068a9);
    background-image: -moz-linear-gradient(top, #004f80, #0068a9);
    background-image: linear-gradient(to bottom, #004f80, #0068a9);
    background-color: #004f80;
}

/* Slideshow frame */
.slideshow-frame {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
    background: #111;
    width: 100%;
}

.slideshow-label {
    background: linear-gradient(135deg, #0068a9 0%, #004f80 100%);
    color: #fff;
    font-size: 0.78em;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: none;
    padding: 7px 14px;
    line-height: 1;
}

.slideshow-frame iframe {
    display: block;
    width: 100%;
    height: 340px;
    border: none;
}

/* Recruitment panel */
.recruit-section {
    background: #f0f4f7 !important;
    border-radius: 4px;
    overflow: hidden;
    padding: 0 !important;
    margin-bottom: 25px;
}

.recruit-section:hover {
    transform: none !important;
    box-shadow: 2px 2px 2px 1px rgba(128, 128, 128, 0.1) !important;
}

.recruit-header {
    padding: 24px 36px 18px;
    border-bottom: 1px solid #dde4e8;
    display: flex;
    align-items: baseline;
    gap: 24px;
    flex-wrap: wrap;
}

.recruit-overline {
    font-size: 0.72em;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #0068a9;
    white-space: nowrap;
    flex-shrink: 0;
}

.recruit-tagline {
    font-size: 0.88em;
    color: #8d9ca3;
    font-style: italic;
    margin: 0 !important;
    line-height: 1.5em;
}

.recruit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.recruit-card {
    display: block;
    padding: 32px 36px 36px;
    text-decoration: none;
    color: #546b76;
    border-right: 1px solid #dde4e8;
    transition: background 0.2s ease;
}

.recruit-card:last-child {
    border-right: none;
}

.recruit-card:hover {
    background: rgba(0, 104, 169, 0.06);
    color: #546b76;
    text-decoration: none;
}

.recruit-card-eyebrow {
    font-size: 0.72em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #0068a9;
    margin-bottom: 0.6em;
}

.recruit-section h2 {
    color: #373f42 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0.6em !important;
    font-size: 1.5em;
}

.recruit-card p {
    font-size: 0.92em;
    line-height: 1.75em;
    color: #8d9ca3;
    margin-bottom: 1.5em !important;
}

.recruit-card-btn {
    font-size: 0.85em;
    color: #0068a9;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(0, 104, 169, 0.35);
    padding-bottom: 2px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.recruit-card:hover .recruit-card-btn {
    border-color: #0068a9;
    color: #0077bf;
}

@media screen and (max-width: 980px) {
    .recruit-grid {
        grid-template-columns: 1fr;
    }

    .recruit-card {
        border-right: none;
        border-bottom: 1px solid #dde4e8;
    }

    .recruit-card:last-child {
        border-bottom: none;
    }

    .recruit-header {
        flex-direction: column;
        gap: 8px;
    }
}

@media screen and (max-width: 736px) {
    .recruit-header,
    .recruit-card {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Instagram section — stretch to match adjacent column heights */
.instagram-col {
    display: flex;
    flex-direction: column;
}

.instagram-col section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.instagram-col iframe {
    flex: 1;
    width: 100%;
    min-height: 300px;
}

/* Roster loading spinner */
.roster-wrap {
    position: relative;
    min-height: 200px;
    width: 100%;
}

.roster-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 0;
    color: #8d9ca3;
    font-size: 1.1em;
    letter-spacing: 0.05em;
}

.roster-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e0e4e6;
    border-top-color: #0068a9;
    border-radius: 50%;
    animation: roster-spin 0.8s linear infinite;
}

@keyframes roster-spin {
    to { transform: rotate(360deg); }
}

/* Copyright: slightly smaller text, tinted background */
#copyright {
    font-size: 0.85em;
    line-height: 2em;
    background: #e8ecef;
}

/* Tighten nav spacing slightly on large screens */
@media screen and (min-width: 1280px) {
    #header nav a {
        margin-left: 46px;
    }
}

@media screen and (max-width: 980px) {
    #titleBar .title img {
        height: 75px;
        width: auto;
        vertical-align: middle;
    }
}

@media screen and (max-width: 736px) {
    .social-icons img {
        height: 48px;
        width: 48px;
    }

    .social-icons {
        gap: 10px;
    }
}