/*
 * Global custom site CSS.
 *
 * Define client-specific design rules in theme.json first. Add CSS here only
 * when the Global Styles system cannot express the required behaviour.
 */

/* Ease in-page navigation while preserving native wheel and touch scrolling. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Lenis drives wheel animation; avoid competing native scroll animation. */
html.lenis,
html.lenis body {
	height: auto;
}

html.lenis.lenis-smooth {
	scroll-behavior: auto;
}

.skip-link {
	position: absolute;
	inset-inline-start: -9999px;
}

.skip-link:focus {
	inset-block-start: var(--wp--preset--spacing--xx-small);
	inset-inline-start: var(--section-gutter);
	z-index: 100000;
	padding: var(--wp--preset--spacing--xx-small) var(--wp--preset--spacing--x-small);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--small);
}

/*
 * Template-level page layout. ACF blocks can use alignwide or alignfull in
 * their block.json support settings. Full-width blocks own their inner padding.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.site-main--standard {
	padding-block-start: max(12rem, calc(var(--site-header-height, 9.75rem) + var(--wp--preset--spacing--small)));
	padding-block-end: var(--wp--preset--spacing--large);
}

@media (max-width: 42rem) {
	.site-main--standard {
		padding-block-start: max(9rem, calc(var(--site-header-height, 7rem) + var(--wp--preset--spacing--small)));
	}
}

.site-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--wp--style--global--content-size)) minmax(0, 1fr);
	padding-inline: var(--section-gutter);
}

.site-main > * {
	grid-column: 2;
	min-width: 0;
}

.site-main > .alignwide {
	grid-column: 1 / -1;
	width: min(100%, var(--wp--style--global--wide-size));
	justify-self: center;
}

.site-main > .alignfull {
	box-sizing: border-box;
	grid-column: 1 / -1;
	width: calc(100% + (var(--section-gutter) * 2));
	max-width: none;
	margin-inline: calc(var(--section-gutter) * -1);
}

/* Shared page decoration from the two Montrose designs. */
.site-main,
.editor-styles-wrapper {
	position: relative;
	isolation: isolate;
	background-color: var(--secondary-ultra-light);

}


.site-main::before,
.editor-styles-wrapper::before,
.site-main::after,
.editor-styles-wrapper::after {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
}
.site-main::before,
.editor-styles-wrapper::before {
	--decoration-top: -6rem;
	top: var(--decoration-top);
	left: -81.8125rem;
	width: 134.1875rem;
	height: 134.1875rem;
	background-image: var(--montrose-ellipse-left, none);
}
.site-main::after,
.editor-styles-wrapper::after {
	--decoration-top: -42.6875rem;
	top: var(--decoration-top);
	left: calc(41.666667% + 4.75rem);
	width: 107.0625rem;
	height: 107.0625rem;
	background-image: var(--montrose-ellipse-right, none);
}

/* Short pages reach the footer before the circles' natural fade has ended. */
.site-main--blend-decoration::before,
.site-main--blend-decoration::after {
	mask-image: linear-gradient(
		to bottom,
		#000 calc(var(--main-content-height) - var(--decoration-top) - var(--space-xxl)),
		transparent calc(var(--main-content-height) - var(--decoration-top))
	);
}

/* Section styles also apply to the editor's outer block wrappers. */
:where(.is-style-montrose-content, .is-style-montrose-sections, .is-style-montrose-editorial) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0;
}

.is-style-montrose-content { gap: var(--content-gap); }
.is-style-montrose-sections {
	gap: var(--section-gap);
	padding-block-end: var(--content-gap);
}
.is-style-montrose-editorial {
	gap: var(--editorial-gap);
	padding-block-end: var(--section-gap);
}

@media (min-width: 64rem) {
	.is-style-montrose-editorial { gap: var(--space-xxl); }
}

.wp-block-group:is(.is-style-montrose-content, .is-style-montrose-sections, .is-style-montrose-editorial) > * {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-block: 0;
	margin-inline: 0;
}

:is(.is-style-montrose-content, .is-style-montrose-sections, .is-style-montrose-editorial) > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: flex;
	flex-direction: column;
	gap: inherit;
}

:is(.is-style-montrose-content, .is-style-montrose-sections, .is-style-montrose-editorial) > .block-editor-inner-blocks { gap: inherit; }
:is(.is-style-montrose-content, .is-style-montrose-sections, .is-style-montrose-editorial) .block-editor-block-list__layout > .wp-block {
	width: 100%;
	max-width: none;
	margin-block: 0;
	margin-inline: 0;
}

/* Long-form WordPress content remains readable and contained on narrow screens. */
.site-main > article,
.site-main > section {
	min-width: 0;
	overflow-wrap: anywhere;
}

.site-main img,
.site-main video,
.site-main iframe {
	max-width: 100%;
}

.site-main table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.site-main article > h1,
.site-main article > h2,
.site-main > section > h1 {
	color: var(--wp--preset--color--neutral-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 200;
}


.site-main { overflow: clip; }
.editor-styles-wrapper { overflow-x: clip; }
/* The editor's default 32px block gap must not add to section-owned spacing. */
.editor-styles-wrapper .block-editor-block-list__layout > :is(.wp-block-acf-hero, .is-style-montrose-sections, .is-style-montrose-editorial) {
	margin-block-start: 0;
}

/* Editorial bullet lists use the site's serif type and accent markers. */
.site-main ul {
	font-family: var(--wp--preset--font-family--body);
}

.site-main ul > li::marker {
	color: var(--wp--preset--color--accent);
}

.site-main ul:not(.montrose-action-links__list) > li + li {
	padding-block-start: var(--wp--preset--spacing--x-small);
}

/* Editorial content uses the body typeface; interactive controls use the UI typeface. */
.site-main,
.editor-styles-wrapper {
	font-family: var(--wp--preset--font-family--body);
}

:where(.site-main, .editor-styles-wrapper) :where(
	button,
	input[type='button'],
	input[type='submit'],
	input[type='reset'],
	.wp-block-button__link,
	[role='button']
) {
	font-family: var(--wp--preset--font-family--ui);
}