/**
 * Mobile Menu Styles
 * Minimal custom CSS - most styling done with Tailwind
 */

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 9999;
}

.mobile-menu-toggle svg {
    width: 28px;
    height: 28px;
}

/* Show toggle button and hide desktop nav on mobile */
@media (max-width: 1023px) {
    .mobile-menu-toggle {
        display: flex;
    }

    /* Hide desktop navigation */
    #site-navigation {
        display: none !important;
    }

    /* Hide WP Max Mega Menu */
    .mega-menu-wrap,
    .max-mega-menu {
        display: none !important;
    }
}

/* Mobile Menu Overlay Active State */
.mobile-menu-overlay.active {
    pointer-events: auto;
}

/* Menu Link Underline Effect (can't be done with Tailwind) */
.mobile-menu-link::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    transition: transform 0.3s ease;
}

.mobile-menu-link:hover::after,
.mobile-menu-link:focus::after {
    transform: translateX(-50%) scaleX(1);
}

.mobile-menu-link:hover,
.mobile-menu-link:focus {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* Responsive font sizes for smaller screens */
@media (max-width: 480px) {
    .mobile-menu-link {
        font-size: 1.75rem;
        padding: 16px 20px;
    }
}

@media (min-height: 800px) {
    .mobile-menu-link {
        font-size: 2.5rem;
        padding: 24px 30px;
    }
}

/* Smooth scrolling for menu content on smaller screens */
@media (max-height: 650px) {
    .mobile-menu-overlay > div:first-of-type {
        justify-content: flex-start;
        padding-top: 100px;
    }

    .mobile-menu-link {
        font-size: 1.5rem;
        padding: 14px 20px;
    }
}

/* Prevent body scroll when menu is open */
body.mobile-menu-open {
    overflow: hidden;
}

/* Enhanced shadow effect for social links hover */
.mobile-menu-social-link:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}