/* =================================================================
   GLOBAL RESPONSIVE CSS - WM ELEVATORS
   Ensures perfect responsiveness on all devices
   Target: All screen sizes from 320px to 2560px+
================================================================= */

/* =================================================================
   1. BASE RESET & OVERFLOW PROTECTION
================================================================= */
* {
    box-sizing: border-box;
}

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

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

img,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

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

/* =================================================================
   2. CONTAINER & GRID SYSTEM
================================================================= */
.container,
.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

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

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

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

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

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

/* Row overflow fix */
.row {
    margin-right: -15px;
    margin-left: -15px;
    display: flex;
    flex-wrap: wrap;
}

.row > * {
    padding-right: 15px;
    padding-left: 15px;
}

/* =================================================================
   3. MOBILE FIRST - EXTRA SMALL DEVICES (< 576px)
================================================================= */
@media (max-width: 575.98px) {
    /* Typography */
    h1, .h1 { font-size: 1.75rem !important; }
    h2, .h2 { font-size: 1.5rem !important; }
    h3, .h3 { font-size: 1.25rem !important; }
    h4, .h4 { font-size: 1.1rem !important; }
    h5, .h5 { font-size: 1rem !important; }
    h6, .h6 { font-size: 0.9rem !important; }

    /* Sections */
    section {
        padding: 40px 0 !important;
    }

    /* Buttons */
    .btn {
        padding: 10px 20px !important;
        font-size: 0.875rem !important;
    }

    /* Cards */
    .card {
        margin-bottom: 1rem;
    }

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

    .brand-logo-card {
        width: min(240px, 70vw) !important; /* Fixed reasonable width for mobile */
        min-height: 120px;
        height: auto; /* Allow card to grow with content */
        overflow: hidden; /* Prevent logos from overflowing */
        padding: clamp(12px, 2.5vw, 20px) !important;
    }

    .brand-logo-card .brand-logo-image {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important; /* Constrain to card width */
        max-height: 140px !important; /* Reasonable max height for mobile */
        object-fit: contain;
        object-position: center;
    }

    /* Forms */
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }

    /* Tables */
    table {
        font-size: 0.8rem;
    }

    /* Container padding */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* =================================================================
   4. SMALL DEVICES (576px - 767px)
================================================================= */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Typography */
    h1, .h1 { font-size: 2rem !important; }
    h2, .h2 { font-size: 1.75rem !important; }

    /* Sections */
    section {
        padding: 50px 0 !important;
    }

    /* Grid */
    .col-sm-6 {
        width: 50%;
    }
}

/* =================================================================
   5. MEDIUM DEVICES / TABLETS (768px - 991px)
================================================================= */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Sections */
    section {
        padding: 60px 0 !important;
    }

    /* Navigation */
    .navbar-collapse {
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
}

/* =================================================================
   6. LARGE DEVICES / DESKTOPS (992px - 1199px)
================================================================= */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Container */
    .container {
        max-width: 960px;
    }
}

/* =================================================================
   7. EXTRA LARGE DEVICES (1200px - 1399px)
================================================================= */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .container {
        max-width: 1140px;
    }
}

/* =================================================================
   8. XXLARGE DEVICES (≥ 1400px)
================================================================= */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* =================================================================
   9. VERY LARGE SCREENS (≥ 1920px)
================================================================= */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
}

/* =================================================================
   10. MOBILE NAVIGATION FIX
================================================================= */
@media (max-width: 991.98px) {
    /* Navbar */
    .navbar-collapse {
        background-color: var(--wm-white);
        padding: 20px;
        border-radius: 8px;
        margin-top: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    [data-theme="dark"] .navbar-collapse {
        background-color: var(--dm-surface);
    }

    /* Mobile menu items */
    .nav-item {
        margin-bottom: 10px;
    }

    .nav-link {
        padding: 10px 15px !important;
        font-size: 1rem;
    }

    /* Dropdown */
    .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0;
        border: none;
        box-shadow: none;
        padding-left: 20px;
    }
}

/* =================================================================
   11. HERO SECTIONS RESPONSIVENESS
================================================================= */
@media (max-width: 767.98px) {
    #hero-new,
    .hero-section {
        min-height: 500px !important;
        height: auto !important;
        padding: 60px 20px !important;
    }

    .hero-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }
}

/* =================================================================
   12. CARD GRID RESPONSIVENESS
================================================================= */
@media (max-width: 575.98px) {
    .row-cols-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .row-cols-sm-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .row-cols-md-2 > *,
    .row-cols-md-3 > * {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 992px) {
    .row-cols-lg-3 > * {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .row-cols-lg-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }
}

/* =================================================================
   13. TABLES RESPONSIVENESS
================================================================= */
@media (max-width: 767.98px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }
}

/* =================================================================
   14. FORMS RESPONSIVENESS
================================================================= */
@media (max-width: 575.98px) {
    .form-group,
    .mb-3 {
        margin-bottom: 1rem;
    }

    label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .form-control {
        padding: 10px 12px;
        font-size: 16px; /* Prevent zoom on mobile */
    }

    .btn-block {
        width: 100%;
        display: block;
    }
}

/* =================================================================
   15. MODALS RESPONSIVENESS
================================================================= */
@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .modal-content {
        border-radius: 12px;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 15px;
    }
}

/* =================================================================
   16. SWIPER / CAROUSEL RESPONSIVENESS
================================================================= */
@media (max-width: 767.98px) {
    .swiper {
        padding: 0 10px;
    }

    .swiper-button-prev,
    .swiper-button-next {
        width: 35px !important;
        height: 35px !important;
        font-size: 1rem !important;
    }

    .swiper-pagination {
        bottom: 10px !important;
    }
}

/* =================================================================
   17. LANDSCAPE MODE ON MOBILE
================================================================= */
@media (max-width: 767.98px) and (orientation: landscape) {
    section {
        padding: 30px 0 !important;
    }

    #hero-new,
    .hero-section {
        min-height: 400px !important;
        padding: 40px 20px !important;
    }
}

/* =================================================================
   18. VERY SMALL SCREENS (320px - 359px) - Galaxy Fold, iPhone SE
================================================================= */
@media (max-width: 359.98px) {
    body {
        font-size: 14px;
    }

    h1, .h1 { font-size: 1.5rem !important; }
    h2, .h2 { font-size: 1.25rem !important; }
    h3, .h3 { font-size: 1.1rem !important; }

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .btn {
        padding: 8px 15px !important;
        font-size: 0.8rem !important;
    }

    section {
        padding: 30px 0 !important;
    }
}

/* =================================================================
   19. PRINT STYLES
================================================================= */
@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    .navbar,
    .footer,
    .btn,
    button {
        display: none !important;
    }
}

/* =================================================================
   20. ACCESSIBILITY IMPROVEMENTS
================================================================= */

/* Skip to content link */
.skip-to-content {
    position: absolute;
    left: -9999px;
    z-index: 9999;
    padding: 10px;
    background-color: var(--wm-red);
    color: white;
    text-decoration: none;
}

.skip-to-content:focus {
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
}

/* =================================================================
   21. PERFORMANCE OPTIMIZATIONS
================================================================= */
/* Hardware acceleration */
.card,
.btn,
img,
.swiper-slide {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =================================================================
   22. DARK MODE RESPONSIVE FIXES
================================================================= */
@media (max-width: 767.98px) {
    [data-theme="dark"] {
        background-color: var(--dm-bg);
    }

    [data-theme="dark"] .card,
    [data-theme="dark"] .modal-content,
    [data-theme="dark"] .navbar-collapse {
        background-color: var(--dm-surface);
        border-color: var(--dm-border);
    }
}

/* =================================================================
   23. TOUCH DEVICE OPTIMIZATIONS
================================================================= */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn,
    a,
    button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch */
    .btn:hover,
    a:hover {
        transform: none !important;
    }

    /* Faster transitions */
    * {
        transition-duration: 0.2s !important;
    }
}

/* =================================================================
   24. SAFARI iOS FIXES
================================================================= */
/* Fix for iOS Safari bottom bar */
@supports (-webkit-touch-callout: none) {
    .vh-100 {
        height: -webkit-fill-available !important;
    }
}

/* Prevent text size adjustment */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* =================================================================
   25. ULTRA WIDE SCREENS (≥ 2560px)
================================================================= */
@media (min-width: 2560px) {
    .container {
        max-width: 2000px;
    }

    body {
        font-size: 18px;
    }
}