@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
    --sa-navy: #003f87;
    --sa-navy-dark: #07254a;
    --sa-red: #ce1126;
    --sa-red-dark: #a50d1e;
    --sa-gold: #fcb711;
    --sa-light: #f4f6fb;
    --sa-ink: #1f2a37;

    /* Re-tint Bootstrap's primary to BSA navy */
    --bs-primary: #003f87;
    --bs-primary-rgb: 0, 63, 135;
    --bs-link-color: #003f87;
    --bs-link-color-rgb: 0, 63, 135;
    --bs-link-hover-color: #ce1126;
}

body {
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
    color: var(--sa-ink);
    background-color: var(--sa-light);
}

h1, h2, h3, h4, h5,
.heading, .display-5 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---- Responsive navbar ---- */

/* Bootstrap sets flex-wrap:nowrap on .navbar; override so the collapse can drop below */
.sa-navbar { flex-wrap: wrap; }

/* Allow brand text to wrap on narrow screens instead of overflowing */
.sa-navbar .navbar-brand { white-space: normal; flex-shrink: 1; min-width: 0; }

/* Hamburger button: navy border + navy icon, gold focus ring */
.sa-nav-toggler {
    border-color: var(--sa-navy);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23003f87' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.sa-nav-toggler:focus {
    box-shadow: 0 0 0 3px rgba(252, 183, 17, 0.5);
}

/* ≥ 1300px: brand and nav links share one row, links aligned right */
@media (min-width: 1300px) {
    .sa-nav-toggler { display: none !important; }
    #mainNavMenu {
        display: flex !important;
        flex-basis: auto;
        flex-grow: 1;
        justify-content: flex-end;
        height: auto !important;
    }
    #mainNavMenu .navbar-nav { flex-direction: row; }
}

/* 600px – 1299px: nav links drop to their own row below the brand, no hamburger */
@media (min-width: 600px) and (max-width: 1299px) {
    .sa-nav-toggler { display: none !important; }
    #mainNavMenu {
        display: flex !important;
        flex-basis: 100%;
        height: auto !important;
        border-top: 1px solid rgba(0, 63, 135, 0.12);
        padding-top: 0.5rem;
        padding-bottom: 0.25rem;
    }
    #mainNavMenu .navbar-nav { flex-direction: row; flex-wrap: wrap; }
}

/* < 600px: hamburger pinned to top-right corner, nav stacks vertically when open */
@media (max-width: 599px) {
    .sa-navbar { position: relative; }
    .sa-nav-toggler {
        display: flex !important;
        position: absolute;
        top: 1rem;
        right: 1rem;
    }
    .sa-navbar .navbar-brand { padding-right: 3.5rem; }
    #mainNavMenu {
        flex-basis: 100%;
        border-top: 1px solid rgba(0, 63, 135, 0.12);
        margin-top: 0.5rem;
    }
    #mainNavMenu .navbar-nav {
        flex-direction: column;
        padding: 0.25rem 0 0.5rem;
    }
    #mainNavMenu .nav-link { padding: 0.6rem 0; }
    .sa-header .nav-link::after { display: none; }
}

/* ---- Header / navigation ---- */
.sa-header {
    background: #fff;
    box-shadow: 0 2px 12px rgba(7, 37, 74, 0.08);
    border-bottom: 4px solid var(--sa-red);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.sa-header .brand-text {
    color: var(--sa-navy);
    font-weight: 800;
}

.sa-header .nav-link {
    color: var(--sa-navy);
    font-weight: 600;
    position: relative;
    padding-inline: 0.9rem;
    transition: color 0.15s ease;
}

.sa-header .nav-link::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.35rem;
    height: 3px;
    background: var(--sa-red);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.18s ease;
}

.sa-header .nav-link:hover,
.sa-header .nav-link.active {
    color: var(--sa-red);
}

.sa-header .nav-link:hover::after,
.sa-header .nav-link.active::after {
    transform: scaleX(1);
}

/* ---- Hero blocks ---- */
.sa-hero {
    background: linear-gradient(135deg, var(--sa-navy) 0%, var(--sa-navy-dark) 100%);
    color: #fff;
    border-radius: 1rem;
    padding: 3rem 2.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(7, 37, 74, 0.25);
}

/* Deep dark-blue variant — used on the History page */
.sa-hero-dark {
    background: linear-gradient(160deg, #052248 0%, #020d1c 100%);
}

/* ---- Interior page header: watermark ---- */
.page-header {
    background: linear-gradient(160deg, #052248 0%, #020d1c 100%);
    color: #fff;
    padding: 3.5rem 3rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}

.page-header::before {
    /* red left accent bar */
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 7px;
    background: var(--sa-red);
}

.page-header::after {
    /* faded "441" watermark */
    content: "441" / "";
    position: absolute;
    right: 2.5rem;
    top: 0.5rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 12rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.055);
    pointer-events: none;
    user-select: none;
}

.page-header > * { position: relative; z-index: 1; }

.page-header h1 { font-weight: 800; }

.page-header a:not(.btn) {
    color: var(--sa-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-header a:not(.btn):hover { color: #fff; }

.sa-hero::after {
    /* subtle gold accent corner */
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(252, 183, 17, 0.35), transparent 70%);
}

/* Square hero banners everywhere except the homepage flag hero */
.sa-hero:not(.sa-hero-flag) {
    border-radius: 0;
}

/* Flag-backed hero variant (home page) */
.sa-hero-flag {
    background: var(--sa-navy-dark);
}

/* Waving flag video layer */
.sa-hero-flag .flag-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    z-index: 0;
}

/* Dark-blue gradient fading the flag out toward the right */
.sa-hero-flag::after {
    inset: 0;
    top: 0;
    right: 0;
    width: auto;
    height: auto;
    background: linear-gradient(
        80deg,
        rgba(7, 37, 74, 0.8) 40%,
        var(--sa-navy-dark) 90%);
    z-index: 1;
}

/* keep hero text above the video + fade layers and legible over the flag */
.sa-hero-flag > h1,
.sa-hero-flag > p {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}

.sa-hero h1 {
    font-weight: 800;
}

.sa-hero a:not(.btn) {
    color: var(--sa-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sa-hero a:not(.btn):hover {
    color: #fff;
}

/* ---- Cards ---- */
.card {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(7, 37, 74, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(7, 37, 74, 0.18);
}

.card img {
    object-fit: cover;
}

/* Photo cards on the home page get a label overlaid in brand color */
.feature-card .card-body {
    border-top: 4px solid var(--sa-red);
}

.feature-card .card-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--sa-navy);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0;
}

/* Eagle Scout cards */
.eagle-card {
    border-top: 5px solid var(--sa-gold);
    height: 100%;
}

.eagle-card .eagle-name {
    color: var(--sa-navy);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.troop-badge {
    background: var(--sa-navy);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ---- Info panels (Contact / About) ---- */
.panel-navy {
    background: linear-gradient(135deg, var(--sa-navy) 0%, var(--sa-navy-dark) 100%);
    color: #fff;
}

.panel-navy a:not(.btn) {
    color: var(--sa-gold);
}

.panel-light {
    background: #fff;
    border: 1px solid rgba(7, 37, 74, 0.08);
}

/* ---- Buttons (red with white text) ---- */
.btn-primary,
.btn-scout {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sa-red);
    --bs-btn-border-color: var(--sa-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sa-red-dark);
    --bs-btn-hover-border-color: var(--sa-red-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sa-red-dark);
    --bs-btn-active-border-color: var(--sa-red-dark);
    background: var(--sa-red);
    border-color: var(--sa-red);
    color: #fff;
    font-weight: 700;
}

.btn-scout {
    padding: 0.6rem 1.5rem;
    border-radius: 2rem;
    transition: background 0.15s ease, transform 0.15s ease;
}

.btn-primary:hover,
.btn-scout:hover {
    background: var(--sa-red-dark);
    color: #fff;
    transform: translateY(-2px);
}

/* ---- Footer ---- */
.sa-footer {
    background: var(--sa-navy-dark);
    color: rgba(255, 255, 255, 0.85);
    border-top: 4px solid var(--sa-red);
    border-radius: 1rem 1rem 0 0;
    padding: 1.5rem 2rem;
    margin-top: 3rem;
}

.sa-footer a {
    color: var(--sa-gold);
}

/* ---- Accessibility ---- */

/* Skip-to-main link: visually hidden until focused by keyboard */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: 0.6rem 1.2rem;
    background: var(--sa-navy);
    color: #fff;
    font-weight: 700;
    border-radius: 0 0 0.5rem 0.5rem;
    text-decoration: none;
    transition: top 0.1s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--sa-gold);
    outline-offset: 2px;
}

/* Visible focus ring for keyboard navigation */
:focus-visible {
    outline: 3px solid var(--sa-gold);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ---- Document list ---- */
.doc-list { display: flex; flex-direction: column; gap: 0.75rem; }

.doc-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--sa-light);
    border-radius: 0.5rem;
    border-left: 4px solid var(--sa-navy);
}

.doc-type {
    font-family: 'Poppins', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--sa-navy);
    padding: 0.2rem 0.45rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.doc-name {
    flex-grow: 1;
    font-weight: 600;
    color: var(--sa-ink);
}

@media (max-width: 599px) {
    .doc-item { flex-wrap: wrap; }
    .doc-name { width: 100%; order: -1; }
}

/* ---- Supporter cards ---- */
.supporter-card {
    border-top: 5px solid var(--sa-navy);
    border-radius: 1rem;
}

.supporter-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 80px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
}

.supporter-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
}

.supporter-logo-featured {
    max-height: 110px;
    max-width: 300px;
}