/* 三语导航共用样式；仅覆盖导航，保留各页面原有的布局与缩放。 */
#nav-placeholder {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#nav-placeholder .wnm-nav-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    color: #fff;
    font-family: inherit;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    text-decoration: none;
}
#nav-placeholder .wnm-nav-brand img { width: auto; height: 56px; object-fit: contain; }
#nav-placeholder .nav-link {
    box-sizing: border-box;
    font-family: inherit;
    text-decoration: none;
    border: 0;
    border-radius: 0;
    background: none;
    cursor: pointer;
    text-align: left;
}
#nav-placeholder .nav-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#nav-placeholder .nav-chevron { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .18s; }
#nav-placeholder .is-open > .nav-toggle > .nav-chevron { transform: rotate(180deg); }
#nav-placeholder :is(a, button):focus-visible { outline: 2px solid #d9be93; outline-offset: 3px; border-radius: 3px; }
#nav-placeholder .nav-featured > .nav-link { color: #e1c89f; font-weight: 600; }
/* 从导航跳转到现有页面内的搜索框和课程区时，避开固定页头。 */
#wiki-search, #education-course-grid { scroll-margin-top: 160px; }

@media (min-width: 768px) {
    #nav-placeholder .nav-container { gap: 40px; padding-inline: 40px; }
    #nav-placeholder .main-nav { min-width: 0; }
    #nav-placeholder .main-nav > ul { gap: clamp(20px, 2vw, 48px); align-items: center; }
    #nav-placeholder .main-nav li { position: relative; padding: 0; margin: 0; }
    #nav-placeholder .main-nav > ul > li { padding-block: 16px; }
    #nav-placeholder .main-nav > ul > li > .nav-link {
        display: flex;
        align-items: center;
        padding: 5px 0;
        color: rgba(255, 255, 255, .9);
        font-size: 1.3rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 1px;
        text-transform: uppercase;
        white-space: nowrap;
    }
    #nav-placeholder .main-nav > ul > li > .nav-link::after { display: none; }
    #nav-placeholder .main-nav > ul > li:is(.is-open, .is-current) > .nav-link,
    #nav-placeholder .main-nav > ul > li > .nav-link:is(:hover, .active) { color: #e1c89f; }
    #nav-placeholder .main-nav ul.nav-submenu {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: auto;
        transform: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start !important;
        flex-wrap: nowrap;
        gap: 0 !important;
        width: max-content !important;
        min-width: 230px;
        max-width: 360px;
        margin: 0;
        padding: 8px !important;
        list-style: none;
        background: #101f2b;
        border: 1px solid rgba(225, 200, 159, .18);
        border-radius: 8px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
        z-index: 10;
    }
    #nav-placeholder .main-nav li.is-open > ul.nav-submenu { display: flex !important; }
    #nav-placeholder .main-nav .nav-submenu > li { width: 100%; }
    #nav-placeholder .main-nav .nav-submenu .nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 12px 16px;
        color: #edf1f3;
        font-size: 1.15rem;
        line-height: 1.5;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        white-space: normal;
        border-radius: 4px;
    }
    #nav-placeholder .main-nav .nav-submenu .nav-link::after { display: none; }
    #nav-placeholder .main-nav .nav-submenu .nav-link:is(:hover, :focus-visible, .active),
    #nav-placeholder .main-nav .nav-submenu .is-open > .nav-link { background: rgba(255, 255, 255, .07); color: #e1c89f; }
    #nav-placeholder .main-nav .nav-submenu .nav-featured > .nav-link { color: #e1c89f; font-weight: 600; }
    #nav-placeholder .main-nav .nav-submenu .nav-submenu { top: -9px; left: 100%; }
    #nav-placeholder .main-nav .nav-submenu .nav-toggle > .nav-chevron { transform: rotate(-90deg); }
    #nav-placeholder .main-nav li.opens-left > .nav-submenu { left: auto; right: 100%; }
    #nav-placeholder .main-nav li.opens-left > .nav-toggle > .nav-chevron { transform: rotate(90deg); }
    #nav-placeholder .main-nav li.align-right > .nav-submenu,
    #nav-placeholder .main-nav .nav-language > .nav-submenu { left: auto; right: 0; }
    #nav-placeholder .main-nav .nav-language > .nav-submenu { min-width: 160px; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    #nav-placeholder .nav-container { gap: 8px !important; }
    #nav-placeholder .main-nav > ul { gap: clamp(6px, 1.5vw, 18px) !important; }
    #nav-placeholder .main-nav > ul > li > .nav-link { font-size: clamp(.8rem, 1.45vw, 1rem) !important; letter-spacing: 0; }
    #nav-placeholder .main-nav > ul > li { padding-block: 6px; }
    #nav-placeholder .main-nav .nav-submenu .nav-link { font-size: .9rem; }
    #nav-placeholder .main-nav .nav-language { top: 10px !important; }
    #nav-placeholder .main-nav .nav-language > .nav-submenu { left: auto !important; right: 0 !important; }
}

@media (max-width: 767.98px) {
    #wiki-search, #education-course-grid { scroll-margin-top: 88px; }
    #nav-placeholder .mobile-logo { font-size: 1.25rem; gap: 10px; }
    #nav-placeholder .mobile-logo img { height: 32px; }
    #nav-placeholder .mobile-controls { gap: 12px; }
    #nav-placeholder .mobile-lang-container { margin-right: 0; }
    #nav-placeholder .mobile-lang-dropdown.is-open { display: block; }
    #nav-placeholder .mobile-drawer { width: min(90vw, 360px); max-width: 360px; }
    #nav-placeholder .mobile-drawer-nav { padding: 16px 0 40px; }
    #nav-placeholder .mobile-drawer .nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 16px 20px;
        color: #f0f3f5;
        font-size: .95rem;
        line-height: 1.5;
        font-weight: 500;
        white-space: normal;
    }
    #nav-placeholder .mobile-drawer .mobile-drawer-sub-menu { display: none !important; }
    #nav-placeholder .mobile-drawer .is-open > .mobile-drawer-sub-menu { display: block !important; }
    #nav-placeholder .mobile-drawer-sub-menu .nav-link { padding-left: 34px; font-size: .9rem; font-weight: 400; color: #ccd6de; }
    #nav-placeholder .mobile-drawer-sub-menu .mobile-drawer-sub-menu .nav-link { padding-left: 48px; }
    #nav-placeholder .mobile-drawer .nav-featured > .nav-link { color: #e1c89f; font-weight: 600; }
    #nav-placeholder .mobile-drawer .is-current > .nav-toggle,
    #nav-placeholder .mobile-drawer .nav-link.active { color: #e1c89f; background: rgba(255, 255, 255, .05); }
}

@media (prefers-reduced-motion: reduce) {
    #nav-placeholder *, #nav-placeholder *::after { transition: none !important; }
}