/**
 * @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.
  */
  background-color: var(--ams-page-header-background-color);
  display: grid; /* Allows both instances of Logo Link to overlap */
  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 /* @deprecated */,
      var(--ams-page-header-vi-medium-padding-inline)
    );
  }

  @media (min-width: $ams-breakpoint-wide) {
    padding-inline: var(
      --ams-page-header-wide-padding-inline /* @deprecated */,
      var(--ams-page-header-vi-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; /* Lets this visible instance of Logo Link overlap the hidden one in Navigation. */
  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;

  /* Crops the logo to its emblem (the three Saint Andrew's crosses), hiding the wordmark that follows it.
  0.881rem is the midpoint between the emblem's right edge (0.735rem) and the wordmark's left edge (1.027rem)
  in the logo's coordinate space, so the crop has equal margin on both sides and doesn't depend on sub-pixel
  rounding to land in the right place. */
  inline-size: 0.881rem;
  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; /* Makes the hidden Logo Link child overlap the visible one. */
  // 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 {
  color: var(--ams-page-header-menu-item-color); /* @deprecated */
  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 {
  @include page-header-menu-action;

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

  &: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;
  @include page-header-menu-action;

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

  &[aria-expanded="true"] {
    font-weight: var(--ams-page-header-mega-menu-button-label-open-font-weight); /* @deprecated */
  }
}

.ams-page-header__mega-menu-button-label,
.ams-page-header__mega-menu-button-hidden-label {
  /* @deprecated These class names will be removed on or after 2026-09-13. */
}

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