/* AGGRESSIVE FIX - Move all hamburger menu content lower */
/* This file should be loaded last to override all other styles */

/* Ensure menu is HIDDEN by default site-wide to prevent desktop leakage */
/* Use display: flex with visibility/opacity for smooth animations */
.menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.8s ease, visibility 0s 0.8s !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Ensure blur covers entire menu including bottom */
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    background: rgba(255, 255, 255, 0.35) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    z-index: 9999 !important;
}

/* Show only when active OR on mobile (if active) */
.menu-overlay.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.8s ease, visibility 0s 0s !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Ensure blur covers entire menu including bottom */
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    background: rgba(255, 255, 255, 0.35) !important;
    height: 100vh !important;
    min-height: 100vh !important;
}

/* Dark theme blur */
[data-theme="dark"] .menu-overlay,
html[data-theme="dark"] .menu-overlay,
body[data-theme="dark"] .menu-overlay {
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    background: rgba(15, 23, 42, 0.4) !important;
}

[data-theme="dark"] .menu-overlay.active,
html[data-theme="dark"] .menu-overlay.active,
body[data-theme="dark"] .menu-overlay.active {
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    background: rgba(15, 23, 42, 0.4) !important;
}

/* Force menu-content padding with maximum specificity */

/* Force menu-content padding with maximum specificity */
/* Using full padding shorthand to prevent override issues */
/* Center content like contact page */
/* Make menu-content transparent so blur shows through */
.menu-overlay .menu-content,
.menu-overlay.active .menu-content,
html body .menu-overlay .menu-content,
html body .menu-overlay.active .menu-content,
body .menu-overlay .menu-content,
body .menu-overlay.active .menu-content,
.menu-content,
html body .menu-content,
body .menu-content,
body:has(.about-hero) .menu-content,
body:has(.biography-timeline) .menu-content,
body:has(.spotify-section) .menu-content,
body:has(.gallery-hero) .menu-content,
body:has(.collaborations-hero) .menu-content,
body:has(.contact-hero) .menu-content,
body:has(.news-hero) .menu-content,
body:has(.music-hero) .menu-content {
    padding: 80px 50px 50px !important;
    /* Increased top padding to move content lower */
    padding-top: 80px !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    position: relative !important;
    /* Make transparent so backdrop blur shows through */
    background: transparent !important;
    background-color: transparent !important;
}

/* Also add margin-top to menu-links to ensure they move down */
/* Center menu-links like contact page */
.menu-overlay .menu-links,
.menu-overlay.active .menu-links,
html body .menu-overlay .menu-links,
html body .menu-overlay.active .menu-links,
body .menu-overlay .menu-links,
body .menu-overlay.active .menu-links,
.menu-links,
html body .menu-links,
body .menu-links,
body:has(.about-hero) .menu-links,
body:has(.biography-timeline) .menu-links,
body:has(.spotify-section) .menu-links,
body:has(.gallery-hero) .menu-links,
body:has(.collaborations-hero) .menu-links,
body:has(.contact-hero) .menu-links,
body:has(.news-hero) .menu-links,
body:has(.music-hero) .menu-links {
    margin-top: 3rem !important;
    /* Increased margin-top to move links lower */
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Center menu-social icons like contact page */
.menu-overlay .menu-social,
.menu-overlay.active .menu-social,
html body .menu-overlay .menu-social,
html body .menu-overlay.active .menu-social,
body .menu-overlay .menu-social,
body .menu-overlay.active .menu-social,
.menu-social,
html body .menu-social,
body .menu-social,
body:has(.about-hero) .menu-social,
body:has(.biography-timeline) .menu-social,
body:has(.spotify-section) .menu-social,
body:has(.gallery-hero) .menu-social,
body:has(.collaborations-hero) .menu-social,
body:has(.contact-hero) .menu-social,
body:has(.news-hero) .menu-social,
body:has(.music-hero) .menu-social {
    justify-content: center !important;
    align-items: center !important;
}

/* Make Instagram icon thinner (lighter stroke weight) in hamburger menu */
.menu-overlay .menu-social a[href*="instagram"] i,
.menu-overlay.active .menu-social a[href*="instagram"] i,
html body .menu-overlay .menu-social a[href*="instagram"] i,
html body .menu-overlay.active .menu-social a[href*="instagram"] i,
body .menu-overlay .menu-social a[href*="instagram"] i,
body .menu-overlay.active .menu-social a[href*="instagram"] i,
.menu-social a[href*="instagram"] i,
html body .menu-social a[href*="instagram"] i,
body .menu-social a[href*="instagram"] i,
.menu-social a[href*="instagram"] .fa-instagram,
.menu-social a[href*="instagram"] .fab.fa-instagram,
.menu-social a[href*="instagram"] i.fa-instagram,
.menu-social a[href*="instagram"] i.fab.fa-instagram,
.menu-social a[href*="instagram"] i::before {
    /* Use filter to make icon appear thinner/lighter */
    filter: brightness(1.1) contrast(0.9) !important;
    /* Make it appear lighter and less bold */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-weight: 300 !important;
    /* Try lighter font weight if available */
    text-rendering: optimizeLegibility !important;
    /* Use text-stroke to create thinner appearance */
    -webkit-text-stroke: 0.3px transparent !important;
}

/* Keep Instagram icon thin even on hover */
.menu-overlay .menu-social a[href*="instagram"]:hover i,
.menu-overlay.active .menu-social a[href*="instagram"]:hover i,
html body .menu-overlay .menu-social a[href*="instagram"]:hover i,
html body .menu-overlay.active .menu-social a[href*="instagram"]:hover i,
body .menu-overlay .menu-social a[href*="instagram"]:hover i,
body .menu-overlay.active .menu-social a[href*="instagram"]:hover i,
.menu-social a[href*="instagram"]:hover i,
html body .menu-social a[href*="instagram"]:hover i,
body .menu-social a[href*="instagram"]:hover i,
.menu-social a[href*="instagram"]:hover .fa-instagram,
.menu-social a[href*="instagram"]:hover .fab.fa-instagram,
.menu-social a[href*="instagram"]:hover i.fa-instagram,
.menu-social a[href*="instagram"]:hover i.fab.fa-instagram,
.menu-social a[href*="instagram"]:hover i::before {
    filter: brightness(1.1) contrast(0.9) !important;
    font-weight: 300 !important;
    -webkit-text-stroke: 0.3px transparent !important;
}

/* Disable color change on hover/active/focus for menu-social icons */
.menu-overlay .menu-social a:hover,
.menu-overlay.active .menu-social a:hover,
.menu-overlay .menu-social a:active,
.menu-overlay.active .menu-social a:active,
.menu-overlay .menu-social a:focus,
.menu-overlay.active .menu-social a:focus,
.menu-overlay .menu-social a:visited,
.menu-overlay.active .menu-social a:visited,
html body .menu-overlay .menu-social a:hover,
html body .menu-overlay.active .menu-social a:hover,
html body .menu-overlay .menu-social a:active,
html body .menu-overlay.active .menu-social a:active,
html body .menu-overlay .menu-social a:focus,
html body .menu-overlay.active .menu-social a:focus,
body .menu-overlay .menu-social a:hover,
body .menu-overlay.active .menu-social a:hover,
body .menu-overlay .menu-social a:active,
body .menu-overlay.active .menu-social a:active,
body .menu-overlay .menu-social a:focus,
body .menu-overlay.active .menu-social a:focus,
.menu-social a:hover,
.menu-social a:active,
.menu-social a:focus,
.menu-social a:visited,
html body .menu-social a:hover,
html body .menu-social a:active,
html body .menu-social a:focus,
body .menu-social a:hover,
body .menu-social a:active,
body .menu-social a:focus {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
}

/* Explicitly prevent background changes on active/click state - highest priority */
.menu-overlay .menu-social a:active,
.menu-overlay.active .menu-social a:active,
html body .menu-overlay .menu-social a:active,
html body .menu-overlay.active .menu-social a:active,
body .menu-overlay .menu-social a:active,
body .menu-overlay.active .menu-social a:active,
.menu-social a:active,
html body .menu-social a:active,
body .menu-social a:active {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
}

/* Disable pseudo-elements that might cause background changes on click */
.menu-overlay .menu-social a:active::before,
.menu-overlay.active .menu-social a:active::before,
.menu-overlay .menu-social a:active::after,
.menu-overlay.active .menu-social a:active::after,
html body .menu-overlay .menu-social a:active::before,
html body .menu-overlay.active .menu-social a:active::before,
html body .menu-overlay .menu-social a:active::after,
html body .menu-overlay.active .menu-social a:active::after,
body .menu-overlay .menu-social a:active::before,
body .menu-overlay.active .menu-social a:active::before,
body .menu-overlay .menu-social a:active::after,
body .menu-overlay.active .menu-social a:active::after,
.menu-social a:active::before,
.menu-social a:active::after,
html body .menu-social a:active::before,
html body .menu-social a:active::after,
body .menu-social a:active::before,
body .menu-social a:active::after {
    opacity: 0 !important;
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Disable color change on icon when hovered/clicked */
.menu-overlay .menu-social a:hover i,
.menu-overlay.active .menu-social a:hover i,
.menu-overlay .menu-social a:active i,
.menu-overlay.active .menu-social a:active i,
.menu-overlay .menu-social a:focus i,
.menu-overlay.active .menu-social a:focus i,
html body .menu-overlay .menu-social a:hover i,
html body .menu-overlay.active .menu-social a:hover i,
html body .menu-overlay .menu-social a:active i,
html body .menu-overlay.active .menu-social a:active i,
html body .menu-overlay .menu-social a:focus i,
html body .menu-overlay.active .menu-social a:focus i,
body .menu-overlay .menu-social a:hover i,
body .menu-overlay.active .menu-social a:hover i,
body .menu-overlay .menu-social a:active i,
body .menu-overlay.active .menu-social a:active i,
body .menu-overlay .menu-social a:focus i,
body .menu-overlay.active .menu-social a:focus i,
.menu-social a:hover i,
.menu-social a:active i,
.menu-social a:focus i,
html body .menu-social a:hover i,
html body .menu-social a:active i,
html body .menu-social a:focus i,
body .menu-social a:hover i,
body .menu-social a:active i,
body .menu-social a:focus i {
    color: inherit !important;
}

/* Dark mode - keep original colors on hover/active */
[data-theme="dark"] .menu-overlay .menu-social a:hover,
[data-theme="dark"] .menu-overlay.active .menu-social a:hover,
[data-theme="dark"] .menu-overlay .menu-social a:active,
[data-theme="dark"] .menu-overlay.active .menu-social a:active,
html[data-theme="dark"] .menu-overlay .menu-social a:hover,
html[data-theme="dark"] .menu-overlay.active .menu-social a:hover,
body[data-theme="dark"] .menu-overlay .menu-social a:hover,
body[data-theme="dark"] .menu-overlay.active .menu-social a:hover,
[data-theme="dark"] .menu-social a:hover,
[data-theme="dark"] .menu-social a:active,
html[data-theme="dark"] .menu-social a:hover,
html[data-theme="dark"] .menu-social a:active,
body[data-theme="dark"] .menu-social a:hover,
body[data-theme="dark"] .menu-social a:active {
    background: #1E293B !important;
    background-color: #1E293B !important;
}

/* Explicitly prevent background changes on active/click state in dark mode */
[data-theme="dark"] .menu-overlay .menu-social a:active,
[data-theme="dark"] .menu-overlay.active .menu-social a:active,
html[data-theme="dark"] .menu-overlay .menu-social a:active,
html[data-theme="dark"] .menu-overlay.active .menu-social a:active,
body[data-theme="dark"] .menu-overlay .menu-social a:active,
body[data-theme="dark"] .menu-overlay.active .menu-social a:active,
[data-theme="dark"] .menu-social a:active,
html[data-theme="dark"] .menu-social a:active,
body[data-theme="dark"] .menu-social a:active {
    background: #1E293B !important;
    background-color: #1E293B !important;
    background-image: none !important;
}

/* Disable pseudo-elements in dark mode that might cause background changes on click */
[data-theme="dark"] .menu-overlay .menu-social a:active::before,
[data-theme="dark"] .menu-overlay.active .menu-social a:active::before,
[data-theme="dark"] .menu-overlay .menu-social a:active::after,
[data-theme="dark"] .menu-overlay.active .menu-social a:active::after,
html[data-theme="dark"] .menu-overlay .menu-social a:active::before,
html[data-theme="dark"] .menu-overlay.active .menu-social a:active::before,
html[data-theme="dark"] .menu-overlay .menu-social a:active::after,
html[data-theme="dark"] .menu-overlay.active .menu-social a:active::after,
body[data-theme="dark"] .menu-overlay .menu-social a:active::before,
body[data-theme="dark"] .menu-overlay.active .menu-social a:active::before,
body[data-theme="dark"] .menu-overlay .menu-social a:active::after,
body[data-theme="dark"] .menu-overlay.active .menu-social a:active::after,
[data-theme="dark"] .menu-social a:active::before,
[data-theme="dark"] .menu-social a:active::after,
html[data-theme="dark"] .menu-social a:active::before,
html[data-theme="dark"] .menu-social a:active::after,
body[data-theme="dark"] .menu-social a:active::before,
body[data-theme="dark"] .menu-social a:active::after {
    opacity: 0 !important;
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
}

[data-theme="dark"] .menu-overlay .menu-social a:hover i,
[data-theme="dark"] .menu-overlay.active .menu-social a:hover i,
[data-theme="dark"] .menu-overlay .menu-social a:active i,
[data-theme="dark"] .menu-overlay.active .menu-social a:active i,
html[data-theme="dark"] .menu-overlay .menu-social a:hover i,
html[data-theme="dark"] .menu-overlay.active .menu-social a:hover i,
body[data-theme="dark"] .menu-overlay .menu-social a:hover i,
body[data-theme="dark"] .menu-overlay.active .menu-social a:hover i,
[data-theme="dark"] .menu-social a:hover i,
[data-theme="dark"] .menu-social a:active i,
html[data-theme="dark"] .menu-social a:hover i,
html[data-theme="dark"] .menu-social a:active i,
body[data-theme="dark"] .menu-social a:hover i,
body[data-theme="dark"] .menu-social a:active i {
    color: #ffffff !important;
}