/**
 * Theme Name: Bigmedix Child
 * Description: Mayfair Wellness Clinic - Child Theme with Performance & Mobile Responsive Enhancements
 * Author: Pavothemes
 * Template: bigmedix
 * Version: 1.0.3
 */

/* ============================================================
 * 1. BREADCRUMBS & GENERAL BASE
 * ============================================================ */
nav.rank-math-breadcrumb,
nav.rank-math-breadcrumb a {
    color: #fff;
}

/* Prevent horizontal page blowout across all viewports */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100%;
}

*, ::before, ::after {
    box-sizing: border-box;
}

/* Responsive Media */
img, svg, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* ============================================================
 * 2. MOBILE RESPONSIVE TYPOGRAPHY & HEADINGS (clamp scaling)
 * ============================================================ */
@media screen and (max-width: 768px) {
    h1, .elementor-widget-heading h1.elementor-heading-title {
        font-size: clamp(26px, 7vw, 38px) !important;
        line-height: 1.25 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    h2, .elementor-widget-heading h2.elementor-heading-title {
        font-size: clamp(22px, 5.5vw, 30px) !important;
        line-height: 1.3 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    h3, .elementor-widget-heading h3.elementor-heading-title {
        font-size: clamp(18px, 4.5vw, 24px) !important;
        line-height: 1.35 !important;
        word-wrap: break-word;
    }

    /* Prevent massive scrolling ticker text overflow */
    .bigmedix-slider-scrolling .scrolling_title {
        font-size: clamp(36px, 10vw, 70px) !important;
    }

    /* Consistent mobile container padding */
    .elementor-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ============================================================
 * 3. TOUCH TARGET SIZES & MOBILE USABILITY (Min 44px)
 * ============================================================ */
@media screen and (max-width: 768px) {
    .menu-mobile-nav-button,
    .bigmedix-menu-canvas .menu-mobile-nav-button,
    .mobile-navigation ul li a,
    .mobile-nav-tabs ul li,
    .elementor-button,
    a.elementor-button,
    .wpcf7-submit {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .elementor-button,
    a.elementor-button {
        padding: 12px 24px;
        font-size: 15px;
    }
}

/* ============================================================
 * 4. MOBILE FORM CONTROLS (Prevent iOS Safari Auto-Zoom)
 * ============================================================ */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .wpcf7 form.wpcf7-form {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================================
 * 5. MOBILE NAVIGATION & OFFCANVAS SMOOTH SCROLLING
 * ============================================================ */
@media screen and (max-width: 1024px) {
    .site-header {
        position: relative;
        z-index: 999;
    }

    .mobile-navigation {
        -webkit-overflow-scrolling: touch;
        max-height: 80vh;
        overflow-y: auto;
    }

    .mobile-navigation ul.menu li a {
        padding: 12px 16px;
        display: block;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
}

/* ============================================================
 * 6. WHATSAPP & FLOATING BUTTON RESPONSIVE SPACING
 * ============================================================ */
@media screen and (max-width: 767px) {
    .ht_ctc_chat_style {
        bottom: 18px !important;
        right: 18px !important;
        transform: scale(0.92);
        transform-origin: bottom right;
        z-index: 9999 !important;
    }
}

/* ============================================================
 * 7. RESPONSIVE TABLES & EMBEDDED CONTENT
 * ============================================================ */
table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
}

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