/* ============================================================
   English-site overrides (/v2/en/)
   Loaded after the shared stylesheets. Only affects en pages.
   ============================================================ */

/* Brand (circular logo mark + wordmark) now lives in the shared main.css */

/* "Classic Site" capsule is wider than the Chinese version (~120px),
   so it needs a larger gutter offset and a wider breakpoint. */
@media (min-width: 1680px) {
    .legacy-link { right: -99px; }
}
@media (max-width: 1679px) {
    .legacy-link { display: none; }
}
/* Tablet portrait / small laptop: keep the quote button fully on
   screen. Selectors are boosted in specificity because the base
   rules for .nav-link / .lang-switch appear later in this file. */
@media (min-width: 769px) and (max-width: 1100px) {
    .header-inner { gap: 10px; }
    .header-actions { gap: 10px; }
    .primary-nav { gap: 0; }
    .header-actions .lang-switch span { display: none; }
    .header-actions .lang-switch { padding: 7px 9px; gap: 0; }
    .primary-nav .nav-link { padding: 10px 4px; }
    .primary-nav .nav-label { font-size: 12.5px; letter-spacing: 0; }
    .header-actions .header-cta { padding: 11px 14px; font-size: 12px; letter-spacing: 0.04em; }
}
/* 769–880px: very narrow — drop the header language pill (a language
   entry stays available in the slide-out menu) and tighten the quote
   button so nothing is cut off at the right screen edge. */
@media (min-width: 769px) and (max-width: 880px) {
    .header-actions .lang-switch { display: none; }
    .header-actions .header-cta { padding: 10px 12px; font-size: 11.5px; }
    .primary-nav .nav-link { padding: 10px 3px; }
    .primary-nav .nav-label { font-size: 12px; }
}

/* ---- Single-line navigation (no duplicate English subtitle) ---- */
.primary-nav { gap: 2px; }
/* Match the Chinese site's pill height (vertical padding 17px) so the
   nav text sits on the same optical line as the phone / quote button. */
.nav-link {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 17px 14px;
    gap: 0;
}
.nav-link::after { bottom: 4px; }
.nav-desc { display: none; }
.nav-label {
    font-size: 14.5px;
    line-height: 1.2;
    white-space: nowrap;
}

/* Drawer-only language entry (hidden on desktop) */
.lang-drawer-link { display: none; }

/* ---- Language switch pill ---- */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid rgba(212,175,55,0.45);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.35s var(--ease);
}
.lang-switch:hover {
    border-color: var(--gold);
    color: var(--gold-bright);
    background: rgba(212,175,55,0.08);
}
.lang-switch svg { color: var(--gold); flex-shrink: 0; }
.lang-switch .lang-current { color: var(--gold-bright); font-weight: 700; }
.lang-switch .lang-sep { color: rgba(255,255,255,0.35); margin: 0 1px; }

/* ---- Tablet / mobile ---- */
@media (max-width: 1024px) {
    /* Readable dark dropdown for the English mobile menu.
       The shared responsive.css paints the drawer light and sets the
       labels dark, so both have to be reverted for the dark panel. */
    .primary-nav {
        background: rgba(10, 12, 20, 0.98);
        border-bottom: 1px solid var(--border);
    }
    .primary-nav .nav-label { color: rgba(255,255,255,0.85); }
    .primary-nav .nav-link:hover .nav-label,
    .primary-nav .nav-link.active .nav-label { color: var(--gold-bright); }
    .nav-link { padding: 14px 20px; }
    .lang-drawer-link { display: flex; }
    .lang-drawer-link .nav-label { color: var(--gold-bright); }
}

@media (max-width: 768px) {
    .lang-switch { padding: 6px 11px; font-size: 12.5px; }
}

@media (max-width: 480px) {
    .lang-switch .lang-current,
    .lang-switch .lang-sep { display: none; }
}

/* ============================================================
   News page - category filter tabs
   ============================================================ */
.news-type-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: var(--space-8);
}
.news-type-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-display);
    text-decoration: none;
    transition: all 0.25s var(--ease);
}
.news-type-tab:hover {
    border-color: var(--border-gold);
    color: var(--gold);
    transform: translateY(-2px);
}
.news-type-tab.active {
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    border-color: transparent;
    color: #000;
}
.news-type-tab .tab-count {
    font-size: 12px;
    font-family: var(--font-mono);
    opacity: 0.75;
}
.news-type-tab.active .tab-count { opacity: 0.85; }

@media (max-width: 480px) {
    .news-type-tab { padding: 8px 14px; font-size: 13px; }
}