/* ======================================================================
   Fullwidth Background Group – Loan Calculator Plugin
   Migrated from Instant Money Child Theme (110-fullwidth-bg-group.css).

   Usage (Divi):
   1) Add class "fw-bg-scope" to the section/row where the effect applies.
   2) Inside that scope add class "fullwidth-bg-group" to the module/section
      that should receive a full-viewport-width background.
   3) Add a background variant class, e.g.:
      - bg-hero-1    (image – URL from plugin settings),
      - bg-solid-2, bg-solid-3, bg-solid-4 (colours).
   4) Classes can be combined, e.g.: fullwidth-bg-group bg-solid-3

   CSS custom properties (set via wp_add_inline_style from plugin settings):
     --fw-bg-hero-1-url   url() for hero image
     --fw-bg-solid-2      colour for variant 2
     --fw-bg-solid-3      colour for variant 3
     --fw-bg-solid-4      colour for variant 4
   ====================================================================== */

/* --- Fullwidth background layer on modules --- */
.fw-bg-scope .fullwidth-bg-group {
  position: relative;
  z-index: 1;
}

.fw-bg-scope .fullwidth-bg-group::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  left: 50%;
  transform: translateX(-50%);
  width: 100vw;

  z-index: -1;
}

/* --- KEY FIX: stop clipping on ALL ancestors up to the viewport --- */

/* 1. The scope element and its Divi children */
.fw-bg-scope,
.fw-bg-scope .et_pb_row,
.fw-bg-scope .et_pb_row_inner,
.fw-bg-scope .et_pb_column,
.fw-bg-scope .et_pb_column_inner,
.fw-bg-scope .et_builder_inner_content {
  overflow: visible !important;
}

/* 2. Divi page-level containers (only when .fw-bg-scope is in use) */
body:has(.fw-bg-scope) #page-container,
body:has(.fw-bg-scope) #et-main-area,
body:has(.fw-bg-scope) .et_pb_section.fw-bg-scope,
body:has(.fw-bg-scope) .et_pb_row.fw-bg-scope {
  overflow: visible !important;
}

/* 3. When fw-bg-scope is on a row/column inside a section,
      also unlock the parent section.                       */
.et_pb_section:has(.fw-bg-scope) {
  overflow: visible !important;
}

/* Prevent horizontal scrollbar that may appear with 100vw */
body:has(.fw-bg-scope) {
  overflow-x: hidden;
}
#page-container:has(.fw-bg-scope) {
  overflow-x: hidden;
}

/* Background variant rules (.bg-solid-N, .bg-hero-N) are generated
   dynamically via wp_add_inline_style from plugin settings.
   Add new variants via WP Admin → Kalkulator pożyczek → Ustawienia → Tła sekcji. */