/**
 * Foundation styles: reset, typography roles, shared layout.
 * Component variants must not live here.
 */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--nl-color-background);
	color: var(--nl-color-body);
	font-family: var(--nl-font-body);
	font-size: var(--nl-fs-body);
	font-weight: var(--nl-fw-regular);
	line-height: var(--nl-lh-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--nl-space-sm);
	color: var(--nl-color-heading);
	font-family: var(--nl-font-heading);
	font-weight: var(--nl-fw-semibold);
	line-height: var(--nl-lh-heading);
}

p {
	margin: 0 0 var(--nl-space-sm);
}

a {
	color: var(--nl-color-accent);
}

img,
video,
iframe,
svg {
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
}

/**
 * Theme-wide button hover + pressed states.
 * Target the inner .elementor-button, never the widget wrapper.
 * Pagination dots opt out via [class*="__dots"] / .nl-btn-static.
 */
.elementor-button,
.wp-block-button__link,
.wp-element-button,
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.nl-search__submit {
	transition:
		background-color 150ms ease,
		color 150ms ease,
		border-color 150ms ease,
		box-shadow 150ms ease,
		transform 150ms ease;
}

.elementor-button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.nl-search__submit:hover {
	transform: translateY(var(--nl-btn-lift)) !important;
	box-shadow:
		var(--nl-btn-shadow-hover),
		inset 0 0 0 999px var(--nl-btn-overlay-hover) !important;
}

.elementor-button:active,
.wp-block-button__link:active,
.wp-element-button:active,
.button:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
.nl-search__submit:active {
	transform: translateY(var(--nl-btn-press)) !important;
	box-shadow:
		var(--nl-btn-shadow-active),
		inset 0 0 0 999px var(--nl-btn-overlay-active) !important;
}

[class*="__dots"] .elementor-button:hover,
[class*="__dots"] .elementor-button:active,
.nl-btn-static:hover,
.nl-btn-static:active {
	transform: none !important;
	box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-button,
	.wp-block-button__link,
	.wp-element-button,
	.button,
	button,
	input[type="submit"],
	input[type="button"],
	input[type="reset"],
	.nl-search__submit {
		transition:
			background-color 150ms ease,
			color 150ms ease,
			border-color 150ms ease,
			box-shadow 150ms ease;
	}

	.elementor-button:hover,
	.wp-block-button__link:hover,
	.wp-element-button:hover,
	.button:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="button"]:hover,
	input[type="reset"]:hover,
	.nl-search__submit:hover,
	.elementor-button:active,
	.wp-block-button__link:active,
	.wp-element-button:active,
	.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="button"]:active,
	input[type="reset"]:active,
	.nl-search__submit:active {
		transform: none !important;
	}
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.nl-skip-link {
	position: absolute;
	left: var(--nl-space-sm);
	top: -100px;
	z-index: 100;
	padding: var(--nl-space-xs) var(--nl-space-sm);
	background: var(--nl-color-heading);
	color: var(--nl-color-on-accent);
}

.nl-skip-link:focus {
	top: var(--nl-space-sm);
}

/**
 * Content shell used by chrome and by future components.
 * Horizontal padding is mobile-first; see responsive.css.
 */
.nl-container {
	width: 100%;
	max-width: var(--nl-content-width);
	margin-inline: auto;
	padding-inline: var(--nl-pad-inline);
}

.nl-section {
	padding-block: var(--nl-space-2xl);
}

.nl-main--elementor,
.nl-main--full {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}