/* =============================================================================
   Natureil Design Layer

   Consumes the --nxd-* custom properties written by the bespoke design panel
   (assets/js/block-extend.js in the editor, Natureil_Block_Styles on the
   server for dynamic blocks).

   Every declaration is guarded by a fallback of `unset` or the element's own
   value, so a control the user never touched changes nothing at all. Only
   properties that were actually configured take effect.
   ============================================================================= */

.has-nxd {
  box-sizing: border-box;

  padding-block-start: var(--nxd-pad-t, revert);
  padding-block-end:   var(--nxd-pad-b, revert);
  padding-inline-start: var(--nxd-pad-l, revert);
  padding-inline-end:   var(--nxd-pad-r, revert);

  margin-block-start: var(--nxd-mt, revert);
  margin-block-end:   var(--nxd-mb, revert);

  border-radius: var(--nxd-radius, revert);
  border-width:  var(--nxd-border-w, revert);
  border-style:  var(--nxd-border-s, revert);
  border-color:  var(--nxd-border-c, revert);

  background-color: var(--nxd-bg, revert);
  color:            var(--nxd-fg, revert);

  box-shadow: var(--nxd-shadow, revert);

  font-size:      var(--nxd-fs, revert);
  line-height:    var(--nxd-lh, revert);
  letter-spacing: var(--nxd-ls, revert);
  font-weight:    var(--nxd-fw, revert);
  text-transform: var(--nxd-tt, revert);
  text-align:     var(--nxd-ta, revert);

  min-height: var(--nxd-min-h, revert);
  opacity:    var(--nxd-opacity, 1);
}

/* Background image / gradient overlay stack.
   Painted on a pseudo-element so it sits behind content and can carry its own
   opacity without fading the text on top of it. */
.has-nxd {
  position: relative;
  z-index: var(--nxd-z, auto);
}

.has-nxd:has(> *)::before,
.has-nxd::before {
  content: none;
}

.has-nxd[style*="--nxd-bg-image"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--nxd-overlay-op, 1);
  background-image: var(--nxd-bg-image);
  background-size: var(--nxd-bg-size, cover);
  background-position: var(--nxd-bg-pos, center center);
  background-repeat: var(--nxd-bg-repeat, no-repeat);
  background-attachment: var(--nxd-bg-attach, scroll);
}

/* Keep real content above the background layer. */
.has-nxd[style*="--nxd-bg-image"] > * {
  position: relative;
  z-index: 1;
}

/* The accent property is consumed by each block's own stylesheet through
   --nx-accent; bridge the design-layer value across so one picker drives both. */
.has-nxd {
  --nx-accent: var(--nxd-accent, var(--nx-accent, var(--flavor-primary, #2563eb)));
}

/* Editor parity — the canvas wrapper carries the same class. */
.editor-styles-wrapper .has-nxd {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .has-nxd[style*="--nxd-bg-attach"] {
    background-attachment: scroll !important;
  }
}