/*
 * MH:
 * Establish a Block Formatting Context (BFC) on section background wrappers
 * to prevent child margins from collapsing through the parent. Without a BFC,
 * a descendant's top margin can escape the containing section and appear as a
 * white gap between two adjacent colored sections — even though no margin,
 * padding, or gap property is set on the section itself.
 *
 * Two rules are intentionally kept separate here:
 *
 * 1. .section__background uses `overflow: auto` (legacy approach).
 *    This was the original fix and is left in place in case any existing code
 *    relies on the scroll-container behaviour it creates. Note: overflow: auto
 *    makes the element a scroll container, which breaks position: sticky on
 *    any descendant (the sticky element has nowhere to scroll within its
 *    nearest scroll ancestor and stops sticking).
 *
 * 2. [class*="section__background--"] uses `display: flow-root` (modern approach).
 *    The colour-variant classes (e.g. section__background--green) are applied
 *    *instead of* the base class in the Drupal layout builder, so they were
 *    missing the BFC entirely — causing the white-gap bug on coloured sections.
 *    display: flow-root is the purpose-built CSS value for creating a BFC
 *    without any side effects: it does NOT create a scroll container, so
 *    position: sticky on descendants (e.g. .squircle-box inside the squircle
 *    gallery) continues to work correctly through the ancestor chain.
 */
.section__background {
  /* Legacy BFC via overflow. Kept for backwards compatibility — do not remove
     without auditing whether any code depends on the scroll-container behaviour
     this creates. Be aware it will break position: sticky on descendants. */
  overflow: auto;
}
[class*="section__background--"] {
  /* Modern BFC via flow-root. Applied to colour-variant classes which are used
     in place of (not alongside) .section__background in the layout builder.
     flow-root creates a BFC without making the element a scroll container,
     preserving position: sticky for components like the squircle gallery. */
  display: flow-root;
}

/*
* MH:
* section colors
*/
.section__background--gold {
  background: #ffb81c;
}
.section__background--green {
  background: #154734;
}
.section__background--white {
  background: #fff;
}
.section__background--gray {
  background: #eee;
}
.section__background--charcoal {
  background: #383838;
}

/*
* MH:
* section widths
*/
.block__width--full-no-padding {
  padding: 0;
  overflow: hidden;
}
.block__width--1600 {
  max-width: 1600px;
  margin: 0 auto;
}
.block__width--1200 {
  max-width: 1200px;
  margin: 0 auto;
}
.block__width--960 {
  max-width: 960px;
  margin: 0 auto;
}

.block__width--full,
.block__width--1600,
.block__width--1200,
.block__width--960 {
  padding: 60px;
  overflow: auto;
}

.content__middle .block--section_header {
  padding-top:60px;
}

.content__middle--landing .block--section_header {
  padding: 60px 60px 0 60px;
}

.content__middle--landing .block + .block,
.content__middle .block--section_header + .block {
  padding-top:30px;
}

@media (max-width: 1200px) {
  .block__width--full,
  .block__width--1600,
  .block__width--1200,
  .block__width--960 {
    padding: 40px;
  }
  .content__middle--landing .block--section_header {
    padding-left:40px;
    padding-right: 40px;
  }
}
@media (max-width: 800px) {
  .block__width--full,
  .block__width--1600,
  .block__width--1200,
  .block__width--960 {
    padding: 30px 18px;
  }
  .content__middle--landing .block--section_header {
    padding-left:20px;
    padding-right: 20px;
  }
  .content__middle .block--section_header {
    padding-right: unset;
    padding-left: unset;
  }
}

/*
*
* Complex Layouts
* Start layout builder enhancements.
*
*/

/* other style fixes */
[class*="uiComponent__maxwidth"] .layout__region :is(h1,h2,h3,h4,h5,h6):first-child {
  /* Remove the top margin from the first <h*> element of complex layouts. */
  margin-top: 0;
}
[class*="uiComponent__maxwidth"] .layout__region p:last-child {
  /* Remove the bottom margin from the last <p> of complex layouts. Headings should *never* be a closing element. */
  margin-bottom: 0;
}
div[class*="uiComponent__maxwidth"] {
  /* Default styles for complex layout builder secition layouts. */
  display: grid;
  justify-content: center;
  padding: var(--padding-standard);
}
.uiComponent__columnGap {
  /* Set variables if a column spacing is desired. */
  --column-gap: 20px;
  grid-gap: var(--column-gap);
}
div[class*="uiComponent__maxwidth"] > div {
  /* Account for padding, borders, etc. #BU3 */
  box-sizing: border-box;
}
.uiComponent__maxwidth--540 {
  --section_width: var(--width-540);
}
.uiComponent__maxwidth--720 {
  --section_width: var(--width-720);
}
.uiComponent__maxwidth--960 {
  --section_width: var(--width-960);
}
.uiComponent__maxwidth--1200 {
  --section_width: var(--width-1200);
}
.uiComponent__maxwidth--1600 {
  --section_width: var(--width-1600);
}
/* Set Default Widths */
.layout--onecol[class*="uiComponent__maxwidth"] {
  grid-template-columns: minmax(220px, var(--section_width));
}
.layout--twocol-section[class*="uiComponent__maxwidth"] {
  grid-template-columns: repeat(2, clamp(220px, calc(50% - calc(var(--column-gap) * .5)), calc(var(--section_width)/2)));
}
.layout--threecol-section[class*="uiComponent__maxwidth"] {
  grid-template-columns: repeat(3, clamp(220px, calc(33.33% - calc(var(--column-gap) * .667)), calc(var(--section_width)/3)));
}
.layout--fourcol-section[class*="uiComponent__maxwidth"] {
  grid-template-columns: repeat(4, clamp(220px, calc(25% - calc(var(--column-gap) * .75)), calc(var(--section_width)/4)));
}
.layout--twocol-section--33-67[class*="uiComponent__maxwidth"] {
  grid-template-columns: clamp(130px, calc(33.33% - calc(var(--column-gap) * .5)), calc(var(--section_width)*.3333 - var(--column-gap) * .5))
                         clamp(260px, calc(66.67% - calc(var(--column-gap) * .5)), calc(var(--section_width)*.6667 - var(--column-gap) * .5)
    );
}
.layout--twocol-section--67-33[class*="uiComponent__maxwidth"] {
  grid-template-columns: clamp(260px, calc(66.67% - calc(var(--column-gap) * .5)), calc(var(--section_width)*.6667 - var(--column-gap) * .5))
                         clamp(130px, calc(33.33% - calc(var(--column-gap) * .5)), calc(var(--section_width)*.3333 - var(--column-gap) * .5));
}
.layout--twocol-section--25-75[class*="uiComponent__maxwidth"] {
  grid-template-columns: clamp(100px, calc(25% - calc(var(--column-gap) * .5)), calc(var(--section_width)*.25 - var(--column-gap) * .5))
                         clamp(300px, calc(75% - calc(var(--column-gap) * .5)), calc(var(--section_width)*.75 - var(--column-gap) * .5)
    );
}
.layout--twocol-section--75-25[class*="uiComponent__maxwidth"] {
  grid-template-columns: clamp(300px, calc(75% - calc(var(--column-gap) * .5)), calc(var(--section_width)*.75 - var(--column-gap) * .5))
                        clamp(100px, calc(25% - calc(var(--column-gap) * .5)), calc(var(--section_width)*.25 - var(--column-gap) * .5));
}
.layout--threecol-section--25-50-25[class*="uiComponent__maxwidth"] {
  grid-template-columns: clamp(100px, calc(25% - calc(var(--column-gap) * .666)), calc(var(--section_width)*.25 - var(--column-gap) * .666))
                         clamp(200px, calc(50% - calc(var(--column-gap) * .666)), calc(var(--section_width)*.5 - var(--column-gap) * .666))
                         clamp(100px, calc(25% - calc(var(--column-gap) * .666)), calc(var(--section_width)*.25 - var(--column-gap) * .666));
}
.layout--threecol-section--25-25-50[class*="uiComponent__maxwidth"] {
  grid-template-columns: clamp(100px, calc(25% - calc(var(--column-gap) * .666)), calc(var(--section_width)*.25 - var(--column-gap) * .666))
                         clamp(100px, calc(25% - calc(var(--column-gap) * .666)), calc(var(--section_width)*.25 - var(--column-gap) * .666))
                         clamp(200px, calc(50% - calc(var(--column-gap) * .666)), calc(var(--section_width)*.5 - var(--column-gap) * .666));
}
.layout--threecol-section--50-25-25[class*="uiComponent__maxwidth"] {
  grid-template-columns: clamp(200px, calc(50% - calc(var(--column-gap) * .666)), calc(var(--section_width)*.5 - var(--column-gap) * .666))
                         clamp(100px, calc(25% - calc(var(--column-gap) * .666)), calc(var(--section_width)*.25 - var(--column-gap) * .666))
                         clamp(100px, calc(25% - calc(var(--column-gap) * .666)), calc(var(--section_width)*.25 - var(--column-gap) * .666));
}
/* no four columns */
@media(max-width: 960px) {
  .layout--fourcol-section[class*="uiComponent__maxwidth"] {
    grid-template-columns: repeat(2, clamp(220px, calc(50% - calc(var(--column-gap) * .5)), 500px));
  }
}
/* no three columns */
@media(max-width: 720px) {
  .layout--threecol-section[class*="uiComponent__maxwidth"] {
    grid-template-columns: repeat(2, clamp(220px, calc(50% - calc(var(--column-gap) * .5)), 500px));
  }
}
/* three column, advanced */
@media(max-width: 720px) and (min-width:541px) {
  .layout--threecol-section--50-25-25[class*="uiComponent__maxwidth"] {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
  }
  .layout--threecol-section--50-25-25[class*="uiComponent__maxwidth"] .layout__region--first { grid-area: 1 / 1 / 2 / 3; }
  .layout--threecol-section--50-25-25[class*="uiComponent__maxwidth"] .layout__region--second { grid-area: 2 / 1 / 3 / 2; }
  .layout--threecol-section--50-25-25[class*="uiComponent__maxwidth"] .layout__region--third { grid-area: 2 / 2 / 3 / 3; }
  .layout--threecol-section--25-25-50[class*="uiComponent__maxwidth"] {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .layout--threecol-section--25-25-50[class*="uiComponent__maxwidth"] .layout__region--first { grid-area: 1 / 1 / 2 / 2; }
  .layout--threecol-section--25-25-50[class*="uiComponent__maxwidth"] .layout__region--second { grid-area: 1 / 2 / 2 / 3; }
  .layout--threecol-section--25-25-50[class*="uiComponent__maxwidth"] .layout__region--third { grid-area: 2 / 1 / 3 / 3; }
}
/* only one column */
@media(max-width: 600px) {
  div[class*="uiComponent__maxwidth"] {
    grid-template-columns: auto !important;
  }
}
/* reverse order */
@media(max-width: 600px) {
  .uiComponent__order--reverse .layout__region:last-child {
    /* Modified block order in mobile */
    order: -1;
  }
}
/* sticky */
.uiComponent__sticky--last .layout__region:last-child > div:first-child,
.uiComponent__sticky--first .layout__region:first-child > div:first-child {
  /* Sticky block styles. #BF2.x */
  position: sticky;
  top: 50px;
}

/*
*
* End layout builder enhancements.
*
*/