/* ============================================================
   Site navbar. One look on every page that has the bar: tabs centred and
   white, theme switch on the right, white hover underline. The home page's
   hero shares these rules.
   ============================================================ */

/* newindex.css and the theme files set colour and size with !important, so
   these do as well. */
body .navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.94) !important;
    font-size: 1.38em !important;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin: 0 10px;
    position: relative;
    top: 2px;
    transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

body .navbar-dark .navbar-nav .nav-link::after {
    bottom: 4px;
    height: 2px;
    background: #fff;
    box-shadow: none;
}

html[data-theme="light"] body .navbar-dark .navbar-nav .nav-link::after {
    background: var(--text-primary);
}

body .navbar-dark .navbar-nav .nav-link:hover,
body .navbar-dark .navbar-nav .nav-link.active {
    color: #fff !important;
    text-shadow: 0 0 14px rgba(120, 200, 255, 0.45);
}

html[data-theme="light"] body .navbar-dark .navbar-nav .nav-link:hover,
html[data-theme="light"] body .navbar-dark .navbar-nav .nav-link.active {
    text-shadow: none;
}

html[data-theme="light"] body .navbar-dark .navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

/* Tabs sit in the middle of the bar (logo left, theme switch right), like the
   reference. The collapse is taken out of flow so the tab group centres on the
   container, not on the space left over after the logo. */
@media (min-width: 768px) {
    body .navbar > .container {
        position: relative;
    }

    body .navbar .navbar-collapse {
        position: absolute;
        inset: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    body .navbar .navbar-nav {
        margin: 0 !important;
        pointer-events: auto;
    }

    body .navbar .theme-picker-nav-item--desktop {
        position: absolute;
        right: var(--bs-gutter-x, 0.75rem);
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }
}