/*
 * site-header - the sticky masthead.
 *
 * Loaded from site/layouts/app.blade.php rather than pushed from a page: the
 * header is rendered by the layout on every page, and a @push from inside a
 * body partial would arrive after @stack('styles') has already rendered.
 *
 * The brand lockup, .icon-btn and .phone-link are global (template.css)
 * because the footer and the call bar use them too.
 */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    background-color: var(--site-surface);
    border-bottom: 1px solid var(--site-border);
}

/* Below 360px the lockup and the call and menu buttons do not fit on one row,
   and the buttons wrapped under it, doubling the sticky header. The tagline
   is the widest part of the lockup, so it goes; the footer still carries it. */
@media (max-width: 359.98px) {
    .site-header .brand-tag {
        display: none;
    }
}

.site-header .navbar-nav .nav-link {
    font-weight: 600;
    color: var(--site-text);
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--site-border);
}

@media (min-width: 992px) {
    .site-header .navbar-nav .nav-link {
        border-bottom: 0;
        padding-inline: 0.85rem;
    }

    .site-header .navbar-nav .nav-link:hover,
    .site-header .navbar-nav .nav-link.active {
        color: var(--site-primary);
    }
}