/* =============================================================================
   VNCPC Header Styles
   File: vncpc-header.css
   Covers: logo, nav, sticky header, CTA button, WPML language switcher, mobile
   ============================================================================= */

/* =============================================================================
   1. HEADER WRAPPER
   ============================================================================= */

/* Main header container */
#top #header {
    background: var(--vncpc-white) !important;
    box-shadow: 0 2px 20px rgba(20, 45, 25, 0.06);
    border-bottom: 1px solid var(--vncpc-border);
}

/* Sticky header */
#top #header.scrolled,
#top #header.av-header-sticky-active {
    background: var(--vncpc-white) !important;
    box-shadow: 0 4px 24px rgba(20, 45, 25, 0.10);
}

/* Inner header */
#top #header .container,
#top #header .inner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =============================================================================
   2. LOGO
   ============================================================================= */

#top .avia-logo-element-container img,
#top #header .avia-logo-element-container img {
    max-height: 70px;
    width: auto;
    transition: transform 0.22s ease;
}

#top .avia-logo-element-container:hover img {
    transform: scale(1.03);
}

/* =============================================================================
   3. NAVIGATION
   ============================================================================= */

/* Nav links */
#top #header nav.main_menu > ul > li > a,
#top #header #av-main-nav > ul > li > a {
    font-family: var(--vncpc-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--vncpc-text) !important;
    letter-spacing: -0.01em;
    padding: 28px 14px !important;
    transition: color 0.2s ease !important;
}

/* Enfold real selector path for top menu */
#top #header_main #avia-menu > li > a {
    font-family: var(--vncpc-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--vncpc-text) !important;
    letter-spacing: -0.01em;
    line-height: 44px !important;
    padding: 0 11px !important;
}

#top #header_main #avia-menu > li > a:hover,
#top #header_main #avia-menu > li.current-menu-item > a,
#top #header_main #avia-menu > li.current_page_item > a {
    color: var(--vncpc-green) !important;
}

#top #header_main #avia-menu > li > a .avia-menu-text {
    white-space: nowrap;
}

/* Compact dropdown labels */
#top #header_main #avia-menu ul.sub-menu li > a {
    font-size: 13px !important;
    line-height: 1.45 !important;
}

#top #header nav.main_menu > ul > li > a:hover,
#top #header #av-main-nav > ul > li > a:hover,
#top #header nav.main_menu > ul > li.current-menu-item > a {
    color: var(--vncpc-green) !important;
}

/* Remove custom active underline to avoid visual stripe artifacts */
#top #header nav.main_menu > ul > li.current-menu-item > a::after,
#top #header_main #avia-menu > li.current-menu-item > a::after,
#top #header_main #avia-menu > li.current_page_item > a::after {
    display: none !important;
    content: none !important;
}

/* Dropdown submenu */
#top #header .av_menu_bar .sub_menu ul,
#top #header .main_menu .sub_menu {
    background: var(--vncpc-white);
    box-shadow: var(--vncpc-shadow-md);
    border-radius: var(--vncpc-radius-sm);
    border: 1px solid var(--vncpc-border);
    min-width: 220px;
}

#top #header .av_menu_bar .sub_menu ul li a,
#top #header .main_menu .sub_menu li a {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--vncpc-text) !important;
    padding: 10px 18px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

#top #header .av_menu_bar .sub_menu ul li a:hover,
#top #header .main_menu .sub_menu li a:hover {
    background: var(--vncpc-light-green) !important;
    color: var(--vncpc-green) !important;
}

/* =============================================================================
   4. CTA "Liên hệ" BUTTON IN NAV
   ============================================================================= */

/* Nếu dùng nav item có class custom-link để làm CTA */
#top #header nav.main_menu > ul > li.vncpc-nav-cta > a,
#top #header #av-main-nav > ul > li.vncpc-nav-cta > a {
    background: var(--vncpc-green) !important;
    color: var(--vncpc-white) !important;
    border-radius: var(--vncpc-radius-full) !important;
    padding: 10px 20px !important;
    margin: auto 0 auto 8px !important;
    font-weight: 700 !important;
    transition: background 0.2s ease !important;
}

#top #header nav.main_menu > ul > li.vncpc-nav-cta > a:hover {
    background: var(--vncpc-dark-green) !important;
}

/* =============================================================================
   5. WPML LANGUAGE SWITCHER
   ============================================================================= */

/* Language switcher trong sub_menu area */
#top #header .sub_menu .wpml-ls-legacy-list-horizontal,
#top #header .sub_menu .wpml-ls-statics-shortcode_actions {
    margin: 0;
    padding: 0;
}

#top #header .sub_menu .wpml-ls-legacy-list-horizontal li a,
#top #header .sub_menu .wpml-ls-statics-shortcode_actions li a {
    font-family: var(--vncpc-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--vncpc-text);
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: border-color 0.15s ease, color 0.15s ease;
}

#top #header .sub_menu .wpml-ls-legacy-list-horizontal li a:hover,
#top #header .sub_menu .wpml-ls-legacy-list-horizontal li.wpml-ls-current-language a {
    border-color: var(--vncpc-border);
    color: var(--vncpc-green);
}

/* Avia WPML integration — avia_wpml_language_switch() render */
#top .avia_wpml_language_switch,
#top .avia_wpml_language_switch_extra {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex !important;
    align-items: center;
    gap: 6px;
    /* Override Enfold wpml-mod.css fixed height that clips flags */
    height: auto !important;
    overflow: visible !important;
}

#top .avia_wpml_language_switch li,
#top .avia_wpml_language_switch_extra li {
    display: inline-flex;
    align-items: center;
}

#top .avia_wpml_language_switch li a,
#top .avia_wpml_language_switch_extra li a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-family: var(--vncpc-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--vncpc-text);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

#top .avia_wpml_language_switch li a:hover,
#top .avia_wpml_language_switch li.avia_current_lang a {
    border-color: var(--vncpc-border);
    color: var(--vncpc-green);
}

/* Fix flag images — constrain to actual 18x12 px dimensions */
#top .avia_wpml_language_switch .language_flag img,
#top .avia_wpml_language_switch_extra .language_flag img {
    width: 20px !important;
    height: auto !important;
    max-height: 14px;
    display: inline-block;
    vertical-align: middle;
    border: none !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
    border-radius: 1px;
}

/* WPML flags in main top nav (li.av-language-switch-item) */
#top #header_main #avia-menu > li.av-language-switch-item,
#top #header_main #avia-menu > li.av-language-switch-item > a {
    width: auto !important;
    max-width: none !important;
}

#top #header_main #avia-menu > li.av-language-switch-item .language_flag {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

#top #header_main #avia-menu > li.av-language-switch-item .language_flag img {
    width: 18px !important;
    height: 12px !important;
    min-width: 18px !important;
    min-height: 12px !important;
    max-width: 18px !important;
    max-height: 12px !important;
    object-fit: cover !important;
    display: inline-block !important;
    vertical-align: middle;
    border: none !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
}

/* Header logo fallback: ensure image logo remains visible */
#top #header_main .logo.bg-logo {
    width: 160px !important;
    height: 90px !important;
    background-image: url('https://www.vncpc.org/wp-content/uploads/2025/01/Logo-moi-nhat-300x125.webp') !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
}

#top #header_main .logo.bg-logo > a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
    overflow: hidden;
}

/* =============================================================================
   6. MOBILE HEADER (< 767px)
   (Detailed responsive overrides — mobile-only values in vncpc-responsive.css)
   ============================================================================= */

/* Mobile hamburger */
#top #header .av-burger-menu-main,
#top #header .av_mobile_nav {
    color: var(--vncpc-dark-green);
}

/* Mobile nav overlay */
#top #header #av-main-nav-ul,
#top .av_menu_dropdown {
    background: var(--vncpc-white);
}

#top #header #av-main-nav-ul li a {
    color: var(--vncpc-text);
    font-weight: 600;
    border-bottom: 1px solid var(--vncpc-border);
}

#top #header #av-main-nav-ul li a:hover {
    color: var(--vncpc-green);
}

/* =============================================================================
   7. HEADER STABILIZATION (desktop/mobile switch)
   ============================================================================= */

/* Hide burger menu item in desktop nav to avoid duplicated "Menu" text */
#top #header #avia-menu > li.av-burger-menu-main {
    display: none !important;
}

/* Keep language flags compact in top-level menu */
#top #header #avia-menu > li.av-language-switch-item > a {
    padding: 0 8px !important;
    line-height: 44px !important;
}

/* Remove redundant label inside burger toggle */
#top #header #avia-menu > li.av-burger-menu-main .avia-menu-text {
    display: none !important;
}

/* Mobile/tablet navigation behavior */
@media only screen and (max-width: 989px) {
    #top #header #avia-menu > li.av-burger-menu-main {
        display: block !important;
    }

    #top #header #avia-menu > li:not(.av-burger-menu-main):not(.av-language-switch-item) {
        display: none !important;
    }

    #top #header #avia-menu > li.av-language-switch-item {
        display: inline-block !important;
    }

    #top #header #avia-menu > li.av-language-switch-item > a {
        padding: 0 6px !important;
        line-height: 74px !important;
    }

    #top #header #avia-menu > li.av-burger-menu-main > a {
        padding: 22px 12px !important;
    }
}