/*
 * Not Ordinary Elements — editability surfaces.
 *
 * Generic. No site identifier, no colour literal, no spacing literal: every
 * value is a custom property the component stylesheet or the site design tokens
 * define. This file only wires the plumbing that makes three editor decisions
 * reach the page.
 *
 * 1. The responsive triplet. A control marked responsive publishes
 *    --noe-x, --noe-x-tablet and --noe-x-mobile on the component root. Reading
 *    them with a var() fallback chain is what makes a device value optional: a
 *    device with no value of its own inherits the base rather than collapsing.
 *
 * 2. The three closed surface tokens. Spacing, surface and heading alignment
 *    resolve to design tokens, never to free values. The default of each is the
 *    approved baseline, so a freshly projected document is byte-identical to
 *    the static site and any deviation is a deliberate operator choice.
 *
 * 3. The no-JavaScript form and stepper path. Every step is visible and every
 *    field is reachable without JavaScript; the buttons that only work with it
 *    ship hidden and are revealed by the editability module.
 *
 * Breakpoints are the approved design breakpoints, declared once, not
 * Elementor's defaults.
 */

/* -------------------------------------------------- 1. responsive triplet */

.noe-component {
  --noe-breakpoint-tablet: 1024px;
  --noe-breakpoint-mobile: 767px;
}

/*
 * A component consuming a responsive control writes the chain itself, because
 * only it knows which property the variable feeds. This is the shape the
 * compiler rule requires it to use; declaring the variable without consuming
 * all three is an error, not a warning.
 *
 *   .scope { gap: var(--noe-band-gap); }
 *   @media (max-width: 1024px) { .scope { gap: var(--noe-band-gap-tablet, var(--noe-band-gap)); } }
 *   @media (max-width: 767px)  { .scope { gap: var(--noe-band-gap-mobile, var(--noe-band-gap-tablet, var(--noe-band-gap))); } }
 */

/* ------------------------------------------------ 2. closed surface tokens */

.noe-component[style*="--noe-band-space"] {
  padding-block: var(--noe-band-space);
}

.noe-component[style*="--noe-band-surface"] {
  background: var(--noe-band-surface);
  color: var(--noe-band-surface-ink, inherit);
}

.noe-component[style*="--noe-heading-align"] > :where(h1, h2, h3, header) {
  text-align: var(--noe-heading-align);
}

/* --------------------------------------------- 3. no-JavaScript form path */

/*
 * Steps are visible by default. A rule that hid them and relied on JavaScript to
 * reveal them would make the form unusable in exactly the situation the fallback
 * exists for.
 */
[data-noe-step] {
  display: block;
}

[data-noe-stepper-interactive="true"] [data-noe-step]:not(.is-active) {
  display: none;
}

/*
 * Buttons that only work with JavaScript ship hidden. The attribute is removed
 * by the editability module once it has mounted.
 */
[data-noe-step-next][hidden],
[data-noe-step-previous][hidden] {
  display: none;
}

/* Contact details always render, in every branch, with or without a runtime. */
[data-noe-contact-fallback] {
  display: block;
}

[data-noe-form-state="unavailable"] [data-noe-form-status] {
  display: block;
}

/*
 * A link the operator marked as opening in a new window is announced as such.
 * The attribute is emitted by the runtime, so styling it is safe: it cannot be
 * present unless the markup really carries target and rel.
 */
.noe-component a[target="_blank"]::after {
  content: var(--noe-external-link-marker, "");
}

/* ------------------------------------------------------ editor affordances */

/*
 * Inside the Elementor editor only, mark a band whose surface token is not the
 * baseline default, so an operator can see at a glance which bands deviate.
 */
.elementor-editor-active .noe-component[data-noe-surface-modified="true"] {
  outline: 1px dashed var(--noe-editor-outline, currentColor);
  outline-offset: 2px;
}