/*
 * fixes-r3.css — tester bug report of 25 Sep 2026 (triaged 5 Oct 2026).
 *
 * Loaded last (inc/uiux-r3.php). Every rule is tagged "R3 Bug_n", where n is
 * the row number in that tester sheet. Do not cross-reference with the
 * "Bug_n" tags in fixes.css or the "R2 Bug_n" tags in fixes-r2.css.
 *
 * Selectors are prefixed with `body` where an earlier sheet uses a more
 * specific selector, so this sheet wins on specificity rather than !important.
 */

/* R3 Bug_12 — open mobile menu must not scroll the page behind it.
   The lock used to be body{overflow:hidden}, which does nothing once
   html{overflow-x:clip} is set, so the page scrolled and the sticky header
   went with it. The lock now sits on <html> (see main.js initNav). */
html.wt-nav-open { overflow: hidden; }
html.wt-nav-open body { overscroll-behavior: none; }
.wt-nav { overscroll-behavior: contain; }

/* R3 Bug_2 — hero statistics: four equal columns on desktop, two on phones,
   so "Since 2021" and the labels beneath each figure line up evenly. */
body .wt-hero__proof {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wt-s5) var(--wt-s5);
	align-items: start;
}
body .wt-hero__proof > div { min-width: 0; }
body .wt-hero__proof strong { white-space: nowrap; }
body .wt-hero__proof span { display: block; margin-top: .35rem; line-height: 1.4; }
@media (max-width: 700px) {
	body .wt-hero__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wt-s5) var(--wt-s4); }
	body .wt-hero__proof strong { font-size: 1.5rem; }
}

/* R3 Bug_1 and Bug_8 — empty space under the header on phones.
   Hero blocks used clamp(3-4rem, 9vw, 8rem) of padding above the heading
   and the breadcrumb + banner stacked their own padding on top. */
@media (max-width: 700px) {
	body .wt-hero__inner,
	body .wt-about-hero__inner,
	body .wt-svc-hero__inner,
	body .wt-post-hero__inner {
		padding-top: 2rem;
		padding-bottom: 2.25rem;
	}
	body .wt-crumbs { padding-block: .6rem .4rem; }
	body .wt-crumbs + .wt-banner { padding-top: 1.25rem; padding-bottom: 1.75rem; }
	body .wt-crumbs + .wt-section { padding-top: 1.5rem; }
	body .wt-banner { padding-top: 1.5rem; padding-bottom: 1.75rem; }

	/* R3 Bug_9 — the shared hero SVG on every service page is decoration;
	   on phones it only pushed the content down. */
	body .wt-svc-art { display: none; }
}

/* R3 Bug_4 — certification strip: every logo sits in the same card, so the
   row reads as one set whatever the proportions of each source file. */
.wt-logo-marquee .wt-logo-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 176px;
	height: 76px;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid var(--wt-rule);
	border-radius: 10px;
	box-sizing: border-box;
}
.wt-logo-marquee .wt-logo-tile img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 56px;
	object-fit: contain;
}
.wt-logo-marquee .wt-logo-tile .wt-partner-badge {
	height: auto;
	padding: 0;
	background: none;
	text-align: center;
}
@media (max-width: 700px) {
	.wt-logo-marquee .wt-logo-tile { width: 148px; height: 66px; padding: 8px 12px; }
}

/* R3 Bug_7 — blog index: the featured post is an ordinary card in the grid,
   not a full-width block that pushes the rest below the fold. */
body .wt-post--featured {
	grid-column: auto;
	display: flex;
	grid-template-columns: none;
}
body .wt-post--featured .wt-post__thumb { aspect-ratio: 16 / 10; height: auto; max-height: none; }
body .wt-post--featured h3 { font-size: var(--wt-fs-h4); }

/* R3 Bug_10 — footer legal links: the global `li + li` spacing rule pushed
   links 2 and 3 down on phones. Align them with the copyright line. */
@media (max-width: 700px) {
	body .wt-footer__bar { align-items: flex-start; }
	body .wt-footer__bar ul { gap: .5rem 1.25rem; }
	body .wt-footer__bar li + li { margin-top: 0; }
}

/* R3 Bug_13 — "What it is like to work here" cards respond to hover/focus. */
.wt-value {
	transition: transform .18s var(--wt-ease), border-color .18s var(--wt-ease), box-shadow .18s var(--wt-ease);
}
.wt-value:hover,
.wt-value:focus-within {
	transform: translateY(-3px);
	border-color: var(--wt-amber);
	box-shadow: 0 10px 26px rgba(33, 33, 33, .12);
}
@media (prefers-reduced-motion: reduce) {
	.wt-value { transition: none; }
	.wt-value:hover, .wt-value:focus-within { transform: none; }
}

/* R3 Bug_14 to Bug_20 — careers application form. */
.wt-apply .wt-req { color: #c62828; font-weight: 700; margin-left: .15em; }
.wt-apply .wt-field__msg {
	display: block;
	margin-top: .35rem;
	font-size: var(--wt-fs-xs);
	line-height: 1.4;
	color: #c62828;
}
.wt-apply .wt-field__msg:empty { display: none; }
.wt-apply input.is-invalid,
.wt-apply select.is-invalid,
.wt-apply textarea.is-invalid {
	border-color: #c62828;
	box-shadow: 0 0 0 1px #c62828;
}
.wt-apply input.is-valid { border-color: #2e7d32; }

/* Progress and error states must not look like a success box (they share
   the status element with the success message). */
.wt-apply [data-wt-form-status].wt-field__info:not(:empty) {
	background: none;
	border: 0;
	padding: 0;
	color: var(--wt-ink-2);
}
.wt-apply [data-wt-form-status].wt-field__error:not(:empty) {
	display: block;
	padding: .75rem 1rem;
	border: 1px solid #e57373;
	border-left-width: 4px;
	border-radius: 8px;
	background: #fdecea;
	color: #8e1c1c;
}
.wt-apply [data-wt-form-status].wt-field__success:not(:empty) {
	display: block;
	margin-top: 1rem;
	padding: 1.25rem 1.25rem 1.25rem 3.5rem;
	position: relative;
	border: 1px solid #81c784;
	border-left-width: 4px;
	border-radius: 10px;
	background: #edf7ee;
	color: #1b4d1f;
	font-size: var(--wt-fs-base);
	font-weight: 600;
	line-height: 1.5;
}
.wt-apply [data-wt-form-status].wt-field__success:not(:empty)::before {
	content: "\2713";
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: #2e7d32;
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* R3 Bug_21 — share buttons: icon plus platform name, never a second glyph. */
.wt-share a svg + span { margin-left: .4rem; }

/* SEO audit 8 Oct 2026: contact map and last-updated line. */
.wt-map { margin-top: var(--wt-s5); border: 1px solid var(--wt-rule); border-radius: var(--wt-radius); overflow: hidden; background: var(--wt-tint); }
.wt-map iframe { display: block; width: 100%; height: 380px; border: 0; }
@media (max-width: 700px) { .wt-map iframe { height: 300px; } }
.wt-updated { margin: 0; padding: 1.5rem 0; text-align: center; color: var(--wt-ink-3); font-size: var(--wt-fs-xs); }