/* 
 * Global Navbar Fix - Ensures consistent navbar styling across all pages
 * This file fixes the inconsistent navbar styling by enforcing important rules
 */

/* Ensure the test-navbar has the right background and border on all pages */
.test-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #000000 !important;
    border-bottom: 2px solid #E63946 !important;
    z-index: 1000 !important;
    padding: 10px 0 !important;
}

/* Force consistent container styling */
.test-navbar .test-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

/* Force consistent logo styling */
.test-navbar .test-logo {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
}

.test-navbar .test-logo img {
    height: 40px !important;
    display: block !important;
}

/* Force consistent links container styling */
.test-navbar .test-links {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: flex-start !important;
    margin-left: 60px !important;
}

/* Fix first link to prevent overlap with logo */
.test-navbar .test-links a:first-child {
    margin-left: 0px !important;
    padding-left: 12px !important;
}

/* Force consistent link styling */
.test-navbar .test-link {
    color: white !important;
    text-decoration: none !important;
    padding: 8px 12px !important;
    margin: 0 2px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* Force consistent login button styling */
.test-navbar .test-login {
    background-color: #E63946 !important;
    border-radius: 5px !important;
}

/* Override any hover effects directly with !important */
.test-navbar .test-link:hover {
    background-color: #E63946 !important;
    transition: all 0.3s ease !important;
    border-radius: 5px !important;
    color: white !important;
}

/* Mobile styles with !important for consistency */
@media (max-width: 991px) {
    .test-navbar .test-logo {
        left: 10px !important;
    }
    
    .test-navbar .test-logo img {
        height: 30px !important; /* Slightly smaller on mobile */
    }
    
    .test-navbar .test-links {
        margin-left: 45px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 5px !important;
    }
    
    .test-navbar .test-links a:first-child {
        margin-left: 0px !important;
        padding-left: 8px !important;
    }
    
    .test-navbar .test-link {
        font-size: 0.75rem !important;
        padding: 6px 8px !important;
        white-space: nowrap !important;
    }
}

/* Very small screens - with !important rules */
@media (max-width: 576px) {
    .test-navbar .test-links {
        margin-left: 40px !important;
    }
    
    .test-navbar .test-links a:first-child {
        margin-left: 0px !important;
        padding-left: 4px !important;
    }
    
    .test-navbar .test-link {
        font-size: 0.65rem !important;
        padding: 4px 5px !important;
        margin: 1px !important;
    }
    
    .test-navbar .test-logo img {
        height: 25px !important;
    }
}

/* Extra spacing for CREW MERCHANDISE link on smaller screens */
@media (max-width: 1100px) {
    .test-navbar .test-link[href="/pages/shop.html"],
    .test-navbar .test-link[href="/pages/crew-merchandise.html"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}