@import url("base.css");

/* Navbar */
.navbar {
    width: 100%;
    background: var(--nav-bg);
    border-bottom: 1px solid rgba(15,23,42,0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
}

.navbar .brand a { display: inline-flex; align-items: center; text-decoration: none; }
.navbar .brand img {
    height: 64px;
    width: auto;
    display: block;
}

.nav-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 12px;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--accent);
    font-family: 'GROBOLD', Arial, sans-serif;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background-color .15s ease, color .15s ease, transform .08s ease;
    display: inline-block;
}

.nav-links a:hover { background: rgba(99,102,241,0.08); color: hsl(235, 83%, 25%); transform: translateY(-1px); }

/* CTA style for important links */
.nav-links a.cta {
    background: var(--accent);
    color: #fff;
    padding: 8px 14px;
}

/* Keyboard focus state for accessibility */
.nav-links a:focus-visible {
    outline: 3px solid rgba(99,102,241,0.24);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Small screens: stack brand and links */
@media (max-width: 640px) {
    .navbar { flex-direction: column; gap: 8px; padding: 12px; }
    .navbar .brand { order: 0; }
    .nav-links { width: 100%; }
    .nav-links ul { justify-content: center; flex-wrap: wrap; }
    .nav-links a { font-size: 14px; }
    .navbar .brand img { height: 56px; }
}