$grav-page-heading-logo-width: 250px;

// Note: The Page Header always spans the full width of the viewport. This
// is in case we want to give it any kind of full-bleed background styling.
// The child elements within therefore need to respect the maximum content
// width ($grav-page-content-max-width) themselves, where necessary.
body > header {
  $trigger-breakpoint: gravy-breakpoint(medium);

  > div {
    @include grav-l-container;

    display: flex;
    flex-wrap: wrap;
    padding-top: $grav-sp-m;
    padding-bottom: $grav-sp-m;
    align-items: center;
    justify-content: space-between;

    @media (min-width: $trigger-breakpoint) {
      padding-top: 0;
    }
  }

  .grav-c-page-header__logo {
    width: 70%; // 2/3 ish of the space

    @media (min-width: $trigger-breakpoint) {
      max-width: 250px;
      margin: $grav-sp-m $grav-sp-m 0 0;
      flex-shrink: 0;
    }
  }

  .grav-c-logo {
    display: block;
    max-height: 33px; // Otherwise IE11 makes it 150px tall :-(
    fill: $grav-co-neutral-asphalt;

    @media (min-width: $trigger-breakpoint) {
      width: 100%;
    }
  }

  /* stylelint-disable-next-line selector-max-compound-selectors */
  a:hover .grav-c-logo {
    fill: $grav-co-neutral-warm-grey;
  }

  .grav-c-toggle-menu {
    flex-shrink: 0;

    @media (min-width: $trigger-breakpoint) {
      display: none;
    }

    /* stylelint-disable-next-line selector-max-compound-selectors */
    &[aria-pressed] ~ .grav-c-nav-menu,
    &[aria-pressed='false'] ~ .grav-c-nav-menu {
      max-height: 0;
      overflow: hidden;
      transition: max-height $grav-tr-speed-slow;

      @media (min-width: $trigger-breakpoint) { // stylelint-disable-line max-nesting-depth
        display: flex;
        max-height: none;
        overflow: visible;
      }
    }

    /* stylelint-disable-next-line selector-max-compound-selectors */
    &[aria-pressed='true'] ~ .grav-c-nav-menu {
      max-height: 100vh;

      @media (min-width: $trigger-breakpoint) { // stylelint-disable-line max-nesting-depth
        display: flex;
      }
    }
  }

  .grav-c-nav-menu {
    width: 100%;
    margin-top: $grav-sp-s;

    @media (min-width: $trigger-breakpoint) {
      width: auto;
      margin-top: $grav-sp-m;
    }
  }
}