/**
* Theme Name: Mental Care Child
* Description: This is a child theme of Mental Care.
* Author: <a href="https://cmsmasters.net/">cmsmasters</a>
* Template: mental-care
* Version: 1.0.0
* Tested up to: 6.6
* Requires PHP: 7.4
* License:
* License URI:
* Text Domain: mental-care-child
* Copyright: cmsmasters 2025 / All Rights Reserved
*/

/* =========================================================
   Mobile / Narrow Tablet — Full Page Fixes (≤767px)
   ========================================================= */
@media only screen and (max-width: 767px) {

    /* Make the header mid section a single flex row */
    .cmsmasters-header-mid__inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 16px !important;
        min-height: 64px !important;
        flex-wrap: nowrap !important;
    }

    /* Logo stays compact on mobile */
    .cmsmasters-header-mid-logo {
        flex-shrink: 0;
        max-width: 110px;
    }

    .cmsmasters-header-mid-logo img {
        max-height: 48px !important;
        width: auto !important;
    }

    /* Content-wrap (buttons + burger) sit in a row on the left side (RTL) */
    .cmsmasters-header-mid__content-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 0 !important;
        flex-wrap: nowrap !important;
    }

    /* Add-content area (buttons) also in a row */
    .cmsmasters-header-mid__add-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    /* Remove the stacked margin that was pushing buttons below each other */
    .cmsmasters-header-mid__add-content > div + div {
        margin-top: 0 !important;
        margin-right: 6px !important;
    }

    /* Buttons — keep them compact, not full-width */
    .cmsmasters-header-mid-button {
        width: auto !important;
    }

    .cmsmasters-header-mid-button__inner {
        white-space: nowrap;
    }

    /* Scale down button font and padding on small screens */
    .cmsmasters-header-mid-button__link {
        font-size: 13px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        white-space: nowrap !important;
    }

    /* Burger menu button — keep it properly sized and inline */
    .cmsmasters-header-mid-burger-menu-button {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0;
    }

    .cmsmasters-header-mid .cmsmasters-burger-menu-button__toggle {
        font-size: 20px !important;
        padding: 8px !important;
        line-height: 1 !important;
    }

    /* Remove stacked content-wrap top-margin that breaks single-row layout */
    .cmsmasters-header-mid__content-wrap > div + div {
        margin-top: 0 !important;
    }

    /* Outer wrapper: ensure no extra vertical stacking */
    .cmsmasters-header-mid__outer {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* =========================================================
   Mobile (≤767px) — Targeted fixes for this page
   ========================================================= */
@media only screen and (max-width: 767px) {

    /* ── Overflow guard ──────────────────────────────────── */
    body { overflow-x: hidden; }

    /* ── Hero image: fix negative margin overlap ─────────── */
    /* Elementor sets --margin-bottom:-250px at 1180px breakpoint.
       Use high-specificity selector to override the CSS variable. */
    .elementor-39075 .elementor-element.elementor-element-7f98ad0 {
        --margin-bottom: 0px !important;
        margin-bottom: 0 !important;
    }

    /* ── Hero section container: reduce large bottom margin ── */
    .elementor-39075 .elementor-element.elementor-element-e6303f1 {
        --margin-bottom: 40px !important;
    }

    /* ── Heading font sizes — prevent overflow ───────────── */
    .elementor-heading-title {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    /* Large pricing/number headings (50px at 1180px → too large) */
    .elementor-39075 .elementor-element.elementor-element-9be5b06 .elementor-heading-title,
    .elementor-39075 .elementor-element.elementor-element-d2f383a .elementor-heading-title {
        font-size: 28px !important;
    }

    /* Pricing amount heading (1005 / 2565 / 255) */
    .elementor-39075 .elementor-element.elementor-element-c0cc694 .elementor-heading-title {
        font-size: 26px !important;
    }

    /* ── Counter font sizes ──────────────────────────────── */
    .elementor-39075 .elementor-element.elementor-element-6f2e976 .elementor-counter-number-wrapper,
    .elementor-39075 .elementor-element.elementor-element-efc6e3a .elementor-counter-number-wrapper,
    .elementor-39075 .elementor-element.elementor-element-7ad78ae .elementor-counter-number-wrapper,
    .elementor-39075 .elementor-element.elementor-element-6086eb8 .elementor-counter-number-wrapper {
        font-size: 36px !important;
    }

    /* ── Testimonials: fix right-margin overflow ─────────── */
    .elementor-39075 .elementor-element.elementor-element-351c7a5 {
        --margin-right: 0% !important;
        --margin-left: 0% !important;
    }

    /* ── Images: never overflow container ───────────────── */
    .elementor-widget-image img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ── General heading text overflow fix ───────────────── */
    .elementor-widget-heading {
        overflow: hidden;
        max-width: 100%;
    }
}

/* =========================================================
   Tablet (768px – 1180px) — Professional layout fixes
   ========================================================= */
@media only screen and (min-width: 768px) and (max-width: 1180px) {

    /* ── Header ──────────────────────────────────────────── */
    .cmsmasters-header-mid__inner {
        padding: 0 24px !important;
        min-height: 70px !important;
    }

    /* ── Hero image: reduce excessive negative margin ─────── */
    /* Elementor sets --margin-bottom:-250px which causes
       the hero image to heavily overlap the next section */
    .elementor-39075 .elementor-element.elementor-element-7f98ad0 {
        --margin-bottom: -80px !important;
    }

    /* ── Overflow guard ──────────────────────────────────── */
    body { overflow-x: hidden; }

    /* ── Headings: safe wrapping ─────────────────────────── */
    .elementor-heading-title {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* ── Images stay bounded ─────────────────────────────── */
    .elementor-widget-image img {
        max-width: 100% !important;
        height: auto !important;
    }
}