/* English and Traditional Chinese occupy deliberate, consistent lines. */
.navbar-area {border-bottom: 1px solid #e4eee8; background: #fff;}
.navbar-area .nav-label {display: grid; gap: 3px; text-align: left;}
.navbar-area .nav-label-en {grid-row: 1; font-size: 17px; line-height: 22px; font-weight: 600;}
.navbar-area .nav-label-zh {grid-row: 2; font-size: 15px; line-height: 20px; font-weight: 500;}
.navbar-area .nav-label-separator {display: none !important;}
.navbar-area .nav-label-single {font-size: 17px; line-height: 24px;}
.navbar-area a:focus-visible {outline: 3px solid #bd8c18; outline-offset: 2px;}

@media (min-width: 1200px) {
    .main-navbar .navbar {padding: 16px 0; gap: 24px; flex-wrap: nowrap;}
    .main-navbar .navbar-brand {flex: 0 0 auto; margin-right: 0;}
    .main-navbar .navbar-brand img {width: clamp(250px, 18vw, 310px); height: auto;}
    .main-navbar .navbar-collapse {flex-basis: auto; min-width: 0;}
    .main-navbar .navbar .navbar-nav {gap: 6px; align-items: center; flex-wrap: nowrap;}
    .main-navbar .navbar .navbar-nav > .nav-item {margin: 0; flex: 0 0 auto;}
    .main-navbar .navbar .navbar-nav > .nav-item > .nav-link {
        display: flex; align-items: center; gap: 6px; padding: 9px 12px; min-height: 64px;
        border: 0; border-radius: 0; color: #263d31;
    }
    .main-navbar .navbar-nav > .nav-item > .nav-link .nav-label-en,
    .main-navbar .navbar-nav > .nav-item > .nav-link .nav-label-zh {white-space: nowrap;}
    .main-navbar .navbar .navbar-nav > .nav-item > .nav-link > i {
        position: static; margin: 0; font-size: 18px; flex: 0 0 auto;
    }
    .main-navbar .navbar .navbar-nav > .nav-item > .nav-link.active,
    .main-navbar .navbar .navbar-nav > .nav-item > .nav-link:hover,
    .main-navbar .navbar .navbar-nav > .nav-item > .nav-link:focus {color: #08763f; background: transparent;}
    .main-navbar .navbar .navbar-nav > .nav-item > .dropdown-menu {
        top: 100%; right: 0; width: 288px; margin-top: 0; padding: 8px;
        border: 1px solid #d5ecdf; border-radius: 8px; box-shadow: 0 8px 24px rgba(32, 57, 51, .12);
    }
    .main-navbar .navbar .navbar-nav > .nav-item:focus-within > .dropdown-menu {opacity: 1; visibility: visible;}
    .main-navbar .navbar .navbar-nav > .nav-item > .dropdown-menu a.nav-link {padding: 10px 12px; border-radius: 5px; color: #263d31;}
    .main-navbar .dropdown-menu .nav-label-en {font-size: 16px; line-height: 21px;}
    .main-navbar .dropdown-menu .nav-label-zh {font-size: 14px; line-height: 19px;}
    .main-navbar .navbar .navbar-nav > .nav-item > .dropdown-menu .nav-item > a.nav-link:hover,
    .main-navbar .navbar .navbar-nav > .nav-item > .dropdown-menu .nav-item > a.nav-link:focus {color: #08763f; background: #e9f7ee;}
    .main-navbar .navbar .navbar-nav > .nav-item > .dropdown-menu .nav-item > a.nav-link.active {color: #08763f; background: #e9f7ee; box-shadow: inset 3px 0 #08763f;}
}

@media (max-width: 1199px) {
    .main-responsive-nav .logo {max-width: calc(100% - 65px);}
    .main-responsive-nav .logo img {max-width: 100%; height: auto;}
    .mean-container .mean-nav {border: 1px solid #d5ecdf; box-shadow: 0 8px 20px rgba(32, 57, 51, .1);}
    .navbar-area .main-responsive-nav .main-responsive-menu.mean-container .navbar-nav {
        height: auto; max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; box-shadow: none;
    }
    .mean-container .mean-nav ul li a:not(.mean-expand) {
        box-sizing: border-box; float: none; display: flex; align-items: center;
        width: 100%; min-height: 68px; padding: 12px 68px 12px 18px; color: #263d31;
    }
    .mean-container .mean-nav ul li a.active,
    .mean-container .mean-nav ul li a:not(.mean-expand):hover,
    .mean-container .mean-nav ul li a:not(.mean-expand):focus {color: #08763f; background: #e9f7ee;}
    .navbar-area .main-responsive-nav .main-responsive-menu.mean-container .mean-nav ul li a.active {color: #08763f;}
    .mean-container .mean-nav ul li a.active {box-shadow: inset 3px 0 #08763f;}
    .mean-container .mean-nav ul li a.mean-expand {
        box-sizing: border-box; width: 44px; height: 44px; line-height: 44px;
        padding: 0 !important; top: 12px; right: 10px; margin: 0; text-align: center !important;
        border-radius: 6px; color: #08763f; background: #f1faf6;
    }
    .mean-container .mean-nav .nav-link > .bx-chevron-down {display: none;}
    .mean-container .mean-nav .dropdown-menu {
        position: static; float: none; width: 100%; margin: 0; padding: 0;
        border: 0; border-radius: 0; box-shadow: none; background: #f6fbf8;
    }
    .mean-container .mean-nav ul li li a:not(.mean-expand) {padding-left: 30px; min-height: 62px;}
    .mean-container .mean-nav ul li li .nav-label-en {font-size: 16px; line-height: 21px;}
    .mean-container .mean-nav ul li li .nav-label-zh {font-size: 14px; line-height: 19px;}
}