/*
Theme Name: Astra Child
Theme URI: https://yourwebsite.com/
Description: Child theme for Astra
Author: Your Name
Author URI: https://yourwebsite.com/
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/*
 * MOBILE HEADER OPTIMIZATION
 * Context: Header template post ID 850
 * Purpose: Fix mobile navigation and sticky header issues
 * Updated: 2025-09-22
 * Conflicts: Overrides Elementor default mobile styles
 */

/* Mobile Header Container Optimization */
@media (max-width: 767px) {
    /* Fix horizontal scrolling and container overflow */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    /* Fix sticky header positioning and prevent overflow */
    .elementor-element-f021389.sticky-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        width: 100% !important;
        max-width: 100vw !important;
        background-color: #fff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        overflow-x: hidden !important;
    }
    
    /* Constrain all Elementor containers within header */
    .elementor-850 .elementor-container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Fix all columns to prevent overflow */
    .elementor-850 .elementor-column {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Specific fixes for header sections */
    .elementor-850 .elementor-section {
        max-width: 100vw !important;
        width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Add body padding to prevent content overlap */
    body.elementor-page {
        padding-top: 80px !important;
    }
    
    /* Mobile Logo Optimization */
    .elementor-850 .elementor-element.elementor-element-34c335d img,
    .elementor-850 .elementor-element.elementor-element-891a6a9 img {
        max-height: 50px !important;
        width: auto !important;
    }
    
    /* Mobile Navigation Toggle */
    .elementor-850 .elementor-element.elementor-element-0c9ea05 .hfe-nav-menu__toggle,
    .elementor-850 .elementor-element.elementor-element-9cbcf48 .hfe-nav-menu__toggle {
        font-size: 24px !important;
        padding: 8px !important;
        background-color: transparent !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        margin-left: auto !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide horizontal menu on mobile and force dropdown */
    .elementor-850 .elementor-element.elementor-element-0c9ea05 .hfe-nav-menu__layout-horizontal,
    .elementor-850 .elementor-element.elementor-element-9cbcf48 .hfe-nav-menu__layout-horizontal {
        display: none !important;
    }
    
    /* Ensure navigation widget doesn't overflow */
    .elementor-850 .elementor-element.elementor-element-0c9ea05,
    .elementor-850 .elementor-element.elementor-element-9cbcf48 {
        max-width: 100% !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }
    
    /* Navigation widget container */
    .elementor-850 .elementor-element.elementor-element-0c9ea05 .elementor-widget-container,
    .elementor-850 .elementor-element.elementor-element-9cbcf48 .elementor-widget-container {
        max-width: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: flex-end !important;
    }
    
    /* Mobile Dropdown Menu */
    .elementor-850 .elementor-element.elementor-element-0c9ea05 nav.hfe-dropdown,
    .elementor-850 .elementor-element.elementor-element-9cbcf48 nav.hfe-dropdown {
        position: fixed !important;
        top: 80px !important;
        left: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        background-color: #fff !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
        z-index: 9998 !important;
    }
    
    /* Mobile Menu Items */
    .elementor-850 .elementor-element.elementor-element-0c9ea05 nav.hfe-dropdown .menu-item a,
    .elementor-850 .elementor-element.elementor-element-9cbcf48 nav.hfe-dropdown .menu-item a {
        padding: 15px 20px !important;
        font-size: 16px !important;
        border-bottom: 1px solid #eee !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* Hide Desktop Elements on Mobile */
    .elementor-850 .elementor-element.elementor-element-36ac118,
    .elementor-850 .elementor-element.elementor-element-7e5768a .elementor-element.elementor-element-c049efe,
    .elementor-850 .elementor-element.elementor-element-69ffdce {
        display: none !important;
    }
    
    /* Mobile Section Adjustments */
    .elementor-850 .elementor-element.elementor-element-4d56924 {
        padding: 10px 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Mobile header layout - Logo and Menu */
    .elementor-850 .elementor-element.elementor-element-946eef3 {
        width: 60% !important;
        flex: 0 0 60% !important;
        max-width: 60% !important;
        display: flex !important;
        align-items: center !important;
        padding-right: 10px !important;
    }
    
    .elementor-850 .elementor-element.elementor-element-2dc4fb9 {
        width: 40% !important;
        flex: 0 0 40% !important;
        max-width: 40% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding-left: 10px !important;
    }
    
    /* Ensure mobile header container flexbox */
    .elementor-850 .elementor-element.elementor-element-4d56924 .elementor-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* Force logo to fit within its container */
    .elementor-850 .elementor-element.elementor-element-946eef3 .elementor-widget-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Force menu to fit within its container */
    .elementor-850 .elementor-element.elementor-element-2dc4fb9 .elementor-widget-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        justify-content: flex-end !important;
        display: flex !important;
    }
    
    /* Mobile Search Button - Hide */
    .elementor-850 .elementor-element.elementor-element-53f0934 {
        display: none !important;
    }
    
    /* Optimize mobile navigation breakpoint */
    .elementor-850 .elementor-element.elementor-element-0c9ea05,
    .elementor-850 .elementor-element.elementor-element-9cbcf48 {
        --hfe-nav-menu-layout: dropdown !important;
    }
}

/* Tablet Optimization */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Sticky header adjustments for tablet */
    .elementor-element-f021389.sticky-header {
        position: fixed !important;
        top: 0 !important;
        z-index: 9999 !important;
        width: 100% !important;
    }
    
    body.elementor-page {
        padding-top: 100px !important;
    }
    
    /* Tablet logo size */
    .elementor-850 .elementor-element.elementor-element-34c335d img,
    .elementor-850 .elementor-element.elementor-element-891a6a9 img {
        max-height: 60px !important;
    }
}

/* Performance Optimization */
@media (max-width: 767px) {
    /* Reduce animations on mobile for better performance */
    .elementor-850 * {
        transition: none !important;
        animation: none !important;
    }
    
    /* Force hardware acceleration for smooth scrolling */
    .elementor-element-f021389.sticky-header {
        transform: translateZ(0) !important;
        will-change: transform !important;
    }
}

/* Accessibility Improvements */
@media (max-width: 767px) {
    /* Ensure touch targets are at least 44px */
    .elementor-850 .hfe-nav-menu__toggle {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .elementor-850 nav.hfe-dropdown .menu-item a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Focus states for keyboard navigation */
    .elementor-850 .hfe-nav-menu__toggle:focus,
    .elementor-850 nav.hfe-dropdown .menu-item a:focus {
        outline: 2px solid #273171 !important;
        outline-offset: 2px !important;
    }
}

/* Auto-hide Header Functionality */
@media (max-width: 767px) {
    .elementor-element-f021389.sticky-header {
        transition: transform 0.3s ease-in-out !important;
    }
    
    .elementor-element-f021389.sticky-header.header-hidden {
        transform: translateY(-100%) !important;
    }
    
    /* Prevent menu from being hidden when open */
    body.mobile-menu-open .elementor-element-f021389.sticky-header.header-hidden {
        transform: translateY(0) !important;
    }
}

/* Mobile Menu Animation Improvements */
@media (max-width: 767px) {
    .elementor-850 nav.hfe-dropdown {
        display: none !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }
    
    .elementor-850 nav.hfe-dropdown.menu-open {
        display: block !important;
        opacity: 1 !important;
    }
    
    /* Submenu styles for mobile */
    .elementor-850 nav.hfe-dropdown .sub-menu {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        background-color: #f8f9fa !important;
        margin-left: 20px !important;
    }
    
    .elementor-850 nav.hfe-dropdown .sub-menu a {
        font-size: 14px !important;
        padding-left: 40px !important;
        color: #666 !important;
    }
    
    /* Active menu item styling */
    .elementor-850 nav.hfe-dropdown .current-menu-item > a,
    .elementor-850 nav.hfe-dropdown .current-menu-ancestor > a {
        background-color: #273171 !important;
        color: #fff !important;
    }
}

/* Mobile Performance Optimizations */
@media (max-width: 767px) {
    /* Critical overflow fix for entire header */
    .elementor-850,
    .elementor-850 * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Prevent any widget from overflowing */
    .elementor-850 .elementor-widget {
        max-width: 100% !important;
        overflow: hidden !important;
        word-wrap: break-word !important;
    }
    
    /* Force all inner elements to respect container width */
    .elementor-850 .elementor-widget-wrap {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Reduce repaints and reflows */
    .elementor-850 .elementor-container {
        contain: layout style !important;
    }
    
    /* Optimize images */
    .elementor-850 img {
        content-visibility: auto !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Reduce complexity for mobile */
    .elementor-850 .elementor-background-overlay {
        display: none !important;
    }
    
    /* Emergency fix for any remaining horizontal scroll */
    .elementor-850 .elementor-element.elementor-element-4d56924 {
        min-width: 0 !important;
        width: 100% !important;
    }
    
    .elementor-850 .elementor-element.elementor-element-4d56924 .elementor-container {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* RTL Support */
@media (max-width: 767px) {
    .rtl .elementor-850 .hfe-nav-menu__toggle {
        margin-right: auto !important;
        margin-left: 0 !important;
    }
    
    .rtl .elementor-850 nav.hfe-dropdown .sub-menu {
        margin-right: 20px !important;
        margin-left: 0 !important;
    }
    
    .rtl .elementor-850 nav.hfe-dropdown .sub-menu a {
        padding-right: 40px !important;
        padding-left: 20px !important;
    }
}