/* Header and Navbar styling improvements */

/* Make header match the navbar background color with 95% opacity */
.navbar,
.navbar.navbar-expand-lg,
.navbar.navbar-dark,
.navbar.bg-dark,
.navbar.fixed-top,
.navbar.navbar-expand-lg.navbar-dark.bg-dark,
.navbar.navbar-expand-lg.navbar-dark.bg-dark.mb-4.fixed-top {
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* iPhone notch support */
    padding-top: env(safe-area-inset-top);
    /* Force hardware acceleration for better performance */
    transform: translateZ(0);
    will-change: transform;
}

/* Ensure proper spacing with fixed navbar */
body {
    padding-top: calc(40px + env(safe-area-inset-top, 0px)) !important;
}

/* Additional iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    body {
        /* iOS Safari specific body padding */
        padding-top: calc(40px + constant(safe-area-inset-top, 0px)) !important;
        padding-top: calc(40px + env(safe-area-inset-top, 0px)) !important;
    }
    
    .navbar {
        /* iOS Safari specific navbar padding */
        padding-top: constant(safe-area-inset-top) !important;
        padding-top: env(safe-area-inset-top) !important;
        background-color: rgba(0, 0, 0, 0.7) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;
    }
}

/* For devices with notch, extend background to cover safe area */
@supports (padding: max(0px)) {
    .navbar {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

/* Remove border/outline from hamburger menu button */
.navbar-toggler {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
    padding: 0.25rem 0.5rem !important;
}

.navbar-toggler:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
}

.navbar-toggler:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
}

.navbar-toggler:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* Style the hamburger icon lines */
.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%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    border: none !important;
}

/* Remove any Bootstrap default focus rings */
.navbar-toggler[aria-expanded="true"],
.navbar-toggler[aria-expanded="false"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Also apply to mobile navbar with transparency */
.mobile-navbar {
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}