/* ========================================
   NAVIGATION COMPONENT
   ======================================== */

/* Nav container (pill) centered inside header */
header nav {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-radius: 999px;
    border: 1px solid var(--border-weak);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    overflow: visible;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;

    max-width: calc(100% - 8rem);
    white-space: nowrap;
}

header nav ul {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem;
    margin: 0;
    align-items: center;
    list-style: none;
}

/* ========================================
   PILL COMPONENT SYSTEM
   ======================================== */

/* Unified pill component (used by the individual nav links themselves and lang toggle) */
.pill {
    background: var(--glass-bg); /* default pill has glass background */
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-radius: 999px;
    border: 1px solid var(--border-weak);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.9rem;
    color: var(--link-color);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease;
    --x: 50%;
    --y: 50%;
    --pill-translate: 0;
    /* anchors use 0; toggle will override to -50% */
    transform: translateY(var(--pill-translate));
    will-change: transform, box-shadow;
}

/* Pill aura (blue) - reduced brightness to eliminate white dot artifacts */
.pill::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--x) var(--y),
            rgba(106, 176, 243, 0.12) 0%,
            rgba(106, 176, 243, 0.06) 25%,
            rgba(106, 176, 243, 0.02) 50%,
            transparent 75%);
    mix-blend-mode: normal;
    filter: blur(16px);
    opacity: 0;
    transition: opacity 220ms ease, background-position 220ms ease;
}

/* Pill interactions */
.pill.is-hovered::before,
.pill:hover::before,
.pill:focus::before {
    opacity: 1;
}

.pill:hover,
.pill.is-hovered,
.pill:focus {
    transform: translateY(calc(var(--pill-translate) - 2px));
    background: rgba(255, 255, 255, 0.03);
    color: #aee6ff;
}

.pill:active {
    transform: translateY(calc(var(--pill-translate) - 1px));
}

.pill:focus-visible,
.pill:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
        0 8px 30px rgba(106, 176, 243, 0.08),
        0 0 0 4px rgba(106, 176, 243, 0.06);
    background: rgba(255, 255, 255, 0.03);
    color: #aee6ff;
}

/* ========================================
   NAV-SPECIFIC PILL OVERRIDES
   ======================================== */

/* Nav anchors inside the pill container - override to be transparent */
header nav a.pill {
    display: inline-flex;
    --pill-translate: 0;
    border: none;
    /* remove individual pill borders */
    background: transparent;
    /* override default glass background */
    backdrop-filter: none;
    /* remove backdrop filter for nav anchors */
    -webkit-backdrop-filter: none;
}

header nav a.pill:hover,
header nav a.pill.is-hovered,
header nav a.pill:focus {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.03);
    color: #aee6ff;
    border: none;
    /* ensure no border appears on hover */
}

header nav a.pill:active {
    transform: translateY(-1px);
}

header nav a.pill:focus-visible,
header nav a.pill:focus {
    outline: none;
    border: none;
    /* no border on focus for nav anchors */
    box-shadow: 0 0 0 2px rgba(106, 176, 243, 0.06);
    /* subtle focus ring instead */
    background: rgba(255, 255, 255, 0.03);
    color: #aee6ff;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Responsive tweaks for nav */
@media (max-width: 720px) {
    header nav {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: calc(100% - 9.5rem);
        white-space: nowrap;
    }
}