/* ==========================================
   CPOM BRANDING & VARIABLES
   ========================================== */
:root {
    --cpom-blue: #4682b4; /* Deep Steel Blue - Professional & Scientific */
    --cpom-dark: #0e2a47; 
}

/* ==========================================
   CORE LAYOUT
   ========================================== */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    margin: 0;
}

main {
    flex: 1 0 auto;
}

.bg-cpom-dark {
    background-color: var(--cpom-dark) !important;
}

/* ==========================================
   HEADER SECTION
   ========================================== */
.branding-header {
    padding: 12px 0;
    position: relative;
    z-index: 1060;
}

.main-logo {
    height: 72px !important; 
    width: auto;
    display: block;
}

.site-title {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.5px;
}

.site-subtitle {
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin-top: 5px;
    text-transform: uppercase;
}

/* ==========================================
   NAVIGATION (Accent Line Style)
   ========================================== */
.nav-bar-secondary {
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.navbar .nav-link {
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 12px 20px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    transition: all 0.2s ease-in-out;
    border-bottom: 3px solid transparent; /* The "Accent Line" placeholder */
}

/* Hover state: Text brightens and thin line appears */
.navbar .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: 3px solid rgba(70, 130, 180, 0.5); /* Faint version of Steel Blue */
}

/* Active state: Bold line at bottom */
.navbar .nav-link.active {
    color: #fff !important;
    background-color: transparent;
    border-bottom: 3px solid var(--cpom-blue) !important;
}

/* ==========================================
   FOOTER SECTION
   ========================================== */
footer {
    flex-shrink: 0;
    border-top: 2px solid var(--cpom-blue);
}

/* ==========================================
   SERVICE STATUS UI
   ========================================== */
.status-link {
    transition: all 0.2s ease;
    border-radius: 4px;
    cursor: pointer;
}

.status-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.status-link:hover span.text-dark {
    color: var(--cpom-blue) !important;
}

/* ==========================================
   RESPONSIVENESS
   ========================================== */

@media (max-width: 991.98px) {
    .main-logo {
        height: 52px !important; 
    }

    .site-title {
        font-size: 1.25rem !important; 
        font-weight: 600;
    }

    .site-subtitle {
        font-size: 0.6rem !important;
        margin-top: 2px;
    }

    /* Mobile Menu Dropdown */
    .navbar-collapse {
        position: absolute;
        top: 100%; 
        left: 0;
        right: 0;
        background-color: var(--cpom-dark);
        z-index: 1050;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* On mobile, remove the bottom border and use a left border instead */
    .navbar .nav-link {
        border-bottom: none;
        border-left: 4px solid transparent;
        padding: 15px 25px !important;
    }
    
    .navbar .nav-link.active {
        border-left: 4px solid var(--cpom-blue) !important;
        background-color: rgba(255, 255, 255, 0.05);
    }
}

@media (min-width: 992px) {
    .navbar-collapse {
        position: static !important;
        display: flex !important;
    }
}