/* ========================================
   VIEWPORT FIX - Ensures page fits all screen sizes
   ======================================== */

/* Prevent horizontal overflow */
html {
    overflow-x: hidden;
    width: 100%;
}

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

/* Container responsive width */
.container,
.hero-container {
    max-width: 100%;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Fix nav container fixed padding */
.nav-clean {
    padding-left: 5%;
    padding-right: 5%;
}

.nav-container {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Fix banner padding */
.banner {
    padding-left: 5% !important;
    padding-right: 5% !important;
}

.banner-close {
    right: 5% !important;
}

/* Hero coastal section */
.hero-coastal {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
}

.hero-coastal .container {
    max-width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}

/* Section spacing responsive */
section {
    max-width: 100%;
    overflow-x: hidden;
}

/* Images responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent text overflow */
h1, h2, h3, h4, h5, h6, p {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Desktop (1440px and above) */
@media (min-width: 1440px) {
    .container,
    .hero-container {
        max-width: 1400px;
        padding-left: 80px;
        padding-right: 80px;
    }
    
    .nav-clean {
        padding-left: 80px;
        padding-right: 80px;
    }
}

/* Large Desktop (1920px and above) */
@media (min-width: 1920px) {
    .container,
    .hero-container {
        max-width: 1600px;
        padding-left: 160px;
        padding-right: 160px;
    }
    
    .nav-clean {
        padding-left: 160px;
        padding-right: 160px;
    }
}

/* Laptop (1024px to 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .container,
    .hero-container {
        padding-left: 60px;
        padding-right: 60px;
    }
    
    .nav-clean {
        padding-left: 60px;
        padding-right: 60px;
    }
    
    .hero-coastal-title {
        font-size: 48px !important;
    }
    
    .section-title-main {
        font-size: 36px !important;
    }
}

/* Tablet (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .container,
    .hero-container {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .nav-clean {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .hero-coastal-title {
        font-size: 42px !important;
    }
    
    .hero-coastal-subtitle {
        font-size: 20px !important;
    }
    
    .section-title-main {
        font-size: 32px !important;
    }
    
    .section-subtitle {
        font-size: 16px !important;
    }
}

/* Mobile (below 768px) */
@media (max-width: 767px) {
    .container,
    .hero-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .nav-clean {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .nav-container {
        padding: 20px 16px !important;
    }
    
    .banner {
        padding: 16px 20px !important;
    }
    
    .banner-close {
        right: 20px !important;
    }
    
    /* Typography scaling */
    .hero-coastal-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }
    
    .hero-coastal-subtitle {
        font-size: 18px !important;
    }
    
    .hero-description {
        font-size: 15px !important;
    }
    
    .section-title-main {
        font-size: 28px !important;
    }
    
    .section-subtitle {
        font-size: 14px !important;
    }
    
    .difference-title,
    .diaspora-card-title {
        font-size: 20px !important;
    }
    
    .difference-text,
    .diaspora-card-text {
        font-size: 15px !important;
    }
    
    /* Button responsive */
    .btn-hero-primary,
    .btn-hero-secondary,
    .btn-cta-primary,
    .btn-cta-secondary {
        font-size: 14px !important;
        padding: 12px 16px !important;
    }
    
    /* Grid responsive */
    .difference-grid,
    .diaspora-cards,
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Hero buttons */
    .hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .hero-buttons a,
    .hero-buttons button {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Final CTA buttons */
    .final-cta-buttons {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .final-cta-buttons a,
    .final-cta-buttons button {
        width: 100% !important;
    }
    
    /* Tabs navigation */
    .tabs-navigation {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .tab-button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Small Mobile (below 480px) */
@media (max-width: 479px) {
    .container,
    .hero-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .hero-coastal-title {
        font-size: 28px !important;
    }
    
    .hero-coastal-subtitle {
        font-size: 16px !important;
    }
    
    .section-title-main {
        font-size: 24px !important;
    }
    
    .btn-hero-primary,
    .btn-hero-secondary {
        font-size: 13px !important;
        padding: 10px 14px !important;
    }
    
    /* Cards padding */
    .difference-card,
    .diaspora-card,
    .testimonial-card {
        padding: 20px !important;
    }
}

/* Very Small Devices (below 360px) */
@media (max-width: 359px) {
    .container,
    .hero-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .nav-container {
        padding: 16px 12px !important;
    }
    
    .hero-coastal-title {
        font-size: 24px !important;
    }
    
    .section-title-main {
        font-size: 22px !important;
    }
}

/* Landscape Mobile (small height) */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-coastal {
        min-height: auto !important;
        padding-top: 80px !important;
        padding-bottom: 60px !important;
    }
    
    .section-title-main {
        font-size: 24px !important;
    }
}

/* Fix specific elements that might cause overflow */
.whatsapp-float {
    right: 16px !important;
    bottom: 16px !important;
}

@media (max-width: 479px) {
    .whatsapp-float {
        right: 12px !important;
        bottom: 12px !important;
    }
    
    .whatsapp-btn {
        width: 50px !important;
        height: 50px !important;
    }
}

/* Ensure footer fits */
.footer {
    max-width: 100%;
    overflow-x: hidden;
}

.footer .container {
    padding-left: 5%;
    padding-right: 5%;
}

@media (max-width: 767px) {
    .footer .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Fix nav links on very small screens */
@media (max-width: 359px) {
    .nav-links.desktop-nav {
        gap: 15px !important;
    }
    
    .nav-link {
        font-size: 14px !important;
        padding: 10px 16px !important;
    }
    
    .btn-cta-header {
        font-size: 12px !important;
        padding: 10px 16px !important;
    }
}