/* MengBai neutral glass colors. Keep layout and hit testing unchanged. */

/* Simulated frosted glass for mobile WebView compatibility. */
header #headNav.bg-color,
header #headNav.bg-color.nav-transparent {
    background-color: rgba(67, 70, 86, 0.88) !important;
    background-image: linear-gradient(135deg,
        rgba(255, 255, 255, 0.24) 0%,
        rgba(126, 130, 148, 0.72) 48%,
        rgba(55, 58, 75, 0.90) 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.34);
}

/* Explicitly keep every navigation control clickable. */
header #headNav a,
header #headNav button,
header #headNav .sidenav-trigger {
    position: relative;
    z-index: 1;
    pointer-events: auto !important;
}

#mobile-nav .mobile-head.bg-color {
    background-color: #65697b !important;
    background-image: linear-gradient(145deg,
        rgba(255, 255, 255, 0.20),
        rgba(71, 74, 93, 0.96)) !important;
}

/* Match the footer to the navigation without using a touch-blocking blur layer. */
footer.page-footer.bg-color {
    background-color: rgba(74, 77, 94, 0.96) !important;
    background-image: linear-gradient(145deg,
        rgba(255, 255, 255, 0.20) 0%,
        rgba(112, 116, 134, 0.94) 46%,
        rgba(54, 57, 74, 0.98) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 -8px 24px rgba(35, 38, 51, 0.14);
}

footer.page-footer a {
    pointer-events: auto !important;
}

/* Scroll progress: replace the last green accent with frosted silver. */
.progress-bar {
    background: linear-gradient(to right,
        rgba(230, 232, 239, 0.96),
        rgba(145, 150, 170, 0.96)) !important;
    box-shadow: 0 -1px 5px rgba(74, 78, 96, 0.28);
    opacity: 0.92;
}

/* Only recolor the three contact buttons; preserve their original sizing. */
#aboutme .social-link a {
    color: #505568;
    border-color: rgba(255, 255, 255, 0.92);
    background-color: rgba(226, 228, 236, 0.96);
    background-image: radial-gradient(circle at 32% 24%,
        rgba(255, 255, 255, 0.98),
        rgba(192, 196, 211, 0.92));
    pointer-events: auto !important;
}

body.DarkMode header #headNav.bg-color,
body.DarkMode header #headNav.bg-color.nav-transparent {
    background-color: rgba(42, 44, 55, 0.96) !important;
    background-image: linear-gradient(135deg,
        rgba(255, 255, 255, 0.13),
        rgba(35, 37, 49, 0.96)) !important;
    opacity: 1 !important;
}

body.DarkMode footer.page-footer.bg-color {
    background-color: rgba(42, 44, 55, 0.98) !important;
    background-image: linear-gradient(145deg,
        rgba(255, 255, 255, 0.12),
        rgba(35, 37, 49, 0.98)) !important;
    opacity: 1 !important;
}

body.DarkMode .progress-bar {
    background: linear-gradient(to right,
        rgba(188, 193, 210, 0.92),
        rgba(103, 108, 128, 0.96)) !important;
    opacity: 0.90 !important;
}

body.DarkMode #aboutme .social-link a {
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.24);
    background-color: rgba(91, 95, 112, 0.96);
    background-image: radial-gradient(circle at 32% 24%,
        rgba(255, 255, 255, 0.18),
        rgba(64, 67, 82, 0.96));
}