/* 1. The Container: Fluid height to respect the sticky scroll */
header .navbar-brand, 
header .logo,
header a[href*="vaulexfiletransfer"] {
    display: flex !important;
    align-items: center !important; 
    max-width: 280px !important; 
    height: auto !important; 
    margin-right: 20px !important;
    padding: 5px 0 !important; 
}

/* 2. The Image: Natural centering without forced margins */
header .navbar-brand img, 
header .logo img,
header a[href*="vaulexfiletransfer"] img {
    width: 100% !important; 
    height: auto !important;
    max-height: 75px !important; 
    object-fit: contain !important; 
    transform: none !important;
    margin: 0 !important; 
    padding: 0 !important;
}

/* 3. Fix the Stretched Buttons on the Right */
header .btn, 
header a[href$="/login"], 
header a[href$="/register"] {
    height: 42px !important; 
    line-height: 42px !important; 
    padding: 0 25px !important; 
    align-self: center !important; 
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: inline-block !important;
}

/* 4. Ensure the main menu container vertically centres everything */
header .navbar-nav,
header .navbar-collapse,
header .d-flex {
    align-items: center !important;
}

/* 5. Mobile Layout: Strict height lock to prevent vertical overflow */
@media (max-width: 768px) {
    header .navbar-brand, 
    header .logo,
    header a[href*="vaulexfiletransfer"] {
        max-width: calc(100vw - 90px) !important; /* Protects the hamburger menu */
        height: 65px !important; /* Locks the container to the height of the white bar */
        padding: 0 !important; 
        margin-right: auto !important;
        display: flex !important;
        align-items: center !important;
    }
    
    header .navbar-brand img, 
    header .logo img,
    header a[href*="vaulexfiletransfer"] img {
        max-height: 45px !important; /* Forces the image to safely fit inside the white header */
        width: auto !important; /* Lets the width shrink to match the safe height */
    }
}
/* Safely highlight the Sign Up buttons without breaking layout */
a[href$="/register"] {
    background-color: #17a2b8 !important; 
    border-color: #17a2b8 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(23, 162, 184, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* Slightly darker teal on hover */
a[href$="/register"]:hover {
    background-color: #138496 !important;
    border-color: #138496 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 15px rgba(23, 162, 184, 0.5) !important;
}