/* ─── Navbar ─────────────────────────────────────────────────────────────── */
/* Depends on custom properties defined in milligram.css                       */

.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background-color: var(--color-surface);       /* #1A1A1A — darker than page */
    border-bottom: 0.3rem solid var(--color-primary);
    box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.7);
}

.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5.6rem;
    padding-top: 0;
    padding-bottom: 0;
}

/* ─── Left: logo + page links ────────────────────────────────────────────── */
.navbar__left {
    display: flex;
    align-items: center;
    gap: 3.2rem;
}

.navbar__logo {
    font-family: var(--font-condensed);
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.05rem;
    text-decoration: none;
    line-height: 1;
    border-bottom: none;
}

.navbar__logo-adv {
    color: var(--color-body);
}

.navbar__logo-x {
    color: var(--color-primary);
}

.navbar__logo-image {
    display: inline-block;
    vertical-align: middle;
    height: 2.4rem;
}

.navbar__links {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar__links li {
    margin: 0;
}

.navbar__links a {
    font-family: var(--font-condensed);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: var(--color-muted);          /* #888 — visible but not dominant     */
    text-decoration: none;
    border-bottom: none;
    transition: color var(--transition);
}

.navbar__links a:hover,
.navbar__links a:focus,
.navbar__links a.active {
    color: var(--color-primary);
}

/* ─── Right: auth actions ────────────────────────────────────────────────── */
.navbar__right {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.button-sm {
    font-size: 1.1rem;
    height: 3.0rem;
    line-height: 3.0rem;
    padding: 0 1.8rem;
    letter-spacing: 0.12rem;
}

/* Outline button inside navbar — white border, white text, orange on hover   */
.navbar .button-outline {
    color: var(--color-body);
    border-color: var(--color-border-input, #3A3A3A);
    background-color: transparent;
}

.navbar .button-outline:hover,
.navbar .button-outline:focus {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: transparent;
}

/* Turbo's button_to wraps in a <form> — strip the form margin */
.navbar__right form {
    margin: 0;
}

/* ─── Body offset so content isn't hidden under the sticky bar ───────────── */
.main-content {
    padding-top: 2.4rem;
}