/* Final visual layer: restrained navy, warm white, and brass for a civic portal. */
:root {
    --gov-navy: #17324D;
    --gov-navy-deep: #0E2236;
    --gov-blue: #2D5878;
    --gov-brass: #B7832F;
    --gov-brass-soft: #F3E5C5;
    --gov-ink: #263746;
    --gov-muted: #657482;
    --gov-paper: #F5F3EE;
    --gov-white: #FFFFFF;
    --gov-line: #D8D2C7;
    --gov-shadow: 0 12px 32px rgba(14, 34, 54, 0.10);
}

body,
.site-wrapper,
.main-container {
    background: var(--gov-paper) !important;
    color: var(--gov-ink) !important;
}

.main-header {
    background: linear-gradient(135deg, var(--gov-navy-deep), var(--gov-navy)) !important;
    box-shadow: 0 8px 24px rgba(14, 34, 54, 0.22) !important;
}

.leadership-row {
    background: #FBFAF7 !important;
    border-bottom: 1px solid var(--gov-line) !important;
}

.leader-item {
    background: var(--gov-white) !important;
    border-color: var(--gov-line) !important;
}

.leader-info span,
.leader-info p {
    color: var(--gov-navy) !important;
}

.navbar {
    background: var(--gov-navy-deep) !important;
    border-top: 2px solid var(--gov-brass) !important;
    box-shadow: 0 5px 16px rgba(14, 34, 54, 0.20) !important;
}

.mobile-nav-toggle .bar,
.mobile-nav-toggle span.bar,
.mobile-nav-toggle.active .bar {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

.nav-item::before,
.heading-underline,
.section-title::after {
    background: var(--gov-brass) !important;
}

.content-wrapper {
    max-width: 1480px !important;
    padding: 1.25rem clamp(1rem, 3vw, 2.5rem) 3rem !important;
}

.home-page-container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
}

.home-page-container > section {
    min-width: 0;
    margin: 0 !important;
}

.hero-section.modern-hero,
.home-members-section {
    grid-column: 1 / -1;
}

.hero-section.modern-hero {
    min-height: 390px !important;
    border: 1px solid var(--gov-line) !important;
    border-radius: 10px !important;
    box-shadow: var(--gov-shadow) !important;
    overflow: hidden;
}

.hero-section.modern-hero::before {
    background: linear-gradient(180deg, var(--gov-brass), var(--gov-navy)) !important;
}

.hero-content {
    background: linear-gradient(145deg, var(--gov-navy-deep), var(--gov-navy)) !important;
}

.btn-primary {
    background: var(--gov-brass) !important;
    box-shadow: 0 6px 16px rgba(183, 131, 47, 0.28) !important;
}

.btn-secondary {
    color: var(--gov-navy) !important;
    border-color: var(--gov-navy) !important;
}

.alerts-section,
.population-section,
.features-section,
.home-members-section {
    background: var(--gov-white) !important;
    border: 1px solid var(--gov-line) !important;
    border-radius: 10px !important;
    box-shadow: var(--gov-shadow) !important;
}

.alerts-section,
.population-section,
.features-section,
.home-members-section {
    padding: clamp(1rem, 2vw, 1.5rem) !important;
}

.alerts-section {
    grid-column: 1 / span 5;
}

.population-section {
    grid-column: 6 / -1;
}

.features-section {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.section-header-compact h2,
.home-members-section h2,
.pop-title {
    color: var(--gov-navy) !important;
}

.alert-card,
.feature-card,
.member-card-home {
    background: #FCFBF8 !important;
    border-color: var(--gov-line) !important;
    box-shadow: 0 5px 16px rgba(14, 34, 54, 0.07) !important;
}

.alert-card:hover,
.feature-card:hover,
.member-card-home:hover {
    border-color: var(--gov-brass) !important;
}

.feature-icon,
.kstat-icon {
    color: var(--gov-brass) !important;
}

.profile-frame-home {
    border-color: var(--gov-brass) !important;
}

.profile-info-home h3,
.profile-name,
.member-card-home .profile-name {
    color: var(--gov-navy) !important;
}

.profile-info-home p,
.profile-designation {
    color: var(--gov-muted) !important;
}

.population-table-shell {
    overflow: hidden;
    border: 1px solid var(--gov-line);
    border-radius: 8px;
    background: var(--gov-white);
}

.population-table-scroll {
    overflow-x: auto;
}

.population-data-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    color: var(--gov-ink);
    font-size: 0.82rem;
}

.population-data-table th {
    background: var(--gov-navy);
    color: var(--gov-white);
    font-weight: 700;
    line-height: 1.25;
    padding: 0.75rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.population-data-table td {
    padding: 0.65rem 0.55rem;
    text-align: center;
    border: 1px solid var(--gov-line);
    background: #FFFEFC;
}

.population-data-table td[rowspan] {
    font-weight: 600;
    background: #F8F5ED;
}

.population-total-row td {
    background: var(--gov-brass-soft) !important;
    color: var(--gov-navy-deep);
    font-weight: 800;
}

.main-footer {
    background: var(--gov-navy-deep) !important;
    border-top: 4px solid var(--gov-brass) !important;
}

.contact-directory-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.contact-ref-card {
    min-width: 0;
    background: #FCFBF8 !important;
    border: 1px solid var(--gov-line) !important;
    border-top: 3px solid var(--gov-brass) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    box-shadow: 0 5px 16px rgba(14, 34, 54, 0.07) !important;
}

.hero-slider-frame img,
.gallery-card img {
    object-fit: contain !important;
    background: #F1EEE7;
}

.contact-card-img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--gov-brass);
}

.contact-role-title {
    color: var(--gov-brass) !important;
    font-weight: 700;
    margin-top: 0.65rem;
}

.contact-detail-row {
    overflow-wrap: anywhere;
    color: var(--gov-ink);
}

.contact-detail-row a {
    color: var(--gov-blue) !important;
    font-weight: 700;
}

/* Text-only contact cards matching the supplied reference layout. */
.contact-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2.25rem 2.5rem !important;
}

.contact-ref-card {
    min-height: 225px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem !important;
}

.contact-role-title {
    color: #8B0000 !important;
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 !important;
}

.contact-card-divider {
    width: min(85%, 305px);
    height: 2px;
    margin: 1rem 0 1.15rem;
    background: var(--gov-brass);
}

.contact-card-name,
.contact-card-phone {
    justify-content: center;
    text-align: center;
}

.contact-card-name {
    color: var(--gov-ink);
    font-size: 1.05rem;
    font-weight: 800;
}

.contact-card-phone {
    margin-top: 0.8rem;
    color: #666 !important;
    font-size: 1rem;
}

.contact-card-phone a {
    color: #666 !important;
    font-weight: 500;
}

@media (max-width: 900px) {
    .alerts-section,
    .population-section {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .content-wrapper {
        padding: 0.75rem 0.75rem 2rem !important;
    }

    .home-page-container {
        gap: 1rem;
    }

    .hero-section.modern-hero {
        min-height: auto !important;
    }

    .features-section {
        grid-template-columns: 1fr !important;
    }

    .alerts-grid {
        grid-template-columns: 1fr !important;
    }

    .population-data-table {
        min-width: 700px;
        font-size: 0.75rem;
    }

    .population-data-table th,
    .population-data-table td {
        padding: 0.55rem 0.4rem;
    }

    .home-members-section .section-header {
        align-items: flex-start;
        gap: 0.75rem;
    }

    .contact-directory-grid {
        grid-template-columns: 1fr !important;
    }

    .contact-ref-card {
        min-height: 190px;
        padding: 1.5rem 1rem !important;
    }
}