/* ============================================
   RESPONSIVE LAYOUT FIXES FOR TATILPRO THEME
   Addresses horizontal scrolling at 1366px and 1920px
   ============================================ */

/* ============================================
   1. GLOBAL OVERFLOW PREVENTION
   ============================================ */

html {
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
}

* {
    box-sizing: border-box;
}

/* Prevent any element from exceeding viewport width */
* {
    max-width: 100%;
}

/* Allow specific elements to be full width */
html, body, .full-width-allowed {
    max-width: none;
}

/* ============================================
   2. CONTAINER RESPONSIVE WIDTHS
   ============================================ */

/* Tailwind's container class responsive adjustments */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

/* Specific fix for 1366px resolution */
@media (min-width: 1366px) {
    .container {
        max-width: 1320px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1480px;
    }
}

/* Specific fix for 1920px resolution */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
}

/* ============================================
   3. MEGA MENU FIXES
   ============================================ */

/* Fix mega menu overflow issue */
[x-show] {
    max-width: 100vw;
}

/* Mega menu container fix */
.absolute.top-full.left-0.right-0 {
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden;
}

/* Ensure mega menu content stays within bounds */
.absolute.top-full .container {
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================================
   4. GRID LAYOUT FIXES
   ============================================ */

/* Ensure grid layouts don't overflow */
.grid {
    max-width: 100%;
    overflow-x: hidden;
}

/* Responsive grid adjustments for 1366px */
@media (min-width: 1366px) and (max-width: 1535px) {
    .grid-cols-12 {
        gap: 1.5rem;
    }
    
    /* Adjust mega menu grid for better fit */
    .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

/* Responsive grid adjustments for 1920px */
@media (min-width: 1920px) {
    .grid-cols-12 {
        gap: 2rem;
    }
    
    .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }
}

/* ============================================
   5. FLEXBOX LAYOUT FIXES
   ============================================ */

/* Ensure flex containers don't overflow */
.flex {
    max-width: 100%;
}

/* Prevent flex items from causing overflow */
.flex > * {
    min-width: 0;
    flex-shrink: 1;
}

/* ============================================
   6. IMAGE AND MEDIA FIXES
   ============================================ */

/* Ensure all images are responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Background images should not cause overflow */
.bg-cover,
.bg-contain {
    background-size: cover;
    background-position: center;
}

/* ============================================
   7. HERO SECTION FIXES
   ============================================ */

/* Ensure hero section doesn't overflow */
.relative.h-\[500px\] {
    max-width: 100vw;
    overflow: hidden;
}

/* Hero section responsive adjustments */
@media (min-width: 1366px) and (max-width: 1535px) {
    .relative.h-\[500px\] .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1920px) {
    .relative.h-\[500px\] .container {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* ============================================
   8. SECTION SPACING FIXES
   ============================================ */

/* Ensure sections have proper spacing without overflow */
section {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Adjust section padding for different resolutions */
@media (min-width: 1366px) and (max-width: 1535px) {
    section .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1920px) {
    section .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ============================================
   9. CARD AND LISTING FIXES
   ============================================ */

/* Ensure card grids are responsive */
.grid.gap-4,
.grid.gap-6,
.grid.gap-8 {
    max-width: 100%;
}

/* Responsive card layouts */
@media (min-width: 1366px) and (max-width: 1535px) {
    /* 3-column layouts */
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
    
    /* 4-column layouts */
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

@media (min-width: 1920px) {
    /* 3-column layouts */
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }
    
    /* 4-column layouts */
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

/* ============================================
   10. HEADER AND NAVIGATION FIXES
   ============================================ */

/* Ensure header doesn't overflow */
header {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Navigation responsive adjustments */
nav {
    max-width: 100%;
}

/* ============================================
   11. FOOTER FIXES
   ============================================ */

/* Ensure footer doesn't overflow */
footer {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ============================================
   12. FORM AND INPUT FIXES
   ============================================ */

/* Ensure forms don't overflow */
form {
    max-width: 100%;
}

/* Input fields responsive */
input,
select,
textarea {
    max-width: 100%;
}

/* ============================================
   13. MOBILE RESPONSIVE FIXES
   ============================================ */

@media (max-width: 767px) {
    /* Reduce container padding on mobile */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Stack grid layouts on mobile */
    .grid {
        grid-template-columns: 1fr;
    }
    
    /* Adjust hero section height on mobile */
    .relative.h-\[500px\] {
        height: 400px;
    }
}

/* ============================================
   14. TABLET RESPONSIVE FIXES
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Adjust container padding on tablet */
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    /* 2-column layouts on tablet */
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3,
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================
   15. UTILITY CLASSES
   ============================================ */

/* Prevent overflow utility */
.no-overflow {
    overflow: hidden;
    max-width: 100%;
}

/* Full width within container */
.full-width-container {
    width: 100%;
    max-width: 100%;
}

/* Responsive padding utilities */
.responsive-px {
    padding-left: clamp(1rem, 2vw, 2rem);
    padding-right: clamp(1rem, 2vw, 2rem);
}

.responsive-py {
    padding-top: clamp(1rem, 2vw, 2rem);
    padding-bottom: clamp(1rem, 2vw, 2rem);
}

/* ============================================
   16. SPECIFIC COMPONENT FIXES
   ============================================ */

/* Campaign listings */
.campaigns-section {
    max-width: 100%;
    overflow-x: hidden;
}

/* Promotional banners */
.promo-banner {
    max-width: 100%;
    overflow: hidden;
}

.promo-banner img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Featured sections */
.featured-hotels,
.featured-villas,
.featured-yachts,
.featured-bungalows {
    max-width: 100%;
    overflow-x: hidden;
}

/* Blog section */
.blog-section {
    max-width: 100%;
    overflow-x: hidden;
}

/* Mobile app banner */
.mobile-app-banner {
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================================
   17. PRINT STYLES
   ============================================ */

@media print {
    html, body {
        overflow: visible;
        max-width: none;
    }
}


/* ============================================
   18. MEGA MENU SPECIFIC FIXES - REQUIREMENT 25
   ============================================ */

/* Mega menu container positioning fix - Enhanced to prevent viewport overflow */
.mega-menu-container {
    position: absolute;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    /* Calculate proper centering relative to parent */
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure mega menu content is centered and constrained */
.mega-menu-container > .container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1320px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

/* Prevent grid overflow within mega menu */
.mega-menu-container .grid {
    max-width: 100%;
    overflow: hidden;
}

/* Constrain columns to prevent overflow */
.mega-menu-container .col-span-9,
.mega-menu-container .col-span-3 {
    max-width: 100%;
    overflow: hidden;
}

/* Responsive container widths for mega menu */
@media (min-width: 1024px) {
    .mega-menu-container > .container {
        max-width: 1280px;
    }
}

@media (min-width: 1280px) {
    .mega-menu-container > .container {
        max-width: 1320px;
    }
}

@media (min-width: 1536px) {
    .mega-menu-container > .container {
        max-width: 1440px;
    }
}

@media (min-width: 1920px) {
    .mega-menu-container > .container {
        max-width: 1600px;
    }
}

/* Mega menu grid adjustments for better spacing */
@media (min-width: 1366px) and (max-width: 1535px) {
    .mega-menu-container .grid-cols-12 {
        gap: 1.5rem;
    }
    
    .mega-menu-container .col-span-9 .grid-cols-3 {
        gap: 1.25rem;
    }
}

@media (min-width: 1920px) {
    .mega-menu-container .grid-cols-12 {
        gap: 2rem;
    }
    
    .mega-menu-container .col-span-9 .grid-cols-3 {
        gap: 1.75rem;
    }
}

/* Mega menu text adjustments to prevent overflow */
.mega-menu-container a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mega-menu-container h3,
.mega-menu-container h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ensure header positioning doesn't interfere with mega menu */
header {
    position: relative;
    overflow: visible;
}

header nav {
    position: relative;
}

header nav > div {
    position: relative;
}

/* Additional safeguard: prevent any absolute positioned element in header from causing overflow */
header .absolute {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Fix for mega menu on smaller desktop screens (1366px) */
@media (min-width: 1366px) and (max-width: 1535px) {
    .mega-menu-container {
        /* Ensure proper centering on 1366px screens */
        margin-left: calc(-50vw + 50%) !important;
    }
    
    .mega-menu-container > .container {
        max-width: 1280px;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    
    /* Reduce spacing in mega menu columns for better fit */
    .mega-menu-container .space-y-5 {
        gap: 1rem;
    }
    
    .mega-menu-container .space-y-3 {
        gap: 0.625rem;
    }
}

/* Fix for mega menu on large desktop screens (1920px+) */
@media (min-width: 1920px) {
    .mega-menu-container {
        /* Ensure proper centering on 1920px+ screens */
        margin-left: calc(-50vw + 50%) !important;
    }
    
    .mega-menu-container > .container {
        max-width: 1600px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}