/* ==========================================================================
   Devomarks Elementor Kit — WordPress / Elementor compatibility layer.

   The page is a native Elementor document: every element of the Webflow
   export is a container or a widget. Three things make that reproduce the
   export's box tree exactly.

   1. A container with content_width:"full" renders as one <div> carrying the
      export's class — no inner wrapper — so container nesting is the export's
      nesting.

   2. Every box property Elementor puts on a container is driven through a
      custom property (`.e-con { display: var(--display) }` and friends).
      Resetting those variables here neutralises Elementor's defaults without
      declaring the properties, so the export's own class rules keep winning
      on source order. This sheet is enqueued after Elementor's; the two
      properties Elementor hard-codes are handled in elementor-reset.css,
      which is enqueued before style.css instead.

   3. Widget leaves are the only nodes that add wrappers, and the wrappers are
      display:contents — they carry the class but not a box, so the text or
      the <img> lands exactly where the export had it.
   ========================================================================== */

/* ------------------------------------------------- Elementor's defaults --- */

/* Four classes, not three, and the reason matters. Elementor writes a
   per-element rule for every container it manages —
   `.elementor-1253 .elementor-element.elementor-element-586d37b4 { --display: flex }`
   — at specificity (0,3,0). While the page was one document that CSS was
   post-844.css, enqueued before this sheet, so an equal-weight reset here won
   on source order. Now each section is its own document and Elementor pulls
   its CSS in as the Template widget renders, which lands after this file.
   Winning on specificity instead makes the reset independent of load order.

   These declarations only ever set custom properties, so raising them does
   not outrank the export: the properties they feed are declared by Elementor
   at (0,1,0), which the export's own class rules still beat. */
.dm-devomarks-page .elementor,
.dm-devomarks-page .elementor .e-con.dm-export {
  /* A plain <div>, until an export class says otherwise. */
  --display: block;
  --width: auto;
  --height: auto;
  --min-height: initial;
  --position: static;
  --overflow: visible;
  --text-align: initial;
  --z-index: revert;
  --border-radius: 0;

  /* Elementor ships 10px of container padding and 20px of gap by default. */
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --margin-top: 0px;
  --margin-right: 0px;
  --margin-bottom: 0px;
  --margin-left: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;

  /* Flex defaults matching a bare `display: flex` element, so only the
     export decides direction, wrapping and alignment. */
  --flex-direction: row;
  --flex-wrap: nowrap;
  --justify-content: normal;
  --align-items: normal;
  --align-content: normal;

  /* `.e-con` transitions transform over 0.4s. Left alone, every GSAP and
     Webflow IX3 transform on the page would be re-eased through that
     transition and lag behind its own timeline. Zeroing the durations rather
     than overriding `transition` leaves the export's own
     `transition: all .3s` rules intact — they are declared later. */
  --e-con-transform-transition-duration: 0s;
  --background-transition: 0s;
  --border-transition: 0s;
  --overlay-transition: 0s;
}

/* `--width: auto` also makes Elementor's `max-width: min(100%, var(--width))`
   invalid at computed-value time, which resolves to `none` — the initial
   value, and the one a plain div has. Stated here so the behaviour is not
   mistaken for an accident. */

/* ------------------------------------------------------- widget wrappers - */

/* Heading and image widgets exist only to make a leaf editable. Their
   wrappers carry the export's class but must not contribute a box. */
.dm-devomarks-page .elementor-widget-heading > .elementor-widget-container,
.dm-devomarks-page .elementor-widget-image,
.dm-devomarks-page .elementor-widget-image > .elementor-widget-container {
  display: contents;
}

/* Elementor 4 renders the image widget as <div class="...widget-image"><img>,
   with no .elementor-widget-container in between, so the <img> is already a
   direct child once the wrapper is display:contents. img-classes.css targets
   it with a descendant selector for that reason. */

/* Elementor styles the inner heading element (`line-height: 1; margin: 0`)
   and the export styles the element that now wraps it. display:contents
   drops the inner box entirely; the inherited properties are handed back so
   the export class is the only thing deciding how the text looks.

   Three classes, not two. Every Elementor document emits
   `.elementor-widget-heading .elementor-heading-title { font-family: var(--e-global-typography-primary-font-family); font-weight; color }`
   at (0,2,0) — the kit's Roboto. While the page was one document that CSS was
   post-844.css, enqueued before this sheet, so an equal-weight rule here won
   on order. Split across eleven section documents, Elementor pulls each one in
   as its Template widget renders, after this file — and every heading on the
   page silently switched to Roboto, which even changed where the titles
   wrapped. Winning on specificity makes it order-independent. */
.dm-devomarks-page .elementor .elementor-heading-title {
  display: contents;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: inherit;
  text-align: inherit;
  white-space: inherit;
}

.dm-devomarks-page .elementor-widget:not(:last-child) {
  margin-block-end: 0;
  margin-bottom: 0;
}

/* Elementor sizes every widget from its container rather than from its own
   rule:

     .elementor.elementor .e-con > .elementor-widget { max-width: 100% }  (0,4,0)
     .e-con .elementor-widget                        { min-width: 0    }  (0,2,0)

   A text leaf's class now sits on that widget wrapper, so both outrank the
   export's rule for the very element the class came from — .footer-left-text
   loses its 300px cap and every label loses the min-width floor a flex item
   normally has. Relax them to what a plain <div> gets; img-classes.css then
   restates the widths the export actually asked for, one class heavier.

   Specificity here is deliberate: four classes, which beats Elementor's
   `.elementor.elementor .e-con > .elementor-widget` on source order without
   reaching the five that img-classes.css uses to restate the export's own
   widths. Add a class to this selector and it starts overriding them. */
.dm-devomarks-page .e-con .elementor-widget.elementor-widget {
  max-width: none;
  min-width: auto;
}

/* ----------------------------------------------- the section assembly --- */

/* The page is 11 shell containers, each holding one Template widget that
   pulls in a section's own document — Elementor's editor stalls long before
   841 elements in a single document, and per section it is 36 to 122.

   Everything between the page root and the section itself is collapsed with
   display:contents: the shells, the widget, its container, and the inner
   .elementor wrapper each stop generating a box, so the section lands as a
   direct child of the page root exactly as it did when the page was one
   document. */
.dm-devomarks-page .e-con.dm-shell,
.dm-devomarks-page .elementor-widget-template,
.dm-devomarks-page .elementor-widget-template > .elementor-widget-container,
.dm-devomarks-page .elementor-widget-template .elementor-template,
.dm-devomarks-page .elementor-widget-template .elementor {
  display: contents;
}

/* The two <form> blocks are the only markup left as an HTML widget. */
.dm-devomarks-page .elementor-widget-html,
.dm-devomarks-page .elementor-widget-html > .elementor-widget-container {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* ------------------------------------------------------- the hero ticker - */

/* The export parks the rotated ticker strip with `translate(-1230px, 1250px)`,
   a figure tuned to the Webflow canvas. At any other hero size the strip
   lands beside the red bar instead of inside it and `overflow: hidden` clips
   it away completely — which is why the bar renders empty on the standalone
   export too.

   Anchoring it to the bar instead of to a pixel offset keeps the same design
   at every viewport, and leaves the interaction that scrolls it untouched:
   that animates the two .single-hero-ticker children, not this element. */
.dm-devomarks-page .ticker-box-hero {
  position: relative;
}

.dm-devomarks-page .hero-ticker-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max-content;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
}

/* ------------------------------------------------------------------ misc - */

/* Elementor's frontend reset declares `.elementor img { height: auto }`.
   That selector is specificity (0,1,1); the export's global
   `img { height: 100% }` is (0,0,1), so Elementor wins whatever the load
   order and every image the export sizes that way collapses to zero height.
   Restate the export's value above Elementor. */
.dm-devomarks-page .elementor img {
  height: var(--line-height--height-regular, 100%);
}

/* .menu-icon-box is the one image the export sizes with its own class rule,
   which Elementor outranks as well - hand it back explicitly. */
.dm-devomarks-page .elementor img.menu-icon-box {
  height: auto;
}