/* Site-specific rules supplied after 2.2.3. Rules already present in the
   plugin (animations, responsive grids, image sizing and FAQ title) are not
   duplicated here. */

:root:root:root body .loa-video-section__media-column {
  display: block !important;
  box-sizing: border-box;
  width: 100% !important;
  padding: 0 32px;
  text-align: center;
}

:root:root:root body .loa-columns-section.loa-has-section-background {
  margin-top: 50px !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

:root:root:root body :is(
  .loa-footer-content,
  .loa-edge-image-content,
  .loa-video-section,
  .loa-columns-section
) {
  margin-top: 50px !important;
}

:root:root:root body .loa-intro__inner {
  margin-top: 50px !important;
}

:root:root:root body .loa-background-columns.loa-has-section-background {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

:root:root:root body .loa-two-column:not(.loa-edge-image-content) .loa-two-column__media {
  padding-right: 23px !important;
}

:root:root:root body .loa-two-column:not(.loa-edge-image-content) .loa-two-column__media img {
  border-radius: 12px;
}

:root:root:root body .loa-intro h2.loa-intro-item-motion {
  width: 740px;
  max-width: 100%;
  font-weight: 600;
}

:root:root:root body .loa-testimonials {
  overflow: hidden;
}

@media (max-width: 1000px) {
  :root:root:root body .loa-background-columns__header {
    max-width: 628px;
    margin: 0 auto 30px;
    padding: 0 !important;
  }

  :root:root:root body .loa-intro h2.loa-intro-item-motion {
    width: auto;
  }
}

/* General Hero remains two columns on tablet. This matches the specificity
   of the global responsive contract and is loaded after it. */
@media (min-width: 601px) and (max-width: 900px) {
  :root:root:root body .loa-general-hero.loa-general-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }

  :root:root:root body .loa-general-hero.loa-general-hero.loa-image-column-sized {
    grid-template-columns: var(--loa-sized-image-tracks) !important;
  }
}

/* Roof Types never switches automatically to white text. Manual title/body
   colors still take precedence through their existing custom properties. */
:root:root:root body .loa-roof-types {
  --loa-auto-color: #231f20 !important;
  --loa-body-color: var(--loa-manual-body-color, #231f20) !important;
  color: #231f20;
}

:root:root:root body .loa-roof-types__item--bg-transparent {
  background: transparent !important;
}

/* Roof Type items control their own optional gray background. The section
   and the empty/default state remain transparent. */
:root:root:root body .loa-roof-types,
:root:root:root body .loa-roof-types__items,
:root:root:root body .loa-roof-types__item--bg-transparent {
  background-color: transparent !important;
}

:root:root:root body .loa-roof-types__items {
  gap: 0 !important;
  row-gap: 0 !important;
}

:root:root:root body .loa-roof-types__item-shell {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Roof Type intentionally stays charcoal, including inside the editor and
   when an item has a gray background. */
:root:root:root body .loa-roof-types :is(
  .loa-roof-types__header,
  .loa-roof-types__intro,
  .loa-roof-types__item-content,
  .loa-roof-types__text,
  h2,
  h3,
  h4,
  p,
  li
) {
  color: #231f20 !important;
}

:root:root:root body .editor-styles-wrapper .loa-editor.loa-roof-types :is(
  .loa-roof-types__header,
  .loa-roof-types__intro,
  .loa-roof-types__item-content,
  .loa-roof-types__text,
  h2,
  h3,
  h4,
  p,
  li
) {
  color: #231f20 !important;
}