/* === Archidex Child — dark background colour ===
 * The site's "black" surfaces use RAL 7021 (Black Grey) instead of pure black.
 * Change the colour here; every rule below (and the preloader) follows it.
 *
 * Backgrounds only. The parent's `--black` / `--primary` variables also colour
 * text, borders and icons, so they are left to Customizer → Theme Colors.
 * Overlays, shadows, hover fills and blend-mode layers keep their own blacks.
 */
:root {
  --zanod-dark: #2F3234;
}

/* --- Parent theme surfaces ------------------------------------------------
 * Wrappers and utility classes the parent paints with `--black`, `--primary`
 * or a literal black (archidex-core.css: "theme scss", "Hero Section"). */
.body-wrapper.dark,
.theme-bg-black,
.dark .theme-bg-black,
.theme-bg-primary,
.rr-bg-primary,
.hero {
  background-color: var(--zanod-dark);
}

/* --- Home page --------------------------------------------------------------
 * Page background: set to #000000 in Elementor → Page Settings, which prints
 * `body.elementor-page-{ID}:not(…)`. Matched by class rather than page ID. */
body.home[class*="elementor-page-"]:not(.elementor-motion-effects-element-type-background),
body.home[class*="elementor-page-"] > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--zanod-dark);
}

/* Header: the parent paints it #000 with `mix-blend-mode: exclusion`, which
 * only reads as "transparent" over pure black. Over any other colour it would
 * tint the white text, button and logo, so until the parent's `.scrolled`
 * state (white bar) takes over, the bar is a plain solid surface. */
body.home .header-area:not(.scrolled) {
  background-color: var(--zanod-dark);
  mix-blend-mode: normal;
}

/* --- About page -------------------------------------------------------------
 * Dark statement column: Elementor container whose background is the kit's
 * Global "Primary" colour (#111111), which also colours text elsewhere. */
body .elementor-68 .elementor-element.elementor-element-1f5fac1:not(.elementor-motion-effects-element-type-background) {
  background-color: var(--zanod-dark);
}

/* --- Project pages (zanod-custom-elements) ----------------------------------
 * Stage behind the project carousel (plugin default #1c1c1c). A colour picked
 * in the widget's own control is more specific and still wins. */
body .zanod-pd {
  --zpd-carousel-bg: var(--zanod-dark);
}