/* DDQX Connected-Concept Backgrounds v0.2.0 — STAGING-FIRST.
 * Visual-only, scoped to the explicit enabled body class. No DOM overlays,
 * no event handlers, no content/widget/card/form selectors.
 * The theme may paint an opaque outer wrapper over <body>; paint the SAME
 * background onto that outer shell (instead of making it transparent).
 * Exact live-site shell selector must be checked during hosted acceptance.
 */
:where(body.ddqx-ccb-enabled) {
  --ddqx-ccb-field: linear-gradient(145deg, #104A56 0%, #16697A 50%, #104A56 100%);
}

/* Baseline canvas; remains compatible with original v0.1 option state. */
body.ddqx-ccb-enabled {
  background-color: #104A56 !important;
  background-image: var(--ddqx-ccb-wallpaper), var(--ddqx-ccb-field) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Outer shell only: typical classic-theme (#page/.site) and block-theme
 * (.wp-site-blocks) containers. Direct-child selectors avoid clearing or
 * repainting inner article/card/widget surfaces. A wrapper with both #page
 * and .site matches one rule, with one background paint.
 */
body.ddqx-ccb-enabled.ddqx-ccb-shell-outer > :is(#page, .site, .wp-site-blocks, #wrapper, #site-wrapper) {
  background-color: #104A56 !important;
  background-image: var(--ddqx-ccb-wallpaper), var(--ddqx-ccb-field) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* A few classic themes place an opaque .site immediately INSIDE #page.
 * This remains an outer shell and intentionally does not target .site-content,
 * .entry-content, .wp-block-group, .ast-container, .wp-block-cover or forms.
 */
body.ddqx-ccb-enabled.ddqx-ccb-shell-outer > #page > .site {
  background-color: #104A56 !important;
  background-image: var(--ddqx-ccb-wallpaper), var(--ddqx-ccb-field) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* At tablet and mobile widths: keep the unified DDQX teal field, hide
 * decorative artwork. Avoid fixed-background performance/jank on mobile. */
@media (max-width: 1023px) {
  body.ddqx-ccb-enabled,
  body.ddqx-ccb-enabled.ddqx-ccb-shell-outer > :is(#page, .site, .wp-site-blocks, #wrapper, #site-wrapper),
  body.ddqx-ccb-enabled.ddqx-ccb-shell-outer > #page > .site {
    background-image: var(--ddqx-ccb-field) !important;
    background-attachment: scroll !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.ddqx-ccb-enabled,
  body.ddqx-ccb-enabled.ddqx-ccb-shell-outer > :is(#page, .site, .wp-site-blocks, #wrapper, #site-wrapper),
  body.ddqx-ccb-enabled.ddqx-ccb-shell-outer > #page > .site {
    background-attachment: scroll !important;
  }
}
/* Important: if the actual opaque shell is NOT among the rules above,
 * inspect staging's computed styles and add only its EXACT verified selector.
 * Do not make reading panels transparent to expose the background.
 */