/* ============================================================================
   RAL Plantations — Elementor reconciliation
   ----------------------------------------------------------------------------
   Loaded only when Elementor is active, on the front end and in the editor
   preview.

   Elementor and this design system both want to own page width and vertical
   rhythm. Rather than let them negotiate, this sheet takes width away from
   Elementor for RAL widgets only: every RAL section already supplies its own
   .wrap and .sect, so the container around it must be a pass-through.

   Everything here is scoped to .elementor-widget-ral-* or to the editor
   chrome. Containers and widgets that are not ours are left entirely alone —
   an editor dropping in a stock Elementor heading still gets Elementor's
   normal boxed behaviour.
   ========================================================================= */

/* -------------------------------------------------- 1. WIDTH PASS-THROUGH */

/* A RAL widget is always full-bleed; the .wrap inside it does the constraining. */
.elementor-widget[class*="elementor-widget-ral-"] {
  width: 100%;
  max-width: 100%;
}

.elementor-widget[class*="elementor-widget-ral-"] > .elementor-widget-container {
  margin: 0;
  padding: 0;
}

/* Elementor's boxed container caps width at --content-width. A container whose
   only child is a RAL widget must not, or the hero stops being full-bleed. */
.e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-ral-"]) > .e-con-inner,
.e-con:has(> .elementor-widget[class*="elementor-widget-ral-"]) {
  --content-width: 100%;
  max-width: 100%;
  padding-inline: 0;
}

/* Fallback for browsers without :has(). Reaches the same containers via the
   class the theme puts on the body, at the cost of being less surgical. */
@supports not selector(:has(*)) {
  body.ral-elementor .e-con,
  body.ral-elementor .e-con-inner {
    --content-width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }
}

/* The legacy section/column structure, for pages built before containers. */
body.ral-elementor .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 100%;
}

/* --------------------------------------------------------- 2. THE EDITOR */

/*
 * The editor preview renders the page on Elementor's own white canvas, which
 * makes an achromatic dark design unreadable while it is being built.
 * ral.css sets these on :root; restate them on the preview body so the canvas
 * matches the site.
 */
body.elementor-editor-active,
body.elementor-editor-preview {
  background: var(--surface-0, #000);
  color: var(--white, #fff);
}

/*
 * Elementor's empty-container drop zone is a pale dashed box. On black it
 * disappears entirely, so an editor cannot see where they are dropping.
 */
body.elementor-editor-active .elementor-empty-view .elementor-first-add,
body.elementor-editor-active .e-con.e-empty::before {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .03);
}

/*
 * Something to grab the container by.
 *
 * On the front end a RAL container is a zero-padding pass-through, so the
 * full-bleed widget inside covers it completely. In the editor that left the
 * container with no hit area of its own: every click selected the widget, so
 * "delete section" could only ever delete the widget and the empty container
 * survived it — which is what made sections look undeletable.
 *
 * A strip along the top, in the editor only, gives the container something to
 * be clicked on. The dashed edge is there so it is obvious which outline
 * belongs to the section and which to the widget inside it.
 */
body.elementor-editor-active .e-con.e-parent:has(> .elementor-widget[class*="elementor-widget-ral-"]) {
  padding-top: 22px !important;
  outline: 1px dashed rgba(255, 255, 255, .22);
  outline-offset: -1px;
}

/*
 * A hero is 100svh. In the editor that means one widget fills the entire
 * canvas and the rest of the page is a scroll away, which makes reordering
 * sections painful. Cap it while editing only — never on the front end.
 */
body.elementor-editor-active .hero {
  min-height: 60vh;
}

/*
 * A RAL section fills its container edge to edge with zero padding, which
 * leaves nothing to click: selecting the section — and reaching its delete
 * handle — means hitting a container with no visible bounds. Outline it on
 * hover while editing so there is something to aim at.
 */
body.elementor-editor-active .elementor-widget[class*="elementor-widget-ral-"]:hover {
  outline: 1px dashed rgba(255, 255, 255, .38);
  outline-offset: -1px;
}

/*
 * Elementor's own handles must stay on top of sections that build their own
 * stacking context (the hero isolates, so that the smoke canvas can sit
 * between the photograph and the scrim).
 */
body.elementor-editor-active .elementor-element-overlay,
body.elementor-editor-active .elementor-editor-element-settings {
  z-index: 999;
}

/*
 * The marquee animates for 45 seconds on a loop. Left running in the editor it
 * is a permanent distraction in the corner of the eye, and it repaints on
 * every keystroke.
 */
body.elementor-editor-active .marquee__track {
  animation: none;
}