// Has dark mode adjustments, see dark-mode/misc.scss

.header {
  --padding-header-top: .5rem;

  display: grid;
  //grid-template-areas:
  //"utilities burger"
  //"branding ."
  //"highlights highlights";
  //grid-template-columns: 4fr 10fr 2fr;
  grid-template-columns: subgrid;
  grid-template-rows: auto;
  margin-top: 0; // required for offcanvas overlay
  grid-column-gap: 0;
  grid-row-gap: 0;
  margin-bottom: .5rem;

  @include breakpoint(m) {
    //grid-template-areas:
    //  "branding utilities burger"
    //  "branding highlights burger";
    //grid-template-columns: 3fr 12fr 1fr;
    grid-template-columns: subgrid;
    grid-template-rows: auto;
  }

  @include breakpoint(l) {
    grid-row-gap: 0;
  }
}

.header__branding {
  //grid-area: branding;
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
  align-self: end;

  @include breakpoint(m) {
    grid-row: 1;
  }

  @include breakpoint(l) {
    grid-row: 1 / span 2;
  }
}

.header__burger {
  //grid-area: burger;
  grid-column: 15 / span 2;
  grid-row: 1;
}

.header__utilities {
  //grid-area: utilities;
  grid-column: 4 / span 9;
  grid-row: 1;
  padding-top: var(--padding-header-top);
}

.header__highlights-menu {
  //grid-area: highlights;
  grid-column: 4 / span 12;
  grid-row: 2;

  @include breakpoint(m) {
    grid-column: 1 / span 16;
    grid-row: 2;
    margin-block-start: var(--row-gap);
  }

  @include breakpoint(l) {
    grid-column: 4 / span 12;
    grid-row: 2 ;
  }
}

.region-utilities-links {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}


.header__branding {
  min-width: 8rem;
  padding-block-start: 1rem;
  padding-block-end: 0.75rem;

  img, figure, svg {
    height: auto;
    width: 8rem;
  }

  @include breakpoint(l) {
    padding-block-start: 0;
  }
}

.site-logo {
  // Ensure focus outline in Firefox.
  display: inline-block;
  outline-offset: 3px;
}

.site-name {
  //display: inline-block;
  //position: relative;
  //top: .25rem;
  //left: $grid-gutter;
  //font-size: var(--font-size-xl);
  display: none;
}

.site-slogan {
  top: 1rem;
}


.header__highlights-menu {
  align-self: end;
  display: none;
  left: 1.5rem; // logo typo position
  max-width: 100%;

  @include breakpoint(m) {
    display: block;
  }

  @include breakpoint(l) {
    margin-block: 1rem 0;
  }

  ul.menu {
    margin: 0;
    padding: 0;
  }

  li {
    display: inline-block;
  }

  a {
    @extend %link-default;
    color: $color-link;
    text-decoration: none;
    font-weight: bold;
    border-width: 0;
    padding: .5rem 1rem;
  }
}

.header__burger {
  align-self: start;
  justify-self: end;
  //padding-top: var(--padding-header-top);
  padding-block-start: 1rem;
  padding-inline-end: 1rem;
  //min-width: calc(var(--grid-column-width) - var(--grid-gutter);
}

.header .header__utilities button[class*="trigger"] {
  padding-block: 0;
  padding-inline-start: 0;
  &::before {
    margin: 0;
    padding: 0.333rem;
    @extend %centericon;

    &:hover,
    &:focus {
      background-color: transparent;
    }
  }
}

header .header__burger--buttons {
  font-size: 1.25rem;
}
