/* =========================================================
   i18n navigation + font tuning (kr / jp / esp subfolders)
   Loaded AFTER the page's inline <style> so it overrides.
   Goal: keep the 8 nav items on ONE line in CJK / ES.
   ========================================================= */

/* Language-specific body font (font is loaded via Google Fonts link) */
body {
    font-family: 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC', sans-serif;
}

/* Active nav item highlight (consistent with main site) */
.nav-links a.active {
    color: var(--primary);
    font-weight: 700;
}
.nav-links a.active::after {
    width: 100%;
}

/* ---- Navigation layout ---- */
.navbar { padding: 0 4%; }

.nav-container {
    height: 66px;
    justify-content: flex-start;
}

/* Logo: keep compact so the long CJK/ES nav fits one line */
.logo { flex-shrink: 0; gap: 10px; }
.logo span {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.1;
}

/* Nav links: grow to fill, push right, never wrap */
.nav-links {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 18px;
    flex-wrap: nowrap;
    margin: 0;
}
.nav-links a {
    font-size: 0.9rem;
    white-space: nowrap;
    letter-spacing: .2px;
}

/* CTA button a touch tighter */
.nav-cta {
    padding: 8px 16px;
    font-size: 0.82rem;
    border-radius: 22px;
}

/* Right group: language switch + hamburger, glued to far right */
.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 18px;
    flex-shrink: 0;
}
.lang-switch {
    display: inline-flex;
    align-items: center;
    color: #c9a227;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none;
    padding: 5px 13px;
    border: 1px solid rgba(201,162,39,0.45);
    border-radius: 18px;
    transition: all .25s ease;
}
.lang-switch:hover {
    background: rgba(201,162,39,0.12);
    color: #b08d1f;
}

/* Tighten progressively on narrower desktops, before the 900px mobile menu */
@media (max-width: 1180px) {
    .nav-links { gap: 13px; }
    .nav-links a { font-size: 0.82rem; }
    .logo span { font-size: 0.95rem; }
    .nav-right { margin-left: 12px; gap: 9px; }
}
@media (max-width: 1000px) {
    .nav-links { gap: 9px; }
    .nav-links a { font-size: 0.78rem; }
    .logo span { font-size: 0.9rem; }
}

/* On mobile the inline rules hide .nav-links and show .menu-toggle.
   Keep the language switch visible next to the hamburger. */
@media (max-width: 900px) {
    .nav-right { margin-left: 0; }
}

/* ===== 多语言切换器 (lang switcher) ===== */
.lang-switcher { position: relative; display: inline-flex; align-items: center; }
.lang-current {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(45,90,39,0.06);
    border: 1px solid rgba(201,162,39,0.40);
    color: var(--primary, #2d5a27);
    font-family: inherit; font-size: 0.9rem; font-weight: 600;
    padding: 8px 14px; border-radius: 30px; cursor: pointer;
    transition: all .25s ease; white-space: nowrap; line-height: 1;
}
.lang-current:hover { background: rgba(45,90,39,0.12); border-color: var(--accent, #c9a227); }
.lang-current:focus-visible { outline: 2px solid var(--accent, #c9a227); outline-offset: 2px; }
.lang-current i.fa-globe { color: var(--accent, #c9a227); font-size: 1rem; }
.lang-current .fa-chevron-down { font-size: 0.68rem; opacity: .65; transition: transform .25s ease; }
.lang-switcher.open .fa-chevron-down,
.lang-switcher:hover .fa-chevron-down { transform: rotate(180deg); }
.lang-menu {
    position: absolute; top: calc(100% + 12px); right: 0; min-width: 176px;
    margin: 0; padding: 7px; list-style: none;
    background: #fff; border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px; box-shadow: 0 14px 44px rgba(0,0,0,0.18);
    z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.lang-switcher.open .lang-menu,
.lang-switcher:hover .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu li a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 13px; border-radius: 10px; text-decoration: none;
    color: #2b2b2b; border-left: 3px solid transparent;
    transition: background .2s ease, border-color .2s ease;
}
.lang-menu li a:hover { background: rgba(45,90,39,0.07); border-left-color: var(--accent, #c9a227); }
.lang-text { display: flex; flex-direction: column; gap: 2px; }
.lang-menu .lang-native { font-size: 0.97rem; font-weight: 600; line-height: 1.2; }
.lang-menu .lang-en { font-size: 0.74rem; color: #9a9a9a; }
.lang-menu li a.is-active { background: rgba(45,90,39,0.10); border-left-color: var(--primary, #2d5a27); }
.lang-menu li a.is-active .lang-native { color: var(--primary, #2d5a27); }
.lang-menu li a.is-active::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: var(--primary, #2d5a27); font-size: 0.8rem; margin-left: auto;
}
@media (max-width: 900px) {
    .lang-current { padding: 7px 11px; font-size: 0.84rem; }
    .lang-current-text { display: none; }
    .lang-switcher { margin-left: 8px; }
}