/*
 * ui-overrides.css
 * Loaded after @stack('styles') in app.blade.php.
 * Ensures the UI navbar and footer always win over front.css,
 * regardless of front.css !important declarations.
 */

/* ============================================================
   NAVBAR PROTECTION
   ============================================================ */

/*
 * front.css sets these on :root which cascade everywhere:
 *   --bs-body-color: #60697b  (rgb 96,105,123)
 *   --bs-body-font-weight: 500
 *   --bs-body-line-height: 1.7
 *   -webkit-font-smoothing: antialiased (on body)
 *
 * We reset them scoped to #site-navbar so they don't affect
 * the navbar even though they're inherited from :root.
 */
#site-navbar.navbar {
    /* Reset root-level body variables inherited from front.css */
    --bs-body-color: #44474E !important;
    --bs-body-color-rgb: 68, 71, 78 !important;
    --bs-body-font-weight: 400 !important;
    --bs-body-line-height: 1.5 !important;
    --bs-body-font-size: 16px !important;

    /* Navbar-specific overrides */
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: #44474E !important;
    -webkit-font-smoothing: auto !important;

    --bs-navbar-padding-x: 0 !important;
    --bs-navbar-padding-y: 8px !important;
    --bs-navbar-color: #44474E !important;
    --bs-navbar-hover-color: #031635 !important;
    --bs-navbar-active-color: #031635 !important;
    --bs-navbar-brand-padding-y: 0 !important;
    --bs-navbar-brand-margin-end: 16px !important;
    --bs-navbar-brand-font-size: 16px !important;
    --bs-navbar-brand-color: inherit !important;
    --bs-navbar-brand-hover-color: inherit !important;
    --bs-navbar-nav-link-padding-x: 12px !important;
}

#site-navbar.navbar .navbar-brand {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
}

#site-navbar.navbar .navbar-brand img {
    margin-top: 8px !important; /* overrides mt-2 to prevent 20px scaling */
    height: 40px !important;
}

#site-navbar.navbar .navbar-nav {
    --bs-nav-link-padding-x: 12px !important;
    --bs-nav-link-padding-y: 8px !important;
    --bs-nav-link-font-size: 15.2px !important;
    --bs-nav-link-font-weight: 600 !important;
    --bs-nav-link-color: #44474E !important;
    --bs-nav-link-hover-color: #031635 !important;
}

#site-navbar.navbar .nav-link {
    font-family: 'Inter', sans-serif !important;
    font-size: 15.2px !important;
    font-weight: 600 !important;
    line-height: 22.8px !important;
    color: #44474E !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    background: transparent !important;
    border: none !important;
    -webkit-font-smoothing: auto !important;
}

#site-navbar.navbar .nav-link:hover,
#site-navbar.navbar .nav-link.active {
    color: #031635 !important;
    background: transparent !important;
}

#site-navbar.navbar .btn {
    font-family: 'Inter', sans-serif !important;
    font-size: 14.4px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-radius: 6px !important;
    height: 40px !important;
}

#site-navbar.navbar .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06) !important;
}

#site-navbar.navbar .dropdown-item {
    font-family: 'Inter', sans-serif !important;
    font-size: 14.4px !important;
    font-weight: 500 !important;
    color: #44474E !important;
    padding: 8px 20px !important;
    white-space: normal !important;
    -webkit-font-smoothing: auto !important;
}

#site-navbar.navbar .dropdown-item:hover {
    background-color: #f1f5f9 !important;
    color: #031635 !important;
}

#site-navbar.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23031635' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Container sizing */
#site-navbar .container-lg {
    width: 100% !important;
    padding-right: 24px !important;
    padding-left: 24px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

@media (min-width: 576px)  { #site-navbar .container-lg { max-width: 540px !important; } }
@media (min-width: 768px)  { #site-navbar .container-lg { max-width: 720px !important; } }
@media (min-width: 992px)  { #site-navbar .container-lg { max-width: 960px !important; } }
@media (min-width: 1200px) { #site-navbar .container-lg { max-width: 1140px !important; } }
@media (min-width: 1400px) { #site-navbar .container-lg { max-width: 1320px !important; } }

@media (max-width: 991.98px) {
    #site-navbar.navbar .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        padding-left: 12px !important;
        margin: 0 !important;
        background-color: #fafafb !important;
    }
}

/* ============================================================
   FOOTER PROTECTION
   Covers pages that also load front.css (home, stats, about,
   publications, news, contact). front.css redefines :root CSS
   custom properties (--bs-dark-rgb, --bs-nav-link-color, etc.)
   which would otherwise bleed into the footer on those pages.
   Every rule here uses !important so it wins regardless of load order.
   ============================================================ */
footer.bg-dark {
    /* Re-pin the dark colour so bg-dark renders correctly even when
       front.css overrides --bs-dark-rgb to #262b32 on :root */
    --bs-dark: #031635 !important;
    --bs-dark-rgb: 3, 22, 53 !important;
    --bs-bg-opacity: 1 !important;

    /* Body-level variables inherited from front.css :root */
    --bs-body-color: #ffffff !important;
    --bs-body-bg: #031635 !important;
    --bs-body-font-family: 'Inter', sans-serif !important;
    --bs-body-font-size: 1rem !important;
    --bs-body-font-weight: 400 !important;
    --bs-body-line-height: 1.5 !important;

    /* Link variables */
    --bs-link-color: #ffffff !important;
    --bs-link-color-rgb: 255, 255, 255 !important;
    --bs-link-hover-color: #cbd5e1 !important;
    --bs-link-decoration: underline !important;

    /* Nav variables */
    --bs-nav-link-color: #ffffff !important;
    --bs-nav-link-hover-color: #cbd5e1 !important;
    --bs-nav-link-padding-x: 0 !important;
    --bs-nav-link-padding-y: 0 !important;
    --bs-nav-link-font-size: 15.2px !important;
    --bs-nav-link-font-weight: 400 !important;

    background-color: #031635 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    -webkit-font-smoothing: auto !important;
}

footer.bg-dark h6,
footer.bg-dark h5,
footer.bg-dark h4,
footer.bg-dark p,
footer.bg-dark ul,
footer.bg-dark li,
footer.bg-dark span,
footer.bg-dark address {
    font-family: 'Inter', sans-serif !important;
    color: #ffffff !important;
    -webkit-font-smoothing: auto !important;
}

footer.bg-dark ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

footer.bg-dark a,
footer.bg-dark .nav-link {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15.2px !important;
    font-weight: 400 !important;
    text-decoration: underline !important;
    background: transparent !important;
    padding: 0 !important;
    display: inline !important;
    -webkit-font-smoothing: auto !important;
}

footer.bg-dark a:hover,
footer.bg-dark .nav-link:hover {
    color: #cbd5e1 !important;
    background: transparent !important;
}

/* Override Bootstrap typography utility classes that scale with rems inside footer */
footer.bg-dark .fs-4 {
    font-size: 24px !important;
}

footer.bg-dark .fs-6 {
    font-size: 16px !important;
}