/*
Theme Name: Avada Child
Theme URI: https://gocviet.com.vn
Description: Avada Child Theme - Custom modifications for GOC VIET
Author: GOC VIET
Author URI: https://gocviet.com.vn
Template: Avada
Version: 1.0.0
*/

/*
 * Fix: Nav anchor items (#vision, #news, #csr) — active underline is managed by
 * avada-scrollspy.js (Bootstrap Scrollspy) at runtime. The PHP "current-menu-item"
 * class added on page load is stripped by gocviet-nav-fix.js so that Scrollspy
 * can take over and show the underline only for the section currently in view.
 * No CSS override needed here; see functions.php for the JS approach.
 */

/*
 * Fix: YouTube/video iframes have hardcoded width="400". The fitVids() wrapper
 * is fluid but can overflow on mobile when column padding is included.
 * Ensure all video embed wrappers and iframes never exceed their container.
 */
.full-video,
.fusion-youtube,
.video-shortcode,
.fusion-video {
    max-width: 100% !important;
}
.full-video iframe,
.fusion-youtube iframe,
.video-shortcode iframe,
.fusion-video iframe {
    max-width: 100%;
}

/*
 * Fix: Self-hosted video in the homepage hero (red section) needs to fill the
 * full column height. The column is flex-stretch but fusion_video's wrapper
 * collapses to the video's intrinsic height. Force it and the video-wrapper
 * to fill 100% of the flex column.
 */
.fusion-flex-align-self-stretch .fusion-selfhosted-video,
.fusion-flex-align-self-stretch .fusion-selfhosted-video .video-wrapper {
    height: 100%;
}
.fusion-flex-align-self-stretch .fusion-selfhosted-video video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/*
 * Fix: Avada animation_type="none" still generates class="fusion-animated"
 * with data-animationType="noneInLeft", hiding the element until Avada JS fires.
 * Force these elements visible immediately — they have no visible animation anyway.
 */
.fusion-animated[data-animationType="noneInLeft"],
.fusion-animated[data-animationType="noneInRight"],
.fusion-animated[data-animationType="noneInUp"],
.fusion-animated[data-animationType="noneInDown"] {
    opacity: 1 !important;
    visibility: visible !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}

/*
 * Fix: hero red section (#be0001) is above the fold — text must be visible
 * on first paint with no animation delay at all.
 */
.fusion-fullwidth[style*="be0001"] .fusion-animated,
.fusion-flex-column[style*="be0001"].fusion-animated {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}

/*
 * Fix: the mobile-only hero container (render_logics device_type=mobile) is
 * always present in the DOM. Avada JS hides it on desktop, but runs AFTER the
 * initial render — causing a brief black flash at the top of the page.
 *
 * The mobile hero sits IMMEDIATELY after the desktop red hero (#be0001) in the
 * DOM. The CSS adjacent sibling selector (+) hides it on desktop before JS runs.
 * On mobile (<1025px) this rule doesn't apply, so Avada JS shows it correctly.
 */
@media screen and (min-width: 1025px) {
    .fusion-fullwidth[style*="be0001"] + .fusion-fullwidth {
        display: none !important;
    }
}