/* Sterling Base: layout rules theme.json can't express. Colors and type come from tokens only. */

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

/* The header block is sticky; a template-part wrapper would confine it to its own height. */
.wp-block-template-part:has(> .sterling-site-header) {
	display: contents;
}

/* Full-width sections in page content stack flush; spacing comes from their own padding. */
.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* ---------- Footer ---------- */

.sterling-footer__legal {
	border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.sterling-footer .sterling-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
}

/* ---------- Tag (paragraph style slug 'eyebrow'): a pill above section headings ----------
   Sentence case with an optional leading icon (class sterling-icon-<set>-<name> on the paragraph).
   The slug stays 'eyebrow' so existing content keeps its style. */

/* The pill sits on an inner span (added at render) so the paragraph keeps normal block alignment. */
.is-style-eyebrow .sterling-tag {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.375rem 0.875rem;
	border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: color-mix(in srgb, currentColor 4%, transparent);
}

.is-style-eyebrow .sterling-icon {
	flex: none;
	width: 1rem;
	height: 1rem;
	color: var(--wp--preset--color--accent);
}

.is-style-section-dark .is-style-eyebrow .sterling-icon {
	color: var(--wp--preset--color--highlight);
}

/* ---------- Form card + Fluent Forms, restyled with theme tokens ---------- */

.sterling-form-card {
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--card, 20px);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
}

.fluentform .ff-el-input--label label {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.fluentform .ff-el-form-control {
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--panel, 12px);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--accent);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
}

.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: #b3261e;
}

.fluentform .ff-btn-submit {
	padding: 0.875rem 1.75rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-accent) !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	transition: background-color 0.25s ease;
}

.fluentform .ff-btn-submit:hover {
	background: var(--wp--preset--color--contrast) !important;
	opacity: 1;
}

.fluentform .ff-message-success {
	border: 0;
	border-radius: var(--wp--custom--radius--panel, 12px);
	background: var(--wp--preset--color--surface);
	box-shadow: none;
}

/* ---------- Logo (site title rendered as the client's logo files) ---------- */

.sterling-logo a {
	display: block;
	line-height: 0;
}

.sterling-logo__img {
	width: auto;
	height: var(--sterling-logo-height, 4rem);
}

.sterling-footer .sterling-logo {
	--sterling-logo-height: 4.5rem;
}

/* Two variants when the theme ships a light logo: dark sections show the light one. Only one is visible,
   so screen readers hear the name once. */
.sterling-logo__img--light,
.is-style-section-dark .sterling-logo:has(.sterling-logo__img--light) .sterling-logo__img--default {
	display: none;
}

.is-style-section-dark .sterling-logo__img--light {
	display: block;
}

@media (max-width: 599px) {
	.sterling-site-header .sterling-logo {
		--sterling-logo-height: 3rem;
	}
}

/* ---------- Photo card: a rounded image, toned to the neutral palette so any photo fits ---------- */

.sterling-photo-card {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card, 20px);
	background: var(--wp--preset--color--surface-dark);
}

.sterling-photo-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: grayscale(1) brightness(1.25) contrast(1.05);
}

/* People photos keep their color; the neutral toning is for architecture and texture shots. */
.sterling-photo-card.is-color img {
	filter: none;
}

.sterling-photo-card.is-wide img {
	aspect-ratio: 16 / 9;
}

/* ---------- Team grid: portrait cards with names ---------- */

.sterling-team {
	gap: var(--wp--preset--spacing--40);
}

.sterling-team__member {
	gap: 0.25rem;
}

.sterling-team__photo {
	margin: 0 0 0.5rem;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card, 20px);
	background: var(--wp--preset--color--surface);
}

.sterling-team__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.5s ease;
}

.sterling-team__member:hover .sterling-team__photo img {
	transform: scale(1.04);
}

.sterling-team__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
}

.sterling-team__role {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

@media (prefers-reduced-motion: reduce) {
	.sterling-team__photo img {
		transition: none;
	}
}

/* Footer column labels: sentence case, quieter than content, not headings. */
.sterling-footer__label {
	margin-bottom: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	opacity: 0.7;
}

/* ---------- Sticky sidebar: the whole rail (table of contents + call card) follows the reader ---------- */

.sterling-sidebar {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
}

.sterling-sidebar .sterling-toc {
	position: static;
}

@media (max-width: 781px) {
	.sterling-sidebar {
		position: static;
	}
}

/* ---------- Prose column: long-form reading next to a sidebar ----------
   Section headings stay large; headings inside running text are editorial size, each topic
   separated by a hairline so the column reads as chapters, not a stack of banners. */

.sterling-prose > h2.wp-block-heading {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
	line-height: 1.2;
}

.sterling-prose > h2.wp-block-heading:first-child {
	margin-block-start: 0;
	padding-block-start: 0;
	border-top: 0;
}

.sterling-prose > p {
	font-size: 1.0625rem;
	line-height: 1.75;
}

.sterling-prose > ul.wp-block-list:not([class*="is-style-"]) li::marker {
	color: var(--wp--preset--color--accent);
}