/* =========================
   Nav bar (blue-gray + subtle purple)
   ========================= */

nav.site-nav {
    background: linear-gradient(
        90deg,
        #2b3444,
        #2e2f52
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 10px 20px rgba(10, 10, 18, 0.12);

    padding: 10px 16px;            /* overrides your base padding if needed */
}

/* Keep items aligned and consistent */
nav.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Link styling */
nav.site-nav a {
    display: inline-flex;
    align-items: center;

    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;

    padding: 8px 12px;
    border-radius: 10px;

    border: 1px solid transparent;
    background: transparent;

    transition:
        background 140ms ease,
        border-color 140ms ease,
        transform 140ms ease,
        color 140ms ease;
}

/* Hover: subtle purple tint */
nav.site-nav a:hover {
    background: rgba(107, 79, 230, 0.18);
    border-color: rgba(107, 79, 230, 0.28);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Keyboard focus */
nav.site-nav a:focus-visible {
    outline: 3px solid rgba(107, 79, 230, 0.45);
    outline-offset: 2px;
}

/* Current page (add aria-current="page" on that <a>) */
nav.site-nav a[aria-current="page"] {
    background: rgba(31, 138, 91, 0.22);       /* green accent */
    border-color: rgba(31, 138, 91, 0.35);
    color: #ffffff;
}

/* Optional: tighter on small screens */
@media (max-width: 700px) {
    nav.site-nav {
        padding: 10px 10px;
    }
    nav.site-nav a {
        padding: 8px 10px;
    }
}