/* ============================================================================
   NAVBAR GLOBAL UNIFIED STYLES - BOTH THEMES
   This file centralizes ALL navbar styling for light and dark modes globally.
   Applied to ALL pages uniformly, independent of specific views.
   ============================================================================ */

/* ============================================================================
   DARK MODE (DEFAULT) - rd-navbar-aside-outer (Contact Bar)
   ============================================================================ */
html:not([data-theme="light"]) .rd-navbar-aside-outer,
body:not(.light-mode) .rd-navbar-aside-outer,
[data-theme="dark"] .rd-navbar-aside-outer,
html[data-theme="dark"] .rd-navbar-aside-outer {
    background: #1a1d29 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #b8bcc8 !important;
    padding: 10px 0 !important;
    width: 100% !important;
    transition: background 0.3s !important;
}

html:not([data-theme="light"]) .rd-navbar-aside-outer .top-text-ref,
body:not(.light-mode) .rd-navbar-aside-outer .top-text-ref,
[data-theme="dark"] .rd-navbar-aside-outer .top-text-ref,
html[data-theme="dark"] .rd-navbar-aside-outer .top-text-ref {
    color: #b8bcc8 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

html:not([data-theme="light"]) .rd-navbar-aside-outer .item-top i,
body:not(.light-mode) .rd-navbar-aside-outer .item-top i,
[data-theme="dark"] .rd-navbar-aside-outer .item-top i,
html[data-theme="dark"] .rd-navbar-aside-outer .item-top i {
    color: #1AA8E1 !important;
}

/* ============================================================================
   DARK MODE - rd-navbar-main-outer (Navigation Bar)
   ============================================================================ */
html:not([data-theme="light"]) .rd-navbar-main-outer,
body:not(.light-mode) .rd-navbar-main-outer,
[data-theme="dark"] .rd-navbar-main-outer,
html[data-theme="dark"] .rd-navbar-main-outer {
    background: #16181f !important;
    border-bottom: none !important;
    color: #b8bcc8 !important;
    transition: background 0.3s !important;
}

html:not([data-theme="light"]) .rd-navbar-main-outer .nav-link-ref,
body:not(.light-mode) .rd-navbar-main-outer .nav-link-ref,
[data-theme="dark"] .rd-navbar-main-outer .nav-link-ref,
html[data-theme="dark"] .rd-navbar-main-outer .nav-link-ref {
    color: #b8bcc8 !important;
}

html:not([data-theme="light"]) .rd-navbar-main-outer .nav-link-ref:hover,
body:not(.light-mode) .rd-navbar-main-outer .nav-link-ref:hover,
[data-theme="dark"] .rd-navbar-main-outer .nav-link-ref:hover,
html[data-theme="dark"] .rd-navbar-main-outer .nav-link-ref:hover {
    color: #ffffff !important;
}

/* ============================================================================
   LIGHT MODE - rd-navbar-aside-outer (Contact Bar) - COMPLETE BLUE
   ============================================================================ */
html[data-theme="light"][data-theme="light"] .rd-navbar-aside-outer,
html[data-theme="light"].light-mode .rd-navbar-aside-outer,
html.light-mode.light-mode .rd-navbar-aside-outer {
    background: #033F77 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    padding: 10px 0 !important;
    width: 100% !important;
    transition: background 0.3s !important;
}

html[data-theme="light"][data-theme="light"] .rd-navbar-aside-outer .top-text-ref,
html[data-theme="light"].light-mode .rd-navbar-aside-outer .top-text-ref,
html.light-mode.light-mode .rd-navbar-aside-outer .top-text-ref {
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

html[data-theme="light"][data-theme="light"] .rd-navbar-aside-outer .item-top,
html[data-theme="light"].light-mode .rd-navbar-aside-outer .item-top,
html.light-mode.light-mode .rd-navbar-aside-outer .item-top {
    color: #ffffff !important;
}

html[data-theme="light"][data-theme="light"] .rd-navbar-aside-outer .item-top i,
html[data-theme="light"].light-mode .rd-navbar-aside-outer .item-top i,
html.light-mode.light-mode .rd-navbar-aside-outer .item-top i {
    color: #ffffff !important;
}

html[data-theme="light"][data-theme="light"] .rd-navbar-aside-outer .top-bar-right,
html[data-theme="light"].light-mode .rd-navbar-aside-outer .top-bar-right,
html.light-mode.light-mode .rd-navbar-aside-outer .top-bar-right {
    background: transparent !important;
    color: #ffffff !important;
}

/* ============================================================================
   LIGHT MODE - rd-navbar-main-outer (Navigation Bar) - WHITE
   ============================================================================ */
html[data-theme="light"][data-theme="light"] .rd-navbar-main-outer,
html[data-theme="light"].light-mode .rd-navbar-main-outer,
html.light-mode.light-mode .rd-navbar-main-outer {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(15, 23, 36, 0.06) !important;
    color: #0f1724 !important;
    transition: background 0.3s !important;
}

html[data-theme="light"][data-theme="light"] .rd-navbar-main-outer .nav-link-ref,
html[data-theme="light"].light-mode .rd-navbar-main-outer .nav-link-ref,
html.light-mode.light-mode .rd-navbar-main-outer .nav-link-ref {
    color: #4a5568 !important;
}

html[data-theme="light"][data-theme="light"] .rd-navbar-main-outer .nav-link-ref:hover,
html[data-theme="light"].light-mode .rd-navbar-main-outer .nav-link-ref:hover,
html.light-mode.light-mode .rd-navbar-main-outer .nav-link-ref:hover {
    color: #033F77 !important;
}

/* ============================================================================
   LIGHT MODE - Brand/Logo
   ============================================================================ */
[data-theme="light"] .rd-navbar-brand,
html[data-theme="light"] .rd-navbar-brand,
html.light-mode .rd-navbar-brand {
    background: transparent !important;
}

/* ============================================================================
   LIGHT MODE - Dropdown Menus
   ============================================================================ */
[data-theme="light"] .dropdown-box-ref,
html[data-theme="light"] .dropdown-box-ref,
html.light-mode .dropdown-box-ref {
    background: #f2f2f2 !important;
    border: 1px solid rgba(15, 23, 36, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .dropdown-box-ref a,
html[data-theme="light"] .dropdown-box-ref a,
html.light-mode .dropdown-box-ref a {
    color: #555 !important;
}

[data-theme="light"] .dropdown-box-ref a:hover,
html[data-theme="light"] .dropdown-box-ref a:hover,
html.light-mode .dropdown-box-ref a:hover {
    color: #033F77 !important;
}

/* ============================================================================
   LIGHT MODE - Icon Styling
   ============================================================================ */
[data-theme="light"] .rd-navbar-main-outer .icon-arrow,
html[data-theme="light"] .rd-navbar-main-outer .icon-arrow,
html.light-mode .rd-navbar-main-outer .icon-arrow {
    color: #4a5568 !important;
}

/* ============================================================================
   PREFERS-COLOR-SCHEME Fallback for Light Theme
   ============================================================================ */
@media (prefers-color-scheme: light) {
    html:not([data-theme]) .rd-navbar-aside-outer {
        background: #033F77 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }

    html:not([data-theme]) .rd-navbar-aside-outer .top-text-ref,
    html:not([data-theme]) .rd-navbar-aside-outer .item-top i {
        color: #ffffff !important;
    }

    html:not([data-theme]) .rd-navbar-main-outer {
        background: #ffffff !important;
        border-bottom: 1px solid rgba(15, 23, 36, 0.06) !important;
        color: #0f1724 !important;
    }

    html:not([data-theme]) .rd-navbar-main-outer .nav-link-ref {
        color: #4a5568 !important;
    }

    html:not([data-theme]) .rd-navbar-main-outer .nav-link-ref:hover {
        color: #033F77 !important;
    }
}

/* ============================================================================
   Ensure smooth transitions between themes
   ============================================================================ */
.rd-navbar-wrap,
.rd-navbar-aside-outer,
.rd-navbar-main-outer,
.rd-navbar-main,
.nav-link-ref,
.top-text-ref,
.section.footer-classic,
.footer-text,
.footer-address,
.footer-social-links li a {
    transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ============================================================================
   FOOTER - LIGHT MODE (BLUE BACKGROUND TO MATCH NAVBAR)
   ============================================================================ */
html[data-theme="light"][data-theme="light"] .section.footer-classic,
html[data-theme="light"].light-mode .section.footer-classic,
html.light-mode.light-mode .section.footer-classic {
    background: #033F77 !important;
    background-color: #033F77 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: background 0.3s !important;
}

html[data-theme="light"][data-theme="light"] .footer-text,
html[data-theme="light"].light-mode .footer-text,
html.light-mode.light-mode .footer-text {
    color: #ffffff !important;
    opacity: 1 !important;
}

html[data-theme="light"][data-theme="light"] .footer-address,
html[data-theme="light"].light-mode .footer-address,
html.light-mode.light-mode .footer-address {
    color: #ffffff !important;
}

html[data-theme="light"][data-theme="light"] .footer-address-text,
html[data-theme="light"].light-mode .footer-address-text,
html.light-mode.light-mode .footer-address-text {
    color: #ffffff !important;
}

html[data-theme="light"][data-theme="light"] .footer-social-links li a,
html[data-theme="light"].light-mode .footer-social-links li a,
html.light-mode.light-mode .footer-social-links li a {
    color: #ffffff !important;
    opacity: 0.8 !important;
}

html[data-theme="light"][data-theme="light"] .footer-social-links li a:hover,
html[data-theme="light"].light-mode .footer-social-links li a:hover,
html.light-mode.light-mode .footer-social-links li a:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ============================================================================
   FOOTER ICONS - Light Mode
   ============================================================================ */
html[data-theme="light"][data-theme="light"] .footer-address i,
html[data-theme="light"].light-mode .footer-address i,
html.light-mode.light-mode .footer-address i {
    color: #ffffff !important;
}