/* ============================================
   MOBILE RESPONSIVENESS FIXES
   Fixes text hiding/overflow on iPhone & Android
   ============================================ */

/* CRITICAL: Prevent text from being cut off or hidden */
* {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

/* Ensure all text containers allow proper wrapping */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
a,
li {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* Fix for long words that don't break */
.hero-title,
.section-title,
.card-title,
.feature-title {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
}

/* Prevent horizontal overflow */
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Fix container overflow */
.container,
.container-fluid,
.section,
.row {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ===== MOBILE SPECIFIC FIXES ===== */

@media (max-width: 768px) {

    /* Reduce font sizes for better fit */
    h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }

    h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    h3 {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }

    h4 {
        font-size: 18px !important;
    }

    h5 {
        font-size: 16px !important;
    }

    p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* Fix navigation */
    .marketing-nav {
        padding: 12px 0 !important;
    }

    .nav-links {
        font-size: 14px !important;
    }

    /* Fix hero section */
    .hero-section {
        padding: 40px 20px !important;
        min-height: auto !important;
    }

    .hero-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }

    .hero-subtitle {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    /* Fix buttons */
    .btn {
        font-size: 14px !important;
        padding: 12px 24px !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    .btn-lg {
        font-size: 16px !important;
        padding: 14px 28px !important;
    }

    /* Fix cards */
    .card,
    .glass-card,
    .pricing-card {
        padding: 20px !important;
        margin-bottom: 20px !important;
    }

    /* Fix grid layouts */
    .testimonials-grid,
    .features-grid,
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Fix stats/numbers */
    .stat-number,
    .counter {
        font-size: 36px !important;
    }

    /* Fix lists */
    ul,
    ol {
        padding-left: 20px !important;
    }

    li {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    /* Fix tables */
    table {
        font-size: 12px !important;
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    /* Fix images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Fix spacing */
    .section {
        padding: 40px 20px !important;
    }

    .container {
        padding: 0 16px !important;
    }
}

/* ===== EXTRA SMALL MOBILE (iPhone SE, small Android) ===== */

@media (max-width: 480px) {

    /* Even smaller fonts for tiny screens */
    h1 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

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

    h3 {
        font-size: 18px !important;
    }

    h4,
    h5,
    h6 {
        font-size: 16px !important;
    }

    p,
    li,
    span {
        font-size: 14px !important;
    }

    /* Full width buttons */
    .btn {
        width: 100% !important;
        margin-bottom: 12px !important;
        padding: 14px 20px !important;
    }

    /* Tighter spacing */
    .section {
        padding: 32px 16px !important;
    }

    .container {
        padding: 0 12px !important;
    }

    .card {
        padding: 16px !important;
    }

    /* Fix hero */
    .hero-title {
        font-size: 24px !important;
    }

    .hero-subtitle {
        font-size: 14px !important;
    }

    /* Fix navigation logo */
    .nav-logo img {
        height: 40px !important;
    }

    .nav-logo span {
        font-size: 16px !important;
    }
}

/* ===== FIX SPECIFIC COMMON ISSUES ===== */

/* Fix long email addresses */
a[href^="mailto:"] {
    word-break: break-all !important;
    font-size: 14px !important;
}

/* Fix long phone numbers */
a[href^="tel:"] {
    white-space: nowrap !important;
    font-size: 14px !important;
}

/* Fix long URLs */
a[href^="http"] {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}

/* Fix pricing amounts */
.price,
.pricing-amount {
    font-size: 32px !important;
}

@media (max-width: 480px) {

    .price,
    .pricing-amount {
        font-size: 24px !important;
    }
}

/* Fix feature lists */
.feature-list li {
    padding-left: 8px !important;
    margin-bottom: 12px !important;
}

/* Fix testimonial cards */
.testimonial-card {
    padding: 20px !important;
}

@media (max-width: 480px) {
    .testimonial-card {
        padding: 16px !important;
    }
}

/* Fix FAQ sections */
.faq-question {
    font-size: 16px !important;
    padding: 16px !important;
}

@media (max-width: 480px) {
    .faq-question {
        font-size: 14px !important;
        padding: 12px !important;
    }
}

/* Fix footer */
.marketing-footer {
    padding: 32px 20px !important;
    font-size: 14px !important;
}

@media (max-width: 480px) {
    .marketing-footer {
        padding: 24px 16px !important;
        font-size: 12px !important;
    }
}

/* ===== FIX FLEXBOX OVERFLOW ===== */

.flex-container,
.d-flex,
[style*="display: flex"] {
    flex-wrap: wrap !important;
}

/* ===== FIX GRID OVERFLOW ===== */

@media (max-width: 768px) {

    [style*="display: grid"],
    .grid-container {
        grid-template-columns: 1fr !important;
    }
}

/* ===== FIX ABSOLUTE/FIXED POSITIONING ===== */

@media (max-width: 768px) {

    [style*="position: absolute"],
    [style*="position: fixed"] {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    /* Except for navigation and modals */
    .marketing-nav,
    .mobile-menu,
    .modal,
    .whatsapp-float {
        position: fixed !important;
    }
}

/* ===== FIX INLINE STYLES THAT CAUSE OVERFLOW ===== */

@media (max-width: 768px) {
    [style*="width:"] {
        max-width: 100% !important;
    }

    [style*="min-width:"] {
        min-width: auto !important;
    }
}

/* ===== SAFE AREA FOR NOTCHED DEVICES (iPhone X+) ===== */

@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left)) !important;
        padding-right: max(0px, env(safe-area-inset-right)) !important;
    }

    .marketing-nav {
        padding-left: max(20px, env(safe-area-inset-left)) !important;
        padding-right: max(20px, env(safe-area-inset-right)) !important;
    }
}

/* ===== FIX VIEWPORT UNITS ===== */

/* Fix 100vh on mobile (address bar issue) */
.full-height,
[style*="100vh"] {
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
}

html {
    height: -webkit-fill-available;
}

/* ===== FIX TEXT SELECTION ===== */

::selection {
    background: rgba(255, 0, 0, 0.3);
    color: white;
}

::-moz-selection {
    background: rgba(255, 0, 0, 0.3);
    color: white;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Larger tap targets for mobile */
@media (max-width: 768px) {

    a,
    button,
    input,
    select,
    textarea {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Except for inline links */
    p a,
    li a {
        min-height: auto !important;
        min-width: auto !important;
    }
}

/* ===== FIX COMMON MARKETING PAGE ELEMENTS ===== */

/* Fix CTA sections */
.cta-section {
    padding: 40px 20px !important;
}

@media (max-width: 480px) {
    .cta-section {
        padding: 32px 16px !important;
    }
}

/* Fix badge/tag overflow */
.badge,
.tag {
    font-size: 12px !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
}

/* Fix icon + text combinations */
.icon-text {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Reduce animations on mobile for better performance */
@media (max-width: 768px) {
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.2s !important;
    }

    /* Disable expensive effects */
    .parallax,
    [data-parallax] {
        transform: none !important;
    }
}

/* ===== DEBUG MODE (Remove in production) ===== */

/* Uncomment to see overflow issues */
/*
@media (max-width: 768px) {
    * {
        outline: 1px solid rgba(255, 0, 0, 0.2) !important;
    }
    
    *:hover {
        outline: 2px solid rgba(255, 0, 0, 0.5) !important;
    }
}
*/