/**
 * Custom Hamburger Menu Styles
 */

/* Default styles for desktop */
.hamburger-menu-container {
    display: none;
}

.desktop-navigation {
    display: block;
    margin-left: auto;
}

/* Desktop navigation styles */
.desktop-navigation nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.desktop-navigation nav ul li {
    margin: 0 15px;
}

.desktop-navigation nav ul li:last-child {
    margin-right: 0;
}

.desktop-navigation nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    padding: 10px 0;
    transition: opacity 0.3s ease;
    display: block;
}

.desktop-navigation nav ul li a:hover,
.desktop-navigation nav ul li a:focus {
    opacity: 0.8;
}

/* Hamburger menu button styles */
.hamburger-menu-button {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 10px;
    position: relative;
    z-index: 1000;
}

.hamburger-menu-icon,
.hamburger-menu-icon::before,
.hamburger-menu-icon::after {
    background-color: white;
    content: '';
    display: block;
    height: 3px;
    position: absolute;
    transition: all 0.3s ease-in-out;
    width: 30px;
}

.hamburger-menu-icon {
    position: relative;
}

.hamburger-menu-icon::before {
    top: -8px;
}

.hamburger-menu-icon::after {
    bottom: -8px;
}

/* Active state for hamburger icon (when menu is open) */
.hamburger-menu-button.active .hamburger-menu-icon {
    background-color: transparent;
}

.hamburger-menu-button.active .hamburger-menu-icon::before {
    transform: rotate(45deg);
    top: 0;
}

.hamburger-menu-button.active .hamburger-menu-icon::after {
    transform: rotate(-45deg);
    bottom: 0;
}

/* Mobile menu styles - Enhanced for Kamala theme compatibility */
.hamburger-menu-container .mobile-menu,
.wp-block-group .mobile-menu,
header .mobile-menu {
    background-color: var(--wp--preset--color--contrast, #000) !important;
    background: var(--wp--preset--color--contrast, #000) !important;
    display: block !important;
    left: 0 !important;
    padding: 20px !important;
    position: fixed !important;
    right: 0 !important;
    top: 70px !important;
    z-index: 9999 !important;
    width: 100vw !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-20px) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Force mobile menu to show when active - Kamala theme override */
.hamburger-menu-container .mobile-menu.active,
.wp-block-group .mobile-menu.active,
header .mobile-menu.active,
body .mobile-menu.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.mobile-menu nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu nav ul li {
    margin: 10px 0;
}

.mobile-menu nav ul li a {
    color: white;
    display: block;
    font-size: 16px;
    padding: 10px 0;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.mobile-menu nav ul li a:hover,
.mobile-menu nav ul li a:focus {
    opacity: 0.8;
}

/* Media queries for responsive behavior */
@media screen and (min-width: 769px) {
    /* Explicitly ensure hamburger is hidden on desktop */
    .hamburger-menu-container {
        display: none !important;
    }
    
    /* Explicitly ensure desktop nav is shown on desktop */
    .desktop-navigation {
        display: block !important;
        margin-left: auto;
    }
    
    /* Hide mobile menu on desktop regardless of active state */
    .mobile-menu, 
    .mobile-menu.active {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    /* Show hamburger on mobile */
    .hamburger-menu-container {
        display: block !important;
        margin-left: auto; /* Push to the right side */
        padding-left: 10px; /* Add some space between logo and hamburger */
    }
    
    /* Hide desktop nav on mobile */
    .desktop-navigation {
        display: none !important;
    }
    
    /* Position the header container properly - Remove white space */
    .wp-block-group.alignwide,
    header.wp-block-group.alignwide,
    .wp-block-template-part header,
    .wp-site-blocks > header,
    .wp-block-group[data-align="full"] {
        position: relative !important;
        display: flex !important;
        justify-content: space-between !important; /* Space between logo and hamburger */
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 8px 0 !important; /* Remove side padding completely */
        margin: 0 !important; /* Remove margins */
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important; /* Allow menu to extend outside */
    }
    
    /* Fix for WP site header spacing - Remove all side padding */
    body .wp-site-blocks header {
        padding: 8px 0 !important; /* Only top/bottom padding */
        margin: 0 !important;
        overflow: visible !important;
    }
    
    /* Make HEADER logo larger and more visible - specific to header only */
    header .wp-block-image,
    header .wp-block-image.size-full,
    header .wp-block-image img,
    .wp-block-group.alignwide .wp-block-image,
    .wp-block-group.alignwide .wp-block-image.size-full,
    .wp-block-group.alignwide .wp-block-image img,
    header .site-logo,
    header .site-logo img,
    header .site-branding,
    header .site-branding img {
        max-width: 300px !important; /* Larger width for readability */
        width: auto !important;
        height: auto !important;
        max-height: 70px !important; /* Larger height for readability */
        min-height: 40px !important; /* Minimum height to ensure visibility */
        display: block !important; /* Force display */
        object-fit: contain !important;
        flex-shrink: 0 !important; /* Prevent logo from shrinking */
        visibility: visible !important; /* Force visibility */
        opacity: 1 !important; /* Ensure it's not transparent */
    }
    
    /* Logo container positioning */
    .wp-block-site-logo,
    .wp-block-image,
    .site-branding {
        flex: 0 0 auto !important; /* Don't grow or shrink */
        margin-right: 15px !important; /* Space between logo and hamburger */
        margin-left: 0 !important;
        order: 1 !important; /* Logo comes first */
    }
    
    /* Hamburger positioning */
    .hamburger-menu-container {
        flex: 0 0 auto !important; /* Don't grow or shrink */
        order: 2 !important; /* Hamburger comes second */
        margin-left: auto !important; /* Push to right */
    }
    
    /* Ensure the mobile menu appears below the header */
    .mobile-menu {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        display: none; /* Default state is hidden */
        position: absolute !important;
        top: 100% !important;
        z-index: 999 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Only show mobile menu when active class is applied */
    .mobile-menu.active {
        display: block !important;
    }
    
    /* Add padding to mobile menu items for better touch targets */
    .mobile-menu nav ul li a {
        padding: 12px 15px !important;
    }
}

/* Fix for site-wide layout on mobile */
@media screen and (max-width: 768px) {
    /* Adjust any full-width containers that might cause horizontal scrolling */
    body .wp-site-blocks,
    body .wp-block-group.alignfull,
    body .wp-block-group.alignwide {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Prevent unnecessary margins in header area */
    body header .wp-block-group {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Additional styles for your specific header structure */
.wp-block-group.alignfull {
    position: relative;
}

/* Ensure the hamburger button is visible and properly positioned */
.hamburger-menu-button {
    margin-left: auto;
    z-index: 1001;
}

/* Additional Kamala theme compatibility fixes */
@media screen and (max-width: 768px) {
    /* Kamala theme specific overrides */
    .site-header .mobile-menu,
    .site-branding + .mobile-menu,
    [class*="header"] .mobile-menu {
        background: #000 !important;
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
    }
    
    /* Force active state visibility */
    .site-header .mobile-menu.active,
    .site-branding + .mobile-menu.active,
    [class*="header"] .mobile-menu.active {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure hamburger container has proper positioning context */
    .hamburger-menu-container {
        position: relative !important;
        z-index: 10000 !important;
    }
    
    /* Smooth animations and polished styling */
    .mobile-menu {
        opacity: 0 !important;
        transform: translateY(-10px) !important;
        transition: all 0.3s ease-in-out !important;
    }
    
    .mobile-menu.active {
        opacity: 1 !important;
        transform: translateY(0) !important;
        min-height: auto !important;
    }
    
    /* Enhanced menu item styling */
    .mobile-menu.active nav ul li a {
        color: white !important;
        background: transparent !important;
        display: block !important;
        padding: 18px 25px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        position: relative !important;
    }
    
    /* Hover and focus effects for menu items */
    .mobile-menu.active nav ul li a:hover,
    .mobile-menu.active nav ul li a:focus {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        transform: translateX(5px) !important;
        padding-left: 30px !important;
    }
    
    /* Remove border from last menu item */
    .mobile-menu.active nav ul li:last-child a {
        border-bottom: none !important;
    }
    
    /* Add subtle gradient to mobile menu background - matches header color */
    .mobile-menu.active {
        background: var(--wp--preset--color--contrast, #000) !important;
        backdrop-filter: blur(10px) !important;
        border-top: 2px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Override any theme display:none on mobile menu items */
    .mobile-menu.active nav,
    .mobile-menu.active nav ul,
    .mobile-menu.active nav ul li {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}