/* Shared frontend/editor element language; shell components stay in core.css. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-wrap: break-word;
}

body,
.editor-styles-wrapper {
	color: var(--itlu-color-text);
	background: var(--itlu-color-surface);
	font-family: var(--itlu-font-family-body);
	font-size: var(--itlu-font-size-body);
	font-weight: var(--itlu-font-weight-normal);
	line-height: var(--itlu-line-height-body);
}

body {
	margin: 0;
}

img,
svg {
	max-inline-size: 100%;
	block-size: auto;
}

a {
	color: var(--itlu-color-link);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--itlu-color-link-hover);
	text-decoration-thickness: 0.16em;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: var(--itlu-focus-width) solid var(--itlu-color-focus);
	outline-offset: var(--itlu-focus-offset);
}

:where(h1, h2, h3, h4, h5, h6) {
	color: var(--itlu-color-heading);
	font-family: var(--itlu-font-family-heading);
	font-weight: var(--itlu-font-weight-heading);
	letter-spacing: var(--itlu-letter-spacing-heading);
	line-height: var(--itlu-line-height-heading);
	text-wrap: balance;
}

h1 {
	font-size: var(--itlu-font-size-h1);
}

h2 {
	font-size: var(--itlu-font-size-h2);
}

h3 {
	font-size: var(--itlu-font-size-h3);
}

h4 {
	font-size: var(--itlu-font-size-h4);
}

h5 {
	font-size: var(--itlu-font-size-h5);
}

h6 {
	font-size: var(--itlu-font-size-h6);
}

small,
.itlu-text-small {
	font-size: var(--itlu-font-size-small);
}

.itlu-text-meta {
	color: var(--itlu-color-text-muted);
	font-size: var(--itlu-font-size-meta);
}

.itlu-text-lead {
	font-size: var(--itlu-font-size-lead);
}

/* Buttons: default/primary, secondary, outline and text. */
:is(.itlu-button, .wp-element-button, button, input[type="button"], input[type="submit"], input[type="reset"]) {
	min-block-size: var(--itlu-control-min-height);
	max-inline-size: 100%;
	padding: var(--itlu-space-3) var(--itlu-space-4);
	border: var(--itlu-button-border-width) var(--itlu-border-style) currentcolor;
	border-radius: var(--itlu-button-radius);
	font: inherit;
	font-weight: var(--itlu-font-weight-strong);
	letter-spacing: var(--itlu-letter-spacing-action);
	line-height: var(--itlu-line-height-compact);
	text-align: center;
	text-decoration: none;
	overflow-wrap: anywhere;
	cursor: pointer;
}

:is(.itlu-button, .itlu-button--primary, .search-submit, .itlu-form button, .itlu-poll button, .wp-block-search__button, .wp-block-button:not(.is-style-secondary, .is-style-outline, .is-style-text) .wp-block-button__link, .wp-block-button.is-style-primary .wp-block-button__link) {
	border-color: var(--itlu-color-primary);
	color: var(--itlu-color-primary-contrast);
	background: var(--itlu-color-primary);
}

:is(.itlu-button, .itlu-button--primary, .search-submit, .itlu-form button, .itlu-poll button, .wp-block-search__button, .wp-block-button:not(.is-style-secondary, .is-style-outline, .is-style-text) .wp-block-button__link, .wp-block-button.is-style-primary .wp-block-button__link):hover {
	border-color: var(--itlu-color-primary-hover);
	color: var(--itlu-color-primary-contrast);
	background: var(--itlu-color-primary-hover);
}

:is(.itlu-button--secondary, .wp-block-button.is-style-secondary .wp-block-button__link) {
	border-color: var(--itlu-color-secondary);
	color: var(--itlu-color-secondary-contrast);
	background: var(--itlu-color-secondary);
}

:is(.itlu-button--secondary, .wp-block-button.is-style-secondary .wp-block-button__link):hover {
	border-color: var(--itlu-color-secondary-hover);
	color: var(--itlu-color-secondary-contrast);
	background: var(--itlu-color-secondary-hover);
}

:is(.itlu-button--outline, .wp-block-button.is-style-outline .wp-block-button__link) {
	border-color: var(--itlu-color-primary);
	color: var(--itlu-color-primary);
	background: transparent;
}

:is(.itlu-button--outline, .wp-block-button.is-style-outline .wp-block-button__link):hover {
	border-color: var(--itlu-color-primary-hover);
	color: var(--itlu-color-primary-contrast);
	background: var(--itlu-color-primary-hover);
}

:is(.itlu-button--text, .wp-block-button.is-style-text .wp-block-button__link) {
	min-block-size: 0;
	padding-inline: 0;
	border-color: transparent;
	color: var(--itlu-color-link);
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

:is(.itlu-button--text, .wp-block-button.is-style-text .wp-block-button__link):hover {
	color: var(--itlu-color-link-hover);
	background: transparent;
}

:is(.itlu-button, .wp-element-button, button, input[type="button"], input[type="submit"], input[type="reset"]):active {
	box-shadow: inset 0 0 0 var(--itlu-border-width-prominent) currentcolor;
}

:is(.itlu-button, .wp-element-button, button, input[type="button"], input[type="submit"], input[type="reset"]):disabled,
:is(.itlu-button, .wp-element-button)[aria-disabled="true"] {
	border-color: var(--itlu-color-border);
	color: var(--itlu-color-text-muted);
	background: var(--itlu-color-surface-alt);
	box-shadow: none;
	cursor: not-allowed;
}

/* Native, plugin-independent form controls. */
:is(label, legend) {
	font-weight: var(--itlu-font-weight-strong);
}

form label:has(> :is(input:not([type="checkbox"], [type="radio"]), textarea, select)) {
	display: grid;
	gap: var(--itlu-space-1);
}

form label:has(> :is(input[type="checkbox"], input[type="radio"])) {
	display: inline-flex;
	align-items: center;
	gap: var(--itlu-space-2);
}

form label > :is(input:not([type="checkbox"], [type="radio"]), textarea, select) {
	inline-size: 100%;
}

:is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="search"], input[type="password"], textarea, select) {
	min-block-size: var(--itlu-control-min-height);
	min-inline-size: 0;
	max-inline-size: 100%;
	padding: var(--itlu-space-3);
	border: var(--itlu-border-width-prominent) var(--itlu-border-style) var(--itlu-form-control-border);
	border-radius: var(--itlu-form-control-radius);
	color: var(--itlu-form-control-color);
	background: var(--itlu-form-control-background);
	font: inherit;
}

textarea {
	min-block-size: 8rem;
	resize: vertical;
}

:is(input, textarea)::placeholder {
	color: var(--itlu-color-text-muted);
	opacity: 1;
}

:is(input[type="checkbox"], input[type="radio"]) {
	inline-size: 1.125rem;
	block-size: 1.125rem;
	accent-color: var(--itlu-color-primary);
}

:is(input, textarea, select)[readonly] {
	background: var(--itlu-color-surface-alt);
}

:is(input, textarea, select):disabled {
	border-color: var(--itlu-color-border);
	color: var(--itlu-color-text-muted);
	background: var(--itlu-color-surface-alt);
	cursor: not-allowed;
}

:is(input, textarea, select)[aria-invalid="true"],
.itlu-field--error :where(input, textarea, select) {
	border-color: var(--itlu-color-error);
}

.itlu-help,
.itlu-form-help,
.itlu-form-field .description {
	color: var(--itlu-color-text-muted);
	font-size: var(--itlu-font-size-small);
}

.itlu-status-success,
.itlu-form-success,
.itlu-poll__success {
	padding: var(--itlu-space-3);
	border-inline-start: 0.35rem solid var(--itlu-color-success);
	background: var(--itlu-color-success-surface);
}

:where(.itlu-status-success, .itlu-status-error, .itlu-status-warning, .itlu-status-info) {
	padding: var(--itlu-space-3);
	border-inline-start: 0.35rem solid currentcolor;
}

.itlu-status-error,
.itlu-form-field-error,
.itlu-form-errors,
.itlu-poll__error {
	color: var(--itlu-color-error);
}

.itlu-status-error {
	background: var(--itlu-color-error-surface);
}

.itlu-status-warning {
	color: var(--itlu-color-warning);
	background: var(--itlu-color-warning-surface);
}

.itlu-status-info {
	color: var(--itlu-color-info);
	background: var(--itlu-color-info-surface);
}

@media (prefers-reduced-motion: no-preference) {

	:is(.itlu-button, .wp-element-button, button) {
		transition: color var(--itlu-transition-fast), background-color var(--itlu-transition-fast), border-color var(--itlu-transition-fast), transform var(--itlu-transition-fast);
	}
}

@media (forced-colors: active) {

	:is(.itlu-button, .wp-element-button, button, input, textarea, select) {
		forced-color-adjust: auto;
	}

	:is(.itlu-button, .wp-element-button, button, input[type="checkbox"], input[type="radio"]):focus-visible {
		outline: var(--itlu-focus-width) solid Highlight;
	}
}