/* ============================================================
   NAV.CSS — Layout Only
   ============================================================
   Visual glass style lives in components.css (.glass-surface).
   Button style lives in components.css (.btn .btn--primary).
   This file only controls nav positioning and logo size.
   ============================================================ */

/* Outer nav wrapper — fixed positioning */
.nav {
    padding: 20px 5%;
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
}

/* Inner glass bar — layout only, visual comes from .glass-surface */
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
}

/* Logo */
.logo img {
    width: 150px;
}

/* Nav link pills (if re-enabled) */
.pill a {
    text-decoration: none;
    color: #333;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-size: 20px;
    transition: background 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.pill a:hover {
    background: rgba(0, 110, 255, 0.5);
    background-color: rgba(0, 140, 255, 0.486);
    background-size: cover;
}

@media screen and (max-width: 600px){
    .btn--primary{
        display:none
    }
    .logo{
        align-items: center;
    }
}