/**
 * What every section shares.
 *
 * Nothing here reaches a page unless a section on it declared this handle, so
 * it is still a section's asset rather than the plugin's.
 */

/* The box Elementor stands a section in is a flex item, and a flex item is
   measured before its width is settled; a section whose depth comes from a
   picture holding its shape is then read as shallower than it is. Told its
   width, the box measures the section as it stands. */
.custom-section {
	width: 100%;
}

.custom-media-empty {
	position: absolute;
	inset: 0;
	background-color: #ffffff;
	pointer-events: none;
}

/* A state is not the theme's to answer.
 *
 * A rule on a bare element under a pseudo-class — `a:hover`, `button:focus` —
 * carries one step more weight than a class that spoke only for the resting
 * state, and so answers for the ink the moment a reader reaches for anything.
 * Answered once here instead, for every press the plugin draws.
 *
 * This weighs a class and a pseudo-class, the same as a section's own
 * `.custom-thing:hover`. A section the design gives a state of its own says it
 * heavily enough to outweigh this rather than tie with it — a tie is settled by
 * which file loaded last, which is not something a design should rest on.
 */
[ class*="custom-" ]:hover,
[ class*="custom-" ]:focus,
[ class*="custom-" ]:active {
	color: inherit;
}

/* A field the browser fills in for the reader is still the section's field.
 *
 * Offering a value, and having filled one in, Chrome paints its own ground
 * behind the words and its own ink on them, in weights a stylesheet cannot
 * outrank — a field drawn as a rule with nothing behind it comes back a dark
 * box with words in black. Its ground is never painted: every field is told,
 * before any of that begins, that a change of ground takes forever, and the
 * offer is painted through that. Its ink is given back through the one
 * property the browser does honour once the value is taken.
 */
input[ class*="custom-" ],
textarea[ class*="custom-" ],
select[ class*="custom-" ] {
	transition: background-color 2147483647s ease-out 0s, color 2147483647s ease-out 0s;
}

input[ class*="custom-" ]:-webkit-autofill,
input[ class*="custom-" ]:-webkit-autofill:hover,
input[ class*="custom-" ]:-webkit-autofill:focus,
textarea[ class*="custom-" ]:-webkit-autofill,
select[ class*="custom-" ]:-webkit-autofill {
	-webkit-text-fill-color: currentColor;
	caret-color: currentColor;
	box-shadow: none;
}

/* The ring a reader arriving by keyboard needs, drawn in whatever ink the band
   is already using — on what can be pressed or typed into, and on nothing
   else: a page brought back to a form by its address gives the form itself
   the focus, and a ring around a whole form is a frame nobody asked for. */
a[ class*="custom-" ]:focus-visible,
button[ class*="custom-" ]:focus-visible,
input[ class*="custom-" ]:focus-visible,
select[ class*="custom-" ]:focus-visible,
textarea[ class*="custom-" ]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The line a text sits on is the design's, not the theme's.
 *
 * Every text in the file stands on a line the font sets for itself, and a theme
 * that answers instead makes each box taller than the file draws it. The space
 * between two of them is then the gap plus whatever leading was added, which is
 * read as a padding that will not come right however often it is adjusted.
 *
 * Said once, at the same weight as a section's own rule and before it, so a
 * section the design gives a measured line still has the last word.
 */
[ class*="custom-" ] {
	line-height: normal;
}

/* The space around a text is the design's, not the theme's.
 *
 * A theme reaches a paragraph through its own wrapper — a class and an element
 * together — which outweighs a class alone, so a section's `margin: 0` loses
 * and the theme's spacing is added to the gap the design asked for.
 *
 * Only the elements a theme writes that spacing onto are answered here. A box
 * is not one of them: the margin between two boxes is the section's own layout,
 * and a reset reaching it would undo the design rather than defend it.
 */
p[ class*="custom-" ][ class*="custom-" ],
h1[ class*="custom-" ][ class*="custom-" ],
h2[ class*="custom-" ][ class*="custom-" ],
h3[ class*="custom-" ][ class*="custom-" ],
h4[ class*="custom-" ][ class*="custom-" ],
h5[ class*="custom-" ][ class*="custom-" ],
h6[ class*="custom-" ][ class*="custom-" ] {
	margin-top: 0;
	margin-bottom: 0;
}