/*
 * S&H Steel — site styles.
 *
 * Global: base type, the header accent, buttons, editor formats, bands and
 * panels (core/group block styles), header, floating CTA and footer.
 * Per-block overrides of parent blocks live in css/blocks/<block>.css and
 * load with the block. Child blocks carry their own CSS.
 *
 * Nothing here depends on a class typed into "Additional CSS class":
 * every hook is a block style (is-style-sh-*), a format (sh-*) or a
 * block's own class. Figma file evWiXkgi1m4PhKHF13ABq0, artboard 1440,
 * content 1020 inside 1200 panels.
 */

/* ---- Base --------------------------------------------------------------- */

body {
	background: var(--white);
	color: var(--text-primary);
	line-height: var(--line-height-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p {
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	font-weight: 400;
}

[class*="__sub-header"] {
	font-weight: 500;
	color: var(--text-secondary);
	line-height: 1.3;
}

.is-dark {
	--color-heading: var(--white);
}

.is-dark [class*="__sub-header"] {
	color: var(--white);
}

/* Two-tone headings: the Header Accent field (functions.php). */
.sh-accent {
	color: var(--primary-300);
}

.sh-accent--break {
	display: block;
}

/* ---- Buttons ------------------------------------------------------------
   Figma "Primary" is the 1px outline; "Secondary Button" is the solid
   slate fill. Format "Button (outline)" = .btn-primary, "Button (solid)"
   = .btn-secondary. */

a.btn,
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button[type="submit"] {
	font-family: var(--font-family-button);
	font-weight: 800;
	font-size: 14px;
	line-height: 21px;
	border: 1px solid transparent;
	box-shadow: none;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

a.btn-primary {
	background: transparent;
	color: var(--primary-300);
	border-color: var(--primary-300);
}

a.btn-primary:hover {
	background: var(--accent-300);
	color: var(--white);
	border-color: var(--accent-300);
}

.is-dark a.btn-primary {
	color: var(--white);
	border-color: var(--white);
}

.is-dark a.btn-primary:hover {
	background: var(--accent-300);
	border-color: var(--accent-300);
}

a.btn-secondary,
.is-dark a.btn-secondary {
	background: var(--accent-400);
	border-color: var(--accent-400);
	color: var(--white);
}

a.btn-secondary:hover,
.is-dark a.btn-secondary:hover {
	background: var(--accent-300);
	border-color: var(--accent-300);
	color: var(--white);
}

/* Buttons placed in body copy with the Formats menu sit side by side. */
p:has(> a.btn) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

p:has(> a.btn) a.btn {
	align-self: auto;
}

/* ---- Formats (TinyMCE "Formats" menu) ---------------------------------- */

.sh-red {
	color: var(--primary-400);
}

.is-dark .sh-red {
	color: var(--primary-300);
}

p.sh-stat {
	margin: 0;
	font-family: var(--font-family-heading);
	font-weight: 700;
	font-size: 30px;
	line-height: 36px;
	color: var(--primary-400);
}

p.sh-label {
	margin: 20px 0 4px;
	font-family: var(--font-family-body);
	font-size: 14px;
	line-height: 1.75;
	color: var(--primary-400);
}

p.sh-small {
	font-size: 12px;
	line-height: 18px;
}

p.sh-note {
	margin-top: 20px;
	font-size: 12px;
	line-height: 18px;
}

/* Tagline: a line in the sub-line style, Archivo 500 17/24 grey (Our Team's
   "40+ Years in Arizona | …", red bars as Red text). */
p.sh-tagline {
	font-family: var(--font-family-heading);
	font-weight: 500;
	font-size: 17px;
	line-height: 24px;
	color: var(--neutral-300);
}

.is-dark p.sh-tagline,
.is-style-sh-dark p.sh-tagline {
	color: var(--neutral-200);
}

/* Badge list: the outlined 248x47 certification chips, two per row. */
ul.sh-badges {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 248px));
	gap: 12px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

ul.sh-badges li {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 47px;
	padding: 0 16px;
	border: 1px solid var(--secondary-200);
	font-family: var(--font-family-body);
	font-weight: 700;
	font-size: 13px;
	line-height: 20px;
	color: var(--text-primary);
}

ul.sh-badges li::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	margin-left: 12px;
	border-radius: 50%;
	background: var(--primary-400);
}

@media screen and (max-width: 600px) {
	ul.sh-badges { grid-template-columns: 1fr; }
}

/* Audience list: the hero's GC / Engineers / Architects strip. The first
   bold run in each item is the red label. */
ul.sh-audiences {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 0;
	list-style: none;
	margin: 28px 0 0;
	position: relative;
	padding: 28px 0 0;
	width: 580px;
	max-width: 100%;
}

ul.sh-audiences::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
	max-width: 100%;
	height: 1px;
	background: var(--accent-300);
}

ul.sh-audiences li {
	flex: 0 0 auto;
	padding-right: 14px;
	margin-right: 14px;
	border-right: 1px solid var(--accent-200);
	font-size: 12px;
	line-height: 19px;
	color: var(--white);
	white-space: nowrap;
}

ul.sh-audiences li:last-child {
	border-right: 0;
	margin-right: 0;
	padding-right: 0;
}

ul.sh-audiences strong {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--primary-300);
}

@media screen and (max-width: 600px) {
	ul.sh-audiences li { white-space: normal; }
}

/* Contact card: white card, red corner tab, bold labels. */
.sh-contact-card {
	position: relative;
	background: var(--white);
	color: var(--neutral-400);
	padding: 24px 22px 40px;
	overflow: hidden;
}

.sh-contact-card::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 167px;
	height: 43px;
	background: var(--primary-300);
	clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
}

.sh-contact-card h3 {
	font-size: 22px;
	font-weight: 600;
	line-height: 29px;
	color: var(--primary-400);
	margin: 0 0 8px;
}

.sh-contact-card p {
	color: var(--neutral-400);
	margin: 0 0 4px;
	font-size: 16px;
	line-height: 28px;
}

.sh-contact-card strong {
	font-family: var(--font-family-heading);
	font-weight: 500;
	font-size: 17px;
}

/* ---- Bands and panels (core/group block styles) ------------------------
   The group carries the background; the blocks inside keep their layout.
   The parent constrains non-Launchpad blocks to the content width; bands
   run full width, panels are the 1200 content width. */

.entry-content > .wp-block-group {
	max-width: none;
	margin-block: 0;
}

.wp-block-group[class*="is-style-sh-"] {
	position: relative;
}

.wp-block-group.is-style-sh-dark,
.wp-block-group.is-style-sh-grey {
	padding-block: 1px;
}

.wp-block-group.is-style-sh-dark {
	background: var(--neutral-400);

	/* Dark semantics, same as brand-identity.css .is-dark */
	--surface-page: var(--neutral-400);
	--surface-card: var(--neutral-300);
	--text-primary: var(--neutral-100);
	--text-secondary: var(--neutral-200);
	--text-accent: var(--primary-200);
	--color-heading: var(--white);
	--border-default: var(--neutral-300);
	color: var(--white);
}

.is-style-sh-dark [class*="__sub-header"],
.is-style-sh-dark [class*="__body"],
.is-style-sh-dark [class*="__body"] p {
	color: var(--white);
}

.is-style-sh-dark a.btn-primary {
	color: var(--white);
	border-color: var(--white);
}

.is-style-sh-dark a.btn-primary:hover {
	background: var(--accent-300);
	border-color: var(--accent-300);
}

.wp-block-group.is-style-sh-grey {
	background: var(--neutral-100);
}

/* Photo bands: the frames lay one flat colour over the photo (black, or
   #1E2023 on Industries, at 80%; 2026-10-01), not the parent's fade from
   the tint opacity at the top to 20 points less at the bottom. The hero
   has its own gradient (css/blocks/hero.css). */
.lp-tint {
	background: rgb(from var(--tint-color) r g b / var(--tint-opacity));
}

/* Grey panel: 1200 wide, the 1020 content inset 90px, a 167x43 chamfered
   tab at one corner. */
.entry-content > .wp-block-group.is-style-sh-panel-tr,
.entry-content > .wp-block-group.is-style-sh-panel-bl,
.wp-block-group.is-style-sh-panel-tr,
.wp-block-group.is-style-sh-panel-bl {
	max-width: var(--content-max-width);
	width: calc(100% - 8vw);
	padding: 50px 90px;
	background: var(--neutral-100);
}

/* The tab sits in the previous block's bottom padding (tab top right) or
   in the gap below (tab bottom left), as in the frames. */
.entry-content > .wp-block-group.is-style-sh-panel-tr,
.wp-block-group.is-style-sh-panel-tr {
	margin: 0 auto var(--sh-space-section);
}

.entry-content > .wp-block-group.is-style-sh-panel-bl,
.wp-block-group.is-style-sh-panel-bl {
	margin: 50px auto 92px;
}

.is-style-sh-panel-tr::before,
.is-style-sh-panel-bl::after {
	content: "";
	position: absolute;
	width: 167px;
	height: 43px;
	background: var(--neutral-100);
}

.is-style-sh-panel-tr::before {
	top: -42px;
	right: 0;
	clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
}

.is-style-sh-panel-bl::after {
	bottom: -42px;
	left: 0;
	clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%);
}

/* Blocks inside a panel sit on the panel's padding. */
.is-style-sh-panel-tr .lp-block,
.is-style-sh-panel-bl .lp-block {
	padding: 0;
	background: none;
}

@media screen and (max-width: 900px) {
	/* Same selectors as the desktop rule, or its .entry-content > variant
	   wins and the panel keeps 90px sides on a phone (fixed 2026-09-29). */
	.entry-content > .wp-block-group.is-style-sh-panel-tr,
	.entry-content > .wp-block-group.is-style-sh-panel-bl,
	.wp-block-group.is-style-sh-panel-tr,
	.wp-block-group.is-style-sh-panel-bl {
		padding: 40px 32px;
	}
}

/* ---- Spacing system (2026-09-29) ----------------------------------------
   Every block pads 50 top and bottom (--sh-space-section, via the parent's
   --margin-vertical-* tokens), and the parent drops the top padding of a
   no-background block after another one, so white sections sit 50 apart.
   The rules below cover what that model misses. Tokens: brand-identity.css. */

/* Bands: dark and grey groups, blocks over a photo, the stat strip. */

/* A white section after a band's hanging notch, or after the stat strip,
   keeps its top padding (dividers and the strip count as no-background
   blocks, so the parent's rule would put the section flush against them). */
.lp-divider + .lp-block--no-bg:not(.lp-divider),
.is-style-sh-stat-strip + .lp-block--no-bg {
	padding-block-start: var(--sh-space-section);
}

/* After a Grey panel (tab bottom left) the panel's bottom margin is the tab
   plus the section gap, so the next section doesn't add its own. */
.wp-block-group.is-style-sh-panel-bl + .lp-block--no-bg {
	padding-block-start: 0;
}

/* A white gap between two bands in a row, before the rising notch of a band
   that follows another band, between a hanging and a rising notch, and
   under a band's hanging tab when another band follows (Request A Quote,
   2026-10-01: the tab stays on its band, the gap goes below it). Dividers
   carry their shape as a class (functions.php). */
:is(.wp-block-group.is-style-sh-dark, .wp-block-group.is-style-sh-grey, .lp-block--has-bg:not(.sh-page-header, .lp-hero))
	+ :is(.wp-block-group.is-style-sh-dark, .wp-block-group.is-style-sh-grey, .lp-block--has-bg),
:is(.wp-block-group.is-style-sh-dark, .wp-block-group.is-style-sh-grey, .lp-block--has-bg:not(.sh-page-header, .lp-hero))
	+ .lp-divider:not(.sh-divider--sh-tab-down):has(+ :is(.wp-block-group, .lp-block--has-bg)),
.lp-divider.sh-divider--sh-tab-down + :is(.wp-block-group.is-style-sh-dark, .wp-block-group.is-style-sh-grey, .lp-block--has-bg),
.lp-divider + .lp-divider {
	margin-top: var(--sh-space-section);
}

/* Inside blocks (front end and the editor canvas, .is-root-container). */

/* Heading block → body: the sub-line sits right under the heading on the
   frames' 24px line, body copy 12px below. */
:is(.entry-content, .is-root-container) :is(.lp-two-column, .lp-multi-column, .lp-callout, .lp-form, .sh-card-grid) :is([class$="__header"], [class$="__sub-header"]) {
	margin-block: 0;
}

:is(.entry-content, .is-root-container) :is(.lp-two-column, .lp-multi-column, .lp-form, .sh-card-grid) [class$="__sub-header"] {
	line-height: 24px;
}

:is(.entry-content, .is-root-container) :is([class$="__header"], [class$="__sub-header"]) + :is(.lp-two-column__body, .lp-multi-column__body, .lp-callout__content, .lp-form__content) {
	margin-top: var(--sh-space-heading);
}

/* Intro → items: one gap everywhere (not "Intro beside items", which sits
   them side by side). */
:is(.entry-content, .is-root-container) .lp-multi-column:not(.is-style-sh-intro-beside) .block-contents {
	row-gap: var(--sh-space-stack);
}

/* Content ends on its last line, so band padding is exactly the token. */
:is(.entry-content, .is-root-container) :is(.lp-two-column__body, .lp-multi-column__body, .lp-multi-column__icon-card-body, .lp-callout__content, .lp-form__content) > :last-child {
	margin-bottom: 0;
}

/* ---- Header ------------------------------------------------------------- */

.site-header {
	padding-inline: 0;
	box-shadow: none;
}

.site-header::before {
	content: "";
	display: block;
	height: 27px;
	background: var(--primary-400);
}

/* Figma nav spans 117 → 1320: the 1200 content width, with the 4vw gutter
   outside it. */
.lp-header__inner {
	height: 100px;
	gap: 32px;
	max-width: calc(var(--content-max-width) + 8vw);
	padding-inline: 4vw;
}

.custom-logo-link img {
	height: 65px;
	max-height: 65px;
	width: auto;
	flex-shrink: 0;
}

@media screen and (max-width: 1100px) {
	.custom-logo-link img { height: 48px; }
}

.site-title,
.site-description {
	display: none;
}

.lp-header__menu {
	gap: 0;
}

.lp-header__item {
	position: relative;
	padding-inline: 16px;
}

.lp-header__item + .lp-header__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	height: 36px;
	width: 1px;
	transform: translateY(-50%);
	background: var(--accent-200);
}

.lp-header__link {
	font-family: var(--font-family-heading);
	font-weight: 800;
	font-size: 18px;
	line-height: 27px;
	color: var(--neutral-400);
	padding-block: 36px;
	white-space: nowrap;
}

.lp-header__link:hover {
	color: var(--primary-300);
}

.lp-header__item.current-menu-item > .lp-header__link,
.lp-header__item.current_page_item > .lp-header__link {
	color: var(--primary-400);
}

.lp-header__item.current-menu-item > .lp-header__link::before,
.lp-header__item.current-menu-item > .lp-header__link::after {
	content: "";
	position: absolute;
	left: 16px;
	width: 58px;
	height: 7px;
	background: var(--primary-400);
}

.lp-header__item.current-menu-item > .lp-header__link::before {
	top: 0;
	clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
}

.lp-header__item.current-menu-item > .lp-header__link::after {
	bottom: 0;
	clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}

a.lp-header__cta {
	margin-left: 8px;
	white-space: nowrap;
}

@media screen and (max-width: 1100px) {
	.lp-header__item { padding-inline: 10px; }
	.lp-header__link { font-size: 16px; }
}

/* ---- Floating "Get in Touch" tab (Page Settings) ------------------------ */

.lp-floating-buttons {
	position: fixed;
	top: 42vh;
	right: 0;
	bottom: auto;
	left: auto;
	z-index: 90;
}

a.btn.lp-floating-buttons__cta {
	background: var(--primary-300);
	color: var(--white);
	border: 0;
	border-radius: 0;
	padding: 10px 14px 10px 22px;
	clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 40%);
}

a.btn.lp-floating-buttons__cta:hover {
	background: var(--primary-400);
}

@media screen and (max-width: 600px) {
	.lp-floating-buttons { top: auto; bottom: 16px; }
}

/* ---- Footer (template-parts/footer/site-footer.php) --------------------- */

.site-footer.lp-footer {
	background: var(--primary-400);
	color: var(--white);
}

.lp-footer__top {
	border-bottom: 0;
	padding-block: 56px 48px;
}

.lp-footer__grid {
	grid-template-columns: minmax(240px, 400px) auto;
	justify-content: space-between;
	gap: 48px;
}

.sh-footer__name {
	margin: 0;
	font-family: var(--font-family-heading);
	font-weight: 800;
	font-size: 18px;
	line-height: 27px;
	color: var(--white);
}

.sh-footer__blurb,
.sh-footer__disclaimers {
	margin: 0;
	font-family: var(--font-family-body);
	font-size: 16px;
	line-height: 28px;
	color: var(--white);
}

.sh-footer__disclaimers {
	margin-top: 28px;
}

.sh-footer__disclaimers span,
.sh-footer__disclaimers a {
	display: block;
	color: var(--white);
}

.lp-footer__quick-links {
	padding-left: 0;
	border-left: 0;
	text-align: right;
}

.lp-footer__link-wrapper {
	padding-left: 0;
}

.lp-footer__link-wrapper::before {
	display: none;
}

.lp-footer__link,
.lp-footer__link:visited {
	color: var(--white);
	font-size: 16px;
	line-height: 28px;
}

.lp-footer__link-wrapper:first-child .lp-footer__link {
	font-family: var(--font-family-heading);
	font-weight: 500;
	font-size: 17px;
}

.lp-footer__link:hover {
	color: var(--primary-100);
}

@media screen and (max-width: 767px) {
	.lp-footer__grid { grid-template-columns: 1fr; }
	.lp-footer__quick-links { text-align: left; }
}