/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

@use "../../common/breakpoint" as *;
@use "../../common/text-rendering" as *;

.ams-header {
  /*
  * The logo link section is created twice: once outside the navigation and once hidden inside it.
  * This keeps all navigation in one nav element and lets the menu wrap around the logo link section.
  * Display grid is used to let both logo link sections overlap.
  */
  display: grid;
  font-family: var(--ams-header-font-family);
  padding-block: var(--ams-header-padding-block);
  padding-inline: var(--ams-header-padding-inline);
}

.ams-header__logo-link {
  align-items: center;
  align-self: start; // To align the logo link section to the top of the header when it wraps
  column-gap: var(--ams-header-logo-link-column-gap);
  display: flex;
  grid-area: 1 / 1; // To allow this section to overlap with the second logo link section
  inline-size: fit-content;
  outline-offset: var(--ams-header-logo-link-outline-offset);
  text-decoration: none;
}

.ams-header__logo-link--hidden {
  opacity: 0%;
  user-select: none; // The hidden logo link section should not be selectable
}

.ams-header__logo-container {
  flex-shrink: 0;
  inline-size: 0.75rem;
  overflow: hidden;

  @media screen and (min-width: $ams-breakpoint-medium) {
    inline-size: auto;
  }
}

.ams-header__brand-name {
  color: var(--ams-header-brand-name-color);
  font-size: var(--ams-header-brand-name-font-size);
  font-weight: var(--ams-header-brand-name-font-weight);
  line-height: 1.35;
}

.ams-header__navigation {
  column-gap: var(--ams-header-navigation-column-gap);
  display: flex;
  flex-wrap: wrap;
  grid-area: 1 / 1; // To allow this section to overlap with the logo link section
  // This section blocks pointer events initially, so the hidden logo link section can't be activated.
  // The menu and collapsible menu set it back to auto, to make sure they can be activated.
  pointer-events: none;
  row-gap: var(--ams-header-navigation-row-gap);
}

@mixin reset-list {
  list-style: none;
  margin-block: 0;
  padding-inline-start: 0;
}

.ams-header__menu {
  align-items: center;
  column-gap: var(--ams-header-menu-column-gap);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-inline-start: auto;
  pointer-events: auto; // Set pointer events back to auto to allow the menu to be activated
  row-gap: var(--ams-header-menu-row-gap);

  @include reset-list;
}

// Do not show menu items below the wide breakpoint...
.ams-header__menu-item {
  @media screen and (not (min-width: $ams-breakpoint-wide)) {
    display: none;
  }
}

// ...unless they're fixed.
.ams-header__menu-item--fixed {
  display: revert;
}

@mixin header-menu-action {
  color: var(--ams-header-menu-item-color);
  font-size: var(--ams-header-menu-item-font-size);
  font-weight: var(--ams-header-menu-item-font-weight);
  line-height: var(--ams-header-menu-item-line-height);
  outline-offset: var(--ams-header-menu-item-outline-offset);
  padding-block: var(--ams-header-menu-item-padding-block);
  touch-action: manipulation;
  white-space: nowrap;

  @include text-rendering;

  &:hover {
    color: var(--ams-header-menu-item-hover-color);
  }
}

.ams-header__menu-link {
  display: inline-block;
  text-decoration-line: var(--ams-header-menu-link-text-decoration-line);
  text-decoration-thickness: var(--ams-header-menu-link-text-decoration-thickness);
  text-underline-offset: var(--ams-header-menu-link-text-underline-offset);

  @include header-menu-action;

  &:hover {
    text-decoration-line: var(--ams-header-menu-link-hover-text-decoration-line);
  }
}

.ams-header__mega-menu-button-item--hide-on-wide-window {
  @media screen and (min-width: $ams-breakpoint-wide) {
    display: none;
  }
}

@mixin reset-button {
  background: none;
  border: none;
  margin-block: 0; // [1]
  margin-inline: 0; // [1]
  padding-inline: 0;

  // [1] Remove the margin in older Safari.
}

.ams-header__mega-menu-button {
  column-gap: var(--ams-header-menu-item-column-gap);
  cursor: var(--ams-header-mega-menu-button-cursor);
  display: grid;
  font-family: inherit;
  grid-auto-flow: column;

  @include header-menu-action;
  @include reset-button;
}

.ams-header__mega-menu-button[aria-expanded="true"] {
  font-weight: var(--ams-header-mega-menu-button-label-open-font-weight);
}

.ams-header__mega-menu-button-label,
.ams-header__mega-menu-button-hidden-label {
  grid-area: 1 / 1; // To allow the label and the hidden label to overlap
}

// This hidden label is used to prevent a layout shift when the mega menu is opened
// and the button text becomes bold.
.ams-header__mega-menu-button-hidden-label {
  font-weight: var(--ams-header-mega-menu-button-label-open-font-weight);
  pointer-events: none;
  user-select: none;
  visibility: hidden;
}

.ams-header__menu-icon {
  line {
    stroke: currentColor;
    stroke-width: 3px;
    transform-origin: center;
    transition:
      translate 0.1s ease-in-out,
      rotate 0.2s ease-in-out,
      opacity 0.1s ease-in-out;

    @media (prefers-reduced-motion) {
      transition: none;
    }
  }

  .ams-header__menu-icon-top {
    translate: 0 -7px;
  }

  .ams-header__menu-icon-bottom {
    translate: 0 7px;
  }
}

.ams-header__menu-icon--open {
  .ams-header__menu-icon-top {
    rotate: 45deg;
    translate: 0;
  }
  .ams-header__menu-icon-middle {
    opacity: 0%;
  }
  .ams-header__menu-icon-bottom {
    rotate: -45deg;
    translate: 0;
  }
}

.ams-header__mega-menu {
  inline-size: 100%;
  pointer-events: auto; // Set pointer events back to auto to allow the mega menu to be activated

  // Remove inline padding from Grids that are used in the mega menu.
  // The grid inline padding is set on the header element.
  & .ams-grid {
    padding-inline: 0;
  }
}

.ams-header__mega-menu--closed.ams-header__mega-menu--closed {
  display: none;
}

.ams-header__grid-cell-narrow-window-only {
  @media screen and (min-width: $ams-breakpoint-wide) {
    display: none;
  }
}