/* ATF Frontend Language Switcher
 * v1.0.15 — FOUT hardening: pre-hide entire auth container + filter bar
 *          until first translation pass completes. Zero visible Chinese flash.
 */

/* Topbar switch button (v1.0.4) */
.atf-lang-switch{display:inline-flex;align-items:center;gap:4px;margin-left:12px;padding:6px 10px;border:1px solid transparent;border-radius:14px;background:transparent;color:#666;font-size:12px;line-height:1;height:28px;box-sizing:border-box;cursor:pointer;text-decoration:none;transition:background .18s,border-color .18s,color .18s}
.atf-lang-switch:hover{background:#EDFE63;border-color:transparent;color:#111}
.atf-lang-switch:focus-visible{outline:2px solid #222;outline-offset:2px}
.atf-lang-switch .atf-lang-icon{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.atf-lang-switch .atf-lang-label{font-family:inherit;font-weight:500;letter-spacing:.02em}
html[data-atf-lang="en"] .trp-language-switcher-container,
html[data-atf-lang="en"] .trp-floater{display:none!important}

/* v1.0.9.1: Kill the legacy "English version coming soon" toast injected by
 * atf-header-topbar's own EN button — we now own the real toggle. */
#atf-lang-hint,.atf-lang-hint{display:none!important}

/* ==========================================================================
 * v1.0.9 fix #1 — Trend-forecast card tag grid must be a clean 2×2.
 *
 * Root cause of the 3+1 wrap Joanna reported: the theme's `.trend-tags` uses
 * flex-wrap with intrinsic-width chips, so with mixed short/long English
 * labels ("Show Frontiers", "Consumer Electronics", "Future Home", "Award
 * Insights") three short chips fit on line 1 and the long chip drops to
 * line 2. Force an explicit 2-column grid on the JS-rebuilt block.
 * ========================================================================== */
html[data-atf-lang="en"] body.home .trend-forecast-section .trend-tags.trend-tags-2col{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    justify-content:end;
    justify-items:end;
    gap:6px 10px !important;
}
html[data-atf-lang="en"] body.home .trend-forecast-section .trend-tags.trend-tags-2col > span{
    text-align:right;
    white-space:nowrap;
}

/* ==========================================================================
 * v1.0.9 fix #2 — Mega-menu Fashion & Lifestyle column right-alignment.
 *
 * atf-trend-forecast-menu v1.2.4 shipped `.mega-column-text:last-child { text-align:right }`
 * plus `align-items:flex-end` so the whole rightmost column hugs the edge in
 * English mode. Joanna wants those four items (Smart Home Appliances /
 * Fashion Bags / Fine Jewelry / Future Home) centered like the CN state.
 * Override the plugin CSS instead of shipping another header-plugin build.
 * ========================================================================== */
html[data-atf-lang="en"] .atf-tfm-grid .mega-column-text:last-child,
html[data-atf-lang="en"] body > .submenu-dropdown.mega-menu.mega-menu-portaled .atf-tfm-grid .mega-column-text:last-child{
    text-align:center !important;
}
html[data-atf-lang="en"] .atf-tfm-grid .mega-column-text:last-child .mega-third-list:not(.mega-third-list-columns){
    align-items:center !important;
}
html[data-atf-lang="en"] .atf-tfm-grid .mega-column-text:last-child .mega-third-list:not(.mega-third-list-columns) .mega-third-link{
    text-align:center !important;
}

/* ==========================================================================
 * v1.0.9 fix #4 — Kill flash-of-Chinese-content on login/register pages.
 *
 * The auth pages render CN text in server-side HTML, then switcher.js swaps
 * to EN after DOMContentLoaded → mutation observer settle. That's the 1–2s
 * flash. The inline head script in atf-lang-switcher.php sets
 * <html data-atf-lang-loading="en"> before body paints; this rule hides the
 * translatable auth text until the first apply() pass finishes and
 * switcher.js removes the loading attribute.
 * Scoped narrowly to auth surfaces so we never white-out normal pages.
 * ========================================================================== */
/* v1.0.10: The real auth DOM uses .atf-auth-visual-slide-title/-desc,
 * .atf-auth-visual-description, .atf-auth-agreement__prefix, .artt-em-plan-card__desc,
 * and the modal H2 ("欢迎回来"). 1.0.9.1 targeted .auth-title / .auth-desc which
 * don't exist, so the flash never disappeared. Scope narrowly to auth surfaces. */
html[data-atf-lang-loading="en"] .atf-auth-visual-slide-title,
html[data-atf-lang-loading="en"] .atf-auth-visual-slide-desc,
html[data-atf-lang-loading="en"] .atf-auth-visual-description,
html[data-atf-lang-loading="en"] .atf-auth-agreement__prefix,
html[data-atf-lang-loading="en"] .atf-auth-agreement__doc-trigger,
html[data-atf-lang-loading="en"] .atf-auth-modal h2,
html[data-atf-lang-loading="en"] body.page-register .atf-auth-modal,
html[data-atf-lang-loading="en"] body.page-login .atf-auth-modal,
html[data-atf-lang-loading="en"] .artt-em-plan-card__desc,
html[data-atf-lang-loading="en"] [data-atf-auth-title],
html[data-atf-lang-loading="en"] [data-atf-auth-desc]{
    visibility:hidden !important;
}
/* Safety net: reveal after 1.2s no matter what, so JS failure never white-outs. */
@keyframes atf-lang-reveal { to { visibility:visible; } }
html[data-atf-lang-loading="en"] .atf-auth-visual-slide-title,
html[data-atf-lang-loading="en"] .atf-auth-visual-slide-desc,
html[data-atf-lang-loading="en"] .atf-auth-visual-description,
html[data-atf-lang-loading="en"] .atf-auth-agreement__prefix,
html[data-atf-lang-loading="en"] .atf-auth-agreement__doc-trigger,
html[data-atf-lang-loading="en"] .atf-auth-modal h2,
html[data-atf-lang-loading="en"] body.page-register .atf-auth-modal,
html[data-atf-lang-loading="en"] body.page-login .atf-auth-modal,
html[data-atf-lang-loading="en"] .artt-em-plan-card__desc{
    animation: atf-lang-reveal 0s linear 1.2s forwards;
}

/* ==========================================================================
 * v1.0.15 — Zero-flash FOUT hardening.
 *
 * v1.0.10 only hid individual text elements (.atf-auth-visual-slide-title etc)
 * so the surrounding container still painted with Chinese siblings for 1–2s.
 * v1.0.15 hides the ENTIRE auth container and filter bar until translation
 * lands, so users see either English or nothing — never Chinese.
 *
 * Reveal is driven by html.atf-lang-first-paint (set by switcher.js after the
 * first apply() pass) OR the 1.2s safety animation on the container itself.
 * ========================================================================== */
html[data-atf-lang-loading="en"] .atf-auth-modal,
html[data-atf-lang-loading="en"] .atf-auth-visual,
html[data-atf-lang-loading="en"] .atf-auth-form,
html[data-atf-lang-loading="en"] .atf-auth-agreement,
html[data-atf-lang-loading="en"] .atf-auth-page,
html[data-atf-lang-loading="en"] body.page-login .atf-auth-container,
html[data-atf-lang-loading="en"] body.page-register .atf-auth-container,
html[data-atf-lang-loading="en"] body.page-login main,
html[data-atf-lang-loading="en"] body.page-register main,
html[data-atf-lang-loading="en"] .artt-em-plan-card,
html[data-atf-lang-loading="en"] .filter-bar,
html[data-atf-lang-loading="en"] .taxonomy-filter,
html[data-atf-lang-loading="en"] .archive-filter,
html[data-atf-lang-loading="en"] .atf-filter-bar,
html[data-atf-lang-loading="en"] [data-atf-filter-bar]{
    visibility:hidden !important;
    animation: atf-lang-reveal 0s linear 1.2s forwards;
}
html.atf-lang-first-paint[data-atf-lang-loading="en"] .atf-auth-modal,
html.atf-lang-first-paint[data-atf-lang-loading="en"] .atf-auth-visual,
html.atf-lang-first-paint[data-atf-lang-loading="en"] .atf-auth-form,
html.atf-lang-first-paint[data-atf-lang-loading="en"] .atf-auth-agreement,
html.atf-lang-first-paint[data-atf-lang-loading="en"] .atf-auth-page,
html.atf-lang-first-paint[data-atf-lang-loading="en"] body.page-login .atf-auth-container,
html.atf-lang-first-paint[data-atf-lang-loading="en"] body.page-register .atf-auth-container,
html.atf-lang-first-paint[data-atf-lang-loading="en"] body.page-login main,
html.atf-lang-first-paint[data-atf-lang-loading="en"] body.page-register main,
html.atf-lang-first-paint[data-atf-lang-loading="en"] .artt-em-plan-card,
html.atf-lang-first-paint[data-atf-lang-loading="en"] .filter-bar,
html.atf-lang-first-paint[data-atf-lang-loading="en"] .taxonomy-filter,
html.atf-lang-first-paint[data-atf-lang-loading="en"] .archive-filter,
html.atf-lang-first-paint[data-atf-lang-loading="en"] .atf-filter-bar,
html.atf-lang-first-paint[data-atf-lang-loading="en"] [data-atf-filter-bar]{
    visibility:visible !important;
    animation:none !important;
}

/* ==========================================================================
 * v1.0.10 fix — EN typography hierarchy on trend cards.
 *
 * Joanna: 英文文字大小感觉没有做区分，没有主次。
 * CN state at 32/24/20/17 works fine because CN glyphs are compact and dense.
 * The EN state at the same sizes reads as four near-equal lines because the
 * Latin glyphs run wider and thinner. Drop title/subtitle/tags/text along
 * three axes at once — size, weight, color — so hierarchy actually reads.
 * ========================================================================== */
html[data-atf-lang="en"] .trend-forecast-section .trend-title{
    font-size:26px !important;
    font-weight:600 !important;
    letter-spacing:-.005em;
}
html[data-atf-lang="en"] .trend-forecast-section .trend-subtitle{
    font-size:15px !important;
    font-weight:400 !important;
    color:#8a8a8a !important;
    letter-spacing:.02em;
    text-transform:uppercase;
    margin-top:4px;
}
html[data-atf-lang="en"] .trend-forecast-section .trend-tags,
html[data-atf-lang="en"] .trend-forecast-section .trend-tags-2col{
    font-size:14px !important;
}
html[data-atf-lang="en"] .trend-forecast-section .trend-tags > span,
html[data-atf-lang="en"] .trend-forecast-section .trend-tags-2col > span{
    font-size:14px !important;
    font-weight:400 !important;
    color:#666 !important;
}
html[data-atf-lang="en"] .trend-forecast-section .trend-text,
html[data-atf-lang="en"] .trend-forecast-section .trend-text p{
    font-size:13px !important;
    font-weight:300 !important;
    color:#9a9a9a !important;
    line-height:1.55;
}

/* ==========================================================================
 * v1.0.11 — "NEW RELEASES" uppercase (EN only).
 *
 * .gallery-subtitle-right @ 37px (big section title with lime-green underlay)
 * → all-caps in EN only. Only this specific section title, no others.
 *
 * v1.0.12: card-title override REMOVED — Joanna clarified she was pointing at
 * the trend-forecast descriptions, not the New in Tech/Fashion/Lifestyle titles.
 * ========================================================================== */
html[data-atf-lang="en"] .gallery-subtitle-right{
    text-transform:uppercase !important;
    letter-spacing:.03em;
}