/* Responsive Overrides for LUX Worldwide Limousine Clone */

/* =========================================
   Mobile Devices (max-width: 767px)
   ========================================= */
@media (max-width: 767px) {

    /* Fix Container Widths - Use fluid width but respect padding */
    .elementor-section,
    .elementor-container,
    .ast-container {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Header / Contact Bar */
    .lux-contactbar__inner {
        flex-direction: column;
        gap: 10px;
        padding: 10px !important;
    }

    .lux-contacts {
        display: none !important;
        /* Hide phone/email on very small screens if needed, or stack them */
    }

    .lux-socials {
        justify-content: center;
        width: 100%;
    }

    /* Navigation */
    .main-header-bar-navigation {
        display: none;
        /* Default hide, rely on toggle */
    }

    .ast-mobile-menu-buttons {
        display: block !important;
    }

    /* Hero Section Text */
    h1,
    .elementor-heading-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    h2 {
        font-size: 24px !important;
    }

    /* Footer Stacking */
    .site-footer-section {
        flex-direction: column;
        text-align: center;
    }

    .footer-widget-area {
        margin-bottom: 20px;
    }
}

/* =========================================
   Tablet Devices (min-width: 768px) and (max-width: 1024px)
   ========================================= */
/* @media (min-width: 768px) and (max-width: 1024px) { */
/* Adjust Grid Layouts - DISABLED to restore original layout */
/* 
    .elementor-col-33,
    .elementor-col-25 {
        width: 50% !important;
        margin-bottom: 20px;
    } 
    */

/* Header Adjustments */
/*    .lux-contactbar__inner {
        padding: 0 20px;
    }

    .site-title {
        font-size: 24px;
    }
} */

/* =========================================
   General Fixes
   ========================================= */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure no horizontal scroll */
html,
body {
    overflow-x: hidden;
    width: 100%;
}

/* User request: Delete header from mobile and tablet view 
   Action: We deleted the HTML toggle elements. 
   We now Allow #masthead to be visible (or handled by its own CSS)
   instead of forcing display:none. 
*/
/* 
@media (max-width: 1024px) {

    #masthead,
    .ast-mobile-header-wrap,
    #ast-mobile-header,
    .mobile-header-content {
        display: none !important;
    }
}
*/

/* CUSTOM MOBILE HEADER STYLES */
/* Default: Hidden on Desktop */
#custom-mobile-header {
    display: none;
}

/* Mobile/Tablet: Show */
@media (max-width: 1024px) {
    #custom-mobile-header {
        display: block;
        position: relative;
        /* Or fixed if requested */
        background: #000;
        z-index: 9999;
        width: 100%;
        border-bottom: 1px solid #333;
    }

    .custom-mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        height: 70px;
    }

    .custom-mobile-logo img {
        height: 40px;
        width: auto;
    }

    #custom-mobile-toggle {
        background: none;
        border: none;
        cursor: pointer !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: 44px;
        /* Explicit width for touch target */
        height: 44px;
        /* Explicit height */
        padding: 5px;
        z-index: 2147483647 !important;
        /* Maximum safe integer */
        position: relative;
        pointer-events: auto !important;
        /* Ensure clickable */
    }

    #custom-mobile-toggle span {
        display: block;
        width: 30px;
        height: 3px;
        background-color: #E0BA71;
        /* Gold */
        border-radius: 2px;
        pointer-events: none;
        /* Let clicks pass to button */
    }

    /* Navigation Container */
    #custom-mobile-nav {
        display: none;
        position: absolute;
        /* Float above content */
        top: 100%;
        /* Directly below header bar */
        left: 0;
        width: 100%;
        background: #000;
        /* Solid background */
        border-top: 1px solid #333;
        z-index: 2147483640 !important;
        /* High Z-Index to cover hero */
        max-height: 80vh;
        overflow-y: auto;
        /* Scrollable if long */
        padding-bottom: 20px;
    }

    #custom-mobile-nav.active {
        display: block !important;
    }

    .custom-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .custom-menu-list li {
        border-bottom: 1px solid #222;
    }

    .custom-menu-list a {
        display: block;
        padding: 15px 20px;
        color: #fff;
        text-decoration: none;
        font-family: "Poppins", sans-serif;
        font-size: 16px;
    }

    .menu-link-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .submenu-toggle {
        background: none;
        border: none;
        color: #E0BA71;
        font-size: 12px;
        padding: 15px;
        cursor: pointer;
    }

    /* Submenus */
    .custom-submenu {
        background: #222;
        list-style: none;
        padding: 0;
        margin: 0;
        display: none;
        /* Hidden by default */
    }

    .custom-submenu.active {
        display: block;
    }

    .custom-submenu a {
        padding-left: 40px;
        /* Indent */
        font-size: 14px;
        color: #ccc;
    }
}

/* ===========================================
   ENHANCED RESPONSIVE FRAMEWORK
   LUX Worldwide Limousine
   =========================================== */

/* ===========================================
   FLUID TYPOGRAPHY - DISABLED
   Scales smoothly across all screen sizes
   =========================================== */
/* :root {
    --fs-hero: clamp(2rem, 5vw + 1rem, 4rem);
    --fs-h1: clamp(1.75rem, 4vw + 0.5rem, 3rem);
    --fs-h2: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
    --fs-h3: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
    --fs-body: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);
    --fs-small: clamp(0.75rem, 0.8vw + 0.5rem, 0.875rem);

    --space-xs: clamp(0.5rem, 1vw, 1rem);
    --space-sm: clamp(1rem, 2vw, 1.5rem);
    --space-md: clamp(1.5rem, 3vw, 2.5rem);
    --space-lg: clamp(2rem, 4vw, 4rem);
    --space-xl: clamp(3rem, 6vw, 6rem);
} */

/* Apply fluid typography - DISABLED */
/* .elementor-heading-title,
h1.elementor-heading-title {
    font-size: var(--fs-h1) !important;
}

h2.elementor-heading-title {
    font-size: var(--fs-h2) !important;
}

h3.elementor-heading-title {
    font-size: var(--fs-h3) !important;
} */

/* ===========================================
   EXTRA SMALL DEVICES (< 480px)
   Phone Portrait
   =========================================== */
@media (max-width: 479px) {

    /* Even more compact padding */
    .elementor-section,
    .elementor-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Stack all columns */
    .elementor-column {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Smaller button padding */
    .elementor-button {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    /* Footer adjustments */
    .site-footer-section,
    .footer-widget-area {
        padding: 15px !important;
    }

    /* Form field full width */
    .elementor-form .elementor-field-group {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    /* Smaller logos */
    .custom-mobile-logo img,
    .clean-logo img {
        max-height: 40px !important;
    }
}

/* ===========================================
   SMALL DEVICES (480px - 767px)
   Phone Landscape
   =========================================== */
@media (min-width: 480px) and (max-width: 767px) {

    /* Two-column grid for some elements */
    .elementor-column.elementor-col-33 {
        width: 50% !important;
        flex: 0 0 50% !important;
    }

    /* Keep single column for most content */
    .elementor-column.elementor-col-25 {
        width: 50% !important;
        flex: 0 0 50% !important;
    }

    /* Buttons */
    .elementor-button {
        padding: 14px 24px !important;
    }
}

/* ===========================================
   MEDIUM DEVICES (768px - 1024px)
   Tablet
   =========================================== */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Two or three column layouts */
    .elementor-column.elementor-col-33 {
        width: 33.333% !important;
        flex: 0 0 33.333% !important;
    }

    .elementor-column.elementor-col-25 {
        width: 50% !important;
        flex: 0 0 50% !important;
    }

    /* Container padding */
    .elementor-container,
    .ast-container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    /* Section spacing */
    .elementor-section {
        padding-top: var(--space-md) !important;
        padding-bottom: var(--space-md) !important;
    }
}

/* ===========================================
   LARGE DEVICES (1025px - 1279px)
   Small Desktop / Laptop
   =========================================== */
/* @media (min-width: 1025px) and (max-width: 1279px) {

    .elementor-column.elementor-col-25 {
        width: 25% !important;
        flex: 0 0 25% !important;
    }

    .elementor-container,
    .ast-container {
        max-width: 1100px !important;
        margin: 0 auto !important;
    }
} */

/* ===========================================
   EXTRA LARGE DEVICES (1280px+)
   Full Desktop
   =========================================== */
/* @media (min-width: 1280px) {

    .elementor-container,
    .ast-container {
        max-width: 1240px !important;
        margin: 0 auto !important;
    }

    .elementor-section {
        padding-top: var(--space-lg) !important;
        padding-bottom: var(--space-lg) !important;
    }
} */

/* ===========================================
   FLEXIBLE IMAGES & MEDIA
   =========================================== */
img,
picture,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive iframes (maps, videos) */
.elementor-widget-video .elementor-wrapper,
.elementor-widget-google_maps .elementor-widget-container,
iframe {
    max-width: 100%;
}

/* Object-fit for image containers */
.elementor-image img,
.swiper-slide img,
.attachment-full {
    object-fit: cover;
    object-position: center;
}

/* ===========================================
   TOUCH TARGET OPTIMIZATION
   Minimum 44x44px for accessibility
   =========================================== */
@media (max-width: 1024px) {

    a,
    button,
    input[type="submit"],
    input[type="button"],
    .elementor-button,
    .menu-link,
    .nav-link {
        min-height: 44px;
        min-width: 44px;
    }

    /* Bigger form inputs on touch */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px !important;
        /* Prevents iOS zoom */
        min-height: 44px;
        padding: 12px !important;
    }
}

/* ===========================================
   PREVENT HORIZONTAL OVERFLOW
   Critical for mobile experience
   =========================================== */
html,
body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
}

.elementor-section,
.elementor-section-wrap,
.elementor-container,
.elementor-row,
.elementor-column-wrap,
.elementor-widget-wrap {
    max-width: 100% !important;
    overflow-x: hidden;
}

/* ===========================================
   FLEXBOX SAFE ALIGNMENT
   Prevent layout breaking
   =========================================== */
.elementor-row {
    flex-wrap: wrap !important;
}

.elementor-column {
    flex-shrink: 0;
}

/* ===========================================
   IMPROVED SPACING FOR MOBILE
   =========================================== */
@media (max-width: 767px) {

    /* Section gaps */
    .elementor-section+.elementor-section {
        margin-top: var(--space-sm);
    }

    /* Widget spacing */
    .elementor-widget:not(:last-child) {
        margin-bottom: var(--space-sm) !important;
    }

    /* Column gaps when stacked */
    .elementor-column+.elementor-column {
        margin-top: var(--space-sm);
    }
}

/* ===========================================
   FOOTER RESPONSIVE FIXES
   =========================================== */
@media (max-width: 767px) {

    /* Stack footer columns */
    .elementor-504 .e-con {
        flex-direction: column !important;
    }

    /* Center footer content */
    .elementor-504 .elementor-heading-title,
    .elementor-504 .elementor-widget-text-editor {
        text-align: center !important;
    }

    /* Social links centered */
    .lux-socialrow {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
    }
}