/**
 * Auraa — post-build fixes.
 *
 * Loaded after assets/dist/css/main.css so it can correct compiled output
 * without needing a Node toolchain on the server. Everything here is a fix
 * for a specific reproducible bug, noted above each block.
 */

/* ---------------------------------------------------------------------------
 * 0. THE BUG: `.single-service` collided with a WordPress core body class.
 *
 * WordPress's body_class() automatically outputs `single-{post_type}` on every
 * singular view, so every service page rendered as:
 *
 *     <body class="single single-service postid-42 …">
 *
 * The theme also used `.single-service` as the two-column layout wrapper, so
 * that grid landed on <body> itself: <main> was placed in column one and
 * <footer> in the 320px column beside it — which is why the footer appeared as
 * a narrow strip to the right of the content on every service page.
 *
 * The layout class is now `.service-layout` (renamed in single-service.php and
 * in the SCSS source). These two blocks do the same job in the compiled
 * bundle: neutralise the poisoned selector, and give the renamed class its
 * styles. Both become redundant the next time the SCSS is rebuilt, and are
 * harmless if left in place.
 *
 * The same collision cannot happen for `single-industry`, `single-case_study`
 * or `single-post` — those class names are not used as selectors anywhere.
 * ------------------------------------------------------------------------- */
body.single-service {
	display: block;
	grid-template-columns: none;
	gap: normal;
}

.service-layout {
	display: grid;
	gap: var(--sp-12);
}

.service-layout__aside {
	display: grid;
	gap: var(--sp-6);
	align-self: start;
}

.service-layout__price {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--c-gold-dark);
}

.service-layout__body > * { margin-inline: 0; }

@media (min-width: 1080px) {
	.service-layout { grid-template-columns: minmax(0, 1fr) 320px; }

	.service-layout__aside {
		position: sticky;
		top: calc(var(--header-h) + var(--sp-6));
	}
}

@media (max-width: 819px) {
	.service-layout { gap: var(--sp-8); }
	.service-layout__aside { position: static; }
}

/* ---------------------------------------------------------------------------
 * 1. (Removed.)
 *
 * An earlier revision of this file forced the mobile menu to take over between
 * 1080px and 1279px, on the theory that the desktop nav row was overflowing.
 * That diagnosis was wrong. The clipped "Contact" in the original bug report
 * was caused by the body-grid collision documented in section 0 — the hero's
 * dark band ended early, leaving white nav text on a white background.
 *
 * The theme already handles this range properly in main.css: it tightens the
 * gaps, drops the nav to 0.82rem and shrinks the logo to 28px. Overriding that
 * with a hamburger was a regression, so the block is gone.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * 2. Layout safety net.
 *
 * A single unclosed <div> in a template used to let the browser nest <footer>
 * inside a grid or flex container from the page above it — which rendered the
 * footer as a narrow column beside the content instead of a full-width band.
 * These three rules make that failure mode impossible regardless of what the
 * markup above does, and stop any stray overflow widening the document.
 * ------------------------------------------------------------------------- */
html,
body {
	overflow-x: clip;
	max-width: 100%;
}

.site-main {
	display: block;
	width: 100%;
	max-width: 100%;
}

.site-footer {
	display: block;
	width: 100%;
	max-width: 100%;
	clear: both;
	float: none;
	position: relative;
	grid-column: 1 / -1;
	grid-row: auto;
	flex: 1 0 100%;
}

/* ---------------------------------------------------------------------------
 * 3. Thank You page (page-templates/template-thank-you.php).
 * ------------------------------------------------------------------------- */
.thankyou__intro {
	max-width: 62ch;
	margin-bottom: var(--sp-10);
}

.thankyou__steps {
	list-style: none;
	margin: 0 0 var(--sp-10);
	padding: 0;
	display: grid;
	gap: var(--sp-6);
	max-width: 68ch;
	counter-reset: none;
}

.thankyou__step {
	display: flex;
	gap: var(--sp-5);
	align-items: flex-start;
	background: var(--c-bg-tint);
	border-top: 3px solid var(--c-red);
	border-radius: var(--r-md);
	padding: var(--sp-6);
}

.thankyou__step:last-child { border-top-color: var(--c-gold); }

.thankyou__num {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--c-red);
	color: var(--c-white);
	font-family: var(--font-display);
	font-weight: 700;
}

.thankyou__step:last-child .thankyou__num {
	background: var(--c-gold);
	color: var(--c-black);
}

.thankyou__step-title {
	font-size: 1.05rem;
	margin: 0 0 6px;
}

.thankyou__step-text {
	margin: 0;
	font-size: var(--fs-sm);
}

.thankyou__note {
	max-width: 68ch;
	margin-bottom: var(--sp-8);
	font-size: var(--fs-sm);
	color: var(--c-ink-60, inherit);
}

.thankyou__note a { text-decoration: underline; }

.thankyou__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
}

@media (max-width: 819px) {
	.thankyou__step { padding: var(--sp-5); }
	.thankyou__actions .btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
 * 4. Contact Form 7 inherits the theme's own form styling.
 * ------------------------------------------------------------------------- */
.wpcf7 .wpcf7-not-valid-tip {
	color: var(--c-red);
	font-size: var(--fs-xs);
	margin-top: 4px;
}

.wpcf7 form .wpcf7-response-output {
	margin: var(--sp-4) 0 0;
	padding: var(--sp-3) var(--sp-4);
	border-width: 1px;
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
}

.wpcf7 .wpcf7-spinner { margin: 0 0 0 10px; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * 5. Crawlable pagination fallback.
 *
 * The archives load additional posts with an AJAX "Load more" button, which
 * Googlebot cannot click — so real <a href> page links are printed alongside
 * it. They are hidden from sighted users but stay reachable by keyboard and
 * are present in the HTML for crawlers, which is what matters.
 * ------------------------------------------------------------------------- */
.pagination--fallback {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pagination--fallback a:focus-visible {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

/* ---------------------------------------------------------------------------
 * 6. Mobile tap targets.
 *
 * Footer and inline list links were ~34px tall against the 44px that both
 * Apple's HIG and Google's mobile-friendly test expect. Padding is added only
 * on touch devices so the desktop layout is untouched.
 * ------------------------------------------------------------------------- */
@media (pointer: coarse) {

	.footer__links a,
	.toc__list a {
		display: inline-block;
		min-height: 44px;
		line-height: 44px;
	}

	.footer__links--contact a,
	.footer__links--contact span {
		min-height: 44px;
		align-items: center;
	}

	.filter__btn {
		min-height: 44px;
	}
}

/* ---------------------------------------------------------------------------
 * 7. Wide comparison table needs to be keyboard-scrollable.
 *
 * `.compare__table` has a 620px min-width inside an overflow-x container. A
 * scrollable region must be focusable or keyboard users cannot reach the
 * columns that are off-screen on a phone.
 * ------------------------------------------------------------------------- */
.compare__scroll:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 8. Header nav overlapped the "Get Free Audit" button.
 *
 * THE ACTUAL CAUSE
 * The container is capped at `--container: 1180px`, so the header never gets
 * more than 1180px of room no matter how wide the screen is. At full size the
 * nav row needs roughly 1240px:
 *
 *   logo ~221 + gap 24 + links ~593 + 7 gaps x 24 = 168 + gap 24 + CTA ~212
 *
 * So the row was ~60px over budget at EVERY desktop width — it could never
 * fit. The theme tightened gaps between 1080px and 1280px, which hid the
 * problem in that band only; above 1280px the full-size values came back and
 * the nav ran straight under the gold button. Adding the Resources dropdown
 * (two carets, a longer word) pushed it far enough to be obvious.
 *
 * THE FIX
 * Apply the same tightening above 1280px that the theme already applies below
 * it, so the row is consistent at all desktop widths and fits inside 1180px
 * with about 80px to spare. Then give the CTA its own left margin so there is
 * a deliberate gap between "Contact" and the button rather than them merely
 * not colliding.
 *
 * `flex-shrink: 0` on the list is the guard: previously the list was allowed
 * to shrink below its content, and because the items are `white-space: nowrap`
 * they spilled out of the shrunken box and were painted under the button.
 * Now the list holds its width and the layout stays honest.
 * ------------------------------------------------------------------------- */
@media (min-width: 1280px) {

	.site-header__inner,
	.nav,
	.nav__list {
		gap: var(--sp-4);
	}

	.nav__link { font-size: 0.82rem; }

	.site-header__brand img,
	.site-header__brand .custom-logo { height: 28px; }
}

@media (min-width: 1080px) {

	/*
	 * Distribute the leftover space instead of dumping it all in one place.
	 *
	 * `.site-header__inner` is `justify-content: space-between` with two
	 * children: the brand and the nav. Once the row was made to fit, roughly
	 * 130px of slack was left over — and space-between pushed every pixel of
	 * it into the single gap between the logo and "Home", which read as a
	 * mistake rather than as spacing.
	 *
	 * Letting the nav grow to fill the row and centring the link list inside
	 * it splits that slack evenly on both sides, so the links sit closer to
	 * the logo and the gold button stays anchored to the right edge.
	 */
	.nav {
		flex: 1 1 auto;
		justify-content: flex-end;
	}

	.nav__list {
		margin-inline: auto;
		flex-shrink: 0; /* never shrink under the button — see note above */
		min-width: auto;
	}

	/* Deliberate separation between the last link and the gold button. */
	.nav__cta {
		margin-left: var(--sp-5);
		flex: 0 0 auto;
	}

	/* Dropdown parents need room for their caret without it wrapping. */
	.nav__item--has-children > .nav__link { white-space: nowrap; }
}
