/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.1.0
Text Domain:  Avada
 */

/* ===== Mobile secondary header (top bar): phone left / WPML flag right =====
   These rules MIRROR the inline block in functions.php (which is printed at
   wp_head priority 9999, after Avada's dynamic CSS). style.css is enqueued as
   a dependency of Avada's stylesheets so it loads after them, making this file
   a reliable fallback too.

   Why this works (root cause summary):
   - Avada does NOT hide `.fusion-contact-info` with display:none. The old
     `display:block !important` override fought a non-existent rule.
   - Avada's mobile CSS sets `.fusion-secondary-header .fusion-row{display:block}`
     and the old fix made `.fusion-alignleft` a flex container with overflow:
     hidden, which let `.fusion-contact-info` shrink to 0 width and vanish.
   - Here `.fusion-alignleft` stays a normal BLOCK, so the phone can never
     collapse. Only `.fusion-row` is the flex container.
   - The WPML flag here uses `.iclflag` (legacy WPML), so we target both
     `.iclflag` and `.wpml-ls-flag`.
   - No `body #wrapper` prefix: `.fusion-secondary-header` is NOT inside
     `#wrapper` in this Avada configuration, so the prefixed selectors never
     matched. Avada's mobile rules are not `!important`, so our `!important`
     rules win regardless of specificity.

   SPECIFICITY BOOST: every selector is prefixed with `html body` and the
   contact-info / phone-number / separator / email rules carry the full
   ancestor chain (.fusion-row .fusion-alignleft .fusion-contact-info) for
   specificity (0,0,5,0)+, beating competing !important rules. A JavaScript
   fallback in functions.php (wp_footer priority 9999) additionally forces the
   phone visible via inline !important set from JS - the ABSOLUTE highest
   cascade priority.
*/
@media only screen and (max-width: 800px) {

    /* The row becomes a centered flex container. */
    html body .fusion-secondary-header .fusion-row {
        display: flex !important;
        flex-flow: row nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 10px !important;
        min-height: var(--sec_menu_lh, 34px) !important;
        height: auto !important;
    }

    /* Left side (phone/email wrapper): centers itself. */
    html body .fusion-secondary-header .fusion-alignleft {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        float: none !important;
        overflow: visible !important;
    }

    /* Hide the flag container in the secondary header on mobile viewports. */
    html body .fusion-secondary-header .fusion-alignright {
        display: none !important;
    }

    /* Contact info inside left side: centered flex row. */
    html body .fusion-secondary-header .fusion-row .fusion-alignleft .fusion-contact-info {
        display: flex !important;
        flex-flow: row nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        font-size: 11px !important;
        line-height: var(--sec_menu_lh, 34px) !important;
        white-space: nowrap !important;
    }

    /* Explicit phone and email visibility, color, and font-size. */
    html body .fusion-secondary-header .fusion-row .fusion-alignleft .fusion-contact-info .fusion-contact-info-phone-number,
    html body .fusion-secondary-header .fusion-row .fusion-alignleft .fusion-contact-info .fusion-contact-info-email-address {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 11px !important;
        line-height: var(--sec_menu_lh, 34px) !important;
        color: inherit !important;
    }

    /* Explicit separator visibility. */
    html body .fusion-secondary-header .fusion-row .fusion-alignleft .fusion-contact-info .fusion-header-separator {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 0.7 !important;
        font-size: 11px !important;
        line-height: var(--sec_menu_lh, 34px) !important;
        color: inherit !important;
        margin: 0 4px !important;
    }

    /* Custom Language Switcher in Mobile Main Menu */
    html body .fusion-header .fusion-mobile-nav-holder .mobile-custom-language-switcher-li {
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        padding: 20px 0 !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    html body .fusion-header .fusion-mobile-nav-holder .mobile-custom-language-switcher {
        display: block !important;
        width: 100% !important;
    }

    html body .fusion-header .fusion-mobile-nav-holder .mobile-custom-language-switcher ul {
        display: flex !important;
        flex-flow: row nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 20px !important;
    }

    html body .fusion-header .fusion-mobile-nav-holder .mobile-custom-language-switcher .menu-item-has-children {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
    }

    html body .fusion-header .fusion-mobile-nav-holder .mobile-custom-language-switcher .sub-menu {
        display: flex !important;
        flex-direction: row !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 20px !important;
    }

    html body .fusion-header .fusion-mobile-nav-holder .mobile-custom-language-switcher li {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .fusion-header .fusion-mobile-nav-holder .mobile-custom-language-switcher a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 5px !important;
        height: auto !important;
        line-height: normal !important;
    }

    html body .fusion-header .fusion-mobile-nav-holder .mobile-custom-language-switcher img.wpml-ls-flag,
    html body .fusion-header .fusion-mobile-nav-holder .mobile-custom-language-switcher img.iclflag {
        width: 24px !important;
        height: auto !important;
        border-radius: 2px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
        transition: transform 0.2s ease, opacity 0.2s ease !important;
        display: block !important;
    }

    /* Active language styling: full opacity */
    html body .fusion-header .fusion-mobile-nav-holder .mobile-custom-language-switcher .menu-item-has-children > a img {
        opacity: 1 !important;
    }

    /* Inactive languages: slightly translucent */
    html body .fusion-header .fusion-mobile-nav-holder .mobile-custom-language-switcher .sub-menu img {
        opacity: 0.6 !important;
    }

    /* Active tap feedback */
    html body .fusion-header .fusion-mobile-nav-holder .mobile-custom-language-switcher a:active img {
        transform: scale(1.15) !important;
        opacity: 1 !important;
    }
}