/* React Bits PillNav (vanilla HTML/CSS/JS adaptation) */
.pill-nav-container {
    position: fixed;
    top: 30px;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%);
}

.pill-nav {
    --nav-h: 42px;
    --pill-pad-x: 18px;
    --pill-gap: 3px;
    width: max-content;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.pill-nav-items {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--nav-h);
    background: var(--base, #000);
    border-radius: 9999px;
}

.pill-logo {
    width: var(--nav-h);
    height: var(--nav-h);
    border-radius: 50%;
    background: var(--base, #000);
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pill-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pill-list {
    list-style: none;
    display: flex;
    align-items: stretch;
    gap: var(--pill-gap);
    margin: 0;
    padding: 3px;
    height: 100%;
}

.pill-list > li { display: flex; height: 100%; }

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 var(--pill-pad-x);
    background: var(--pill-bg, #fff);
    color: var(--pill-text, var(--base, #000));
    text-decoration: none;
    border-radius: 9999px;
    box-sizing: border-box;
    font-weight: 600;
    font-size: 16px;
    line-height: 0;
    letter-spacing: 0.2px;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.pill .hover-circle {
    position: absolute;
    left: 50%;
    bottom: 0;
    border-radius: 50%;
    background: var(--base, #000);
    z-index: 1;
    display: block;
    pointer-events: none;
    will-change: transform;
}

.pill .label-stack { position: relative; display: inline-block; line-height: 1; z-index: 2; }
.pill .pill-label { position: relative; z-index: 2; display: inline-block; line-height: 1; will-change: transform; }
.pill .pill-label-hover { position: absolute; left: 0; top: 0; color: var(--hover-text, #fff); z-index: 3; display: inline-block; will-change: transform, opacity; }

.pill.is-active::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: var(--base, #000);
    border-radius: 999px;
    z-index: 4;
}

.desktop-only { display: block; }
.mobile-only { display: none; }

.mobile-menu-button {
    width: var(--nav-h);
    height: var(--nav-h);
    border-radius: 50%;
    background: var(--base, #000);
    border: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.hamburger-line {
    width: 16px;
    height: 2px;
    background: var(--pill-bg, #fff);
    border-radius: 1px;
    transition: all 0.2s ease;
    transform-origin: center;
}

.mobile-menu-popover {
    position: absolute;
    top: 3.5em;
    left: 1rem;
    right: 1rem;
    background: var(--base, #f0f0f0);
    border-radius: 27px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    z-index: 998;
    opacity: 0;
    transform-origin: top center;
    visibility: hidden;
}

.mobile-menu-list { list-style: none; margin: 0; padding: 3px; display: flex; flex-direction: column; gap: 3px; }
.mobile-menu-popover .mobile-menu-link { display: block; padding: 12px 16px; color: var(--pill-text, #fff); background-color: var(--pill-bg, #fff); text-decoration: none; font-size: 16px; font-weight: 500; border-radius: 50px; transition: all 0.2s ease; }
.mobile-menu-popover .mobile-menu-link:hover { cursor: pointer; background-color: var(--base); color: var(--hover-text, #fff); }
.mobile-menu-link.is-active { background-color: var(--base) !important; color: var(--hover-text, #fff) !important; }

@media (max-width: 768px) {
    .pill-nav-container { width: 100%; left: 0; transform: none; }
    .pill-nav { width: 100%; justify-content: space-between; padding: 0 1rem; }
    .desktop-only { display: none; }
    .mobile-only { display: flex; }
}

/* Reference-style header: brand / Logo2 / centered links / contact. */
#pill-nav-container {
    top: clamp(8px, 0.8vw, 16px);
    left: clamp(20px, 2.7vw, 56px);
    right: clamp(20px, 2.7vw, 56px);
    width: auto;
    transform: none;
}

#pill-nav {
    width: 100%;
    min-height: var(--nav-h);
    height: auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    column-gap: clamp(8px, 1vw, 20px);
    background: transparent;
    font-family: "PingFangSCLight", "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
}

#pill-nav .nav-brand-name,
#pill-nav .nav-contact,
#pill-nav .pill {
    color: #ffffff;
    font-family: "PingFangSCLight", "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
    font-weight: 300;
    text-decoration: none;
}

#pill-nav .nav-brand-name {
    grid-column: 1 / 3;
    display: inline-flex;
    align-items: center;
    font-size: clamp(18px, 1.35vw, 34px);
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

#pill-nav .nav-logo2 {
    grid-column: 3 / 5;
    justify-self: start;
    width: clamp(42px, 2.8vw, 72px);
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#pill-nav .nav-logo2 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

#pill-nav .pill-nav-items {
    grid-column: 6 / 11;
    justify-self: center;
    width: auto !important;
    height: auto;
    min-width: 0;
    overflow: visible !important;
    background: transparent;
    border-radius: 0;
}

#pill-nav .pill-list {
    height: auto;
    padding: 0;
    gap: clamp(18px, 2.1vw, 48px);
    align-items: center;
}

#pill-nav .pill-list > li {
    height: auto;
}

#pill-nav .pill {
    height: auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: clamp(16px, 1.12vw, 28px);
    line-height: 1.2;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: visible;
    transition: opacity 0.2s ease;
}

#pill-nav .pill:hover,
#pill-nav .nav-brand-name:hover,
#pill-nav .nav-contact:hover {
    opacity: 0.68;
}

#pill-nav .pill:hover,
#pill-nav .pill.is-active,
#pill-nav .nav-contact:hover,
#pill-mobile-menu .mobile-menu-link:hover,
#pill-mobile-menu .mobile-menu-link.is-active {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
}

#pill-nav .pill .hover-circle,
#pill-nav .pill .pill-label-hover,
#pill-nav .pill.is-active::after {
    display: none !important;
}

#pill-nav .pill.is-active {
    text-decoration: none;
}

#pill-nav .pill.is-active::after {
    display: block !important;
    bottom: -0.38em;
    left: 0;
    width: 100%;
    height: 1px;
    transform: none;
    background: #ffffff;
    border-radius: 0;
}

#pill-nav .pill:hover:not(.is-active) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
}

#pill-nav .pill .label-stack,
#pill-nav .pill .pill-label {
    line-height: 1.2;
}

#pill-nav .nav-contact {
    grid-column: 11 / 13;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    font-size: clamp(18px, 1.35vw, 34px);
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

body.page-mode[data-page="home"] .weather-widget {
    top: clamp(72px, 5.8vw, 104px);
}

/* 暂时隐藏天气组件，保留原有结构便于后续恢复。 */
.weather-widget {
    display: none !important;
}

@media (max-width: 768px) {
    #pill-nav-container {
        top: 8px;
        left: 20px;
        right: 20px;
        width: auto;
    }

    #pill-nav .desktop-only {
        display: none !important;
    }

    #pill-nav {
        display: flex;
        width: 100%;
        min-height: 42px;
        padding: 0;
        gap: 0;
    }

    #pill-nav .nav-brand-name {
        font-size: 18px;
    }

    #pill-nav .nav-logo2 {
        width: 44px;
        margin-left: auto;
        margin-right: 12px;
    }

    #pill-nav .mobile-menu-button {
        display: flex;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255, 255, 255, 0.82);
        background: rgba(0, 0, 0, 0.22);
    }

    #pill-nav .hamburger-line {
        background: #ffffff;
    }

    #pill-mobile-menu {
        top: 54px;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.78);
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 18px;
        backdrop-filter: blur(18px);
    }

    #pill-mobile-menu .mobile-menu-link {
        font-family: "PingFangSCLight", "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
        font-weight: 300;
    }

    body.page-mode[data-page="home"] .weather-widget {
        top: 72px;
        left: 20px;
    }
}