/* 4.1 - Header
 * The page header
**/

#page-header {
    background: $color-header-back url('img/background.png') center bottom repeat-x;
    border-top: 6px solid $color-footer-back;
    padding-top:$lineheight;
    padding-bottom:$lineheight*2;

    .header-collumns {
      @include container($container-size-large, $lineheight);
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas:
      "nav"
      "logo";
      grid-template-rows: auto;
      grid-gap: $lineheight;
      padding-bottom: $lineheight;

      .navbar-area {
        grid-area: nav;
        text-align: center;
      }

      .logo-area {
        grid-area: logo;
      }

      @include lg() {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "logo nav";
        height:11*$lineheight;
        padding-bottom:0;
        .navbar-area {
          text-align: right;
        }
      }

      @include xxl() {
        height:13*$lineheight;

      }

    }
}

header h1 {
    border-style:none !important;
    color: $color-font-light;
    font-weight: $fontweight_hyper;
    font-size:5.4em;
    font-style:oblique;
    padding-bottom:0px;
    line-height: 1.5em;

    img {
      width: 100%;
      height: auto;
      margin-top:$lineheight/2;
    }
}

.dropdown-menu {
    box-shadow: $narrow-shadow, $inset-shadow;
}
