/* ============================================
   EXALL GROUP - MOBILE MENU STYLES
   ============================================

   Styles for the mobile slide-out navigation menu.
   Works with mobile_menu.antlers.html partial.

   CONTENTS:
   1. Body Scroll Lock
   2. Menu Panel Base Styles
   3. Menu Item Styles
   4. Hamburger Animation
   5. Header Styles (Mobile)
   6. Scrollbar Customization
   7. Accessibility
   8. Performance Optimizations
   9. Print Styles

   COLORS:
   - Text: #0f497b (Exall dark blue)
   - Hover: #0cb0dd (Exall cyan)
   - Borders: #e2e8f0 (light grey)

   ============================================ */


/* ============================================
   1. BODY SCROLL LOCK
   ============================================ */

/* Lock body scroll when menu is open */
body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}


/* ============================================
   2. MENU PANEL BASE STYLES
   ============================================ */

/* GPU acceleration for smooth animations */
.mobile-menu-panel {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Reset inherited link/button styles */
.mobile-menu-panel a,
.mobile-menu-panel button {
    outline: none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    border: none !important;
}

.mobile-menu-panel a:hover,
.mobile-menu-panel a:focus,
.mobile-menu-panel button:hover,
.mobile-menu-panel button:focus {
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Safe area insets for notched devices (iPhone X+) */
@supports (padding: max(0px)) {
    .mobile-menu-panel {
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
    }
}


/* ============================================
   3. MENU ITEM STYLES
   ============================================ */

/* Menu item bottom border */
.mobile-menu-panel .menu-item {
    border-bottom: 1px solid #e2e8f0 !important;
}

/* Smooth scroll for menu content */
.mobile-menu-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}


/* ============================================
   4. HAMBURGER ANIMATION
   ============================================ */

.hamburger-icon {
    width: 22px;
    height: 16px;
    position: relative;
    cursor: pointer;
}

.hamburger-icon span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
    left: 0;
    transition: all 0.3s ease-in-out;
}

.hamburger-icon span:nth-child(1) {
    top: 0;
}

.hamburger-icon span:nth-child(2) {
    top: 7px;
}

.hamburger-icon span:nth-child(3) {
    top: 14px;
}

/* Active state - X with spin */
.hamburger-icon.active {
    transform: rotate(180deg);
}

.hamburger-icon.active span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}

.hamburger-icon.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.hamburger-icon.active span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
}


/* ============================================
   5. HEADER STYLES (MOBILE)
   ============================================ */

/* Mobile header controls - combined buttons + hamburger */
.mobile-header-controls {
    display: none;
}

@media (max-width: 1199px) {
    .mobile-header-controls {
        display: flex;
        align-items: center;
    }

    /* Hide old separate elements */
    .mobile-header-buttons,
    .navigation-trigger {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .mobile-header-controls {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    /* Mobile header spacing */
    .header-inner-mobile {
        width: 100%;
        position: relative;
        z-index: 50;
    }

    /* Logo sizing */
    .site-branding-mobile img {
        height: 36px;
        width: auto;
        max-width: 180px;
    }

    /* Button touch targets (44px minimum for accessibility) */
    .header-inner-mobile button,
    .header-inner-mobile a[href^="tel"] {
        min-width: 44px;
        min-height: 44px;
    }

    /* Active state feedback */
    .header-inner-mobile button:active,
    .header-inner-mobile a:active {
        transform: scale(0.96);
    }
}

/* Force transparent header on mobile until scrolled */
@media (max-width: 1199px) {
    .site-header:not(.sticky-active) {
        background-color: transparent !important;
    }

    .site-header:not(.sticky-active) .site-branding img {
        content: url('/assets/images/site-logo.png') !important;
    }
}

/* Desktop - hide mobile elements */
@media (min-width: 1024px) {
    .header-inner-mobile {
        display: none !important;
    }

    .header-inner:not(.header-inner-mobile) {
        display: flex !important;
    }
}


/* ============================================
   6. SCROLLBAR CUSTOMIZATION
   ============================================ */

@media (max-width: 1023px) {
    .overflow-y-auto::-webkit-scrollbar {
        width: 6px;
    }

    .overflow-y-auto::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 10px;
    }

    .overflow-y-auto::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
    }

    .overflow-y-auto::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
    }
}


/* ============================================
   7. ACCESSIBILITY
   ============================================ */

/* Alpine.js cloak - hide elements until Alpine initializes */
[x-cloak] {
    display: none !important;
}

/* Focus styles for keyboard navigation */
.mobile-menu-item:focus-visible,
button:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================
   8. PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Smooth height transitions for collapse animations */
.collapse-transition {
    transition: height 0.3s ease-in-out, opacity 0.2s ease-in-out;
}


/* ============================================
   9. PRINT STYLES
   ============================================ */

@media print {
    .header-inner-mobile,
    .mobile-menu-panel,
    [x-data*="mobileMenuOpen"] {
        display: none !important;
    }
}

/* ============================================
   10. MOBILE HEADER CONTROLS STYLING
   ============================================ */

/* Reset all button/link styles in mobile controls */
.mobile-header-controls button,
.mobile-header-controls a {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

/* GET QUOTE button - always cyan */
.mobile-header-controls a:first-child {
    width: auto !important;
    padding: 0 12px !important;
    background-color: #0cb0dd !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
}

.mobile-header-controls a:first-child:hover {
    background-color: #0a9ac4 !important;
}

/* Phone & Hamburger - transparent header (not scrolled) */
.site-header:not(.sticky-active) .mobile-header-controls a:not(:first-child),
.site-header:not(.sticky-active) .mobile-header-controls button {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

.site-header:not(.sticky-active) .mobile-header-controls a:not(:first-child):hover,
.site-header:not(.sticky-active) .mobile-header-controls button:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Phone & Hamburger - sticky header (scrolled or menu open) */
.site-header.sticky-active .mobile-header-controls a:not(:first-child),
.site-header.sticky-active .mobile-header-controls button {
    background-color: white !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f497b !important;
}

.site-header.sticky-active .mobile-header-controls a:not(:first-child):hover,
.site-header.sticky-active .mobile-header-controls button:hover {
    border-color: #0cb0dd !important;
    color: #0cb0dd !important;
}

/* SVG icons */
.mobile-header-controls svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

@media (max-width: 767px) {
    .site-header .site-branding img {
        max-width: 140px !important;
        height: auto !important;
    }
}