/* ================================================
   HEADER VISIBILITY FIX - ULTRA CRITICAL STYLES
   ================================================
   This file ensures the header is ALWAYS visible
   across all pages with maximum priority
   ================================================ */

/* CRITICAL: Force header to be fixed and visible */
header.header_section,
.header_section {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 999999 !important;
    background: rgba(0, 32, 74, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
    margin: 0 !important;
    padding: 15px 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
}

/* Force all header children to be visible */
.header_section * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure container is full width */
.header_section .container-fluid {
    position: relative !important;
    z-index: 10000 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-top: 25px !important;
    padding-right: 25px !important;
    padding-left: 25px !important;
}

/* Ensure navbar is visible */
.custom_nav-container {
    position: relative !important;
    z-index: 10001 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
}

/* Force navbar brand to be visible */
.navbar-brand {
    position: relative !important;
    z-index: 10002 !important;
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.navbar-brand span {
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 24px;
}

/* Desktop navigation - Always visible on large screens */
@media (min-width: 992px) {
    .navbar-expand-lg {
        flex-flow: row nowrap !important;
        justify-content: flex-start !important;
    }
    
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
        flex-grow: 1 !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .navbar-expand-lg .navbar-nav {
        flex-direction: row !important;
        display: flex !important;
        margin-left: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10002 !important;
    }
    
    .navbar-expand-lg .navbar-nav .nav-item {
        display: block !important;
        position: relative !important;
        z-index: 10003 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .navbar-expand-lg .navbar-nav .nav-link {
        display: block !important;
        padding: 5px 20px !important;
        color: #ffffff !important;
        text-transform: uppercase !important;
        border-radius: 5px !important;
        position: relative !important;
        z-index: 10004 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .navbar-expand-lg .navbar-nav .nav-item:hover .nav-link,
    .navbar-expand-lg .navbar-nav .nav-item.active .nav-link {
        color: #00bbf0 !important;
        background: rgba(0, 187, 240, 0.1) !important;
    }
    
    .navbar-expand-lg .navbar-toggler {
        display: none !important;
    }
}

/* Mobile navigation */
@media (max-width: 991.98px) {
    .header_section {
        padding: 10px 0 !important;
    }
    
    .navbar-toggler {
        display: block !important;
        border: none !important;
        background: transparent !important;
        z-index: 10005 !important;
    }
    
    .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(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
    
    .custom_nav-container .navbar-collapse {
        background: rgba(0, 32, 74, 0.98) !important;
        padding: 20px !important;
        margin-top: 10px !important;
        border-radius: 8px !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    }
    
    .navbar-nav {
        flex-direction: column !important;
    }
    
    .navbar-nav .nav-item {
        margin: 5px 0 !important;
    }
    
    .navbar-nav .nav-link {
        padding: 10px 20px !important;
        text-align: center !important;
    }
}

/* Override any hero area styles that might conflict */
.hero_area .header_section,
.blog_hero_area .header_section {
    position: fixed !important;
    z-index: 999999 !important;
}

/* Ensure body/html don't interfere */
html {
    overflow-x: hidden !important;
    position: relative !important;
}

body {
    overflow-x: hidden !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Ensure hero areas account for fixed header */
.hero_area,
.blog_hero_area {
    padding-top: 70px !important;
}

/* Force hardware acceleration for smooth rendering */
.header_section,
.custom_nav-container,
.navbar-nav {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* Prevent any transform or position issues */
.header_section {
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
}

/* Ensure no clip-path or overflow issues */
.header_section,
.header_section * {
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

/* Make sure nav items are clickable */
.nav-link {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Debug helper - Remove after testing */
.header_section {
    outline: 2px solid transparent !important;
}