/**
 * Hamburger Menu Styles
 * Mobile-first responsive menu with CSS variables for easy customization
 */

:root {
    /* === HAMBURGER MENU CSS VARIABLES === */
    
    /* Colors */
    --hamburger-primary-color: #333;
    --hamburger-secondary-color: #666;
    --hamburger-accent-color: #007cba;
    --hamburger-bg-color: #ffffff;
    --hamburger-overlay-color: rgba(0, 0, 0, 0.5);
    --hamburger-border-color: #e1e1e1;
    --hamburger-hover-color: #f5f5f5;
    --hamburger-active-color: #e0e0e0;
    
    /* Typography */
    --hamburger-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --hamburger-font-size: 16px;
    --hamburger-font-weight: 400;
    --hamburger-line-height: 1.5;
    --hamburger-header-font-size: 18px;
    --hamburger-header-font-weight: 600;
    
    /* Spacing */
    --hamburger-padding: 15px;
    --hamburger-margin: 10px;
    --hamburger-item-padding: 12px 20px;
    --hamburger-border-radius: 8px;
    --hamburger-button-size: 44px;
    
    /* Panel */
    --hamburger-panel-width: 320px;
    --hamburger-panel-max-width: 85vw;
    --hamburger-panel-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    --hamburger-panel-z-index: 9999;
    
    /* Animation */
    --hamburger-transition-duration: 0.3s;
    --hamburger-transition-easing: ease-in-out;
    --hamburger-slide-distance: 100%;
    
    /* Icons */
    --hamburger-line-height: 2px;
    --hamburger-line-width: 24px;
    --hamburger-line-spacing: 5px;
    --hamburger-chevron-size: 18px;
}

/* === HAMBURGER WRAPPER === */
.kominox-hamburger-wrapper {
    position: relative;
    display: inline-block;
}

/* === HAMBURGER BUTTON === */
.hamburger-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: var(--hamburger-button-size);
    height: var(--hamburger-button-size);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: calc(var(--hamburger-panel-z-index) + 200); /* Highest z-index for sticky navbar compatibility */
    transition: all var(--hamburger-transition-duration) var(--hamburger-transition-easing);
    -webkit-tap-highlight-color: transparent; /* Remove iOS tap highlight */
    touch-action: manipulation; /* iOS touch optimization */
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Prevent text selection on iOS */
    -webkit-touch-callout: none; /* Disable callout on iOS Safari */
}

.hamburger-toggle:hover {
    background: var(--hamburger-hover-color);
    border-radius: var(--hamburger-border-radius);
}

.hamburger-toggle:focus {
    outline: 2px solid var(--hamburger-accent-color);
    outline-offset: 2px;
}

/* Hamburger Lines */
.hamburger-line {
    display: block;
    width: var(--hamburger-line-width);
    height: var(--hamburger-line-height);
    background: var(--hamburger-primary-color);
    margin: calc(var(--hamburger-line-spacing) / 2) 0;
    transition: all var(--hamburger-transition-duration) var(--hamburger-transition-easing);
    border-radius: 1px;
}

/* Hamburger Animation - Active State */
.hamburger-toggle.active .hamburger-line:nth-child(1) {
    transform: translateY(calc(var(--hamburger-line-height) + var(--hamburger-line-spacing))) rotate(45deg);
}

.hamburger-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-toggle.active .hamburger-line:nth-child(3) {
    transform: translateY(calc(-1 * (var(--hamburger-line-height) + var(--hamburger-line-spacing)))) rotate(-45deg);
}

/* === OVERLAY === */
.hamburger-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--hamburger-overlay-color);
    z-index: calc(var(--hamburger-panel-z-index) + 50); /* Higher z-index for sticky navbar compatibility */
    opacity: 0 !important; /* Force hidden state */
    visibility: hidden !important; /* Force hidden state */
    transition: all var(--hamburger-transition-duration) var(--hamburger-transition-easing);
    -webkit-tap-highlight-color: transparent; /* Remove iOS tap highlight */
    pointer-events: none !important; /* iOS Safari fix - allow clicks through when hidden */
    transform: translateZ(0); /* Hardware acceleration for iOS Safari */
    /* iOS Safari scroll fix */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.hamburger-overlay.active {
    opacity: 1 !important; /* Override hidden state */
    visibility: visible !important; /* Override hidden state */
    pointer-events: auto !important; /* Enable clicks when active */
}

/* === MENU PANEL === */
.hamburger-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--hamburger-panel-width);
    max-width: var(--hamburger-panel-max-width);
    height: 100%;
    background: var(--hamburger-bg-color);
    z-index: calc(var(--hamburger-panel-z-index) + 100); /* Much higher z-index for sticky navbar compatibility */
    transform: translateX(var(--hamburger-slide-distance)) !important; /* Force hidden state */
    transition: transform var(--hamburger-transition-duration) var(--hamburger-transition-easing);
    box-shadow: var(--hamburger-panel-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
    pointer-events: auto; /* Ensure clicks work on iOS Safari */
    will-change: transform; /* Hardware acceleration hint */
    -webkit-transform: translateZ(0); /* Hardware acceleration for iOS Safari */
    /* iOS Safari scroll fix */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.hamburger-panel.active {
    transform: translateX(0) !important; /* Override hidden state */
}

/* === PANEL HEADER === */
.hamburger-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: var(--hamburger-padding);
    border-bottom: 1px solid var(--hamburger-border-color);
    flex-shrink: 0;
}

.hamburger-close {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--hamburger-button-size);
    height: var(--hamburger-button-size);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: var(--hamburger-primary-color);
    border-radius: var(--hamburger-border-radius);
    transition: all var(--hamburger-transition-duration) var(--hamburger-transition-easing);
    -webkit-tap-highlight-color: transparent; /* iOS Safari fix */
    touch-action: manipulation; /* iOS Safari fix */
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Prevent text selection on iOS */
    -webkit-touch-callout: none; /* Disable callout on iOS Safari */
}

.hamburger-close:hover {
    background: var(--hamburger-hover-color);
}

.hamburger-close:focus {
    outline: 2px solid var(--hamburger-accent-color);
    outline-offset: 2px;
}

/* === PANEL CONTENT === */
.hamburger-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* === MENU LEVELS === */
.hamburger-level {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(var(--hamburger-slide-distance));
    transition: transform var(--hamburger-transition-duration) var(--hamburger-transition-easing);
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
}

.hamburger-level.active {
    transform: translateX(0);
}

.hamburger-level.previous {
    transform: translateX(-100%);
}

/* === LEVEL HEADER === */
.level-header {
    display: flex;
    align-items: center;
    padding: var(--hamburger-padding);
    border-bottom: 1px solid var(--hamburger-border-color);
    background: var(--hamburger-hover-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.level-back {
    background: transparent;
    border: none;
    font-size: var(--hamburger-header-font-size);
    color: var(--hamburger-accent-color);
    cursor: pointer;
    padding: 8px;
    margin-right: var(--hamburger-margin);
    border-radius: var(--hamburger-border-radius);
    transition: all var(--hamburger-transition-duration) var(--hamburger-transition-easing);
    -webkit-tap-highlight-color: transparent; /* iOS Safari fix */
    touch-action: manipulation; /* iOS Safari fix */
    min-height: 44px; /* iOS touch target size */
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Prevent text selection on iOS */
    -webkit-touch-callout: none; /* Disable callout on iOS Safari */
}

.level-back:hover {
    background: var(--hamburger-active-color);
}

.level-title {
    font-size: var(--hamburger-header-font-size);
    font-weight: var(--hamburger-header-font-weight);
    color: var(--hamburger-primary-color);
}

/* === MENU LIST === */
.hamburger-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hamburger-menu-item {
    border-bottom: 1px solid var(--hamburger-border-color);
}

.hamburger-menu-item:last-child {
    border-bottom: none;
}

/* === MENU LINKS === */
.hamburger-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--hamburger-item-padding);
    font-family: var(--hamburger-font-family);
    font-size: var(--hamburger-font-size);
    font-weight: var(--hamburger-font-weight);
    line-height: var(--hamburger-line-height);
    color: var(--hamburger-primary-color);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: all var(--hamburger-transition-duration) var(--hamburger-transition-easing);
    min-height: 44px; /* Touch-friendly size */
    -webkit-tap-highlight-color: transparent; /* Remove iOS tap highlight */
    touch-action: manipulation; /* iOS touch optimization */
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Prevent text selection on iOS */
    -webkit-touch-callout: none; /* Disable callout on iOS Safari */
}

.hamburger-menu-link:hover,
.hamburger-menu-link:focus {
    background: var(--hamburger-hover-color);
    color: var(--hamburger-accent-color);
}

.hamburger-menu-link:focus {
    outline: 2px solid var(--hamburger-accent-color);
    outline-offset: -2px;
}

/* === MENU CHEVRON === */
.menu-chevron {
    font-size: var(--hamburger-chevron-size);
    color: var(--hamburger-secondary-color);
    transition: all var(--hamburger-transition-duration) var(--hamburger-transition-easing);
    transform: translateX(0);
}

.hamburger-menu-link:hover .menu-chevron {
    transform: translateX(3px);
    color: var(--hamburger-accent-color);
}

/* === RESPONSIVE DESIGN === */

/* Small screens optimization */
@media (max-width: 480px) {
    :root {
        --hamburger-panel-width: 280px;
        --hamburger-panel-max-width: 90vw;
        --hamburger-padding: 12px;
        --hamburger-item-padding: 10px 16px;
        --hamburger-font-size: 15px;
    }
}

/* === iOS SAFARI SPECIFIC FIXES === */

/* iOS Safari without dvh support fallback */
@supports not (height: 100dvh) {
    .hamburger-panel, .hamburger-overlay {
        height: calc(var(--vh, 1vh) * 100);
    }
}

/* iOS Safari with dvh support */
@supports (height: 100dvh) {
    .hamburger-panel, .hamburger-overlay {
        height: 100dvh;
    }
}

/* Large screens - keep same size but adjust max-width */
@media (min-width: 1024px) {
    :root {
        --hamburger-panel-max-width: 400px;
    }
}

/* === ACCESSIBILITY === */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    :root {
        --hamburger-transition-duration: 0.1s;
    }
    
    .hamburger-toggle .hamburger-line,
    .hamburger-panel,
    .hamburger-overlay,
    .hamburger-level {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --hamburger-border-color: #000;
        --hamburger-primary-color: #000;
        --hamburger-bg-color: #fff;
        --hamburger-hover-color: #f0f0f0;
    }
}

/* === PRINT STYLES === */
@media print {
    .kominox-hamburger-wrapper {
        display: none !important;
    }
}