/**
 * Copyright © ProPlayerFC. All rights reserved.
 * Mobile Header Toggle Styles
 */

/* Hide default Magento nav toggle */
.action.nav-toggle,
.action.nav-toggle span,
[data-action="toggle-nav"],
.nav-toggle-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Custom Mobile Navigation Toggle */
.proplayerfc-mobile-nav-toggle {
    display: none !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    z-index: 101 !important;
    transition: all 0.3s ease !important;
    outline: none !important;
}

.proplayerfc-mobile-nav-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #ffffff !important;
}

.proplayerfc-mobile-nav-toggle:focus {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

.proplayerfc-mobile-nav-toggle.active {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Hamburger Icon */
.hamburger-icon {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 20px !important;
    height: 16px !important;
    position: relative !important;
}

.hamburger-line {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
}

/* Animated hamburger when active */
.proplayerfc-mobile-nav-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px) !important;
}

.proplayerfc-mobile-nav-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0 !important;
}

.proplayerfc-mobile-nav-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px) !important;
}

/* Show toggle only on mobile */
@media (max-width: 767px) {
    .proplayerfc-mobile-nav-toggle {
        display: block !important;
    }
    
    /* Ensure header.content has relative positioning for absolute toggle */
    .header.content {
        position: relative !important;
    }
    
    /* Adjust logo position when toggle is visible */
    .header.content .logo {
        margin-left: 60px !important;
    }
}

/* Desktop - Hide toggle */
@media (min-width: 768px) {
    .proplayerfc-mobile-nav-toggle {
        display: none !important;
    }
    
    .header.content .logo {
        margin-left: 0 !important;
    }
}