@forward "title-bar/title-bar";
@forward "tool-nav/tool-nav";

@use "../../tokens/color" as *;
@use "../../tokens/screens" as *;
@use "../../tokens/spacing" as *;
@use "../../base/mixins";
@use "../../tokens/font" as *;

.iati-header {
  display: flex;
  flex-direction: column;
}

.iati-header__container {
  @include mixins.page-width-container();
}

.iati-header__section--first {
  background-color: #fff;
  .iati-header__container {
    @include mixins.columns();
    flex-wrap: wrap;
    padding-block: 0.5rem;
  }
}

.iati-header__section--last {
  .iati-header__container {
    padding-block: 1rem;
    display: flex;
    flex-direction: column;
    &:not(:has(.iati-header__nav[hidden])) {
      padding-block-end: 0;
    }
  }
}

.iati-header__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: flex-start;
  border-block-end: 1px solid #fff;
  padding-block-end: 1rem;
  margin-block-end: 0.5rem;
  > :last-child {
    margin-inline-start: auto;
  }
  @media (min-width: $mobile_nav_breakpoint) {
    border-block-end: none;
    padding-block-end: 0;
    margin-block-end: 0;
    > :last-child {
      margin-inline-start: 0;
    }
  }
}

.iati-header__nav {
  border-block-start: 1px solid #fff;
  display: none;

  @media (min-width: $mobile_nav_breakpoint) {
    display: block;
  }
}

.iati-header__logo {
  height: 2.5rem;
  max-width: 100%;
  @media (min-width: $screen-sm) {
    height: 3.5rem;
  }
}

.iati-header__general-nav {
  display: none;

  @media (min-width: $mobile_nav_breakpoint) {
    display: block;
  }

  a {
    font-family: $font-stack-heading;
    text-decoration: none;
    font-weight: $font-weight-heading;
    color: $color-teal-90;
    font-size: 1.0625rem;
    line-height: 1.1;
    &:visited,
    &:hover {
      color: $color-blue-70;
    }
  }
}

.iati-header .iati-menu-toggle--open {
  @media (min-width: $mobile_nav_breakpoint) {
    display: none;
  }
}

.iati-header--compact {
  .iati-header__main-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    @media (min-width: $mobile_nav_breakpoint) {
      flex-direction: row-reverse;
      align-items: center;
      gap: 2rem;
      justify-content: space-between;
    }
  }

  .iati-header-title {
    flex: 1 1 0;
    min-width: 0;
  }

  .iati-header__actions {
    flex-shrink: 0;
  }

  .iati-brand-background__content {
    @media (min-width: $mobile_nav_breakpoint) {
      padding-block: 0;
    }
  }
}