/* Header styles. */
.header {
  background: var(--c-primary-blue);
  padding-top: var(--spacing-1-5);
  padding-bottom: var(--spacing-1-5);
  position: sticky;
  top: 0;
  z-index: 101; /* To overlay over Klaro button */

  /* Ensure menu works and looks as expected for logged in users. */
  .contextual-region {
    position: static;
  }

  /* Shared styles for mobile toggle buttons. */
  .header__button {
    color: var(--c-primary-light);
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    display: flex;
    justify-content: center;
  }

  .header__button .button__icon {
    height: 1.5rem; /* 24px */
    width: 1.5rem; /* 24px */
  }
}

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Header button container. */
.header__button-container {
  display: flex;
}

.header__menu-container {
  display: none;
}

/* Header - search open styles. */
.header.search-open {
  background: var(--c-primary-dark);
  border-bottom: var(--spacing-2px) solid var(--c-dark-80); /* 2px */

  .search-bar {
    display: block;
  }
}

/* Header - menu open styles. */
.header.menu-open {
  background: var(--c-primary-dark);
  border-bottom: var(--spacing-2px) solid var(--c-dark-80); /* 2px */

  .header__menu-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100dvh - 4.125rem);  /* 66px */
    background: var(--c-primary-dark);
    overflow: auto;
    position: absolute;
    top: 4.125rem; /* 66px */
    left: 0;
    z-index: 100; /* To overlay over Klaro button */
  }

  .header__menu-container:has(.is-expanded) {
    overflow: visible;
  }
}

/* Header main - container for buttons. */
.header__main {
  display: flex;
}

/* Header logo. */
.header__logo__img {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing);
}

.logo-brand {
  width: 2.5rem; /* 40px */
  height: 2.5rem; /* 40px */
}

.logo-desktop {
  display: none;
}

/* Contact button styles. */
.header__contact {
  padding: var(--spacing-8) var(--spacing-2);

  p {
    margin: 0;
  }

  a {
    background: var(--c-primary-light);
    display: flex;
    padding: var(--spacing-2) var(--spacing-4);
    justify-content: center;
    align-items: center;
    color: var(--c-primary-dark);
    font-size: var(--text-cta);
    font-weight: 600;
    border-radius: 100px;
    transition: background 0.25s ease-in-out,
    color 0.1s ease-in-out;
  }

  a:visited {
    color: var(--c-primary-dark);
  }

  a:hover {
    background: var(--c-primary-dark);
    color: var(--c-primary-light);
    text-decoration: none;
  }
}

/* Desktop search button - extra class for specificity. */
.button.header__button--search-desktop {
  display: none;
}

.button.header__button--search:hover .button__icon {
  color: var(--c-primary-orange);
}

/* Tablet breakpoint. */
@media (min-width: 768px) {
  .logo-brand {
    width: 3rem; /* 48px */
    height: 3rem; /* 48px */
  }

  .header.menu-open .header__menu-container {
    height: calc(100dvh - 4.625rem );  /* 74px */
    top: 4.625rem; /* 74px */
  }

  .header__contact a {
    display: inline-flex;
  }
}

/* Desktop breakpoint. */
@media (min-width: 1200px) {
  .header {
    padding-top: var(--spacing);
    padding-bottom: var(--spacing);
  }

  .header.menu-open {
    .header__menu-container {
      display: flex;
      flex-direction: row;
      position: static;
      height: fit-content;
      background-color: unset;
    }
  }

  /* Needed for specificity. */
  .header__button.header__button--menu {
    display: none;
  }

  .header__menu-container {
    display: flex;
  }

  .header__contact {
    padding: 0;
  }

  .logo-desktop {
    display: block;
    width: 5.875rem; /* 94px */
    height: 0.875rem; /* 14px */
  }

  /* Search icon logic. Button classes needed for specificity. */
  .button.header__button--search-mobile {
    display: none;
  }

  .button.header__button--search-desktop {
    display: block;
    width: 3.625rem; /* 58px */
    height: 3.625rem; /* 58px */
    margin: 0 var(--spacing-half);

    .button__icon {
      width: 3.625rem; /* 58px */
      height: 3.625rem; /* 58px */
    }
  }
}