/*
 * Token-driven navbar, replacing Bootstrap's fixed navbar-dark/bg-dark so the
 * navbar follows the same light/dark switch as the rest of the site instead
 * of always rendering dark. Consumes the tokens defined in theme.css.
 */

.site-navbar {
    background-color: var(--paper-raised);
    border-bottom: 1px solid var(--rule);
}

.site-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--ink);
}

.site-navbar .navbar-brand:hover,
.site-navbar .navbar-brand:focus {
    color: var(--ink);
}

/*
 * Brand wordmark: a serif "TreeviewBMS" (the product's own register - a
 * ledger, not a UI chrome font) - "BMS" set at full size like the rest of the
 * word, just in brass and tracked out, like a hallmark stamped after a name.
 * The glyph to its left isn't decoration - it's a literal 3-node
 * materialized-path tree in the same indented, cascading-elbow layout every
 * Organisation/Account/Project tree row in the app actually renders in
 * (see templates/components/_org_tree_toggle.html), not a symmetric hub.
 */
.brand-word {
    font-family: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
}

.brand-suffix {
    margin-left: .12rem;
    letter-spacing: .06em;
    color: var(--brass-strong);
}

.brand-tm {
    font-size: 1.2rem;
    color: var(--slate);
    margin-left: .1rem;
}

.brand-mark {
    flex: none;
    border-radius: 50%;
}

/* Hover tilts the finch up, as if it has just looked round. */
@media (prefers-reduced-motion: no-preference) {
    .brand-mark {
        transition: transform .18s ease;
    }

    .site-navbar .navbar-brand:hover .brand-mark {
        transform: rotate(-8deg);
    }
}

.site-navbar .nav-link {
    color: var(--slate);
    border-bottom: 2px solid transparent;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    color: var(--ink);
}

/*
 * #main-navbar (not just .site-navbar) is deliberate: static/modern_business/css/styles.css
 * is a full vendored Bootstrap theme loaded after this file, and its
 * `.navbar-nav .nav-link.active` rule matches at the same specificity (3 classes).
 * On a tie, source order wins, so a plain .site-navbar selector loses to it and the
 * active link falls back to Bootstrap's near-black default. The #id bumps specificity
 * enough to win regardless of load order.
 */
#main-navbar.site-navbar .nav-link.active {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--brass);
}

.site-navbar .navbar-toggler {
    color: var(--ink);
    border-color: var(--rule);
}

.site-navbar .logout-btn {
    color: var(--slate);
}

.site-navbar .logout-btn:hover {
    color: var(--ink);
}

.theme-toggle-btn {
    color: var(--slate);
    border: none;
    background: none;
    font-size: 1.1rem;
    line-height: 1;
    padding: .375rem .75rem;
}

.theme-toggle-btn:hover {
    color: var(--brass-strong);
}