/**
 * Hamburger Menu Styles (Desktop, Above Hero)
 *
 * Styles applied when:
 * - Screen width is >= --lubinik-breakpoint-md
 * - Body has class .menu-style-hamburger
 * - Header has class .menu-above-hero
 */



    /* --- General Layout & Hiding (Desktop Only) --- */

    @media (min-width: 1200px) {
        .menu-style-hamburger.menu-above-hero .site-branding {
            display: none !important; /* Hide logo */
        }

        /* Logo Hiding */
        .menu-style-hamburger.menu-above-hero .site-branding {
            display: none !important;
        }

        /* Main Navigation Container */
        .menu-style-hamburger.menu-above-hero .main-navigation {
            width: 100%;
            position: static;
            text-align: right;
        }

        /* Hide default horizontal menu UL */
        .menu-style-hamburger.menu-above-hero .main-navigation > ul {
            display: none !important;
        }

        /* --- Menu Toggle Button --- */
        .menu-style-hamburger.menu-above-hero .menu-toggle {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            color: var(--lubinik-hamburger-menu-above-hero-primary-icon-color);
            border: none;
            cursor: pointer;
        }

        .hero-section {
            position: relative;
        }
        
        .hero-section .menu-toggle {
            position: absolute;
            top: var(--lubinik-spacing-md);
            right: var(--lubinik-spacing-md);
            z-index: 5000;
            width: var(--lubinik-hamburger-menu-above-hero-icon-size) !important;
            height: var(--lubinik-hamburger-menu-above-hero-icon-size) !important;
            background-color: var(--lubinik-hamburger-menu-above-hero-content-overlay-bg-color) !important;
            border-radius: var(--lubinik-border-radius-sm) !important;
        }



        /* --- Hamburger Icon Styling --- */
        .menu-style-hamburger.menu-above-hero .menu-icon {
            display: block;
            width: var(--lubinik-hamburger-menu-above-hero-icon-width);
            height: var(--lubinik-hamburger-menu-above-hero-icon-height);
            background-color: currentColor;
            position: relative;
            transition: background-color 0.1s 0.2s ease;
        }

        .menu-style-hamburger.menu-above-hero .menu-icon:before,
        .menu-style-hamburger.menu-above-hero .menu-icon:after {
            content: '';
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: currentColor;
            transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
        }

        .menu-style-hamburger.menu-above-hero .menu-icon:before {
            top: -25px; /* Increased spacing from top line */
        }

        .menu-style-hamburger.menu-above-hero .menu-icon:after {
            bottom: -25px; /* Increased spacing from bottom line */
        }

        /* Ensure Icon Color is Correct on Desktop Toggle */
        .menu-style-hamburger.menu-above-hero .site-header .menu-toggle .menu-icon,
        .menu-style-hamburger.menu-above-hero .site-header .menu-toggle .menu-icon:before,
        .menu-style-hamburger.menu-above-hero .site-header .menu-toggle .menu-icon:after {
            background-color: var(--lubinik-hamburger-menu-above-hero-toggle-text-color);
        }

        
        /* Ensure toggle button stays visible when menu is open */
        .menu-toggle.toggled {
            z-index: 5001 !important;
        }
        
        /* Transform hamburger to X when toggled */
        .menu-style-hamburger.menu-above-hero .menu-toggle.toggled .menu-icon,
        .hero-section .menu-toggle.toggled .menu-icon {
            background-color: transparent;
            transition-delay: 0s;
        }
        
        .menu-style-hamburger.menu-above-hero .menu-toggle.toggled .menu-icon:before,
        .hero-section .menu-toggle.toggled .menu-icon:before {
            top: 0;
            transform: rotate(45deg);
            transition-delay: 0.2s;
        }
        
        .menu-style-hamburger.menu-above-hero .menu-toggle.toggled .menu-icon:after,
        .hero-section .menu-toggle.toggled .menu-icon:after {
            bottom: 0;
            transform: rotate(-45deg);
        }
        
        /* --- Opened Vertical Menu Panel --- */
        .menu-style-hamburger.menu-above-hero .main-navigation.toggled > ul,
        .menu-style-hamburger.menu-above-hero .main-navigation.active > ul {
            display: block !important;
        }
        
        /* Show menu when toggled/active */
        .main-navigation.toggled,
        .main-navigation.active {
            transform: translateX(0) !important;
        }

        /* Menu panel styling */
        .menu-style-hamburger.menu-above-hero .main-navigation,
        .hero-section .main-navigation {
            position: absolute;
            top: 0;
            right: 0;
            width: clamp(280px, 50vw, 400px);
            height: 100vh;
            background-color: var(--lubinik-hamburger-menu-above-hero-toggle-bg-color);
            padding: calc(var(--lubinik-hamburger-menu-above-hero-icon-size) + var(--lubinik-spacing-lg) * 2) var(--lubinik-spacing-md) var(--lubinik-spacing-md);
            box-shadow: -2px 0 10px rgba(0,0,0,0.1);
            z-index: 4000;
            overflow-y: auto;
            list-style: none;
            margin: 0;
            text-align: left;
            /* Ensure menu is hidden by default */
            transform: translateX(100%);
            transition: transform 0.3s ease-in-out;
        }

        /* --- Opened Menu Items --- */
        .menu-style-hamburger.menu-above-hero .main-navigation.toggled > ul li,
        .menu-style-hamburger.menu-above-hero .main-navigation.active > ul li,
        .hero-section .main-navigation.toggled > ul li,
        .hero-section .main-navigation.active > ul li,
        .hamburger-menu.toggled > ul li,
        .hamburger-menu.active > ul li {
            display: block;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid var(--lubinik-hamburger-menu-above-hero-toggle-bg-color);
        }

        .menu-style-hamburger.menu-above-hero .main-navigation.toggled > ul li:last-child,
        .menu-style-hamburger.menu-above-hero .main-navigation.active > ul li:last-child,
        .hero-section .main-navigation.toggled > ul li:last-child,
        .hero-section .main-navigation.active > ul li:last-child,
        .hamburger-menu.toggled > ul li:last-child,
        .hamburger-menu.active > ul li:last-child {
            border-bottom: none;
        }

        .menu-style-hamburger.menu-above-hero .main-navigation.toggled > ul li a,
        .menu-style-hamburger.menu-above-hero .main-navigation.active > ul li a,
        .hero-section .main-navigation.toggled > ul li a,
        .hero-section .main-navigation.active > ul li a,
        .hamburger-menu.toggled > ul li a,
        .hamburger-menu.active > ul li a {
            display: block;
            padding: var(--lubinik-spacing-md) var(--lubinik-spacing-sm);
            color: var(--lubinik-hamburger-menu-above-hero-toggle-text-color);
            text-decoration: none;
            font-size: var(--lubinik-font-size-md);
            font-weight: 500;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .menu-style-hamburger.menu-above-hero .main-navigation.toggled > ul li a:hover,
        .menu-style-hamburger.menu-above-hero .main-navigation.active > ul li a:hover,
        .hero-section .main-navigation.toggled > ul li a:hover,
        .hero-section .main-navigation.active > ul li a:hover,
        .hamburger-menu.toggled > ul li a:hover,
        .hamburger-menu.active > ul li a:hover,
        .menu-style-hamburger.menu-above-hero .main-navigation.toggled > ul .current-menu-item > a,
        .menu-style-hamburger.menu-above-hero .main-navigation.active > ul .current-menu-item > a,
        .hero-section .main-navigation.toggled > ul .current-menu-item > a,
        .hero-section .main-navigation.active > ul .current-menu-item > a,
        .hamburger-menu.toggled > ul .current-menu-item > a,
        .hamburger-menu.active > ul .current-menu-item > a {
            background-color: var(--lubinik-hamburger-menu-above-hero-toggle-bg-color);
            color: var(--lubinik-hamburger-menu-above-hero-toggle-text-color);
        }
    }