/* ==========================================================================
   Navigation item "CHINA" (coming soon)
   Brand pill; on hover/focus/tap "CHINA" rolls away and "COMING SOON"
   rolls in (like a drum), while the pill widens to fit.
   Widths are measured by static-effects.js (--gf-w-label / --gf-w-soon).
   ========================================================================== */

.gf-china-item {
    position: relative;
}

/* the link leads nowhere yet */
.elementor-nav-menu .gf-china {
    cursor: default;
}
/* no Elementor underline pointer on this item */
.elementor-nav-menu--main .gf-china.elementor-item::before,
.elementor-nav-menu--main .gf-china.elementor-item::after {
    display: none !important;
}

/* ---------- Pill ---------------------------------------------------------- */

.gf-china__stack {
    position: relative;
    display: inline-grid;
    align-items: center;
    justify-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: #421ED9;
    color: #fff;
    box-shadow: -4px 0 0 #00E0BF;
    overflow: hidden;
    perspective: 240px;
    transition: width .45s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease;
}
.gf-china__stack[style*="--gf-w-label"] {
    /* one column as wide as the pill; the wider label overflows evenly on both sides */
    grid-template-columns: minmax(0, 1fr);
}
.gf-china__stack > * {
    grid-area: 1 / 1;
    justify-self: unsafe center;
    white-space: nowrap;
    backface-visibility: hidden;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}
/* once measured, the pill hugs the visible label and animates between widths */
.gf-china__stack[style*="--gf-w-label"] {
    box-sizing: content-box;
    width: var(--gf-w-label);
}

.gf-china__soon {
    font-size: .8em;
    font-weight: 600;
    letter-spacing: .06em;
    pointer-events: none;
    opacity: 0;
    transform: translateY(70%) rotateX(-90deg);
}

/* open: hover (mouse), keyboard focus, or tap (.is-open, set by static-effects.js) */
.gf-china-item:is(:hover, .is-open, :focus-within) .gf-china__stack {
    box-shadow: -7px 0 0 #00E0BF;
}
.gf-china-item:is(:hover, .is-open, :focus-within) .gf-china__stack[style*="--gf-w-soon"] {
    width: var(--gf-w-soon);
}
.gf-china-item:is(:hover, .is-open, :focus-within) .gf-china__label {
    opacity: 0;
    transform: translateY(-70%) rotateX(90deg);
}
.gf-china-item:is(:hover, .is-open, :focus-within) .gf-china__soon {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* ---------- Mobile overlay menu ------------------------------------------- */

/* Fix: the WordPress custom CSS forces every header link to #1a1a1a !important,
   which also hit the dark full-screen menu on phones (dark text on dark ground). */
.elementor-element-2cad26da .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item {
    color: #fff !important;
    fill: #fff !important;
}

/* no hover on phones: "Coming soon" sits on its own line under the pill */
.elementor-nav-menu--dropdown .gf-china-item .gf-china {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    row-gap: 8px;
}
.elementor-nav-menu--dropdown .gf-china-item .gf-china::after {
    /* Elementor positions this pseudo element absolutely and hides it: undo that */
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    transform: none !important;
    background: none !important;
    content: "Coming soon";
    flex: 0 0 100%;
    color: #00E0BF;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    line-height: 1.2;
    text-align: center;
}
.elementor-nav-menu--dropdown .gf-china-item .gf-china__stack {
    width: auto !important;
}
.elementor-nav-menu--dropdown .gf-china-item .gf-china__soon {
    display: none;
}
.elementor-nav-menu--dropdown .gf-china-item .gf-china__label {
    opacity: 1 !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .gf-china__stack,
    .gf-china__stack > * { transition: none !important; }
}