/* 
    responsive screen width queries
    numbers are from Bootstrap https://getbootstrap.com/docs/5.3/layout/grid/#grid-options
*/
/* Misc layout utilities */
/* 
    Aligns full width content with bootstrap .containers using padding/margins
    Used in situations where .containers can't be employed but we still want consistent page margins
    Provide one or more selectors to apply left, right, or left+right spacing
    Choose'padding' or 'margin' and if !important should be applied
    Numbers are from bootstrap https://getbootstrap.com/docs/5.3/layout/containers/#how-they-work
*/
/* Bootstrap's .visually-hidden implementation for use in scss files */
/* Custom styles for level 1 landing pages */
footer {
  margin-top: 0;
}

.page-heading {
  margin-top: 0.75em;
}

/* 
    Override default block grid layout
    No grid gaps, stretch and align 50% sections to mimic a space-between flex layout
*/
#landing-page .umb-block-grid__layout-container {
  -moz-column-gap: 0;
  column-gap: 0;
  row-gap: 0;
}

#landing-page .umb-block-grid__layout-item[data-col-span="2"] > div,
#landing-page .umb-block-grid__layout-item[data-col-span="2"] > div > .container-fluid,
#landing-page .umb-block-grid__layout-item[data-col-span="2"] > div > .container-fluid > .umb-block-grid__area-container {
  height: 100%;
}

#landing-page .umb-block-grid__layout-item[data-col-span="2"] .umb-block-grid__layout-container {
  height: 100%;
  align-items: end;
}

#landing-page .umb-block-grid__layout-item[data-col-span="2"] .umb-block-grid__layout-container .umb-block-grid__layout-item:first-child {
  align-self: start;
}

/* 
    Padding to align block grid content with global margins without using .container
    Allows us to have full width grid items with background colors
    $both-selector includes special case for first full width block (the hero image)
*/
@media screen and (max-width: 575.98px) {
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > :nth-child(odd of .umb-block-grid__layout-item[data-col-span="2"]) > div {
    padding-left: 0vw !important;
    padding-right: 0vw !important;
  }
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > :nth-child(even of .umb-block-grid__layout-item[data-col-span="2"]) > div {
    padding-left: 0vw !important;
    padding-right: 0vw !important;
  }
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="4"]:not(:first-child) > div {
    padding-left: 0vw !important;
    padding-right: 0vw !important;
  }
}
@media screen and (min-width: 576px) and (max-width: 767.98px) {
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > :nth-child(odd of .umb-block-grid__layout-item[data-col-span="2"]) > div {
    padding-left: calc((100vw - 540px) / 2) !important;
    padding-right: calc((100vw - 540px) / 2) !important;
  }
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > :nth-child(even of .umb-block-grid__layout-item[data-col-span="2"]) > div {
    padding-left: calc((100vw - 540px) / 2) !important;
    padding-right: calc((100vw - 540px) / 2) !important;
  }
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="4"]:not(:first-child) > div {
    padding-left: calc((100vw - 540px) / 2) !important;
    padding-right: calc((100vw - 540px) / 2) !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > :nth-child(odd of .umb-block-grid__layout-item[data-col-span="2"]) > div {
    padding-left: calc((100vw - 720px) / 2) !important;
  }
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > :nth-child(even of .umb-block-grid__layout-item[data-col-span="2"]) > div {
    padding-right: calc((100vw - 720px) / 2) !important;
  }
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="4"]:not(:first-child) > div {
    padding-left: calc((100vw - 720px) / 2) !important;
    padding-right: calc((100vw - 720px) / 2) !important;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > :nth-child(odd of .umb-block-grid__layout-item[data-col-span="2"]) > div {
    padding-left: calc((100vw - 960px) / 2) !important;
  }
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > :nth-child(even of .umb-block-grid__layout-item[data-col-span="2"]) > div {
    padding-right: calc((100vw - 960px) / 2) !important;
  }
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="4"]:not(:first-child) > div {
    padding-left: calc((100vw - 960px) / 2) !important;
    padding-right: calc((100vw - 960px) / 2) !important;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1399.98px) {
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > :nth-child(odd of .umb-block-grid__layout-item[data-col-span="2"]) > div {
    padding-left: calc((100vw - 1140px) / 2) !important;
  }
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > :nth-child(even of .umb-block-grid__layout-item[data-col-span="2"]) > div {
    padding-right: calc((100vw - 1140px) / 2) !important;
  }
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="4"]:not(:first-child) > div {
    padding-left: calc((100vw - 1140px) / 2) !important;
    padding-right: calc((100vw - 1140px) / 2) !important;
  }
}
@media screen and (min-width: 1400px) {
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > :nth-child(odd of .umb-block-grid__layout-item[data-col-span="2"]) > div {
    padding-left: calc((100vw - 1320px) / 2) !important;
  }
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > :nth-child(even of .umb-block-grid__layout-item[data-col-span="2"]) > div {
    padding-right: calc((100vw - 1320px) / 2) !important;
  }
  #landing-page > .umb-block-grid > .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="4"]:not(:first-child) > div {
    padding-left: calc((100vw - 1320px) / 2) !important;
    padding-right: calc((100vw - 1320px) / 2) !important;
  }
}