/* 
 * responsive.css
 * Mobile-first responsive overrides for custom BEM classes.
 * Relies on Bootstrap Grid v4 for layout wherever possible.
 */

/* ==========================================================================
   Base Responsive Resets
   ========================================================================== */
img, video {
    max-width: 100%;
    height: auto;
}

table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block; /* Native responsive table fallback */
}

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Base body responsiveness */
body {
    overflow-x: hidden;
}

.main {
    overflow: hidden; /* prevent horizontal scroll on inner containers */
}

/* Text Wrapping */
p, h1, h2, h3, h4, h5, h6, span, div, a {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ==========================================================================
   Mobile Menu / Header (Up to Tablet)
   ========================================================================== */

@media (max-width: 991px) {
    /* Header layout adjustments for mobile */
    .header__nav {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background: #1C1F2D; /* Matching theme color from meta tag */
        padding: 20px;
        z-index: 1000;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .header__nav.active {
        display: flex;
    }

    .header__nav-item {
        margin-bottom: 15px;
    }

    /* Hamburger Icon */
    .mobile-menu-toggle {
        display: block !important;
        cursor: pointer;
        padding: 10px;
        color: white; /* Or matching text color */
        font-size: 24px;
        background: transparent;
        border: none;
    }
    
    .quotex-logo {
        background-image: url("../img/quotex_logo-white-mobile.svg") !important;
        width: 40px !important;
    }
    
    .header__container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        position: relative;
    }
}

@media (min-width: 992px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}


/* ==========================================================================
   Home Page Custom Blocks (Mobile First approach applied via max-width limits)
   ========================================================================== */

/* Hero Section */
@media (max-width: 767px) {
    .main__platform-title {
        font-size: 2rem !important; /* Scale down hero text */
        line-height: 1.2;
    }
    .main__platform-subtitle {
        font-size: 1rem !important;
    }
    
    .main__platform-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .main__platform-button {
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }
}

/* Capital Section */
.main__capital-container {
    padding: 40px 15px;
}

.main__capital-item__icon {
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .main__capital {
        overflow: hidden; /* Prevent background bleeding */
        max-width: 100vw;
        box-sizing: border-box;
    }
    .main__capital > * {
        min-width: 0; /* Prevent CSS Grid blowout */
    }
    .main__capital-title {
        font-size: 32px !important;
        margin-bottom: 16px;
    }
    .main__capital-subtitle {
        font-size: 18px !important;
        margin-bottom: 24px;
    }
    .main__capital-buttons {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .main__capital-demo {
        margin-left: 0 !important;
        margin-top: 16px;
    }
    .main__capital .icon__chart {
        max-width: 100% !important;
        background-size: contain !important;
        background-position: left center !important;
    }
    .main__capital-items {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 680px) {
    .main__capital-item__icon {
        padding: 8px !important;
    }
    .main__capital-item__icon svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ==========================================================================
   About Page overrides
   ========================================================================== */

@media (max-width: 575px) {
    .about_us__innovation-button {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .about_us__innovation-real,
    .about_us__innovation-demo {
        width: 100%;
    }
}

/* ==========================================================================
   Forms & Contact Page
   ========================================================================== */
.contact__form input,
.contact__form textarea,
.contact__form select,
.contact__container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.contact__submit {
    width: 100%;
}

@media (min-width: 768px) {
    .contact__form {
        max-width: 600px;
        margin: 0 auto;
    }
    .contact__submit {
        width: auto;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

@media (max-width: 767px) {
    .footer__block, .footer__container {
        flex-direction: column;
    }
    .footer__links, .footer__social {
        flex-direction: column;
        margin-top: 20px;
    }
    .footer__links a, .footer__links nav {
        margin-bottom: 10px;
        width: 100%;
    }
}

/* ==========================================================================
   Modals
   ========================================================================== */
.modal-content, .modal-dialog, .modal__dialog {
    max-width: 95vw !important;
    margin: 1.75rem auto;
    overflow-y: auto;
    max-height: 90vh;
}

@media (max-width: 575px) {
    .modal-dialog, .modal__dialog {
        margin: .5rem auto;
        max-width: 100vw !important;
    }
}

/* ==========================================================================
   Blog Layout overrides
   ========================================================================== */
@media (max-width: 991px) {
    .blog-container {
        flex-direction: column;
    }
    .blog-sidebar {
        width: 100%;
        margin-top: 30px;
    }
    .blog-content {
        width: 100%;
    }
}