/*
 * Shared direction base. Scoped to body.mls-dir so a live page never matches.
 *
 * WHY: Elementor writes container padding, gap, and widget margins as inline
 * custom properties, and the kit sets Satoshi/Roboto on headings. Those beat
 * a direction stylesheet unless the variables are reset here.
 * CONSTRAINT: !important is limited to those Elementor inline variables.
 * Square corners and the focus ring are shared; each direction sets --mls-accent.
 *
 * Updated 2026-09-23: design direction drafts.
 */

body.mls-dir {
	scroll-behavior: smooth;
	text-wrap: pretty;
	--mls-accent: currentColor;
}

body.mls-dir :focus-visible {
	outline: 2px solid var(--mls-accent);
	outline-offset: 3px;
}

/* WHY: a direction animation must stop when the visitor asked for less motion. CONSTRAINT: body.mls-dir only. */
@media (prefers-reduced-motion: reduce) {
	body.mls-dir,
	body.mls-dir *,
	body.mls-dir *::before,
	body.mls-dir *::after {
		scroll-behavior: auto !important;
		animation: none !important;
		transition: none !important;
	}
}

body.mls-dir .mls-btn,
body.mls-dir .mls-cell,
body.mls-dir .mls-placeholder,
body.mls-dir .elementor img {
	border-radius: 0;
	box-shadow: none;
}

body.mls-dir .mls-cells {
	display: flex;
	flex-wrap: wrap;
}

body.mls-dir .mls-cells .mls-cell {
	margin-left: -1px;
	border-left: 1px solid transparent;
}

/* WHY: Elementor inline --padding-* / --gap and widget margins. CONSTRAINT: body.mls-dir only. */
body.mls-dir .elementor .e-con {
	--padding-top: 0px !important;
	--padding-right: 0px !important;
	--padding-bottom: 0px !important;
	--padding-left: 0px !important;
	--gap: 0px !important;
}

body.mls-dir .elementor .elementor-widget {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

body.mls-dir .elementor .elementor-heading-title,
body.mls-dir .elementor .elementor-widget-text-editor,
body.mls-dir .elementor .elementor-button,
body.mls-dir .elementor .elementor-widget-container {
	font-family: inherit;
}