/*
 * ForgeSpan Site Enhancer 4.0
 * True canvas centering + wide-layout repair + existing hero photography.
 */

/* -------------------------------------------------------------------------
   1. TRUE SITE CANVAS
   The builder created 1240px rows. Several of those rows were then changed to
   flex/grid, which caused Divi's automatic centering to be lost. Center every
   ForgeSpan structural row explicitly and give desktop layouts room to breathe.
   ------------------------------------------------------------------------- */
body.fse4-active {
  --fse4-canvas-width: 92%;
  --fse4-canvas-max: 1560px;
  --fse4-copy-max: 1080px;
}

body.fse4-active #page-container :is(
  .fs-header-row,
  .fs-hero-row,
  .fs-proof-row,
  .fs-split-row,
  .fs-centered-row,
  .fs-card-row,
  .fs-steps-row,
  .fs-values-row,
  .fs-brand-row,
  .fs-cta-row,
  .fs-toggle-row,
  .fs-footer-main-row,
  .fs-footer-bottom-row
) {
  width: var(--fse4-canvas-width) !important;
  max-width: var(--fse4-canvas-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  clear: both !important;
}

/* Divi's clearfix pseudo-element becomes a real grid/flex item on several of
   these rows. Remove it so it cannot create an invisible column. */
body.fse4-active #page-container :is(
  .fs-header-row,
  .fs-hero-row,
  .fs-proof-row,
  .fs-split-row,
  .fs-centered-row,
  .fs-card-row,
  .fs-steps-row,
  .fs-values-row,
  .fs-brand-row,
  .fs-cta-row,
  .fs-toggle-row,
  .fs-footer-main-row,
  .fs-footer-bottom-row
)::after {
  content: none !important;
  display: none !important;
}

/* Explicitly center flex/grid rows that Divi otherwise anchors at x=0. */
body.fse4-active #page-container :is(
  .fs-proof-row,
  .fs-brand-row,
  .fs-cta-row,
  .fs-toggle-row,
  .fs-footer-main-row,
  .fs-footer-bottom-row,
  .fs-header-row
) {
  margin-inline: auto !important;
}

/* -------------------------------------------------------------------------
   2. CENTERED INTRODUCTIONS AND CTAs
   A 4/4 Divi column is floated by default. Auto margins do not center a float.
   ------------------------------------------------------------------------- */
body.fse4-active #page-container .fs-centered-row {
  display: block !important;
}

body.fse4-active #page-container .fs-centered-row > .et_pb_column,
body.fse4-active #page-container .fs-centered-row > .et_pb_column.et-last-child,
body.fse4-active #page-container .fs-centered-row > .et_pb_column.fs-centered-intro,
body.fse4-active #page-container .fs-cta-row > .et_pb_column,
body.fse4-active #page-container .fs-cta-row > .et_pb_column.et-last-child {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: var(--fse4-copy-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
}

body.fse4-active #page-container :is(.fs-centered-intro,.fs-copper-cta) :is(
  .et_pb_text,
  .et_pb_text_inner,
  h1,h2,h3,h4,p
) {
  text-align: center !important;
}

body.fse4-active #page-container :is(.fs-centered-intro,.fs-copper-cta) .et_pb_module,
body.fse4-active #page-container :is(.fs-centered-intro,.fs-copper-cta) :is(h1,h2,h3,h4,p) {
  margin-left: auto !important;
  margin-right: auto !important;
}

body.fse4-active #page-container :is(.fs-centered-intro,.fs-copper-cta) .et_pb_button_module_wrapper {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}


/* -------------------------------------------------------------------------
   3. FAQ / TOGGLE ROW REPAIR
   The original site builder left these rows unclassified. The .fs-toggle-stack
   column is a floated Divi 4/4 column, so max-width + auto margins alone do not
   center it. Version 4 repairs both the owning row and the column.
   ------------------------------------------------------------------------- */
body.fse4-active #page-container .fs-toggle-row,
body.fse4-active #page-container .fs-bone-section > .et_pb_row:has(> .fs-toggle-stack) {
  display: block !important;
  width: var(--fse4-canvas-width) !important;
  max-width: var(--fse4-canvas-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;
  float: none !important;
  clear: both !important;
}

body.fse4-active #page-container .fs-toggle-row::after,
body.fse4-active #page-container .fs-bone-section > .et_pb_row:has(> .fs-toggle-stack)::after {
  content: none !important;
  display: none !important;
}

body.fse4-active #page-container .fs-toggle-row > .fs-toggle-stack,
body.fse4-active #page-container .fs-bone-section > .et_pb_row > .fs-toggle-stack {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;
  margin-bottom: 0 !important;
}

/* -------------------------------------------------------------------------
   4. CARD / STEP / VALUE GRIDS
   JavaScript adds fse4-grid-count-N from the actual direct Divi column count.
   ------------------------------------------------------------------------- */
body.fse4-active #page-container :is(.fs-card-row,.fs-steps-row,.fs-values-row) {
  display: grid !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 22px !important;
}

body.fse4-active #page-container :is(.fs-card-row,.fs-steps-row,.fs-values-row) > .et_pb_column {
  display: block !important;
  float: none !important;
  clear: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.fse4-active #page-container .fse4-grid-count-1 { grid-template-columns: minmax(0, 1fr) !important; }
body.fse4-active #page-container .fse4-grid-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body.fse4-active #page-container .fse4-grid-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body.fse4-active #page-container .fse4-grid-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
body.fse4-active #page-container .fse4-grid-count-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
body.fse4-active #page-container .fse4-grid-count-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body.fse4-active #page-container .fse4-grid-count-7,
body.fse4-active #page-container .fse4-grid-count-8 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

body.fse4-active #page-container .fs-card-row-narrow {
  max-width: 1040px !important;
}

/* Balanced split / brand / proof columns. */
body.fse4-active #page-container :is(.fs-split-row,.fs-brand-row,.fs-proof-row) > .et_pb_column {
  min-width: 0 !important;
}

/* -------------------------------------------------------------------------
   5. HERO PHOTOGRAPHY SYSTEM
   Keep the existing page-specific photos and gradient, but widen the hero row
   to the same canvas as the rest of the site.
   ------------------------------------------------------------------------- */
body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  min-height: 650px !important;
  background: #171A1F !important;
}

body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -2% !important;
  z-index: 0 !important;
  background-image: var(--fse4-hero-image) !important;
  background-position: var(--fse4-hero-position, 78% center) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  filter: saturate(.58) contrast(1.16) brightness(.72) !important;
  transform: scale(1.025) !important;
}

body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      #171A1F 0%,
      rgba(23,26,31,.99) 25%,
      rgba(23,26,31,.92) 42%,
      rgba(23,26,31,.68) 58%,
      rgba(23,26,31,.25) 78%,
      rgba(23,26,31,.08) 100%),
    linear-gradient(180deg,
      rgba(23,26,31,.08) 0%,
      rgba(23,26,31,.02) 55%,
      rgba(23,26,31,.48) 100%) !important;
}

body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero) > .et_pb_row {
  position: relative !important;
  z-index: 2 !important;
}

body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero) .fs-hero-row {
  display: block !important;
}

body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero) .fs-hero-copy {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 56% !important;
  max-width: 790px !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero) :is(.fs-hero-media,.fs-hero-mark-col) {
  display: none !important;
}

body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero) .fs-display h1 {
  max-width: 780px !important;
  text-wrap: balance;
}

body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero) .fs-lead p {
  max-width: 690px !important;
  color: rgba(231,226,217,.80) !important;
}

/* Remove the first enhancer's randomly inserted sections if they somehow remain. */
body.fse4-active #page-container :is(
  .fs-enhancer-photo-section,
  .fs-enhancer-human-section,
  .fs-enhancer-about-photo-section
) {
  display: none !important;
}

@media (max-width: 1200px) {
  body.fse4-active { --fse4-canvas-width: 90%; --fse4-canvas-max: 1240px; }
  body.fse4-active #page-container .fse4-grid-count-5 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  body.fse4-active #page-container :is(.fse4-grid-count-4,.fse4-grid-count-6,.fse4-grid-count-7,.fse4-grid-count-8) {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 980px) {
  body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero) { min-height: 610px !important; }
  body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero)::before {
    background-position: var(--fse4-hero-position-tablet, 72% center) !important;
  }
  body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero)::after {
    background:
      linear-gradient(90deg,#171A1F 0%,rgba(23,26,31,.98) 38%,rgba(23,26,31,.82) 62%,rgba(23,26,31,.35) 100%),
      linear-gradient(180deg,rgba(23,26,31,.08),rgba(23,26,31,.55)) !important;
  }
  body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero) .fs-hero-copy {
    width: 70% !important;
    max-width: 680px !important;
  }
}

@media (max-width: 767px) {
  body.fse4-active { --fse4-canvas-width: 90%; --fse4-copy-max: 100%; }
  body.fse4-active #page-container :is(.fs-card-row,.fs-steps-row,.fs-values-row) {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero) {
    min-height: 620px !important;
    padding-top: 76px !important;
    padding-bottom: 72px !important;
  }
  body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero)::before {
    inset: 0 !important;
    background-position: var(--fse4-hero-position-phone, 70% center) !important;
    filter: saturate(.50) contrast(1.10) brightness(.56) !important;
  }
  body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero)::after {
    background:
      linear-gradient(90deg,rgba(23,26,31,.96),rgba(23,26,31,.65)),
      linear-gradient(180deg,rgba(23,26,31,.18) 0%,rgba(23,26,31,.76) 62%,#171A1F 100%) !important;
  }
  body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero) .fs-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.fse4-active #page-container :is(.fs-home-hero,.fs-page-hero)::before { transform: none !important; }
}