/**
 * @file
 * Base Layout.
 */

/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

/* Navigation related breakpoints */

/* Grid related breakpoints */

/* Grid shifts from 6 to 14 columns. */

/* Width of the entire grid maxes out. */

.dialog-off-canvas-main-canvas, #page-wrapper {
  height: 100%;
}

#page {
    display: grid;
    height: 100%;
    grid-template-rows: min-content 1fr min-content;
    grid-template-areas: "header "
    "content"
    "footer";
}

.main-content {
  display: grid;
  grid-template-areas: "hero" "main-content";
}

.region--hero {
  grid-area: hero;
  display: grid;
  justify-content: center;
}

.region--hero h1 {
    border-bottom: none;
  }

.main-content__container {
  display: grid;
  grid-area: main-content;
  grid-template-areas: "highlighted" "breadcrumb" "content-above" "left-sidebar" "main" "content-below"  "right-sidebar";
  
 /* @media (--md) {
    &:not(:has(.right-sidebar)) {
      grid-template-columns: minmax(auto, 1fr) minmax(auto, 1fr);
      grid-template-areas:
      "highlighted highlighted"
      "breadcrumb breadcrumb"
      "content-above content-above"
      "left-sidebar main"
      "content-below content-below";
    }

    &:not(:has(.left-sidebar)) {
      grid-template-columns: minmax(auto, 1fr) minmax(auto, 1fr);
      grid-template-areas:
      "highlighted highlighted"
      "breadcrumb breadcrumb"
      "content-above content-above"
      "main right-sidebar"
      "content-below content-below";
    }
  }*/
}

@media (min-width: 1000px) {

.main-content__container {
    grid-template-columns: minmax(auto, 1fr) minmax(auto, 1fr) minmax(auto, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas:
    "highlighted highlighted highlighted"
    "breadcrumb breadcrumb breadcrumb"
    "content-above content-above content-above"
    "left-sidebar main right-sidebar"
    "content-below content-below content-below";
}

    
    .main-content__container:not(:has(.right-sidebar)) {
      grid-template-columns: minmax(auto, 1fr) minmax(auto, 2fr);
      grid-template-areas:
      "highlighted highlighted"
      "breadcrumb breadcrumb"
      "content-above content-above"
      "left-sidebar main"
      "content-below content-below";
    }

    .main-content__container:not(:has(.left-sidebar)) {
      grid-template-columns: minmax(auto, 2fr) minmax(auto, 1fr);
      grid-template-areas:
      "highlighted highlighted"
      "breadcrumb breadcrumb"
      "content-above content-above"
      "main right-sidebar"
      "content-below content-below";
    }
    .main-content__container:not(:has(.left-sidebar, .right-sidebar)) {
      grid-template-columns: minmax(auto, 1fr);
      grid-template-areas:
      "highlighted"
      "breadcrumb"
      "content-above"
      "main"
      "content-below";
    }
  }

header {
  grid-area: header;
  z-index: 4;
  /*width: 100vw;*/
}

.region--highlighted {
  grid-area: highlighted;
}

.region--breadcrumb {
  grid-area: breadcrumb;
}

.region--content-above {
  grid-area: content-above;
}

.region--content-below {
  grid-area: content-below;
}

footer {
  grid-area: footer;
}

#main-wrapper {
  grid-area: content;
}

aside.left-sidebar {
  grid-area: left-sidebar;
}

aside.right-sidebar {
  grid-area: right-sidebar;
}

main {
  grid-area: main;
}

.container_olivero {
  width: 100%;

  /* This fixes an issue where if the toolbar is open in vertical mode, and
   * the mobile navigation is open, the "close" button gets pushed outside of
   * the viewport. */
}

body.is-fixed .container_olivero {
    width: calc(100% - 0px - 0px);
    width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
  }

/*.page-wrapper {
  max-width: var(--max-bg-color);
  background: var(--color--white);
}*/

/**
 * Creates stacking context ensuring that child elements can never appear in
 * front of mobile navigation.
 */

.layout-main-wrapper {
  
  background-color: var(--color--gray-90);
  position: relative;
  z-index: 2; /* Ensure dropdown is not cut off by footer. */
}

/* Contains the social sidebar, and the primary content area. */

@media (min-width: 1200px) {

.layout-main {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
  }

/*background-color: var(--color--white);*/

@media (min-width: 1200px) {

.main-content {
    width: 100%;
    margin-right: auto;
}
  }

.region:not(.region--footer-bottom):not(.region--footer-top):not(.region--highlighted):not(.region--hero) {
  background-color: var(--color--white);
}

/*.main-content__container {
  padding-block-start: var(--sp3);

  @media (--md) {
    padding-block-start: var(--sp5);
  }
}*/