/*
 * 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);
}

/* No vertical padding: the 44px finch already fills the navbar's height. */
.site-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding-top: 0;
    padding-bottom: 0;
    color: var(--ink);
}

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

/*
 * Brand wordmark: "LedgerFinch" in Merriweather Black, matching the logo
 * artwork - one solid word, "Finch" just switching to amber. The font file
 * is a Google Fonts subset holding only the letters of "LedgerFinch" (2KB,
 * SIL Open Font License), so it is useless for any other text.
 */
@font-face {
    font-family: "LedgerFinch Wordmark";
    font-weight: 900;
    font-display: swap;
    src: url("../vendor/fonts/merriweather-900-wordmark.42ba29277af4.woff2") format("woff2");
}

.brand-word {
    font-family: "LedgerFinch Wordmark", ui-serif, Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
    color: var(--logo-ledger);
}

.brand-suffix {
    color: var(--logo-finch);
}

.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);
}