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

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

.ams-page-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-page-header-font-family);
  padding-block: var(--ams-page-header-padding-block);
  padding-inline: var(--ams-page-header-padding-inline);

  @media (min-width: $ams-breakpoint-medium) {
    padding-inline: var(--ams-page-header-medium-padding-inline);
  }

  @media (min-width: $ams-breakpoint-wide) {
    padding-inline: var(--ams-page-header-wide-padding-inline);
  }
}

.ams-page-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-page-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-page-header-logo-link-outline-offset);
  text-decoration: none;

  @media (forced-colors: active) {
    .ams-logo__emblem,
    .ams-logo__text-primary,
    .ams-logo__text-secondary {
      fill: LinkText;
    }
  }
}

.ams-page-header__logo-link--hidden {
  opacity: 0%;
  -webkit-user-select: none;

  /* Safari support is added with the prefixed property. */
  /* stylelint-disable-next-line plugin/use-baseline */
  user-select: none; // The hidden logo link section should not be selectable
}

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

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

.ams-page-header__brand-name,
.ams-page-header__brand-name-short {
  color: var(--ams-page-header-brand-name-color);
  font-size: var(--ams-page-header-brand-name-font-size);
  font-weight: var(--ams-page-header-brand-name-font-weight);
  line-height: var(--ams-page-header-brand-name-line-height);

  /* stylelint-disable-next-line plugin/use-baseline -- Unbalanced line lengths in non-supporting browsers are acceptable */
  text-wrap: var(--ams-page-header-brand-name-text-wrap);
}

.ams-page-header__brand-name-short {
  @media (min-width: $ams-breakpoint-wide) {
    display: none;
  }

  & + .ams-page-header__brand-name {
    display: none;

    @media (min-width: $ams-breakpoint-wide) {
      display: initial;
    }
  }
}

.ams-page-header__navigation {
  column-gap: var(--ams-page-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-page-header-navigation-row-gap);
}

.ams-page-header__menu {
  @include reset-ul;

  align-items: center;
  column-gap: var(--ams-page-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-page-header-menu-row-gap);
}

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

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

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

  @include text-rendering;

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

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

  @include page-header-menu-action;

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

.ams-page-header__mega-menu-button-item {
  display: initial; // Override the `hidden` attribute; the mega menu list item is only shown when CSS loads.
}

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

.ams-page-header__mega-menu-button {
  @include reset-button;

  background-color: var(--ams-page-header-mega-menu-button-background-color);
  color: var(--ams-page-header-mega-menu-button-color);
  column-gap: var(--ams-page-header-menu-item-column-gap);
  cursor: var(--ams-page-header-mega-menu-button-cursor);
  display: grid;
  font-family: inherit;
  grid-auto-flow: column;
  padding-inline: var(--ams-page-header-mega-menu-button-padding-inline);

  @include page-header-menu-action;
  @include print-exact;

  &:hover {
    background-color: var(--ams-page-header-mega-menu-button-hover-background-color);
    color: var(--ams-page-header-mega-menu-button-hover-color);
  }
}

.ams-page-header__mega-menu-button-label,
.ams-page-header__mega-menu-button-hidden-label {
  /* @deprecated These class names will be removed in 6.0.0. */
}

.ams-page-header__menu-icon-top,
.ams-page-header__menu-icon-middle,
.ams-page-header__menu-icon-bottom {
  transform-origin: center;
  transition:
    opacity 0.1s ease-in-out,
    rotate 0.2s ease-in-out,
    translate 0.1s ease-in-out;

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

.ams-page-header__menu-icon--open {
  .ams-page-header__menu-icon-top {
    rotate: 45deg;
    translate: -4px 4px;
  }

  .ams-page-header__menu-icon-middle {
    opacity: 0%;
  }

  .ams-page-header__menu-icon-bottom {
    rotate: -45deg;
    translate: -4px -4px;
  }
}

.ams-page-header__mega-menu {
  inline-size: 100%;
  padding-block: var(--ams-page-header-mega-menu-padding-block);
  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-page-header__mega-menu--closed.ams-page-header__mega-menu--closed {
  display: none;
}

.ams-page-header__grid-cell-narrow-window-only {
  display: initial; // Override the `hidden` attribute; this cell duplicates the non-fixed links in the Page Header Menu.

  @media (min-width: $ams-breakpoint-wide) {
    display: none;
  }
}