/* Wolw compact enterprise header, 2026-10-17 */
:root {
    --wolw-utility-height: 30px;
    --wolw-nav-height: 88px;
    --wolw-header-total: 118px;
    --wolw-navy: #03052e;
    --wolw-green: #00a54f;
}

body {
    padding-top: var(--wolw-header-total) !important;
}

.header {
    z-index: 100002;
    height: var(--wolw-utility-height) !important;
    line-height: normal !important;
    background: #f5f7f6 !important;
    border-bottom: 1px solid #edf0ee;
}

.header .wolw-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1180px, calc(100% - 64px));
    max-width: 1180px;
    height: var(--wolw-utility-height) !important;
    margin: 0 auto;
}

.header .header_left {
    display: flex;
    align-items: center;
    float: none;
    padding: 0;
    background: none;
    line-height: 1;
}

.header .header_left:before {
    content: "";
    width: 14px;
    height: 14px;
    margin-right: 8px;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aeb6d8' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}

.header .header_left a {
    color: #64716a;
    font-size: 12px;
    letter-spacing: .01em;
}

.header .header_left a:hover {
    color: #008f44;
}

.language-menu {
    position: relative;
    z-index: 4;
    height: 100%;
    color: #435249;
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

.language-menu summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 126px;
    height: 100%;
    padding: 0 3px 0 10px;
    box-sizing: border-box;
    color: #435249;
    font-size: 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.language-menu summary::-webkit-details-marker {
    display: none;
}

.language-menu summary:hover,
.language-menu[open] summary {
    color: #008f44;
}

.language-globe {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.language-chevron {
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s ease;
}

.language-menu[open] .language-chevron {
    transform: translateY(2px) rotate(225deg);
}

.header .language-flag {
    display: inline-block !important;
    flex: 0 0 24px;
    width: 24px;
    height: 16px !important;
    margin: 0 !important;
    border-radius: 2px;
    background-image: url("../images/language-flags-2026.svg");
    background-repeat: no-repeat;
    background-size: 240px 16px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.2);
}

.header .flag-en { background-position: 0 0; }
.header .flag-cn { background-position: -24px 0; }
.header .flag-ry { background-position: -48px 0; }
.header .flag-hy { background-position: -72px 0; }
.header .flag-yn { background-position: -96px 0; }
.header .flag-ew { background-position: -120px 0; }
.header .flag-dw { background-position: -144px 0; }
.header .flag-fw { background-position: -168px 0; }
.header .flag-alb { background-position: -192px 0; }
.header .flag-ydl { background-position: -216px 0; }

.language-panel {
    position: fixed;
    z-index: 100005;
    top: 38px;
    right: max(32px, calc((100vw - 1180px) / 2));
    display: grid;
    grid-template-columns: repeat(2, minmax(138px, 1fr));
    gap: 4px;
    width: 320px;
    padding: 12px;
    border: 1px solid #e1e6e3;
    border-radius: 4px;
    background: rgba(255,255,255,.99);
    box-shadow: 0 18px 38px rgba(8,18,39,.18);
    box-sizing: border-box;
}

.language-panel:before {
    content: "";
    position: absolute;
    top: -6px;
    right: 28px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #e1e6e3;
    border-left: 1px solid #e1e6e3;
    background: #fff;
    transform: rotate(45deg);
}

.header .language-option {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 7px 10px;
    border-radius: 2px;
    box-sizing: border-box;
    color: #35413b !important;
    font-size: 13px;
    line-height: 1.35;
    transition: color .16s ease, background-color .16s ease;
}

.header .language-option:hover,
.header .language-option.is-active {
    color: #007d3d !important;
    background: #eef7f1;
}

.header .language-option.is-active:after {
    content: "";
    position: absolute;
    right: 10px;
    width: 7px;
    height: 4px;
    border-left: 1.5px solid var(--wolw-green);
    border-bottom: 1.5px solid var(--wolw-green);
    transform: rotate(-45deg);
}

.nav {
    top: var(--wolw-utility-height) !important;
    height: var(--wolw-nav-height) !important;
    border-bottom-color: #e6ebe8 !important;
    box-shadow: 0 2px 12px rgba(12,31,21,.045);
}

.nav .logo {
    width: 182px;
    height: 62px;
    margin-left: 0;
}

.nav .logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.nav_ul li,
.nav_ul li > a {
    height: var(--wolw-nav-height) !important;
}

.nav_ul li > a {
    line-height: var(--wolw-nav-height) !important;
}

.nav_ul .mega-dropdown {
    top: var(--wolw-header-total) !important;
}

.mobile-nav-toggle {
    display: none;
}

/* Align the brand, navigation and utility row on one shared container. */
.nav > .min-wrap {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: min(1180px, calc(100% - 64px)) !important;
    min-width: 0 !important;
    max-width: 1180px;
    height: 100%;
    margin: 0 auto !important;
    padding: 0;
    box-sizing: border-box;
}

.nav > .min-wrap:before,
.nav > .min-wrap:after {
    display: none !important;
    content: none !important;
}

.nav .logo {
    position: static !important;
    display: flex;
    flex: 0 0 198px;
    align-items: center;
    width: 198px;
    height: 64px;
    margin: 0 !important;
    padding: 0 !important;
}

.nav .logo img {
    display: block;
    width: 198px;
    height: auto;
}

.nav .nav_ul {
    position: static;
    display: flex;
    align-items: center;
    float: none;
    width: auto;
    margin: 0 0 0 44px;
    padding: 0;
}

.nav .nav_ul > li {
    flex: 0 0 auto;
    padding: 0 14px;
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

.nav .nav_ul > li:last-child { padding-right: 0; }
.nav .nav_ul > li > a { font-size: 15px; white-space: nowrap; }

@media (min-width: 901px) {
    /* A dropdown with no third-level links is a compact vertical list. */
    .nav .nav_ul > li:has(.mega-dropdown):not(:has(.mega-links a)) {
        position: relative;
    }

    .nav .nav_ul > li:not(:has(.mega-links a)) > .mega-dropdown {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        width: 208px !important;
        min-width: 208px !important;
        padding: 8px !important;
        border: 1px solid #e4eae6;
        border-top: 2px solid #00a54f;
        border-radius: 0 0 4px 4px;
        background: #fff;
        box-shadow: 0 12px 28px rgba(18,40,27,.1);
    }

    .nav .nav_ul > li:not(:has(.mega-links a)) .mega-menu {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav .nav_ul > li:not(:has(.mega-links a)) .mega-column {
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .nav .nav_ul > li:not(:has(.mega-links a)) .mega-heading {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px;
        margin: 0 !important;
        padding: 11px 14px !important;
        border: 0 !important;
        background: transparent;
        color: #35433b;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.6 !important;
        box-sizing: border-box;
    }

    .nav .nav_ul > li:not(:has(.mega-links a)) .mega-heading:hover {
        color: #008f44;
        background: #f0f7f2;
    }

    .nav .nav_ul > li:not(:has(.mega-links a)) .mega-heading:after {
        display: none;
    }

    .nav .nav_ul:has(> li:hover) > li.on:not(:hover) > a i,
    .nav .nav_ul:has(> li:focus-within) > li.on:not(:focus-within) > a i {
        opacity: 0;
    }
}

@media (min-width: 901px) and (max-width: 1120px) {
    .nav .nav_ul { margin-left: 20px; }
    .nav .nav_ul > li { padding: 0 9px; }
    .nav .nav_ul > li > a { font-size: 14px; }
    .nav .logo { flex-basis: 175px; width: 175px; }
    .nav .logo img { width: 175px; }
}

@media (max-width: 900px) {
    :root {
        --wolw-nav-height: 76px;
        --wolw-header-total: 106px;
    }

    .header .wolw-header-inner {
        width: calc(100% - 28px);
        padding: 0;
    }

    .header .header_left {
        display: none;
    }

    .language-menu {
        margin-left: auto;
    }

    .language-menu summary {
        min-width: 112px;
        justify-content: flex-end;
    }

    .language-panel {
        right: 14px;
        width: min(320px, calc(100vw - 28px));
    }

    .nav > .min-wrap {
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
    }

    .nav .logo {
        flex-basis: 158px;
        width: 158px;
        height: 56px;
    }

    .nav .logo img { width: 158px; }

    .mobile-nav-toggle {
        position: relative;
        z-index: 3;
        display: inline-flex !important;
        flex: 0 0 44px;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 0;
        border: 0;
        background: transparent;
        color: #17231c;
        cursor: pointer;
    }

    .mobile-nav-toggle span,
    .mobile-nav-toggle:before,
    .mobile-nav-toggle:after {
        content: "";
        position: absolute;
        width: 23px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform .18s ease, opacity .18s ease;
    }

    .mobile-nav-toggle:before { transform: translateY(-7px); }
    .mobile-nav-toggle:after { transform: translateY(7px); }

    body.mobile-nav-open .mobile-nav-toggle span { opacity: 0; }
    body.mobile-nav-open .mobile-nav-toggle:before { transform: rotate(45deg); }
    body.mobile-nav-open .mobile-nav-toggle:after { transform: rotate(-45deg); }

    .nav .nav_ul {
        position: fixed !important;
        z-index: 100001;
        top: var(--wolw-header-total) !important;
        right: 0 !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        max-height: calc(100vh - var(--wolw-header-total));
        margin: 0 !important;
        padding: 10px 18px 22px !important;
        overflow-y: auto;
        box-sizing: border-box;
        border-top: 1px solid #e6ebe8;
        background: rgba(255,255,255,.99);
        box-shadow: 0 18px 32px rgba(8,18,39,.13);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }

    body.mobile-nav-open .nav .nav_ul {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav .nav_ul > li {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        border-bottom: 1px solid #edf1ef;
    }

    .nav .nav_ul > li > a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100% !important;
        height: 50px !important;
        padding: 0 4px !important;
        line-height: 50px !important;
        box-sizing: border-box;
        font-size: 15px;
    }

    .nav .nav_ul > li:has(> .mega-dropdown) > a:after {
        content: "+";
        color: #6b7771;
        font-size: 21px;
        font-weight: 300;
        line-height: 1;
    }

    .nav .nav_ul > li.mobile-open > a:after {
        content: "−";
        color: var(--wolw-green);
    }

    .nav .nav_ul > li > a i {
        display: none !important;
    }

    .nav .nav_ul .mega-dropdown {
        position: static !important;
        display: none !important;
        width: 100% !important;
        max-height: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .nav .nav_ul > li.mobile-open > .mega-dropdown {
        display: block !important;
    }

    .nav .nav_ul .mega-dropdown .mega-menu {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        padding: 2px 0 14px !important;
    }

    .nav .nav_ul .mega-column,
    .nav .nav_ul .mega-column:first-child,
    .nav .nav_ul .mega-column:last-child {
        min-height: 0 !important;
        padding: 0 0 8px 12px !important;
        border-left: 0 !important;
    }

    .nav .nav_ul .mega-heading,
    .nav .nav_ul .mega-heading:hover {
        min-height: 40px !important;
        margin: 0 !important;
        padding: 9px 34px 9px 12px !important;
        font-size: 15px !important;
    }

    .nav .nav_ul .mega-links a,
    .nav .nav_ul .mega-links a:hover {
        padding: 8px 10px 8px 26px !important;
        font-size: 13px !important;
    }

    .nav_ul .mega-dropdown {
        max-height: calc(100vh - var(--wolw-header-total));
    }
}

@media (prefers-reduced-motion: reduce) {
    .language-chevron,
    .header .language-option,
    .mobile-nav-toggle span,
    .mobile-nav-toggle:before,
    .mobile-nav-toggle:after,
    .nav .nav_ul {
        transition: none;
    }
}