// Header.
//
// Styleguide 3.2

@use "sass:math";

// Paddings, margins and heights.
$logo-mobile-height: $header-mobile-height !default;
$logo-width: 20rem !default;
$logo-mobile-width: 12rem !default;
$logo-mobile-padding-left: math.div($grid-gutter-width, 2) !default;
$logo-md-width: 13.5rem !default;
$header-menus-margin-spacing: 10px !default;

header.header {
  .site-logo img {
    max-width: 100%;
    max-height: $header-height - (2 * $navbar-padding-y);
  }
  .block-we-megamenu {
    position: static;
  }
  .region-primary-menu,
  .region-secondary-menu {
    margin-top: $header-menus-margin-spacing;
  }

  .region-secondary-menu {
    display: flex;
    align-items: center;

    @include media-breakpoint-down($navbar-mobile-breakpoint-down) {
      align-items: stretch;
    }

    ul {
      margin-bottom: 0;
    }

    > * {
      margin-left: $header-menus-margin-spacing;

      @include media-breakpoint-down($navbar-mobile-breakpoint-down) {
        margin-left: 0;
      }
    }
  }

  .region-primary-menu {
    .region-we-mega-menu {
      margin-bottom: 0;
      padding: 0;

      .navbar {
        padding: $navbar-padding-y 0 0;
        &.navbar-we-mega-menu {
          background-color: $color-odysseus;
          margin-bottom: 0;
          display: block;
          width: 100%;
          left: 0;
          position: static;

          @include media-breakpoint-down($navbar-mobile-breakpoint-down) {
            position: relative;
          }
          .we-mega-menu-li {
            border: 0 none;
          }
        }
      }
    }
    #block-mainnavigation, #block-languageswitcher {
      display: inline-block;
      @include media-breakpoint-down($navbar-mobile-breakpoint-down) {
        display: block;
      }
    }
  }
  .navbar-brand {
    max-width: $logo-width;

    @include media-breakpoint-only(lg) {
      max-width: 0.75 * $logo-width;
    }

    .logo-svg {
      @include font-body-standard;
    }
  }
  @include media-breakpoint-down($navbar-mobile-breakpoint-down) {
    .navbar-brand {
      max-width: $logo-md-width;
    }

  }
  @include media-breakpoint-down($navbar-mobile-breakpoint-down) {
    .navbar-brand {
      top: 0;
      z-index: 1;
      max-width: $logo-mobile-width;
      padding-left: $logo-mobile-padding-left;

      .site-logo img {
        max-width: 100%;
        width: auto;
        max-height: $header-mobile-height - (2 * $navbar-brand-padding-y);

        &.logo-svg {
          height: 100%;
        }
      }
    }
  }
  > nav.navbar-wrapper {
    padding-bottom: 0;

    @include media-breakpoint-up($navbar-mobile-breakpoint-up) {
      .menu-region {
        padding-top: 1rem;

        nav.main > .we-mega-menu-ul > .we-mega-menu-li {
          padding-bottom: calc(1rem + 10px);
        }
      }

      .secondary-menu-region + .menu-region {
        padding-top: 0;

        nav.main > .we-mega-menu-ul > .we-mega-menu-li {
          padding-bottom: 0;
        }
      }
    }
  }

  .navbar {
    @include media-breakpoint-down($navbar-mobile-breakpoint-down) {
      width: 100%;
      padding: 0;
    }
    margin-bottom: 0;
    min-height: inherit;
    border: none;
    padding: 0;
    // Reset content added by we_megamenu.
    &::after,
    &::before {
      content: none;
    }
    .container {
      &::after,
      &::before {
        content: none;
      }
    }
  }
}
