// import any scss that have used CSS grid
@import 'bootstrap/custom-bootstrap-variables';
@import 'bootstrap/scss/mixins/breakpoints';

html, body {
  overflow-x: hidden;
}

::-ms-clear {
  display: none;
}


.region-header {
  display: flex;
  padding-bottom: 15px;
  
  @include media-breakpoint-down(md) {
    display: -ms-grid;
    -ms-grid-columns: 1fr auto auto;
    -ms-grid-rows: auto;
  }
  
  .promotion--brand {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
  }
  
  .control--responsive-menu {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;    
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    
    @include media-breakpoint-down(md) {
      display: -ms-grid;
    }
    
    .control__menu {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
    }
    
    .control__search {
      display: none;
    }
    
    .toggle {
      display: -ms-grid;
      -ms-grid-columns: 1fr;
      -ms-grid-rows: 1fr;
      
      > * {        
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
      }
    }
  }
  
  .control--fly-out-search {
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
  }
  
  .navigation {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
  }
  
}


@import 'regions/hero/hero';

.region.region-hero {

  .page-variant--homepage & {
    //grid-template-areas: "heading banner" "subheading banner";
    grid-rows: auto;
    grid-template-columns: 1fr 50%;
    grid-gap: calc(#{$grid-gutter-width} * 0.5) $grid-gutter-width;
    overflow: hidden;
    
    > .node__banner {
      grid-column: 2 / 4;
      grid-row: 1 / 4;
      z-index: -1;
      position: relative;
    }
    
    > * + .node__subtitle {
      padding-top: calc(#{$grid-gutter-width} * 0.5);
    }
  }
}


@import 'regions/content/content';

.content.content .site__row {  
  grid-template-columns: 2.25fr 1fr;
  grid-gap: 8vw;  
  
  .page-variant--homepage & {
    grid-template-columns: 1fr;
  }
  
  > .has-no-sidebar {
    grid-column: 1 / 4;
  }
  
}

.region-content.region-content {
    
  #toolbar-administration ~ * .site__sidebar-inner {
    top: calc(#{$spacer} + 80px);
  }
}


@import 'regions/content/post-content';

.page-variant--homepage .region-post-content {
  > *:last-child {
    grid-column: 3 / 4;
  }
}


@import 'regions/footer/post-footer';

.region-post-footer.region-post-footer {
  
  .promotion--brand {
    grid-column: 3 / 4;
  }
  
  .navigation {
    grid-row: 2 / 3;
  }
}



.region.region-pre-content {  
  * + .pre-content & {
    margin-top: calc(#{$spacer} * 3);
  }
  
  &::after {
    content: '';
    width: 100%;
    display: block;
  }

  .page-variant--section-entry-page &::after {
    height: 3px;
    background-color: #252526;
    margin-top: calc(#{$spacer} * 3);
    margin-bottom: calc(#{$spacer} * 3);
  }
}



.navigation--primary .menu .is-expanded.menu__item {
  
  @include media-breakpoint-down(md) {
    display: -ms-grid;
    -ms-grid-columns: 1fr auto;
    -ms-grid-rows: 60px auto;
    
    .menu__link {      
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
    }
    
    .menu__toggle {      
      -ms-grid-column: 2;
      -ms-grid-column-span: 1;
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
    }
    
    > .menu {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      -ms-grid-row: 2;
      -ms-grid-row-span: 1;
    }
  }
}