/**
 * Block bridge.
 *
 * style.css is the mockup's stylesheet, essentially unchanged, and it targets
 * the hand-written markup of the HTML concept. The patterns in this theme are
 * built from core blocks so they stay editable, which means core emits its own
 * wrappers (.wp-block-columns, .wp-block-button, .wp-block-navigation ...).
 *
 * Everything in this file exists to map those core wrappers onto the mockup's
 * design. Keep design changes in style.css; keep structural plumbing here.
 */

/* ---------------------------------------------------------------------------
 * Layout shell
 * ------------------------------------------------------------------------- */

.sa-main > .alignfull {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.sa-main > * {
	margin-block: 0;
}

/*
 * Sections carry their own vertical rhythm. Remove the global template-part
 * gap above main, then give every major direct-child section the same outer
 * shell as the hero while preserving each section's existing inner container.
 */
.sa-main {
	--sa-section-shell-size: 1400px;
	--wp--style--block-gap: 0;
}

.wp-site-blocks > main.sa-main {
	margin-block-start: 0;
}

@media (min-width: 801px) {
	.sa-main > .alignfull,
	.sa-main > .sa-prototype-notice {
		width: min(100%, var(--sa-section-shell-size));
		max-width: var(--sa-section-shell-size);
		margin-inline: auto;
	}

	.sa-main > .sa-prototype-notice > * {
		width: min(calc(100% - 48px), var(--wp--custom--layout--content-size));
		margin-inline: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Buttons — .sa-button lands on .wp-block-button, styling belongs on the link
 * ------------------------------------------------------------------------- */

.wp-block-button.sa-button {
	display: inline-flex;
}

.wp-block-button.sa-button > .wp-block-button__link {
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--small, 4px);
	font-size: .9rem;
	line-height: 1.15;
	font-weight: 850;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .2s var(--wp--custom--motion--ease), background .2s ease, color .2s ease, border-color .2s ease;
}

.wp-block-button.sa-button > .wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-block-button.sa-button--primary > .wp-block-button__link {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.wp-block-button.sa-button--primary > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-dark);
}

.wp-block-button.sa-button--outline-light > .wp-block-button__link {
	background: transparent;
	border-color: rgb(255 255 255 / 72%);
	color: #fff;
}

.wp-block-button.sa-button--outline-light > .wp-block-button__link:hover {
	background: #fff;
	border-color: #fff;
	color: #111;
}

.wp-block-button.sa-button--outline-dark > .wp-block-button__link {
	background: transparent;
	border-color: #272a2b;
	color: #111;
}

.wp-block-button.sa-button--outline-dark > .wp-block-button__link:hover {
	background: #111;
	color: #fff;
}

.wp-block-button.sa-button--light > .wp-block-button__link {
	background: #fff;
	color: #111;
}

.wp-block-button.sa-button--small > .wp-block-button__link {
	min-height: 44px;
	padding: 10px 17px;
	font-size: .78rem;
}

.wp-block-buttons.sa-button-row {
	gap: 12px;
}

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

.sa-site-header .sa-nav-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 38px;
	min-height: 82px;
}

.sa-site-header .sa-brand {
	gap: 12px;
	flex: 0 0 auto;
}

/* Code-native wordmark. Hidden as soon as a real Site Logo is uploaded. */
.sa-brand::before {
	content: "SA";
	font-family: "Arial Black", Arial, sans-serif;
	font-style: italic;
	font-size: 2.55rem;
	line-height: 1;
	letter-spacing: -.22em;
	color: #111;
}

.sa-brand:has(.wp-block-site-logo img)::before {
	display: none;
}

.sa-brand--light::before {
	color: #fff;
}

.sa-brand .wp-block-site-logo img {
	width: 100%;
	height: auto;
}

.sa-brand .wp-block-site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.12rem;
	font-weight: 900;
	letter-spacing: .18em;
	line-height: .98;
	text-transform: uppercase;
}

.sa-brand .wp-block-site-title a {
	text-decoration: none;
}

.sa-primary-nav {
	flex: 1 1 auto;
	justify-content: flex-end;
}

.sa-primary-nav .wp-block-navigation__container {
	gap: clamp(20px, 3vw, 42px);
}

.sa-primary-nav a {
	font-size: .89rem;
	font-weight: 750;
	text-decoration: none;
}

.sa-primary-nav a:hover {
	color: var(--wp--preset--color--primary);
}

.sa-header-cta {
	flex: 0 0 auto;
}

/*
 * style.css hides the header CTA below 1120px, but core's
 * .wp-block-buttons.is-layout-flex rule matches at the same specificity
 * (0,2,0) and loads later, so it wins and the button stays visible and
 * overflows the mobile layout. Qualify with the core wrapper class to win
 * the tie.
 */
@media (max-width: 1120px) {
	.wp-block-buttons.sa-header-cta {
		display: none;
	}
}

/* Core's mobile overlay, dressed as the mockup's full-screen menu. */
.sa-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: #fff;
	padding: 30px 24px;
}

.sa-primary-nav .wp-block-navigation__responsive-container.is-menu-open a {
	width: 100%;
	padding: 18px 0;
	font-size: 1.25rem;
	border-bottom: 1px solid #ddd;
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------- */

.sa-hero .sa-hero__grid {
	gap: 0;
	margin-bottom: 0;
	min-height: min(610px, calc(100vh - 82px));
}

/*
 * style.css gives the media side `height: 100%`, which was right for a grid
 * child but stops a flex column from stretching. Stretch it explicitly and let
 * the figure and image fill it instead.
 */
.sa-hero .sa-hero__media {
	align-self: stretch;
	height: auto;
	padding: 0;
	display: flex;
}

.sa-hero .sa-hero__media .wp-block-image,
.sa-hero .sa-hero__media figure {
	flex: 1 1 auto;
	height: auto;
	margin: 0;
	display: flex;
}

.sa-hero .sa-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sa-hero .sa-hero__heading {
	margin-bottom: 25px;
	font-size: clamp(4.1rem, 6vw, 7.4rem);
	letter-spacing: -.01em;
	max-width: 750px;
}

/*
 * Hero responsive ceiling.
 *
 * The full-bleed desktop composition used to keep enlarging both its heading
 * and viewport-derived left padding. On very wide screens that combination
 * reduced the usable text width, split RUNAROUND, stacked the CTAs, and made
 * the media column more than 1000px tall. The 1400px ceiling matches the
 * pattern's authored viewport while the 801-1120px bridge keeps the intermediate
 * desktop layout compact without changing the <=800px stacked mobile mode.
 */
@media (min-width: 1121px) {
	.sa-hero .sa-hero__grid {
		min-height: 640px;
	}

	.sa-hero .sa-hero__content {
		padding: 56px 32px;
	}

	.sa-hero .sa-hero__heading {
		max-width: 100%;
		font-size: clamp(5.2rem, 5vw, 6rem);
		line-height: .91;
	}

	.sa-hero .sa-hero__lede {
		font-size: clamp(1.05rem, 1.2vw, 1.25rem);
	}

	.sa-hero .sa-proof-rail {
		padding-inline: max(24px, calc((min(100vw, 1400px) - var(--wp--custom--layout--content-size)) / 2));
	}
}

@media (min-width: 801px) and (max-width: 1120px) {
	.sa-hero .sa-hero__grid {
		min-height: 620px;
	}

	.sa-hero .sa-hero__content {
		padding: 48px 28px 48px 24px;
	}

	.sa-hero .sa-hero__heading {
		max-width: 100%;
		font-size: clamp(3.9rem, 7vw, 5.4rem);
		line-height: .91;
	}

	.sa-hero .sa-hero__lede {
		margin-bottom: 24px;
		font-size: 1.05rem;
	}

	.sa-hero .sa-hero__location {
		margin-top: 20px;
	}
}

.sa-hero .sa-proof-rail {
	gap: 0;
	margin-bottom: 0;
}

.sa-proof-rail .wp-block-column {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 22px 30px;
	border-right: 1px solid #ddd;
	flex-basis: 0;
}

.sa-proof-rail .wp-block-column:first-child {
	border-left: 1px solid #ddd;
}

.sa-proof-rail p {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 12px;
}

/* ---------------------------------------------------------------------------
 * Services
 * ------------------------------------------------------------------------- */

.sa-services .sa-services__grid {
	gap: 0;
	margin-bottom: 0;
	min-height: 760px;
}

/*
 * The outer section now has a 1400px ceiling, so this legacy padding must use
 * the same ceiling instead of the full CSS viewport. At browser zoom levels
 * where 100vw exceeds 2000px, the old calculation consumed almost the entire
 * 43% content column and reduced the heading to a one-character strip.
 */
@media (min-width: 801px) {
	.sa-services .sa-services__content {
		padding-left: max(24px, calc((min(100vw, var(--sa-section-shell-size)) - var(--wp--custom--layout--wide-size)) / 2));
	}
}

.sa-services .sa-services__media {
	align-self: stretch;
	height: auto;
	padding: 0;
	display: flex;
}

.sa-services .sa-services__media .wp-block-image,
.sa-services .sa-services__media figure {
	flex: 1 1 auto;
	height: auto;
	margin: 0;
	display: flex;
}

.sa-services .sa-services__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sa-service-index li::marker {
	content: none;
}

.sa-arrow-link a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: .82rem;
	font-weight: 850;
	text-decoration: none;
}

.sa-arrow-link a::after {
	content: "→";
	transition: transform .18s ease;
}

.sa-arrow-link a:hover::after {
	transform: translateX(5px);
}

/* ---------------------------------------------------------------------------
 * Why Sawaya
 * ------------------------------------------------------------------------- */

.sa-why .sa-why__grid {
	gap: clamp(50px, 9vw, 120px);
	align-items: center;
	margin-bottom: 0;
}

.sa-why .sa-why__facts {
	gap: 0;
	margin-top: 36px;
	margin-bottom: 0;
	border-top: 1px solid #4b4e50;
}

.sa-why__facts .wp-block-column {
	padding: 20px 16px 0 0;
}

.sa-why__facts p {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Rating
 * ------------------------------------------------------------------------- */

/*
 * The mockup's 180px / 1fr / auto rating row is rebuilt with column `width`
 * attributes in patterns/review-proof.php rather than here: core's
 * `.wp-block-columns > .wp-block-column` rule matches at the same specificity
 * and loads later, so flex overrides in this file would lose the cascade.
 */
.sa-rating .sa-rating__grid {
	gap: 46px;
	margin-bottom: 0;
}

.sa-rating__score p {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: end;
	column-gap: 12px;
	margin: 0;
}

.sa-rating__score strong {
	grid-row: 1 / span 2;
}

/* ---------------------------------------------------------------------------
 * FAQ
 * ------------------------------------------------------------------------- */

.sa-faq .sa-faq__grid {
	gap: clamp(60px, 10vw, 140px);
	align-items: flex-start;
	margin-bottom: 0;
}

.sa-faq .wp-block-details {
	border-bottom: 1px solid #d2d4d5;
}

.sa-faq .wp-block-details summary {
	list-style: none;
	position: relative;
	padding: 23px 45px 23px 0;
	font-size: .96rem;
	font-weight: 820;
	cursor: pointer;
}

.sa-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Location
 * ------------------------------------------------------------------------- */

.sa-location .sa-location__grid {
	gap: 0;
	margin: 55px 0 38px;
	border-block: 1px solid #484b4d;
}

.sa-location .sa-contact-unit p {
	margin: 0;
}

.sa-location .sa-location__actions {
	justify-content: flex-end;
}

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

.sa-site-footer .sa-footer__grid {
	gap: 50px;
	margin-bottom: 0;
}

.sa-site-footer .wp-block-navigation__container {
	gap: 7px;
}

.sa-site-footer .sa-footer__note {
	color: #888d8f;
	font-size: .68rem;
}

.sa-site-footer .sa-brand--light .wp-block-site-title a {
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Mobile quick actions
 * ------------------------------------------------------------------------- */

@media (max-width: 800px) {
	.sa-hero .sa-hero__grid,
	.sa-services .sa-services__grid {
		min-height: auto;
	}

	.sa-proof-rail .wp-block-column,
	.sa-proof-rail .wp-block-column:first-child {
		border-left: 0;
		border-right: 0;
		border-bottom: 1px solid #ddd;
	}

	.sa-why__facts .wp-block-column {
		padding: 14px 0;
		border-bottom: 1px solid #3f4244;
	}

	.sa-site-header .sa-nav-shell {
		min-height: 72px;
		gap: 16px;
	}

	/*
	 * Core's Site Title block renders the complete name as one anchor, unlike
	 * the nested wordmark markup in the original mockup. Compact it on mobile
	 * so its real editor output leaves room for the navigation trigger.
	 */
	.sa-brand .wp-block-site-title {
		font-size: .84rem;
		letter-spacing: .12em;
		min-width: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile navigation reset
 *
 * style.css turns .sa-primary-nav into the mockup's hand-rolled fixed overlay
 * below 800px. The core Navigation block ships its own overlay, so the wrapper
 * has to go back to being an ordinary flex row at every width.
 * ------------------------------------------------------------------------- */

@media (max-width: 800px) {
	.sa-primary-nav.wp-block-navigation {
		position: static;
		inset: auto;
		display: flex;
		align-content: initial;
		justify-items: initial;
		padding: 0;
		background: none;
	}

	.sa-primary-nav.wp-block-navigation a {
		width: auto;
		padding: 0;
		font-size: inherit;
		border-bottom: 0;
	}

	.sa-primary-nav .wp-block-navigation__responsive-container.is-menu-open a {
		width: 100%;
		padding: 18px 0;
		font-size: 1.25rem;
		border-bottom: 1px solid #ddd;
	}
}

.sa-rating .sa-button > .wp-block-button__link {
	white-space: nowrap;
}

/*
 * Keep the numeral on one line, not the stars. `.sa-rating__score p` is a
 * `grid-template-columns: auto 1fr` pair; pinning the stars' minimum width
 * instead steals the auto track's space and wraps "4.8" down the column.
 */
.sa-rating__score strong {
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Late corrections
 * ------------------------------------------------------------------------- */

/*
 * The footer puts .sa-brand on the Site Title block itself rather than on a
 * wrapper, so it needs the wordmark rules in their own right.
 */
/* (0,3,0) — style.css's `.sa-footer__grid > div:first-child > p` is (0,2,2). */
.sa-site-footer .wp-block-site-title.sa-brand {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.12rem;
	font-weight: 900;
	letter-spacing: .18em;
	line-height: .98;
	text-transform: uppercase;
}

.sa-site-footer .wp-block-site-title.sa-brand a {
	color: #fff;
	text-decoration: none;
}

/*
 * style.css hides the mobile action bar above 800px, but core's flex-layout
 * rule (.wp-block-group.is-layout-flex) matches at higher specificity and
 * would keep it visible on desktop.
 */
.wp-block-group.sa-mobile-actions {
	display: none;
}

@media (max-width: 800px) {
	/*
	 * Core renders the two actions as <p> wrappers around each link and
	 * lays the group out with .is-nowrap.is-layout-flex (0,2,0), which beats
	 * style.css's `display: grid; grid-template-columns: .8fr 1.2fr` on
	 * .sa-mobile-actions (0,1,0). Re-apply the grid here, qualified with the
	 * core wrapper class, using the two paragraphs as the grid's own columns.
	 */
	.wp-block-group.sa-mobile-actions {
		display: grid;
		grid-template-columns: .8fr 1.2fr;
		/*
		 * Core's .is-layout-flex rule also sets `align-items: center`,
		 * which survives onto this grid and keeps each <p> its own content
		 * height instead of filling the bar. Stretch the row so the <a>'s
		 * height: 100% below has something to fill.
		 */
		align-items: stretch;
	}

	/*
	 * min-width: 0 keeps the "Request service" label from forcing its grid
	 * track (and the whole bar) wider than the viewport; without it a grid
	 * item defaults to a min-width based on its unwrapped content.
	 */
	.sa-mobile-actions p {
		margin: 0;
		min-width: 0;
	}

	/*
	 * style.css's `.sa-mobile-actions a` rule supplies the flex/centering,
	 * color, and background, but the link still only sizes to its own
	 * content inside the <p>. Stretch it to fill the grid cell so the tap
	 * target and background cover the whole column.
	 */
	.sa-mobile-actions a {
		width: 100%;
		height: 100%;
	}
}

/*
 * style.css reddens the last action with `.sa-mobile-actions a:last-child`,
 * which assumed both links were siblings. Core wraps each one in its own <p>,
 * so every link is a last child and the whole bar turned red. Re-target the
 * paragraphs instead.
 */
@media (max-width: 800px) {
	.sa-mobile-actions p:first-child a {
		background: #191c1e;
	}

	.sa-mobile-actions p:last-child a {
		background: var(--wp--preset--color--primary);
	}
}

/* ---------------------------------------------------------------------------
 * Approved attachment-backed media and brand corrections
 * ------------------------------------------------------------------------- */

.sa-brand__logo,
.sa-brand__logo img {
	width: min(280px, 42vw);
	height: auto;
}

.sa-hero .sa-hero__media .sa-hero__image--mobile {
	display: none;
	margin: 0;
}

.sa-hero .sa-hero__media .sa-hero__cover--desktop {
	flex: 1 1 auto;
	width: 100%;
}

.sa-clear-explanation {
	padding: clamp(76px, 9vw, 132px) 0;
	background: var(--wp--preset--color--surface);
}

.sa-prototype-notice {
	padding: 14px 24px;
	color: #fff;
	background: var(--wp--preset--color--contrast);
	border-bottom: 3px solid var(--wp--preset--color--primary);
}

.sa-prototype-notice p {
	margin: 0;
	font-size: .84rem;
	text-align: center;
}

.sa-prototype-notice a {
	color: #fff;
	font-weight: 800;
}

.sa-clear-explanation__grid {
	gap: clamp(44px, 7vw, 100px);
	margin-bottom: 0;
}

.sa-clear-explanation__image {
	margin: 0;
}

.sa-clear-explanation__image img,
.sa-why__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--medium);
}

.sa-clear-explanation__copy .sa-eyebrow {
	margin-bottom: 14px;
	color: var(--wp--preset--color--primary);
	font-size: .76rem;
	font-weight: 850;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.sa-why__image {
	margin: 0 0 28px;
}

.sa-review-platforms {
	margin-top: 36px;
	margin-bottom: 0;
	gap: 24px;
}

.sa-review-platform {
	padding: clamp(28px, 4vw, 44px);
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-top: 4px solid var(--wp--preset--color--primary);
}

.sa-review-platform h3 {
	margin-bottom: 8px;
}

.sa-review-platform__score {
	margin: 0 0 22px;
	font-size: 1rem;
}

.sa-review-platform__score strong {
	margin-right: 6px;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.8rem;
	line-height: 1;
}

.sa-footer__logo img {
	display: block;
	height: auto;
}

@media (max-width: 800px) {
	.sa-brand__logo,
	.sa-brand__logo img {
		width: min(210px, 58vw);
	}

	.sa-hero .sa-hero__media .sa-hero__cover--desktop {
		display: none;
	}

	.sa-hero .sa-hero__media .sa-hero__image--mobile {
		display: block;
	}

	.sa-hero__image--mobile img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	.sa-clear-explanation__grid,
	.sa-review-platforms {
		gap: 26px;
	}
}