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

/* The phone drawer lives inside the header, so it can rise no higher than the
   header does, and the announcement bar sits one layer above the header
   (site-bars.css). While the drawer is open, opening or closing, the header
   goes above Bootstrap's backdrop, or the bar covered the drawer's name and
   its close button. */
.site-header:has(.offcanvas.show, .offcanvas.showing, .offcanvas.hiding) {
    z-index: 1046;
}

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

/* A light bar's links in the brand's text colour. Some Bootswatch themes
   (Lux) draw them at 40% black, which on a tinted ground such as the
   Cantina cream is too faint to read. The pill and block styles below still
   set their own active colours. */
.site-header--light .navbar {
    --bs-navbar-color: rgba(var(--bs-body-color-rgb), .85);
    --bs-navbar-hover-color: var(--bs-body-color);
    --bs-navbar-active-color: var(--bs-body-color);
}

.site-header--light .navbar .navbar-nav .nav-link {
    color: var(--bs-navbar-color);
}

.site-header--light .navbar .navbar-nav .nav-link:hover,
.site-header--light .navbar .navbar-nav .nav-link:focus-visible,
.site-header--light .navbar .navbar-nav .nav-link.active,
.site-header--light .navbar .navbar-nav .nav-link[aria-current="page"] {
    color: var(--bs-navbar-hover-color);
}

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

/* Bootstrap draws a dark bar's links and menu button at 55% white, which on a
   primary-coloured bar is near 2.5:1 - below the 4.5:1 text needs and the
   3:1 an icon needs. At 90% they pass on Cosmo's corrected blue
   (theme-contrast.css) and on anything darker, and still sit a step below
   the active link, which stays full white. */
.site-header .navbar[data-bs-theme="dark"] {
    --bs-navbar-color: rgba(255, 255, 255, .9);
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, .5);
}

/* Bootstrap sets the icon on the icon itself under a dark theme, so it is
   restated there rather than inherited from the bar. */
.site-header .navbar[data-bs-theme="dark"] .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 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:not(.dropdown-toggle)::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. */
/* The menu is an offcanvas (M6): inline on a desktop, a drawer on a phone,
   which scrolls inside itself however long the menu is. On a desktop its body
   is the row the old collapse was. */
@media (min-width: 992px) {
    .site-header .navbar-expand-lg .offcanvas .offcanvas-body.site-header__body {
        flex-grow: 1;
        align-items: center;
        justify-content: space-between;
    }
}

@media (max-width: 991.98px) {
    /* The drawer is the page's ground, not the bar's: with a body background
       set, that ground is light even under a dark bar, and the bar's white
       links vanished on it. The page's text is the colour written for that
       ground, whichever it is. */
    .site-header .offcanvas {
        --bs-offcanvas-width: min(22rem, 88vw);
        --bs-navbar-color: rgba(var(--bs-body-color-rgb), .85);
        --bs-navbar-hover-color: var(--bs-body-color);
        --bs-navbar-active-color: var(--bs-body-color);
    }

    /* Bootstrap whitens its close button in any dark region, so the same
       light ground lost it too. Its own glyph as a mask in the text colour,
       on a pseudo-element because a mask would clip the focus ring. */
    .site-header .offcanvas .btn-close {
        background: none;
        filter: none;
    }

    .site-header .offcanvas .btn-close::before {
        content: "";
        display: block;
        width: 1em;
        height: 1em;
        background: var(--bs-body-color);
        -webkit-mask: var(--bs-btn-close-bg) no-repeat center / 1em auto;
        mask: var(--bs-btn-close-bg) no-repeat center / 1em auto;
    }

    /* An outline button under a dark bar is drawn for that bar: Lux whitens
       it outright, so the colours are set here rather than through --bs-btn. */
    .site-header .navbar[data-bs-theme="dark"] .offcanvas .btn-outline-primary {
        color: var(--bs-body-color);
        border-color: var(--bs-body-color);
        --bs-btn-hover-bg: rgba(var(--bs-body-color-rgb), .1);
        --bs-btn-active-bg: rgba(var(--bs-body-color-rgb), .15);
    }

    /* A shadow for a photograph behind the bar has no photograph here. */
    .site-header--transparent .offcanvas .nav-link {
        text-shadow: none;
    }

    .site-header .offcanvas-body .navbar-nav .nav-link {
        min-height: 2.75rem;
        display: flex;
        align-items: center;
    }

    /* A dropdown's children open in place, indented: the drawer's accordion. */
    .site-header .offcanvas-body .dropdown-menu {
        border: 0;
        padding-block: 0;
        padding-inline-start: 1rem;
        background: transparent;
        --bs-dropdown-link-color: var(--bs-navbar-color);
        --bs-dropdown-link-hover-color: var(--bs-navbar-hover-color);
        --bs-dropdown-link-hover-bg: transparent;
        /* The profile menu's name, which would otherwise stay a grey meant
           for a white menu on a dark drawer. */
        --bs-dropdown-header-color: var(--bs-navbar-color);
        --bs-dropdown-divider-bg: rgba(var(--bs-body-color-rgb), .15);
    }

    .site-header .offcanvas-body .dropdown-item {
        min-height: 2.75rem;
        display: flex;
        align-items: center;
        white-space: normal;
    }

    .site-header__drawer-extra {
        margin-top: .75rem;
        padding-top: .75rem;
        border-top: 1px solid rgba(var(--bs-body-color-rgb), .15);
    }

    .site-header__end {
        margin-top: .75rem;
    }

    .site-header .site-menu__tile-image,
    .site-header .site-menu__tile-eyebrow {
        display: none;
    }
}

/* Logo sizes --------------------------------------------------------------- */

.site-header .site-logo {
    height: var(--site-logo-h-mobile, 2.25rem);
    transition: height .2s ease;
}

/* For the moment siteHeader.js measures the shrunk header: its real height,
   not the first frame of the logo's transition. Never painted. */
.site-header--measuring,
.site-header--measuring * {
    transition: none !important;
}

@media (min-width: 992px) {
    .site-header .site-logo {
        height: var(--site-logo-h-desktop, 2.25rem);
    }

    /* Overlap: the mark hangs below the bar instead of making it taller. */
    .site-header--overlap .navbar-brand {
        position: relative;
        align-self: flex-start;
        height: 2.5rem;
        z-index: 2;
        /* The logo is lifted out of the flow, so the brand keeps its width
           by hand, or the menu would start underneath it (M14). */
        width: calc(var(--site-logo-h-desktop, 2.25rem) * var(--site-logo-ratio, 1));
        flex-shrink: 0;
    }

    .site-header--overlap .navbar-brand .site-logo {
        position: absolute;
        top: -.25rem;
        left: 0;
    }

    /* It hangs over a two-tier header's second bar as well, so that bar's
       links start after it too, or the mark covers the first of them. */
    .site-header--overlap .site-header__second > .container {
        padding-left: calc(.75rem + var(--site-logo-h-desktop, 2.25rem) * var(--site-logo-ratio, 1) + 1rem);
    }

    /* Shrunk once a sticky header has scrolled: the logo and the bar's
       padding scale by --site-header-shrink, and a second bar folds away. */
    .site-header--shrinks.site-header--shrunk .site-logo {
        height: calc(var(--site-logo-h-desktop, 2.25rem) * var(--site-header-shrink, 1));
    }

    /* An overlapping mark stops hanging once the header has shrunk: it fits
       the bar, or it would sit over whatever is pinned under the header (a
       menu's section bar) and over the page as it scrolls. */
    .site-header--overlap.site-header--shrinks.site-header--shrunk .site-logo {
        height: min(calc(var(--site-logo-h-desktop, 2.25rem) * var(--site-header-shrink, 1)), 3.25rem);
    }

    .site-header--shrinks.site-header--shrunk .navbar {
        padding-block: calc(.5rem * var(--site-header-shrink, 1));
    }

    .site-header--shrinks.site-header--shrunk .site-header__second,
    .site-header--shrinks.site-header--shrunk .site-header__strip {
        display: none !important;
    }
}

/* Layouts ------------------------------------------------------------------ */

@media (min-width: 992px) {
    /* Centred: the logo on a row of its own, the menu and the rest beneath. */
    .site-header--layout-centred .site-header__main {
        flex-wrap: wrap;
        justify-content: center;
    }

    .site-header--layout-centred .navbar-brand {
        flex: 1 0 100%;
        text-align: center;
        margin-inline: 0;
    }

    .site-header--layout-centred .site-header__body {
        justify-content: center !important;
        gap: 1rem;
    }

    .site-header--layout-centred #siteMenu {
        margin-inline: auto;
    }

    /* Stacked: the logo above, at the start; the menu and the buttons below. */
    .site-header--layout-stacked .site-header__main {
        flex-wrap: wrap;
    }

    .site-header--layout-stacked .navbar-brand {
        flex: 1 0 100%;
        padding-block: .5rem;
    }

    .site-header--overlap.site-header--layout-centred .navbar-brand,
    .site-header--overlap.site-header--layout-stacked .navbar-brand {
        height: auto;
    }

    .site-header--overlap.site-header--layout-centred .navbar-brand .site-logo,
    .site-header--overlap.site-header--layout-stacked .navbar-brand .site-logo {
        position: static;
    }
}

/* The second bar of a two-tier header, and the thin strip above the others. */
.site-header__second,
.site-header__strip {
    font-size: .875rem;
}

.site-header__second .navbar-nav,
.site-header__strip .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
}

/* Lux, the default Bootswatch theme, puts 2rem after every .nav-item; the
   gap above is this bar's spacing, so a row of links fits on one line. */
.site-header__second .nav-item,
.site-header__strip .nav-item {
    margin-right: 0;
}

.site-header__second .nav-link,
.site-header__strip .nav-link {
    padding-block: .5rem;
    color: inherit;
    opacity: .9;
}

.site-header__second .nav-link:hover,
.site-header__strip .nav-link:hover,
.site-header__second .nav-link[aria-current="page"],
.site-header__strip .nav-link[aria-current="page"] {
    opacity: 1;
    text-decoration: underline;
}

.site-header__strip {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.site-header__second--dark { background-color: var(--bs-dark); color: #fff; }
.site-header__second--light { background-color: var(--bs-light); color: var(--bs-dark); }
.site-header__second--primary { background-color: var(--bs-primary); color: #fff; }
.site-header__second--secondary { background-color: var(--bs-secondary); color: #fff; }
.site-header__second--accent { background-color: var(--site-accent, var(--bs-warning)); color: var(--site-accent-contrast, #000); }

/* Dropdowns ----------------------------------------------------------------- */

@media (min-width: 992px) {
    /* A parent opens on hover as well as on click and the keyboard. */
    .site-header #siteMenu .dropdown:hover > .dropdown-menu {
        display: block;
    }

    .site-header #siteMenu .dropdown > .dropdown-menu {
        margin-top: 0;
    }

    /* Tiles: each child a card with its picture and eyebrow. */
    .site-menu__tiles {
        padding: 1rem;
        min-width: 32rem;
    }

    /* Four across when there are four or more, not three and one alone. */
    .site-menu__tiles:has(.site-menu__tile:nth-child(4)) {
        min-width: 42rem;
    }

    .site-menu__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
        gap: .75rem;
    }

    .site-menu__all {
        margin-bottom: .5rem;
        font-weight: 600;
    }
}

.site-menu__tile {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    white-space: normal;
    border-radius: var(--bs-border-radius);
}

.site-menu__tile-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
}

.site-menu__tile-eyebrow {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
}

.site-menu__tile-label {
    font-weight: 600;
}

/* The location switcher and the phone link. */
.site-location-switcher__toggle {
    /* The bar's own text colour in every state. Bootstrap paints a link
       button's hover, focus, press and open states in the link colour, which
       on a coloured second bar is dark on dark. currentColor in a colour
       property is the inherited colour. */
    --bs-btn-color: currentColor;
    --bs-btn-hover-color: currentColor;
    --bs-btn-active-color: currentColor;
    --bs-btn-disabled-color: currentColor;
    color: inherit;
    text-decoration: none;
    padding-inline: 0;
    font-size: inherit;
}

/* Its focus ring hugs the words, not a pill theme's oval round them; the
   theme's .btn radius comes later, so this one is the more specific. */
.site-header .site-location-switcher__toggle {
    --bs-btn-border-radius: var(--bs-border-radius);
}

/* The address under each place, a shade of the item's own colour: dark on the
   menu, light on the chosen one. Not text-muted, which reads the bar's
   colour scheme (a dark bar's light grey) on a light menu. */
.site-location-switcher__address {
    opacity: .75;
}

.site-location-switcher__change {
    text-decoration: underline;
}

/* In the phone drawer a long location name wraps, rather than pushing the
   drawer wider than the screen ("Ordering from Spicy Tortillas on wheels"). */
.site-location-switcher--drawer .site-location-switcher__toggle {
    white-space: normal;
    text-align: start;
}

/* A coloured second bar is data-bs-theme="dark" so its words are light, and
   the switcher's menu inherited that theme's border and divider - white, on
   a menu drawn on the page's light ground, so nothing edged it. The header's
   own border colour is taken where it is still the page's, and handed down. */
.site-header {
    --site-header-menu-border: var(--bs-border-color-translucent);
}

.site-header__second .site-location-switcher .dropdown-menu {
    --bs-dropdown-border-color: var(--site-header-menu-border);
    --bs-dropdown-divider-bg: var(--site-header-menu-border);
}

/* In the drawer the list opens in place under the toggle (data-bs-display
   static), and each place is its name with its address under it. */
.site-header .offcanvas-body .site-location-switcher--drawer .dropdown-menu {
    position: static;
}

.site-header .offcanvas-body .site-location-switcher--drawer .dropdown-item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-block: .5rem;
}

/* It sits beside the buttons, outside .navbar-nav, so Bootstrap never gives it
   the bar's link colour; on a dark or brand bar it would be dark on dark. */
.site-header .site-header__phone {
    white-space: nowrap;
    color: var(--bs-navbar-color);
}

.site-header .site-header__phone:hover,
.site-header .site-header__phone:focus-visible {
    color: var(--bs-navbar-hover-color);
}

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

/* With a second bar (desktop only), the gap under the header moves below it. */
@media (min-width: 992px) {
    .site-header:has(.site-header__second) .navbar {
        margin-bottom: 0;
    }

    .site-header__second {
        margin-bottom: 1rem;
    }
}

/* A full bleed page runs its first section up to the header: the gap is for
   a contained page, whose content would otherwise touch the bar, and over a
   photograph it shows as a strip of page colour. Either bar, any width. */
.site-header:has(+ .page-full) .navbar,
.site-header:has(+ .page-full) .site-header__second {
    margin-bottom: 0;
}