/* Site-wide typography and components (theme.json presets + responsive media queries). */

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

/* Layout container (Salient extended responsive: max-width + margin + padding). */
.usl-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

.usl-container--full-width {
	max-width: 100%;
}

.usl-container .usl-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

@media only screen and (min-width: 480px) and (max-width: 690px) {
	.usl-container:not(.usl-container--full-width) {
		max-width: 420px;
	}
}

@media only screen and (min-width: 690px) and (max-width: 999px) {
	.usl-container:not(.usl-container--full-width) {
		max-width: 600px;
	}
}

@media only screen and (min-width: 1000px) {
	.usl-container {
		max-width: 1425px;
		padding-left: 100px;
		padding-right: 100px;
	}

	.usl-container--full-width {
		max-width: 100%;
	}
}

body {
	font-family: var(--wp--preset--font-family--roboto, "Roboto", Helvetica, Arial, sans-serif);
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--preset--color--text-default, #333333);
	background-color: var(--wp--preset--color--white, #ffffff);
}

p {
	line-height: 1.75;
}

/*
 * Salient Material skin sets `p { padding-bottom: 1.5em }` globally. That
 * inflates hero/WYSIWYG height inside max-height grids and pushes content into
 * the next section. Reset inside our templates; margins handle spacing.
 */
body .site-main p,
body .entry-content p,
body .usl-centered-content__body p,
body .usl-subservice-cards__lede p,
body .usl-subservice-cards__card-body p,
body .page-content__body p {
	padding-bottom: 0;
}

/*
 * Default: red links, underline on hover/focus.
 * Use body + content scopes so these beat Salient `body a` (colors.php), which
 * often loads late via deferred/dynamic CSS and was resetting resting link color
 * to the accent/text color after first paint (most visible on Home centered content).
 */
a {
	color: var(--wp--preset--color--link, #b33a43);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--wp--preset--color--link, #b33a43);
	text-decoration: underline;
}

body .site-main a:not(.usl-button):not(.wp-block-button__link):not(.home-services-carousel__link),
body .entry-content a:not(.usl-button):not(.wp-block-button__link),
body .usl-centered-content__body a:not(.usl-button):not(.wp-block-button__link),
body .page-content__body a:not(.usl-button):not(.wp-block-button__link) {
	color: var(--wp--preset--color--link, #b33a43);
	text-decoration: none;
}

body .site-main a:not(.usl-button):not(.wp-block-button__link):not(.home-services-carousel__link):hover,
body .site-main a:not(.usl-button):not(.wp-block-button__link):not(.home-services-carousel__link):focus-visible,
body .entry-content a:not(.usl-button):not(.wp-block-button__link):hover,
body .entry-content a:not(.usl-button):not(.wp-block-button__link):focus-visible,
body .usl-centered-content__body a:not(.usl-button):not(.wp-block-button__link):hover,
body .usl-centered-content__body a:not(.usl-button):not(.wp-block-button__link):focus-visible,
body .page-content__body a:not(.usl-button):not(.wp-block-button__link):hover,
body .page-content__body a:not(.usl-button):not(.wp-block-button__link):focus-visible {
	color: var(--wp--preset--color--link, #b33a43);
	text-decoration: underline;
}

/*
 * Dark surfaces (accent/blue, text-on-dark): white links with persistent
 * underline so they stay distinct from body copy. Buttons keep their own styles.
 * Prefixed with body to outrank Salient `body a` when that CSS is present.
 */
body .has-text-on-dark-color a:not(.usl-button):not(.wp-block-button__link),
body .has-accent-background-color a:not(.usl-button):not(.wp-block-button__link),
body .usl-split-promo__content a:not(.usl-button):not(.wp-block-button__link),
body .usl-banner--primary a:not(.usl-button):not(.wp-block-button__link),
body .home-hero__content a:not(.usl-button):not(.wp-block-button__link),
body .services-hero__content a:not(.usl-button):not(.wp-block-button__link),
body .service-hero__content a:not(.usl-button):not(.wp-block-button__link),
body .usl-careers-cta__text a,
body .usl-subservice-cards__lede a {
	color: var(--wp--preset--color--text-on-dark, #ffffff);
	text-decoration: underline;
}

body .has-text-on-dark-color a:not(.usl-button):not(.wp-block-button__link):hover,
body .has-text-on-dark-color a:not(.usl-button):not(.wp-block-button__link):focus-visible,
body .has-accent-background-color a:not(.usl-button):not(.wp-block-button__link):hover,
body .has-accent-background-color a:not(.usl-button):not(.wp-block-button__link):focus-visible,
body .usl-split-promo__content a:not(.usl-button):not(.wp-block-button__link):hover,
body .usl-split-promo__content a:not(.usl-button):not(.wp-block-button__link):focus-visible,
body .usl-banner--primary a:not(.usl-button):not(.wp-block-button__link):hover,
body .usl-banner--primary a:not(.usl-button):not(.wp-block-button__link):focus-visible,
body .home-hero__content a:not(.usl-button):not(.wp-block-button__link):hover,
body .home-hero__content a:not(.usl-button):not(.wp-block-button__link):focus-visible,
body .services-hero__content a:not(.usl-button):not(.wp-block-button__link):hover,
body .services-hero__content a:not(.usl-button):not(.wp-block-button__link):focus-visible,
body .service-hero__content a:not(.usl-button):not(.wp-block-button__link):hover,
body .service-hero__content a:not(.usl-button):not(.wp-block-button__link):focus-visible,
body .usl-careers-cta__text a:hover,
body .usl-careers-cta__text a:focus-visible,
body .usl-subservice-cards__lede a:hover,
body .usl-subservice-cards__lede a:focus-visible {
	color: var(--wp--preset--color--text-on-dark, #ffffff);
	text-decoration: underline;
}

.usl-font-heading,
h1,
h2,
h3,
h4,
h5,
h6,
.usl-heading {
	font-family: var(--wp--preset--font-family--bebas-neue, "BebasNeue-Regular", "Bebas Neue", sans-serif);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.1;
	color: var(--wp--preset--color--text-blue, #1f396f);
}

/*
 * Salient colors.php sets `body h1…h6 { color: overall-font-color }` (often a
 * muted gray) after first paint. Beat that so headings stay brand blue.
 */
body .site-main h1,
body .site-main h2,
body .site-main h3,
body .site-main h4,
body .site-main h5,
body .site-main h6,
body .site-main .usl-heading,
body .entry-content h1,
body .entry-content h2,
body .entry-content h3,
body .entry-content h4,
body .entry-content h5,
body .entry-content h6 {
	color: var(--wp--preset--color--text-blue, #1f396f);
}

/*
 * Body copy: same deferred Salient race can leave paragraphs looking washed-out.
 * Keep editorial text on the intended default (#333), not overall-font-color.
 * Scoped to light editorial regions only (dark surfaces keep their own rules below).
 */
body .usl-centered-content__body,
body .usl-centered-content__body p,
body .page-content__body > p,
body .page-content__body > .wp-block-paragraph,
body .service-two-col-alt__content,
body .service-two-col-alt__content p,
body .service-gallery__intro,
body .service-gallery__intro p {
	color: var(--wp--preset--color--text-default, #333333);
}

h1,
.usl-heading--h1 {
	font-size: 42px;
}

h2,
.usl-heading--h2 {
	font-size: 28px;
}

.usl-heading--display {
	font-size: 40px;
}

h3,
.usl-heading--h3 {
	font-size: 24px;
}

h4,
.usl-heading--h4 {
	font-size: 20px;
}

.usl-heading--on-dark,
.usl-section--dark .usl-heading,
.usl-section--dark h1,
.usl-section--dark h2,
.usl-section--dark h3,
body .site-main .usl-heading--on-dark,
body .site-main .home-hero__title,
body .site-main .service-hero__title,
body .site-main .services-hero__title,
body .site-main .usl-split-promo__title,
body .site-main .usl-banner__title,
body .site-main .usl-careers-cta__title,
body .site-main .usl-subservice-cards__title {
	color: var(--wp--preset--color--text-on-dark, #ffffff);
}

body .site-main .usl-subservice-cards__card-title,
body .site-main .usl-subservice-cards__card-title a {
	color: var(--wp--preset--color--extra, #ae262a);
}

body .site-main .usl-subservice-cards__card-title a:hover,
body .site-main .usl-subservice-cards__card-title a:focus-visible {
	color: var(--wp--preset--color--extra, #ae262a);
	text-decoration: underline;
}

body .site-main .home-hero__lead,
body .site-main .home-hero__lead p,
body .site-main .service-hero__lead,
body .site-main .service-hero__lead p,
body .site-main .services-hero__lead,
body .site-main .services-hero__lead p,
body .site-main .usl-split-promo__body,
body .site-main .usl-split-promo__body p,
body .site-main .usl-careers-cta__text,
body .site-main .usl-careers-cta__text p,
body .site-main .usl-subservice-cards__lede,
body .site-main .usl-subservice-cards__lede p {
	color: var(--wp--preset--color--text-on-dark, #ffffff);
}

/*
 * Split-promo right column is always on accent blue. Beat site-main / entry-content
 * blue headings and pasted inline colors / WP text-color classes.
 */
body .site-main .usl-split-promo__content,
body .site-main .usl-split-promo__content .usl-split-promo__title,
body .site-main .usl-split-promo__body,
body .site-main .usl-split-promo__body h1,
body .site-main .usl-split-promo__body h2,
body .site-main .usl-split-promo__body h3,
body .site-main .usl-split-promo__body h4,
body .site-main .usl-split-promo__body h5,
body .site-main .usl-split-promo__body h6,
body .site-main .usl-split-promo__body p,
body .site-main .usl-split-promo__body li,
body .site-main .usl-split-promo__body span,
body .site-main .usl-split-promo__body strong,
body .site-main .usl-split-promo__body em,
body .site-main .usl-split-promo__body b,
body .site-main .usl-split-promo__body i,
body .site-main .usl-split-promo__body .wp-block-heading,
body .site-main .usl-split-promo__body .has-text-color,
body .site-main .usl-split-promo__body [class*="has-"][class*="-color"] {
	color: var(--wp--preset--color--text-on-dark, #ffffff) !important;
}

.usl-button,
button.usl-button,
input[type="submit"].usl-button,
a.usl-button,
.wp-block-button__link {
	--usl-button-padding-y: 10px;
	--usl-button-padding-x: 35px;
	--usl-button-font-size: 28px;
	--usl-button-optical-y: 2px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-top: calc(var(--usl-button-padding-y) + var(--usl-button-optical-y));
	padding-right: var(--usl-button-padding-x);
	padding-bottom: max(0px, calc(var(--usl-button-padding-y) - var(--usl-button-optical-y)));
	padding-left: var(--usl-button-padding-x);
	font-family: var(--wp--preset--font-family--bebas-neue, "BebasNeue-Regular", "Bebas Neue", sans-serif);
	font-size: var(--usl-button-font-size);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	color: #ffffff;
	background-color: var(--wp--preset--color--extra, #ae262a);
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.usl-button--large,
button.usl-button--large,
input[type="submit"].usl-button--large,
a.usl-button--large {
	--usl-button-padding-x: 50px;
}

.usl-button--small,
button.usl-button--small,
input[type="submit"].usl-button--small,
a.usl-button--small {
	--usl-button-padding-y: 7px;
	--usl-button-padding-x: 25px;
	--usl-button-font-size: 26px;
	--usl-button-optical-y: 1.5px;
}

.usl-button:hover,
.usl-button:focus-visible {
	opacity: 0.92;
	text-decoration: none;
}

.usl-button--extra,
a.usl-button--extra {
	color: #ffffff;
	background-color: var(--wp--preset--color--extra, #ae262a);
}

.usl-button--accent,
a.usl-button--accent {
	color: #ffffff;
	background-color: var(--wp--preset--color--extra, #ae262a);
}

.usl-button--on-dark,
a.usl-button--on-dark {
	color: #ffffff;
	background-color: var(--wp--preset--color--extra, #ae262a);
}

@media screen and (min-width: 768px) {
	body {
		font-size: var(--wp--preset--font-size--body, 17px);
	}

	h1,
	.usl-heading--h1 {
		font-size: var(--wp--preset--font-size--h1, 65px);
	}

	h2,
	.usl-heading--h2 {
		font-size: var(--wp--preset--font-size--h2, 43px);
	}

	.usl-heading--display {
		font-size: var(--wp--preset--font-size--h2-display, 60px);
	}

}

/* ---------------------------------------------------------- Section spacing */

/*
 * Single vertical rhythm value. Breaks at 1000px to match .usl-container, so
 * section spacing and container width change at the same point.
 */
:root {
	--usl-section-y: 2rem;
}

@media screen and (min-width: 1000px) {
	:root {
		--usl-section-y: 3.75rem;
	}
}

/*
 * Section spacing model — service hub and single service templates.
 *
 * A section owns vertical padding only when it has a background to fill.
 * Sections on white contribute none and are separated by a single collapsed
 * margin, which avoids the doubled gap you get when two padded sections are
 * adjacent. Widening this to the rest of the site means dropping the two
 * scope selectors.
 */
.single-service > * + *,
.page-services > * + *,
.page-home > * + * {
	margin-top: var(--usl-section-y, 2rem);
}

/*
 * A section opts out of the flow gap when it is visually bonded to the one
 * above it. The areas banner is a divider strip under the hero, not a section
 * in its own right.
 */
.page-home > .home-areas-banner {
	margin-top: 0;
}

/* Transparent sections: the flow gap above supplies their spacing. */
.single-service .usl-centered-content,
.single-service .usl-contact,
.page-services .usl-centered-content,
.page-services .usl-contact,
.page-home .usl-centered-content,
.page-home .usl-contact {
	padding-top: 0;
	padding-bottom: 0;
}

/* Backgrounded sections keep internal padding so the band has breathing room. */
.single-service .usl-subservice-cards,
.single-service .usl-careers-cta,
.page-services .usl-careers-cta,
.page-home .usl-careers-cta {
	padding-top: var(--usl-section-y, 2rem);
	padding-bottom: var(--usl-section-y, 2rem);
}

/* Replaces the 62px magic number and the trailing margin from components.css. */
.single-service .usl-careers-cta,
.page-services .usl-careers-cta,
.page-home .usl-careers-cta {
	margin-bottom: 0;
}