.header-section {
  --nav-bg-color: var(--white-100);
  --backdrop-bg-color: var(--transparent-300);

  --nav-item-text-color: var(--black-100);
  --nav-item-font-weight: var(--font-weight-normal);
  --nav-item-font-size: var(--font-size-xl);
  --nav-item-font-family: var(--font-family-nav);
  --nav-item-letter-spacing: var(--letter-spacing-xs);

  --dropdown-bg-color: var(--white-100);

  --dropdown-item-text-color: var(--black-100);
  --dropdown-item-text-hover-color: var(--grey-100);
  --dropdown-item-font-weight: var(--font-weight-normal);
  --dropdown-item-font-size: var(--font-size-l);
  --dropdown-item-font-family: var(--font-family-nav);
  --dropdown-item-letter-spacing: var(--letter-spacing-xs);

  @media (width >= 56.25rem) {
    --nav-item-font-size: var(--font-size-s);
    --dropdown-item-font-size: var(--font-size-xs);
  }

  top: 0;
  z-index: 3;
  background-color: var(--nav-bg-color);
  transition: translate 0.3s;
  position: sticky;
  border-bottom: var(--border-primary);

  &.not-scrolling-up:not(:focus-visible):has(:not(.mobile-menu-button[aria-expanded="true"])) {
    translate: 0 -100%;
    border-bottom-width: 0px;
  }

  &.not-scrolling-up:not(:focus-visible):has(:not(.mobile-menu-button[aria-expanded="true"])) .has-dropdown:has(.dropdown-button[aria-expanded="true"]) .dropdown-menu {
    translate: -50% -100%;
  }

  &:has(.mobile-menu-button[aria-expanded="true"]) .header-navigation {
    display: flex;

    @media (width < 56.25rem) {
      @supports (transition-behavior: allow-discrete) {
        transform: translateX(0);

        @starting-style {
          transform: translateX(100%);
        }
      }
    }
  }

  &:has(.mobile-menu-button[aria-expanded="true"]):after {
    @media (width < 56.25rem) {
      content: '';
      position: fixed;
      height: 100%;
      width: 100%;
      inset: 0;
      background-color: var(--backdrop-bg-color);
      z-index: 1;
    }
  }
}

.header-section .container {
  align-items: center;
  display: flex;
  gap: 2rem;
  padding-block: 1.25rem;
  justify-content: space-between;
}

body:has(.mobile-menu-button[aria-expanded="true"]) .skip-link {
  display: none;
}

body:has(.mobile-menu-button[aria-expanded="true"]) {
  @media (width < 56.25rem) {
    overflow: hidden;
  }
}

.header-logo,
.header-mobile-logo {
  transition: opacity 0.3s;

  &:hover {
    opacity: 0.8;
  }
}

.header-logo img,
.header-mobile-logo img {
  width: 16rem;
  min-width: 3rem;
}

.header-mobile-logo-container {
  display: flex;
  align-items: center;
  column-gap: 1rem;
  justify-content: space-between;
  flex-direction: row-reverse;

  @media (width >= 56.25rem) {
    display: none;
  }
}

.header-menu-close-button:after {
  mask-image: url('../../assets/icons/close.svg');
  display: block;
}

.header-navigation {
  display: none;
  width: 100%;
  flex-direction: column;
  position: fixed;
  height: 100%;
  top: 0;
  right: 0;
  overflow: auto;
  padding: 2rem;
  background-color: var(--nav-bg-color);
  max-width: 30rem;
  row-gap: 2rem;
  z-index: 2;

  @media (width >= 56.25rem) {
    width: 100%;
    flex-direction: row;
    position: initial;
    height: auto;
    display: flex;
    justify-content: space-between;
    column-gap: 0.5rem;
    row-gap: 0;
    overflow: initial;
    padding: 0;
    max-width: none;
    z-index: unset;
  }

  @media (width < 56.25rem) {
    @supports (transition-behavior: allow-discrete) {
      transition: transform 0.3s, overlay 0.3s, display 0.3s;
      transition-behavior: allow-discrete;
      transform: translateX(100%);
    }
  }
}

.header-menu {
  display: flex;
  gap: 1.5rem;
  flex-direction: column;

  @media (width >= 56.25rem) {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    row-gap: 0;
  }
}

.header-menu-item .dropdown-button,
.header-menu-item > a,
.header-menu-item-label {
  font-weight: var(--nav-item-font-weight);
  font-size: var(--nav-item-font-size);
  font-family: var(--nav-item-font-family);
  letter-spacing: var(--nav-item-letter-spacing);
  color: var(--nav-item-text-color);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.5rem;
  transition: text-decoration-color 0.3s;
  min-height: 1.5rem;
  align-items: center;
  display: flex;
}

.header-menu-item-label > a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.5rem;
  transition: text-decoration-color 0.3s;


  @media (width < 56.25rem) {
    display: none;
  }
}

.header-menu-item.has-link .dropdown-button-label { 
  @media (width >= 56.25rem) {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: clip;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

.dropdown-menu-item.overview-link {
  @media (width >= 56.25rem) {
    display: none;
  }
}

.header-menu-item {
  &:hover .dropdown-button,
  &:hover > a,
  &:hover .header-menu-item-label > a {
    text-decoration-color: currentColor;
  }

  &:has([aria-current="page"]) > a,
  &:has([aria-current="page"]) > .dropdown-button,
  &:has([aria-current="page"]) .header-menu-item-label > a {
    text-decoration-color: currentColor;
  }
}

.has-dropdown {
  position: relative;

  &:has(.dropdown-button[aria-expanded="true"]):after {
    @media (width >= 56.25rem) {
      content: "";
      height: 1.25rem;
      left: 0;
      position: absolute;
      width: 100%;
    }
  }

  &:has(.dropdown-button[aria-expanded="true"]) .dropdown-menu {
    display: flex;

    @supports (transition-behavior: allow-discrete) and (interpolate-size: allow-keywords) {
      @media (width < 56.25rem) {
        height: auto;
        padding-block: 1.25rem;
        margin-block: 1.25rem;

        @starting-style {
          height: 0;
          padding-block: 0;
          margin-block: 0;
        }
      }
    }
  }
}

.dropdown-button {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;

  &:after {
    mask-image: url('../../assets/icons/angle-down.svg');
    display: block;
    transition: rotate 0.3s;
    margin-left: 0.25rem;
  }

  &[aria-expanded="true"]:after {
    rotate: -180deg;
  }
}

.dropdown-menu {
  display: none;
  row-gap: 1rem;
  justify-content: space-between;
  margin-block: 1.25rem;
  padding: 1.25rem;
  border: var(--border-current);
  flex-direction: column;

  @media (width >= 56.25rem) {
    left: 50%;
    position: absolute;
    translate: -50% 0;
    width: max-content;
    background-color: var(--dropdown-bg-color);
    margin-block: 1.25rem 0;
  }

  @supports (transition-behavior: allow-discrete) and (interpolate-size: allow-keywords) {
    @media (width < 56.25rem) {
      transition: height 0.3s, display 0.3s, padding-block 0.3s, margin-block 0.3s;
      transition-behavior: allow-discrete;
      height: 0;
      padding-block: 0;
      margin-block: 0;
      overflow: hidden;
    }
  }
}

.dropdown-menu-item {
  width: 100%;
  display: flex;
}

.dropdown-menu-item > a {
  width: 100%;
  font-weight: var(--dropdown-item-font-weight);
  font-size: var(--dropdown-item-font-size);
  font-family: var(--dropdown-item-font-family);
  letter-spacing: var(--dropdown-item-letter-spacing);
  color: var(--dropdown-item-text-color);
  transition: color 0.3s;

  &:hover {
    color: var(--dropdown-item-text-hover-color);
  }

  &[aria-current="page"] {
    color: var(--dropdown-item-text-hover-color);
  }
}

.header-utils {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.mobile-menu-button {
  &:after {
    mask-image: url('../../assets/icons/bars.svg');
    display: block;
  }

  @media (width >= 56.25rem) {
    display: none;
  }
}