/* styles that are specific to the Site Header go here */

/* Z-index of Site Header elements */

.site-header {
    --header-z-index-mega-menu: 0;
    --header-z-index-topbar: 1;
    --header-z-index-main: 2;
    --header-z-index-searchbar: 3;
    --theme-header-topbar-text: var(--override-button-primary-filled-text, #fff);
    --theme-header-topbar-bg: var(--override-button-primary-filled-bg, var(--theme-fill-10));
    --theme-header-border-color: var(--theme-fill-40);

    position: fixed;
    top: 0;
    z-index: var(--theme-z-index-header);
    width: 100%;
    background: var(--theme-body-color);
    border-bottom: 1px solid var(--theme-header-border-color);
}

.site-topbar {
    position: relative;
    z-index: var(--header-z-index-topbar);
    color: var(--theme-header-topbar-text);
    background-color: var(--theme-header-topbar-bg);
}

.site-header__inner {
    position: relative;
    z-index: var(--header-z-index-main);
    padding-top: var(--space-x2);
    padding-bottom: var(--space-x2);
    background: var(--theme-body-color);
}

@media (min-width: 992px) {
    .site-header__inner {
        flex: 0 0 auto;
    }
}

.site-header__inner--row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-x8);
    align-items: center;
    justify-content: space-between;
}

.site-topbar__inner {
    display: flex;
    gap: var(--space-x2);
    align-items: center;
    justify-content: center;
    padding: var(--space) var(--space-x5);
    font-size: calc((var(--theme-font-size-base) * var(--theme-font-size-scale)) - 4px);
}

.site-topbar__dummy,
.site-topbar__info {
    display: none;
    flex: 1;
}

@media (min-width: 700px) {
    .site-topbar__dummy,
    .site-topbar__info {
        display: flex;
    }
}

.site-topbar__info {
    gap: var(--space-half);
    align-items: center;
    justify-content: flex-end;
}

.site-topbar__link {
    white-space: nowrap;
}

.site-header__logo-wrapper {
    display: flex;
    justify-content: center;
}

@media (min-width: 992px) {
    .site-header__logo-wrapper {
        justify-content: initial;
    }
}

.site-header__menu-button-wrapper {
    flex: 1;
}

.site-header__nav-linklist {
    display: flex;
    flex-wrap: wrap; /* TODO: Add "More" link (ESHOP-18183) */
    gap: var(--space-x3);
    padding: 0;
    margin: 0;
    list-style: none;
}

.site-header__actions {
    display: flex;
    gap: var(--space-x2);
}

.site-header__nav-link {
    font-size: var(--theme-font-size-base);
    font-weight: var(--theme-font-weight-heavy);
    color: var(--theme-heading-color);
    text-decoration-thickness: 2px;
    text-decoration-color: transparent;
    text-underline-offset: 0;
    letter-spacing: 0.3px;
}

.site-header__nav-link:hover {
    text-decoration-color: currentcolor;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.3s ease-in-out, text-underline-offset 0.3s ease-in-out;
}

.site-header__utility-buttons {
    display: flex;
    gap: var(--space-x2);
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.site-header__utility-buttons .location-picker_button {
    padding: var(--space-x2);
}

.site-header__utility-button--cart.is-updated {
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-animation: wobble-hor-bottom 0.8s both;
    animation: wobble-hor-bottom 0.8s both;
}

.site-header__underline {
    margin: 0;
    border: none;
    border-top: 1px solid var(--theme-header-border-color);
    transition: margin 0.3s ease-in-out;
}

@media (min-width: 992px) {
    .site-header__underline {
        margin: 0 var(--space-x2);
    }
}

.is-showing-megamenu .site-header__underline {
    visibility: hidden;
}

/* full width underline when we have scrolled down (i.e. header is "stuck" to top) */
.is-scrolled .site-header__underline {
    margin: 0;
}