/* The site header, as arranged under Settings, Page Settings.
   ---------------------------------------------------------------------------
   Linked by Pages/Shared/_Layout.cshtml only, and every rule is scoped under
   .site-header, which only that layout emits. Nothing here may move to
   site.css: the admin layout loads that one, and a bare .navbar rule would
   restyle every admin screen.

   Each setting becomes a class on <header> and the rules below do the rest,
   the same way a component's style setting works. */

.site-header {
    /* Bootstrap's own fixed-header layer: over the page, under a modal. */
    z-index: 1030;
    transition: transform .3s ease, background-color .3s ease;
}

.site-header .navbar {
    /* Was mb-3 in the markup. It lives here because the transparent header has
       to take it back, and a class Razor conditionally removes is a branch
       this does not need. */
    margin-bottom: 1rem;
    transition: background-color .3s ease, border-color .3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header .navbar {
        transition: none;
    }
}

/* A header pinned to the top of every printed sheet is nobody's intention. */
@media print {
    .site-header {
        position: static !important;
        transform: none !important;
    }
}

/* Appearance ---------------------------------------------------------------
   Written against the theme's variables rather than the .bg-* classes, so the
   bar follows whichever Bootswatch theme the site is set to. */

.site-header--primary .navbar {
    background-color: rgba(var(--bs-primary-rgb), 1);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.site-header--light .navbar {
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.site-header--dark .navbar {
    background-color: rgba(var(--bs-dark-rgb), 1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* Transparent means the page shows through, which means the bar takes no room
   in the flow. The page then has to open with something a menu can sit on; the
   setting says so in as many words. */
.site-header--transparent {
    position: absolute;
    inset-inline: 0;
    top: 0;
}

.site-header--transparent .navbar {
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
    margin-bottom: 0;
}

/* A photograph can be light exactly where a link sits. A shadow costs nothing
   and is the difference between readable and not. */
.site-header--transparent .navbar-brand,
.site-header--transparent .navbar .nav-link {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* Once the bar is off the top of the page there is body text behind it, and
   nothing transparent over body text can be read. siteHeader.js adds the
   class; there is no setting for it because there is no sensible second
   answer. */
.site-header--transparent.site-header--scrolled .navbar {
    background-color: rgba(var(--bs-primary-rgb), 1);
    border-bottom-color: rgba(0, 0, 0, .1);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.site-header--transparent.site-header--scrolled .navbar-brand,
.site-header--transparent.site-header--scrolled .navbar .nav-link {
    text-shadow: none;
}

/* Position -----------------------------------------------------------------
   Sticky rather than fixed: it keeps its space in the flow, so nothing jumps
   when it pins and there is no spacer to keep in step with the bar's height.
   Only the transparent header needs fixed, because sitting over the page means
   being out of the flow by definition. */

.site-header--sticky {
    position: sticky;
    top: 0;
}

.site-header--transparent.site-header--sticky {
    position: fixed;
}

/* .site-header--static needs no rule at all: static is the absence of these. */

/* Hide on scroll -----------------------------------------------------------
   Sliding away is the only one of the three ways to hide a bar that says where
   it went. The transform sits on the header rather than the navbar so it works
   the same whether the header is sticky or fixed, and leaves no empty strip. */

.site-header--autohide {
    will-change: transform;
}

.site-header--autohide.site-header--hidden {
    transform: translate3d(0, -100%, 0);
}

/* Width --------------------------------------------------------------------
   Neutralising the container the markup already has, rather than branching in
   Razor to leave it out. The gutter stays so the logo is not against the
   glass. */

.site-header--w-full .navbar > .container {
    max-width: none;
    width: 100%;
    padding-inline: 1.5rem;
}

/* Menu position and link styles --------------------------------------------
   Everything below is desktop only. Under the navbar's breakpoint the links
   are a stacked list, where a pill or a full-height block reads as a mistake
   and "alignment" means nothing.

   #siteMenu is the menu the site owns; the layout already depends on that id
   for scrollspy. Scoping to it leaves the cart and account icons, which are a
   navbar-nav of their own, in the plain treatment. */

@media (min-width: 992px) {

    /*  Bootstrap's own auto margins, which is how any navbar aligns a menu.
        The menu used to carry flex-grow-1, which swallowed the whole row and
        left the margins nothing to absorb - and being a utility, it came with
        !important, so no rule here could have taken it back. It was dropped
        from the component instead, which leaves the alignment to these three
        and reproduces the old layout exactly at "beside the logo". */
    .site-header--menu-start #siteMenu { margin-inline-end: auto; }
    .site-header--menu-center #siteMenu { margin-inline: auto; }
    .site-header--menu-end #siteMenu { margin-inline-start: auto; }

    .site-header #siteMenu .nav-link {
        position: relative;
        transition: color .2s ease, background-color .2s ease, border-color .2s ease;
    }

    /*  Every style below matches two markers, and they are not the same thing:
        aria-current="page" is the page you are on, decided on the server, and
        .active is what scrollspy puts on the link whose section is on screen.
        A rule matching only one is right on a blog post and wrong on the home
        page. */

    /* Underline: a rule that grows under the word. */
    .site-header--nav-underline #siteMenu .nav-link::after {
        content: "";
        position: absolute;
        left: .5rem;
        right: .5rem;
        bottom: .25rem;
        height: 2px;
        background-color: currentColor;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .2s ease;
    }

    .site-header--nav-underline #siteMenu .nav-link:hover::after,
    .site-header--nav-underline #siteMenu .nav-link:focus-visible::after,
    .site-header--nav-underline #siteMenu .nav-link.active::after,
    .site-header--nav-underline #siteMenu .nav-link[aria-current="page"]::after {
        transform: scaleX(1);
    }

    /* Filled pill. */
    .site-header--nav-pill #siteMenu .nav-link {
        border-radius: 50rem;
        padding-inline: .85rem;
    }

    .site-header--nav-pill #siteMenu .nav-link:hover,
    .site-header--nav-pill #siteMenu .nav-link:focus-visible,
    .site-header--nav-pill #siteMenu .nav-link.active,
    .site-header--nav-pill #siteMenu .nav-link[aria-current="page"] {
        background-color: rgba(var(--bs-emphasis-color-rgb, 255, 255, 255), .15);
        color: var(--bs-navbar-active-color);
    }

    /* Full-height block: the bar gives up its own vertical padding and the
       link becomes the thing that sets the height. */
    .site-header--nav-block .navbar {
        padding-block: 0;
    }

    .site-header--nav-block #siteMenu {
        align-self: stretch;
    }

    .site-header--nav-block #siteMenu .nav-item {
        display: flex;
    }

    .site-header--nav-block #siteMenu .nav-link {
        display: flex;
        align-items: center;
        padding-block: 1.1rem;
        padding-inline: 1rem;
    }

    .site-header--nav-block #siteMenu .nav-link:hover,
    .site-header--nav-block #siteMenu .nav-link:focus-visible,
    .site-header--nav-block #siteMenu .nav-link.active,
    .site-header--nav-block #siteMenu .nav-link[aria-current="page"] {
        background-color: rgba(var(--bs-emphasis-color-rgb, 255, 255, 255), .15);
        color: var(--bs-navbar-active-color);
    }
}

/* An open menu longer than the screen, inside a header pinned to the top, is a
   menu you cannot reach the bottom of. */
@media (max-width: 991.98px) {
    .site-header--sticky .navbar-collapse,
    .site-header--transparent .navbar-collapse {
        max-height: calc(100vh - var(--site-header-height, 4rem));
        overflow-y: auto;
    }
}