/**
 * Elementor compatibility layer.
 *
 * Loaded only on pages built with Elementor.
 *
 * The theme's stylesheet is a Tailwind v3 build, and Tailwind's preflight
 * flattens native element styling: headings lose their scale and weight, lists
 * lose their markers, paragraphs and blocks lose their spacing. Elementor
 * widgets are laid on top of those native defaults, so the builder's output
 * needs them restored.
 *
 * Scoping strategy:
 *   - `body.elementor-page` targets builder pages only.
 *   - `:where()` wraps the rest of every selector, which keeps the specificity
 *     at (0,1,0): high enough to beat Tailwind's preflight element rules, low
 *     enough to lose against the per-widget styles Elementor generates. So
 *     anything the site owner sets in the editor always wins.
 */

/* Canvas baseline --------------------------------------------------------- */

.elementor-page .elementor {
	font-family: var(--rts-font-body);
	color: var(--rts-on-surface);
}

/*
 * Elementor's containers are statically positioned, while the prototype's
 * sections lean on absolutely positioned decoration: the hero's backdrop and
 * gradient washes, the About Us showcase's floating metric card, the ambient
 * halos on every card. Without a positioning context those layers escape to the
 * nearest positioned ancestor and land in the wrong place — which is exactly
 * what a hero's background art, or the floating metric node, does when it is
 * left to the browser's default.
 *
 * Making every container its own positioning context keeps each layer inside
 * the block it belongs to. It does not create a stacking context on its own, so
 * nothing else about the layout changes.
 */
.elementor-page .elementor .e-con {
	position: relative;
}

/* Typography -------------------------------------------------------------- */

.elementor-page :where(.elementor h1, .elementor h2, .elementor h3, .elementor h4, .elementor h5, .elementor h6) {
	font-family: var(--rts-font-display);
	color: var(--rts-on-surface);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 0.6em;
}

.elementor-page :where(.elementor h1) { font-size: 2.5rem; }
.elementor-page :where(.elementor h2) { font-size: 2rem; }
.elementor-page :where(.elementor h3) { font-size: 1.5rem; }
.elementor-page :where(.elementor h4) { font-size: 1.25rem; }
.elementor-page :where(.elementor h5) { font-size: 1.125rem; }
.elementor-page :where(.elementor h6) { font-size: 1rem; }

.elementor-page :where(.elementor h1:first-child, .elementor h2:first-child, .elementor h3:first-child, .elementor h4:first-child, .elementor h5:first-child, .elementor h6:first-child) {
	margin-top: 0;
}

.elementor-page :where(.elementor p) {
	margin: 0 0 1.25em;
	color: var(--rts-on-surface-variant);
}

.elementor-page :where(.elementor strong) { font-weight: 700; }
.elementor-page :where(.elementor em) { font-style: italic; }

.elementor-page :where(.elementor mark) {
	background: rgba(255, 122, 0, 0.25);
	color: var(--rts-on-surface);
}

.elementor-page :where(.elementor hr) {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin: 2rem 0;
}

/* Links ------------------------------------------------------------------- */

.elementor-page :where(.elementor a) {
	color: var(--rts-primary);
	text-decoration: none;
}

.elementor-page :where(.elementor a:hover) { color: #ffdbc8; }

/* Prose keeps the underline the design system gives body copy. */
.elementor-page :where(.elementor-widget-text-editor a) { text-decoration: underline; }

/* Lists ------------------------------------------------------------------- */

.elementor-page :where(.elementor ul, .elementor ol) {
	margin: 0 0 1.25em;
	padding-left: 1.5rem;
}

.elementor-page :where(.elementor ul) { list-style: disc; }
.elementor-page :where(.elementor ol) { list-style: decimal; }
.elementor-page :where(.elementor ul ul) { list-style: circle; }
.elementor-page :where(.elementor ol ol) { list-style: lower-alpha; }
.elementor-page :where(.elementor li) { margin: 0 0 0.5rem; }
.elementor-page :where(.elementor li::marker) { color: var(--rts-primary); }

/*
 * Elementor's own list-based widgets lay themselves out, so they keep their
 * marker-free, margin-free lists.
 */
.elementor-page :where(.elementor-icon-list-items, .elementor-icon-list-items li, .elementor-accordion, .elementor-accordion-item, .elementor-tabs-wrapper) {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

/* Blockquotes, code and tables -------------------------------------------- */

.elementor-page :where(.elementor blockquote) {
	margin: 1.5rem 0;
	padding: 0.5rem 0 0.5rem 1.25rem;
	border-left: 3px solid var(--rts-primary);
	font-style: italic;
	color: var(--rts-on-surface);
}

.elementor-page :where(.elementor pre) {
	margin: 1.25rem 0;
	padding: 1rem;
	overflow-x: auto;
	background-color: var(--rts-surface-container-high);
	border-radius: 0.25rem;
}

.elementor-page :where(.elementor code, .elementor pre code) {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
	color: var(--rts-on-surface);
}

.elementor-page :where(.elementor code) {
	padding: 0.125rem 0.375rem;
	background-color: var(--rts-surface-container-high);
	border-radius: 0.25rem;
}

.elementor-page :where(.elementor pre code) {
	padding: 0;
	background: none;
}

.elementor-page :where(.elementor table) {
	width: 100%;
	margin: 1.25rem 0;
	border-collapse: collapse;
}

.elementor-page :where(.elementor th, .elementor td) {
	padding: 0.75rem 1rem;
	text-align: left;
	border: 1px solid rgba(88, 66, 53, 0.5);
}

.elementor-page :where(.elementor th) {
	background-color: var(--rts-surface-container);
	color: var(--rts-on-surface);
	font-family: var(--rts-font-display);
	font-weight: 600;
}

/* Media ------------------------------------------------------------------- */

.elementor-page :where(.elementor img) {
	max-width: 100%;
	height: auto;
}

/* Form controls ----------------------------------------------------------- */

.elementor-page :where(.elementor input[type='text'], .elementor input[type='email'], .elementor input[type='url'], .elementor input[type='tel'], .elementor input[type='number'], .elementor input[type='search'], .elementor input[type='password'], .elementor textarea, .elementor select) {
	width: 100%;
	padding: 0.75rem 1rem;
	border-radius: 0.125rem;
	background-color: var(--rts-surface-container-lowest);
	color: var(--rts-on-surface);
	border: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--rts-font-body);
	font-size: 1rem;
}

.elementor-page :where(.elementor ::placeholder) { color: var(--rts-outline-variant); }

.elementor-page :where(.elementor input:focus, .elementor textarea:focus, .elementor select:focus) {
	outline: none;
	border-color: var(--rts-primary);
	box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.15);
}

.elementor-page :where(.elementor button, .elementor input[type='submit'], .elementor input[type='button']) {
	cursor: pointer;
}

/*
 * Tailwind's preflight also zeroes the border width on every element, which
 * strips the structure Elementor's accordion, toggle, tabs and divider widgets
 * draw with borders. Restoring the width here only takes effect when Elementor
 * has not styled the element itself, because per-widget rules outrank this
 * layer.
 */
.elementor-page :where(.elementor-accordion .elementor-tab-title, .elementor-accordion .elementor-tab-content, .elementor-toggle .elementor-tab-title, .elementor-toggle .elementor-tab-content, .elementor-tabs .elementor-tabs-wrapper, .elementor-tabs .elementor-tab-desktop-title, .elementor-tabs .elementor-tabs-content-wrapper, .elementor-divider-separator) {
	border-width: 1px;
}