/* Elementor's own layout, taken back off.
 *
 * Every section of this site is a full-bleed `<section>` that draws its own gutters and
 * its own vertical rhythm — that is what the design is. Elementor wraps each widget in a
 * container that is `display: flex`, has a `max-width` from the kit and padding of its
 * own, and the three of them together re-lay-out a page that was already laid out.
 *
 * So the wrapper is made transparent: block, full width, no box of its own. What is left
 * is exactly the markup `front-page.php` would have printed, in the order the builder
 * put it in — which is the whole arrangement this plugin exists to make possible.
 *
 * Scoped to `.elementor` so nothing here reaches a page the builder never touched, and
 * deliberately not in the theme's stylesheet: the site's CSS is a verbatim port and has
 * to stay one, and this is a fact about Elementor rather than about the design.
 *
 * **One class of weight, and no more.** A section built from native widgets is a
 * container carrying the theme's classes (`sheet sheet--paper manifesto`, `manifesto-grid`)
 * and those have to win: `:where(.elementor)` keeps these rules at the weight of a single
 * class, and the stylesheets load in the order Elementor → this file → the theme, so a
 * container with no class of the theme's is transparent and one with a class is exactly
 * what the class says. */

:where(.elementor) .e-con,
:where(.elementor) .e-con > .e-con-inner,
:where(.elementor) .elementor-section,
:where(.elementor) .elementor-container,
:where(.elementor) .elementor-column,
:where(.elementor) .elementor-widget-wrap {
    display: block;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    gap: 0;
}

/* Elementor's own cap on a top-level container, `min(100%, var(--width))`. */
:where(.elementor) [data-elementor-id] > .e-con {
    max-width: none;
}

:where(.elementor) .elementor-widget,
:where(.elementor) .elementor-widget-container {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* A widget's measure and margins. Elementor holds every widget in a container to
   `max-width: 100%` and to no vertical margin, at a weight no class of the theme can
   reach; the theme says a widget's measure in `--snk-max` and its margins in
   `--snk-margin`, next to its own `max-width` and `margin` (`.prose`, `.stile-name`…), and
   this is where Elementor is told. */
.elementor.elementor .e-con > .elementor-widget,
.e-con.e-con > .e-con-inner > .elementor-widget {
    max-width: var(--snk-max, 100%);
}

.elementor .e-con .elementor-widget.elementor-widget {
    margin: var(--snk-margin, 0);
}

/* A native Heading is its wrapper: the theme's class (`display`, `eyebrow`, …) is on the
   wrapper, and the `<h1>` Elementor prints inside it would otherwise be the browser's —
   twice the size, its own weight — instead of the class's. */
.elementor-widget-heading > .elementor-heading-title,
.elementor-widget-heading > .elementor-widget-container > .elementor-heading-title {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-wrap: inherit;
    margin: 0;
    padding: 0;
}

/* The document wrapper itself. Elementor gives it nothing, but a theme or a kit can. */
.elementor.elementor-page {
    margin: 0;
    padding: 0;
}

/* The framed photographs, uncropped by Elementor's image reset.
 *
 * `.elementor img { height: auto }` is one class more specific than this property's own
 * `.opera-photo { height: 100% }`, so every plate in a frame stops being cropped and
 * becomes as tall as the file is: a 4:5 frame turns into a column of full-height
 * photographs, and the page grows by several thousand pixels.
 *
 * These restate the site's own rule at a specificity Elementor's cannot beat. They are
 * the only place in this plugin that names a component of the design, and they name it
 * to *stop* something happening to it. */

.elementor .hero-media .hero-still,
.elementor .opera-frame .opera-photo,
.elementor .artist-portrait .artist-photo,
.elementor .artist-portrait--photo img {
    height: 100%;
}

/* An article's photographs, framed again.
 *
 * The same reset, the other property: `.elementor img { border: none }` weighs exactly
 * what `.prose-article img` does and loads after it, so inside the Theme Builder's single
 * document a photograph in the body lost the hairline `prose.css` draws round it — and
 * the same article printed by `single.php` kept it. */

.elementor .prose-article img {
    border: 1px solid var(--rule-paper);
}