/* ============================================================================
   TEXT OVERFLOW & VIEWPORT FIX - UNIVERSAL FIX FOR ALL PAGES
   ============================================================================
   This file prevents text cutoff and ensures proper mobile viewport handling
   across all pages. Include this after all other CSS files.
   ============================================================================ */

/* Prevent horizontal scrolling on all devices */
html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

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

/* Ensure all containers are responsive */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Fix for text overflow - ensure word wrapping on all elements */
p, h1, h2, h3, h4, h5, h6, span, div, a, button, label {
    word-wrap: break-word;
    -webkit-word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

/* Ensure containers don't overflow viewport */
.container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

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

/* Images and media don't overflow */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Fix for tables on mobile */
table {
    width: 100%;
    table-layout: auto;
}

/* Ensure form elements are mobile-friendly */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    width: 100%;
    max-width: 100%;
    font-size: 16px; /* Prevents iOS auto-zoom */
}

/* Mobile viewport optimizations */
@media (max-width: 768px) {
    /* Extra padding removed on small screens */
    body {
        font-size: 14px;
    }

    /* Container adjustments */
    .container {
        padding: 0 12px;
        margin: 0 auto;
    }

    /* Header adjustments */
    h1 {
        font-size: clamp(1.25rem, 5vw, 2rem);
        line-height: 1.3;
    }

    h2 {
        font-size: clamp(1.1rem, 4vw, 1.75rem);
        line-height: 1.3;
    }

    h3 {
        font-size: clamp(1rem, 3vw, 1.5rem);
        line-height: 1.3;
    }

    /* Ensure proper text wrapping */
    p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Remove fixed widths that cause overflow */
    [style*="width: 100vw"],
    [style*="width: 100%"] {
        width: 100% !important;
        overflow-x: hidden;
    }

    /* Fix for elements with fixed width */
    div[style*="width:"],
    section[style*="width:"],
    article[style*="width:"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 576px) {
    /* Extra small device optimization */
    body {
        font-size: 13px;
    }

    .container {
        padding: 0 10px;
    }

    h1 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    h2 {
        font-size: 18px;
    }

    h3 {
        font-size: 16px;
    }

    p {
        font-size: 13px;
    }

    /* Ensure no horizontal scrolling */
    html, body, section, .container {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Text elements word wrapping */
    p, h1, h2, h3, h4, h5, h6 {
        word-break: break-word;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Button mobile optimization */
    button, .btn, input[type="button"], input[type="submit"] {
        width: 100%;
        min-height: 44px;
        padding: 12px 16px;
    }

    /* Form field mobile optimization */
    input, textarea, select {
        width: 100%;
        min-height: 44px;
        padding: 12px 10px;
        font-size: 16px;
    }

    /* Fix navigation overflow */
    nav {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .nav-item, .nav-link {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 375px) {
    /* Ultra-small devices */
    .container {
        padding: 0 8px;
    }

    body {
        font-size: 12px;
    }

    h1 {
        font-size: 18px;
    }

    h2 {
        font-size: 16px;
    }

    h3 {
        font-size: 14px;
    }

    p {
        font-size: 12px;
    }

    input, textarea, select {
        font-size: 16px;
    }
}

/* Safe area support for notch devices (iPhone X+) */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    .navbar {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    .container {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

/* Fix for elements that might have inline width styles */
[style*="min-width:"] {
    min-width: auto !important;
}

/* Prevent margin collapse issues */
.container, section, article {
    margin-left: auto;
    margin-right: auto;
}

/* Ensure proper scrolling behavior */
html {
    scroll-behavior: smooth;
}

/* Fix for landscape orientation */
@media (max-height: 600px) and (landscape) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    .container {
        padding: 0 10px;
    }

    h1, h2 {
        margin: 8px 0 4px 0;
    }

    p {
        margin: 4px 0;
    }
}

/* Print media - prevent issues */
@media print {
    * {
        background: transparent !important;
        box-shadow: none !important;
    }

    .no-print {
        display: none !important;
    }

    html, body {
        overflow: visible;
        width: 100%;
    }
}

/* Accessibility and visibility */
body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Fix for touch devices */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
}

/* Ensure font doesn't zoom on focus (iOS) */
input, textarea, select {
    font-size: 16px !important;
}

@media (min-width: 768px) {
    input, textarea, select {
        font-size: 14px !important;
    }
}

/* Fix for modal/dialog text overflow */
.modal, .dialog, .modal-content, .dialog-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure lists don't cause overflow */
ul, ol {
    padding-left: 20px;
    margin: 0;
}

li {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Fix for blockquotes */
blockquote {
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 0;
    padding: 12px 16px;
}

/* Absolutely positioned elements that might cause problems */
[style*="position: absolute"],
[style*="position:absolute"] {
    z-index: auto;
}

/* Fix dropdown menus on mobile */
.dropdown-menu {
    max-width: 100%;
    width: auto;
}

/* Prevent zoom on double tap */
input, button, textarea, select {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Smooth transitions */
* {
    -webkit-transition: background-color 0.3s ease, color 0.3s ease;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Final catchall - ensure nothing overflows */
*:not(svg) {
    max-width: 100%;
}

/* Support for orientation change */
@media (orientation: portrait) {
    html, body {
        width: 100%;
        max-width: 100%;
    }
}

@media (orientation: landscape) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .container {
        padding: 0 10px;
    }
}