/* Navigation Area */
.header {
  --dxp-c-component-wrapper-spacer-size: 0;
  --dxp-c-component-wrapper-spacer-size-tablet: 0;
  --dxp-c-component-wrapper-spacer-size-mobile: 0;
  --dxp-c-site-logo-display: block;
}

.custom-commerce-header {
  background-color: var(--c-brand-root);
  margin-bottom: 1.875rem;

  .header-promo-banner {
    position: relative;
    z-index: 2;
  }

  .header-wrapper {
    position: relative;
    padding-right: var(--dxp-s-section-content-spacing-inline-end);
    padding-left: var(--dxp-s-section-content-spacing-inline-start);
  }

  header::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: 100%;
    width: 0.625rem;
    background-color: var(--c-brand-color-secondary);
    z-index: 1;
  }

  .layout-header-desktop {
    min-height: 4.375rem;
    justify-content: flex-end;
  }

  .header-navigation {
    margin-left: auto;
    margin-right: 0;
    text-align: center;
  }

  .header-language-switcher {
    margin-left: auto;
    margin-right: 3rem;
  }

  .header-mega-menu {
    position: relative;
    min-height: 3.5625rem;
  }

  .header-utilities {
    position: absolute;
    top: 0;
    right: max(1rem, calc((100vw - var(--dxp-s-section-columns-max-width, 1180px) - 1rem) / 2));
    display: flex;
    flex-direction: row;
    bottom: 0;
    margin-block: auto;
    margin-left: 3.75rem;
    align-items: center;
    gap: 2rem;

    .guest-login-max-width {
      max-width: none;
    }
  }

  .header-badge-icons {
    --com-c-my-account-user-profile-login-link-color: var(--ccnavmenus-navContainer-text-color);

    .menu-button:hover {
      outline: 0;
    }

    slot,
    slot .interactions-region {
      display: flex;
      flex-direction: row;
      gap: 1rem;
    }

    .menu-trigger {
      --dxp-s-link-text-color: var(--ccnavmenus-navContainer-text-color);
    }

    .slds-icon-text-default {
      --slds-c-icon-color-foreground: var(--ccnavmenus-navContainer-text-color);
    }
  }

  .cb-outputRichText-container.ql-editor p {
    margin: 0;
  }
}

.custom-commerce-header__header-navigation-slot,
.custom-commerce-header__header-navigation-slot [slot="navigation"] .interactions-region {
  display: flex;
  flex-direction: row;
  gap: 1rem;

  .slds-button {
    background: transparent;
    padding-inline: 0.25rem;
    border: 0;
    color: var(--dxp-g-brand);
    text-transform: none;
    line-height: 1;
    opacity: 0.5;

    &:hover {
      opacity: 1;
    }
  }

  dxp_base-button {
    min-height: 4.375rem;
  }

  .slds-button--active {
    display: flex;
    justify-content: center;
    border-bottom: 0.4375rem solid var(--c-brand-color-neutral-light);
    border-top: 0.4375rem solid transparent;

    .slds-button {
      opacity: 1;
    }
  }
}

/* Header Mega Menu Navigation */
ccnavmenus-nav-menu2 {
  .comm-drilldown-navigation__bar {
    --ccnavmenus-fontFamily: FrutigerLight, sans-serif;
    --ccnavmenus-fontSize: 1.125rem;

    nav {
      --header-utilities-width: 25.625rem;
      --gap-desktop: 15rem;
      --gap-mobile: 3rem;

      width: min(calc(var(--dxp-s-section-columns-max-width, 1180px) - var(--header-utilities-width) - var(--gap-desktop)), max(0px, calc(100vw - var(--header-utilities-width) - var(--gap-mobile))));
    }

    ul.comm-drilldown-navigation__bar {
      --ccnavmenus-navContainer-background-color-hover: --ccnavmenus-navContainer-background-color;
      --ccnavmenus-navContainer-text-color-hover: var(--overwrite-navContainer-text-color-hover);
      --dxp-g-spacing-xlarge: 1rem;

      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
    }
  }

  .drillDownItem > button > c-primitive-icon {
    display: none;
  }

  .megaPopover .menuItemSpan > .menuItemSpan {
    font-size: 0.875rem;
  }

  .megaPopover > c-mega-navigation-list > [role="megaListContainer"] > .slds-grid > div > .menuItemSpan {
    a.menuLink {
      padding-top: var(--dxp-g-spacing-xxsmall);
      padding-bottom: var(--dxp-g-spacing-xxsmall);
    }

    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--overwrite-megaPopover-border-color);
  }

  .megaPopover c-mega-navigation-list c-mega-navigation-list .menuItemSpan > .menuItemSpan {
    border-bottom: none;
    font-family: var(--ccnavmenus-fontFamily, inherit);
  }

  .megaPopover,
  .hamburgerMenuContainer {
    --ccnavmenus-nav-background-color: var(rgb(0, 77, 160));
    --c-brand-color-neutral-light-contrast: var(--dxp-g-brand-contrast-1);
    --dxp-c-navigation-item-font-size: 0.875rem;
    --ccnavmenus-fontSize: 0.875rem;
    --ccnavmenus-menuItemVerticalPadding: 0.25rem;
  }

  .megaPopover {
    overflow-y: auto;
    max-height: calc(100dvh - 8rem);

    > c-mega-navigation-list {
      display: block;
      max-width: calc(var(--com-c-layout-header-max-width, var(--dxp-s-header-content-max-width)) + 2rem);
      margin-inline: auto;
    }

    a.menuLink {
      display: flex;
      align-items: flex-start;
      padding-left: 0;
      transition: color 0.15s !important;

      .labelSpan div {
        transition: color 0.15s;
      }

      &:hover {
        --ccnavmenus-nav-text-color-hover: var(--c-brand-color-secondary);
        --c-brand-color-neutral-light-contrast: var(--c-brand-color-secondary);
        --ccnavmenus-nav-background-color-hover: transparent;
      }

      &::after {
        content: '›';
        margin-left: .75rem;
        line-height: 1.2rem;
        font-size: 1.5rem;
      }
    }

    > c-mega-navigation-list > div >  .slds-grid > div {
      padding-inline: 1rem;
    }

    > c-mega-navigation-list c-mega-navigation-list .slds-p-left_medium {
      padding-left: 0;
    }
  }

  .comm-drilldown-navigation__bar > li {
    padding-bottom: 0;
  }

  /* mobile and tablet view */
  .hamburgerIconContainer .ccnavmenu-hamburger-button {
    --border-bottom-width: 6px;

    height: calc((var(--ccnavmenus-fontSize) * var(--dxp-s-body-line-height)) + var(--ccnavmenus-menuItemVerticalPadding) + var(--border-bottom-width) + var(--dxp-g-spacing-xsmall));
  }

  .hamburgerMenuContainer {
    --slds-c-button-color-border: transparent;
    --ccnavmenus-drillDownNav-width: 100%;

    overflow-y: auto;
    max-height: calc(100dvh - 9.375rem);

    .slds-tree__item:hover[ccnavmenus-treeItem_treeItem],
    .groupMenuItem[ccnavmenus-treeItem_treeItem] c-tree-item[role="treeitem"][ccnavmenus-treeItem_treeItem] > div[role="ccnavMenu-treeItemCSS"][ccnavmenus-treeItem_treeItem] > div.slds-tree__item:hover[ccnavmenus-treeItem_treeItem] {
      --c-brand-color-neutral-light-contrast: var(--ccnavmenus-nav-text-color-hover, var(--ccnavmenus-brandNavigationColorText, black));
    }
  }
}

.comm-drilldown-navigation__bar > li > a,
.comm-drilldown-navigation__bar > li > button {
  border-bottom: 6px solid transparent !important;

  &[aria-expanded="true"] {
    border-bottom-color: var(--ccnavmenus-nav-background-color, var(--overwrite-expandedNavigation-border-color)) !important;
  }
}

.megaPopover .slds-m-top_x-large > .menuItemSpan .labelSpan,
ccnavmenus-nav-menu2 .comm-drilldown-navigation__bar a,
ccnavmenus-nav-menu2 .comm-drilldown-navigation__bar button {
  font-family: FrutigerBold, sans-serif;
  font-size: 0.875rem;
}