/*
 * What every widget shares.
 *
 * Classes the markup prints belong to their widget (`custom-<name>__…`), so
 * what the base prints alike is marked with an attribute.
 */

/*
 * The box Elementor stands a widget in is told its width, as Elementor tells
 * its own widgets: a flex item is measured before its width is settled.
 */
.e-con-inner > .custom-widget,
.e-con > .custom-widget {
	width: var(--container-widget-width, 100%);
	--flex-grow: var(--container-widget-flex-grow);
}

/*
 * A phrase the design holds on one line (`<span class="nb">`, app.css) stays
 * whole wherever a widget's words carry one.
 */
.custom-widget .nb {
	white-space: nowrap;
}

/*
 * A media slot is a box first: it keeps its size whether or not anything is in
 * it, and the widget's own class gives it that size.
 *
 * The white ground belongs to the empty box alone. A picture cut out of its
 * background — the philosophy artwork is two of them — is not a rectangle, and
 * a ground left painted under it reads as a white plate the design never drew.
 */
[data-custom-media] {
	position: relative;
	overflow: hidden;
}

[data-custom-media]:empty {
	background-color: #FFFFFF;
}

[data-custom-media] > img,
[data-custom-media] > video,
[data-custom-media] > iframe {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	object-fit: cover;
	object-position: center;
}

/*
 * A press keeps what it rests in when it is reached, held or pressed: its ink,
 * its ground, its edge and its shadow. A widget sets the resting values on the
 * custom properties; a state the design colours differently sets them again
 * under its own, heavier selector.
 */
[data-custom-press],
[data-custom-press]:hover,
[data-custom-press]:focus,
[data-custom-press]:focus-visible,
[data-custom-press]:active,
[data-custom-press]:visited {
	color: var(--custom-press-ink, inherit);
	background: var(--custom-press-ground, transparent);
	border-color: var(--custom-press-edge, currentColor);
	box-shadow: var(--custom-press-shadow, none);
	text-decoration: none;
}

/* Elementor takes every link's shadow away (frontend.css, `.elementor a`); a press keeps its own */
.elementor [data-custom-press],
.elementor [data-custom-press]:hover,
.elementor [data-custom-press]:focus,
.elementor [data-custom-press]:focus-visible,
.elementor [data-custom-press]:active,
.elementor [data-custom-press]:visited {
	box-shadow: var(--custom-press-shadow, none);
}

/*
 * A field the browser fills in keeps the field's own ink, and its ground is
 * never repainted: the change of ground is told to take forever.
 */
[data-custom-field],
[data-custom-field]:-webkit-autofill,
[data-custom-field]:-webkit-autofill:hover,
[data-custom-field]:-webkit-autofill:focus,
[data-custom-field]:-webkit-autofill:active {
	-webkit-text-fill-color: var(--custom-field-ink, currentColor);
	transition: background-color 600000s 0s;
}

/*
 * A part that rises into place as the reader nears it — cp-all-designer
 * css/app.css:401-402. Used by more than one section, so it is answered here.
 */
[data-custom-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-custom-reveal].is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-custom-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*
 * The headline that is read in — app.css:242-260. The wrapper stands where the
 * headline stood; the muted copy lies over it and is clipped away one line at a
 * time, left to right, as the section scrolls up. The script measures the
 * lines; until it has, the copy covers the headline, which is the unread state.
 */
[data-custom-sweep] {
	position: relative;
	display: block;
}

[data-custom-sweep-ghost] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	clip-path: inset(0 0 0 0);
}

/*
 * Doubled, and !important, for the reason app.css:257-260 gives: the widget's
 * own title rule and whatever a Style control writes are both heavier than a
 * single attribute selector, and the copy has to be the muted colour or there
 * is nothing for the sweep to reveal.
 */
[data-custom-sweep-ghost][data-custom-sweep-ghost],
[data-custom-sweep-ghost][data-custom-sweep-ghost] * {
	color: var(--custom-sweep-ghost, #CBD5E1) !important;   /* app.css:44, --g400 */
}