/**
 * Base element styles.
 *
 * Element selectors use :where() (zero specificity) so plugin and Elementor
 * component styles always win. Bare button/input elements are not styled.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* The live site renders at an 18px root; plugin rem-based components depend on it. */
html {
	font-size: 112.5%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--emt-header-height-scrolled) + var(--wp-admin--admin-bar--height, 0px) + 12px);
}

body {
	margin: 0;
	overflow-x: clip;
	font-family: var(--emt-font-body);
	font-size: var(--emt-fs-base);
	font-weight: var(--emt-fw-regular);
	line-height: var(--emt-lh-body);
	color: var(--emt-text);
	background-color: var(--emt-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 0.5em;
	font-family: var(--emt-font-heading);
	font-weight: var(--emt-fw-semibold);
	line-height: var(--emt-lh-heading);
	color: var(--emt-heading);
	text-wrap: balance;
}

:where(h1, h2) {
	font-weight: var(--emt-fw-bold);
	letter-spacing: -0.01em;
}

:where(strong, b) {
	font-weight: var(--emt-fw-semibold);
}

:where(p, ul, ol, dl, blockquote, figure, pre, table) {
	margin-top: 0;
}

:where(img, video, svg, iframe) {
	max-width: 100%;
}

:where(img, video) {
	height: auto;
}

:where(a) {
	color: var(--emt-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--emt-duration) var(--emt-ease);
}

:where(a:hover) {
	color: var(--emt-primary-hover);
}

:where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}

:where(hr) {
	height: 1px;
	margin: 2rem 0;
	background: var(--emt-divider);
	border: 0;
}

::selection {
	color: var(--emt-white);
	background: var(--emt-primary);
}

:where(:focus-visible) {
	outline: var(--emt-focus-ring);
	outline-offset: var(--emt-focus-offset);
}

/* Accessibility helpers */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

.skip-link:focus {
	position: fixed !important;
	top: calc(10px + var(--wp-admin--admin-bar--height, 0px));
	left: 10px;
	z-index: calc(var(--emt-z-drawer) + 1);
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	margin: 0;
	clip: auto;
	clip-path: none;
	font-family: var(--emt-font-ui);
	font-size: var(--emt-fs-sm);
	font-weight: var(--emt-fw-semibold);
	color: var(--emt-white);
	text-decoration: none;
	background: var(--emt-primary);
	border-radius: var(--emt-radius-sm);
	outline-color: var(--emt-heading);
	box-shadow: var(--emt-shadow-md);
}

#primary:focus {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}