/* Make layout section backgrounds edge-to-edge using a negative margin, and use
a positive margin on the layout section contents by default so it does not touch
the edge of the page. These values are currently hardcoded to work with the
wildfire_fullscreen theme. When we add more themes, we may need to switch to
inline CSS or CSS custom properties (not supported by IE). */
.layout-section-background {
  margin-left: -20px;
  margin-right: -20px;
  display: flex;
  justify-content: center;
}

.wildfire-layout-section {
  margin-left: 20px;
  margin-right: 20px;
  width: 100%;
}

.wildfire-layout-section-narrow {
  max-width: 960px;
}

.wildfire-layout-section-medium {
  max-width: 1200px;
}

.wildfire-layout-section-default {
  max-width: 1550px;
}

/* Edge-to-edge. */
.wildfire-layout-section-fill {
  margin-left: 0px;
  margin-right: 0px;
}

/* Inline. */
.inline-align-start {
  justify-content: flex-start;
}
.inline-align-center {
  justify-content: center;
}
.inline-align-end {
  justify-content: flex-end;
}

/* Borders. */
/* Some borders have an inverted version for dark mode. See wildfire-layout-sections.js. */
.layout-border-image,
.layout-border-image.layout-builder__layout.is-layout-builder-highlighted {
  border-width: 40px;
  border-style: solid;
  padding: 0;
}
.layout-border-image.border01-light-bg {
  border-image: url('../images/borders/border01-light-bg.png') 74 round;
}
.layout-border-image.border01-light-bg.layout-border-image-invert {
  border-image: url('../images/borders/border01-dark-bg.png') 74 round;
}
.layout-border-image.border02-light-bg {
  border-image: url('../images/borders/border02-light-bg.png') 56 round;
}
.layout-border-image.border02-light-bg.layout-border-image-invert {
  border-image: url('../images/borders/border02-dark-bg.png') 56 round;
}
.layout-border-image.border03-light-bg {
  border-image: url('../images/borders/border03-light-bg.png') 72 round;
}
.layout-border-image.border03-light-bg.layout-border-image-invert {
  border-image: url('../images/borders/border03-dark-bg.png') 72 round;
}
.layout-border-image.border04-light-bg {
  border-image: url('../images/borders/border04-light-bg.png') 100 round;
}
.layout-border-image.border04-light-bg.layout-border-image-invert {
  border-image: url('../images/borders/border04-dark-bg.png') 100 round;
}
.layout-border-image.border05-light-bg {
  border-image: url('../images/borders/border05-light-bg.png') 100 round;
}
.layout-border-image.border05-light-bg.layout-border-image-invert {
  border-image: url('../images/borders/border05-dark-bg.png') 100 round;
}
.layout-border-image.border06 {
  border-image: url('../images/borders/border06.png') 50 round;
}
.layout-border-image.border07 {
  border-image: url('../images/borders/border07.png') 36 round;
}
.layout-border-image.border08 {
  border-image: url('../images/borders/border08.png') 42 round;
}
/* Add margin to the sides of text blocks inside a section/column with a border. */
.layout-border-image .block-inline-blocktext {
  margin-left: 1em;
  margin-right: 1em;
}

/* For text, button, pdf-library and downloadable-file blocks: If it's in a
section column with both a background color and zero margin, add some padding so
the text doesn't touch the edge of the column. Note that 0.01px padding is added
when the column margin is set to 0. See WildfireLayoutSection::build() */
div[style*='background-color'][style*='padding: 0.01px']>.block-inline-blocktext,
div[style*='background-color'][style*='padding: 0.01px']>.block-inline-blockbutton,
div[style*='background-color'][style*='padding: 0.01px']>.block-inline-blockpdf-library,
div[style*='background-color'][style*='padding: 0.01px']>.block-inline-blockdownloadable-file {
  padding-left: 1em;
  padding-right: 1em;
}