/* Force White Navbar Background - Override All Styles */
/* This file ensures navbar background is white regardless of other CSS */

/* Force hamburger icon to show */
.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='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    width: 1.5em !important;
    height: 1.5em !important;
    display: inline-block !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% !important;
    border: none !important;
    outline: none !important;
    background-color: transparent !important;
}

/* Alternative method - Create hamburger icon with CSS */
.navbar-toggler-icon::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
    display: block;
}

.navbar-toggler-icon::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
    display: block;
}

.navbar-toggler-icon {
    position: relative;
    background: linear-gradient(to bottom, 
        transparent 6px, 
        #333 6px, 
        #333 9px, 
        transparent 9px, 
        transparent 15px, 
        #333 15px, 
        #333 18px, 
        transparent 18px, 
        transparent 24px, 
        #333 24px, 
        #333 27px, 
        transparent 27px
    ) !important;
    background-size: 100% 30px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 30px !important;
    height: 30px !important;
}

/* Custom hamburger icon class */
.hamburger-icon {
    position: relative;
    display: inline-block;
    width: 30px !important;
    height: 30px !important;
    background: none !important;
    border: none !important;
}

.hamburger-icon::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
    display: block;
}

.hamburger-icon::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
    display: block;
}

.hamburger-icon {
    background: linear-gradient(to bottom, 
        transparent 6px, 
        #333 6px, 
        #333 9px, 
        transparent 9px, 
        transparent 15px, 
        #333 15px, 
        #333 18px, 
        transparent 18px, 
        transparent 24px, 
        #333 24px, 
        #333 27px, 
        transparent 27px
    ) !important;
    background-size: 100% 30px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Ultra-strong navbar background override */
.navbar,
nav.navbar,
.navbar.navbar-light,
.navbar.bg-white,
nav.navbar.navbar-light,
nav.navbar.bg-white,
[class*="navbar"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
    background-image: none !important;
    background-size: auto !important;
    background-position: initial !important;
    background-repeat: no-repeat !important;
    background-attachment: initial !important;
}

/* Force white background for all navbar elements */
.navbar * {
    background-color: transparent !important;
}

.navbar .navbar-brand {
    background-color: transparent !important;
}

.navbar .navbar-toggler {
    background-color: transparent !important;
}

.navbar .navbar-collapse {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

.navbar .navbar-nav {
    background-color: transparent !important;
}

.navbar .nav-item {
    background-color: transparent !important;
}

.navbar .nav-link {
    color: #000000 !important;
    background-color: transparent !important;
}

.navbar .nav-link:hover {
    color: #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.1) !important;
}

.navbar .nav-link:focus {
    color: #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.1) !important;
}

/* Mobile menu specific overrides */
@media (max-width: 991.98px) {
    .navbar-collapse.show {
        background-color: #ffffff !important;
        background: #ffffff !important;
        background-image: none !important;
    }
    
    .navbar-collapse.show .nav-link {
        color: #000000 !important;
        background-color: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    
    .navbar-collapse.show .nav-link:hover {
        color: #0d6efd !important;
        background-color: rgba(13, 110, 253, 0.1) !important;
    }
}

/* Override any gradient or image backgrounds */
.navbar[style*="background"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
    background-image: none !important;
}

/* Force white background for any navbar with inline styles */
.navbar[style] {
    background-color: #ffffff !important;
    background: #ffffff !important;
    background-image: none !important;
}
