/* ============================================================
   BG COLOR SYSTEM — Divi 5
   ------------------------------------------------------------
   HOW THIS WORKS:
   Each *-bg class below only sets a handful of LOCAL custom
   properties (--bg-color, --bg-text, --bg-link, etc). All the
   real style rules (background, text, links, buttons, icons...)
   are written ONCE further down and just consume whichever
   local vars are in scope.

   To add a new background variant later:
     1. Add one new block in SECTION 1 defining its local vars
     2. Add its class name to the selector lists in SECTION 2
   No rule needs to be rewritten or duplicated.

   Assumes --lm-primary-color, --lm-secondary-color,
   --lm-tertiary-color, --lm-text-color, --lm-off-white-color,
   --lm-white, --lm-transparent are already defined at :root
   (or wherever your global tokens live).
   ============================================================ */

/* ---------- SECTION 1: per-variant token overrides ---------- */

.default-bg,
body #page-container #et-boc .default-bg.force {
  --bg-color:      var(--lm-white);
  --bg-text:       var(--lm-text-color);
  --bg-marker:     var(--lm-primary-color);
  --bg-link:       var(--lm-primary-color);
  --bg-link-hover: var(--lm-secondary-color);
  --bg-icon:       var(--lm-primary-color);
  --bg-btn-bg:     var(--lm-primary-color);
  --bg-btn-border: var(--lm-primary-color);
  --bg-btn-text:   var(--lm-white);
  --bg-btn-icon:   var(--lm-white);
  --bg-focus:      var(--lm-primary-color);
}

.inverse-bg,
body #page-container #et-boc .inverse-bg.force {
  --bg-color:      var(--lm-black);
  --bg-text:       var(--lm-white);
  --bg-marker:     var(--lm-off-white-color);
  --bg-link:       var(--lm-white);
  --bg-link-hover: #96a1dd;
  --bg-icon:       var(--lm-off-white-color);
  --bg-btn-bg:     var(--lm-white);
  --bg-btn-border: var(--lm-white);
  --bg-btn-text:   var(--lm-primary-color);
  --bg-btn-icon:   var(--lm-primary-color);
  --bg-focus:      var(--lm-white);
}

.off-white-bg,
body #page-container #et-boc .off-white-bg.force {
  --bg-color:      var(--lm-off-white-color);
  --bg-text:       var(--lm-text-color);
  --bg-marker:     var(--lm-primary-color);
  --bg-link:       var(--lm-primary-color);
  --bg-link-hover: var(--lm-secondary-color);
  --bg-icon:       var(--lm-primary-color);
  --bg-btn-bg:     var(--lm-primary-color);
  --bg-btn-border: var(--lm-primary-color);
  --bg-btn-text:   var(--lm-white);
  --bg-btn-icon:   var(--lm-white);
  --bg-focus:      var(--lm-primary-color);
}

.primary-bg,
body #page-container #et-boc .primary-bg.force {
  --bg-color:      var(--lm-primary-color);
  --bg-text:       var(--lm-white);
  --bg-marker:     var(--lm-off-white-color);
  --bg-link:       var(--lm-off-white-color);
  --bg-link-hover: #96a1dd;
  --bg-icon:       var(--lm-white);
  --bg-btn-bg:     var(--lm-white);
  --bg-btn-border: var(--lm-white);
  --bg-btn-text:   var(--lm-primary-color);
  --bg-btn-icon:   var(--lm-primary-color);
  --bg-focus:      var(--lm-white);
}

.secondary-bg,
body #page-container #et-boc .secondary-bg.force {
  --bg-color:      var(--lm-secondary-color);
  --bg-text:       var(--lm-white);
  --bg-marker:     var(--lm-off-white-color);
  --bg-link:       var(--lm-off-white-color);
  --bg-link-hover: #96a1dd;
  --bg-icon:       var(--lm-off-white);
  --bg-btn-bg:     var(--lm-white);
  --bg-btn-border: var(--lm-white);
  --bg-btn-text:   var(--lm-secondary-color);
  --bg-btn-icon:   var(--lm-secondary-color);
  --bg-focus:      var(--lm-white);
}

.tertiary-bg,
body #page-container #et-boc .tertiary-bg.force {
  --bg-color:      var(--lm-tertiary-color);
  --bg-text:       var(--lm-white);
  --bg-marker:     var(--lm-off-white-color);
  --bg-link:       var(--lm-white);
  --bg-link-hover: #96a1dd;
  --bg-icon:       var(--lm-off-white-color);
  --bg-btn-bg:     var(--lm-white);
  --bg-btn-border: var(--lm-white);
  --bg-btn-text:   var(--lm-tertiary-color);
  --bg-btn-icon:   var(--lm-tertiary-color);
  --bg-focus:      var(--lm-white);
}

.image-bg,
body #page-container #et-boc .image-bg.force {
  --bg-color:      var(--lm-transparent);
  --bg-text:       var(--lm-off-white-color);
  --bg-marker:     var(--lm-off-white-color);
  --bg-link:       var(--lm-off-white-color);
  --bg-link-hover: #96a1dd;
  --bg-icon:       var(--lm-off-white-color);
  --bg-btn-bg:     var(--lm-white);
  --bg-btn-border: var(--lm-white);
  --bg-btn-text:   var(--lm-text-color);
  --bg-btn-icon:   var(--lm-text-color);
  --bg-focus:      var(--lm-white);
}



/* ---------- SECTION 2: shared rules, written once ---------- */

/* Background */
:is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg),
body #page-container #et-boc :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg).force {
  background-color: var(--bg-color) !important;
}

/* Font color — paragraphs, spans, headings (incl. preset header spans), list items */
:is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg)
  :is(p, span, h1, h2, h3, h4, h5, h6, ul li, ol li,
      .preset--group--divi-text--divi-font-header--default .et_pb_text_inner h1,
      .preset--group--divi-text--divi-font-header--default .et_pb_text_inner h2,
      .preset--group--divi-text--divi-font-header--default .et_pb_text_inner h3,
      .preset--group--divi-text--divi-font-header--default .et_pb_text_inner h4,
      .preset--group--divi-text--divi-font-header--default .et_pb_text_inner h5,
      .preset--group--divi-text--divi-font-header--default .et_pb_text_inner h6),
body #page-container #et-boc :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg).force
  :is(p, span, h1, h2, h3, h4, h5, h6, ul li, ol li,
      .preset--group--divi-text--divi-font-header--default .et_pb_text_inner h1,
      .preset--group--divi-text--divi-font-header--default .et_pb_text_inner h2,
      .preset--group--divi-text--divi-font-header--default .et_pb_text_inner h3,
      .preset--group--divi-text--divi-font-header--default .et_pb_text_inner h4,
      .preset--group--divi-text--divi-font-header--default .et_pb_text_inner h5,
      .preset--group--divi-text--divi-font-header--default .et_pb_text_inner h6) {
  color: var(--bg-text) !important;
}

/* List marker */
:is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg) ul li::marker,
:is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg) ol li::marker,
:is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg) .special-bullet ul li:before,
body #page-container #et-boc :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg).force ul li::marker,
body #page-container #et-boc :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg).force ol li::marker,
body #page-container #et-boc :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg).force .special-bullet ul li:before {
  color: var(--bg-marker);
}

/* Link */
body :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg) a,
body #page-container #et-boc :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg).force a {
  color: var(--bg-link) !important;
}

/* Link hover */
body :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg) a:hover,
body #page-container #et-boc :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg).force a:hover {
  color: var(--bg-link-hover) !important;
}

/* Icon — includes toggle open/close icon */
body :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg) .et-pb-icon,
body :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg) .et_pb_toggle_title:before,
body #page-container #et-boc :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg).force .et-pb-icon,
body #page-container #et-boc :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg).force .et_pb_toggle_title:before,
body :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg) .et_pb_blurb_content .et-pb-icon, body #page-container #et-boc :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg).force .et_pb_blurb_content .et-pb-icon  {
  color: var(--bg-icon) !important;
}

/* Button — including hover state */
body.et_pb_button_helper_class :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg) :is(.et_pb_button, .et_pb_button:hover),
body.et_pb_button_helper_class #page-container #et-boc :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg).force :is(.et_pb_button, .et_pb_button:hover) {
  background-color: var(--bg-btn-bg) !important;
  border-color: var(--bg-btn-border) !important;
  color: var(--bg-btn-text) !important;
}

/* Button icon */
body.et_pb_button_helper_class :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg) .et_pb_button:after,
body.et_pb_button_helper_class :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg) .et_pb_button:hover:after,
body.et_pb_button_helper_class #page-container #et-boc :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg).force .et_pb_button:after,
body.et_pb_button_helper_class #page-container #et-boc :is(.default-bg, .inverse-bg, .primary-bg, .secondary-bg, .tertiary-bg, .off-white-bg, .image-bg).force .et_pb_button:hover:after {
  color: var(--bg-btn-icon) !important;
}