/* =============================================================
   REPAIR & MAINTENANCE — css/repair-maintenance.css
   -------------------------------------------------------------
   PORTING-MAP §E, E4. **Decision changed on 19 Aug 2026: restyle
   → rebuild.**

   The file used to style HTML that lived in `post_content`; it
   now styles `page-repair-maintenance.php`, which renders the
   mockup layout from `inc/repair.php`. Three consequences:

   - Class names that were a contract with the database are now
     a contract with a template in this repo. `.repair-hero`,
     `.repair-service-item`, `.repair-why-card`, `.repair-step`,
     `.repair-notice` and the service anchors (`#paper-shredder-
     repair` …) are kept anyway — the anchors are published URLs,
     and the rest are what inc/reveal.php animates.
   - The stylesheet is now **layout-critical**, as on Brands. A
     failed enqueue used to mean a plain page; it now means an
     unstyled rail beside eleven unstyled panels.
   - The old §0 rules that hid `.entry-header` and collapsed the
     block editor's empty paragraphs are gone. Neither exists in
     the template's output.

   Two things carried over unchanged, both for stated reasons:

   1. **The hero photo is still set inline** (§1) — it is read
      out of the page content by `wows_repair_hero_image()`, so
      CSS cannot reach it. Eddy's requirement: the redesign keeps
      the hero image the page already has.
   2. **The Ninja Forms rules (§9) are verified against real
      markup.** NF 3.15.0 was installed locally on 16 Aug 2026
      and the production database carries the real forms
      (`wp_nf3_forms`: 1 "Contact Me", 2 "Service Request Form").
      That is what found the <select> bug documented in §9.
      Rendering only; **submission still needs a live test**,
      since that sends mail.

   0. Page container   1. Hero          2. Trust strip
   3. Intro            4. Directory     5. Service panel
   6. Why choose us    7. How it works  8. Notice
   9. Get in touch + Ninja Forms       10. Responsive
   ============================================================= */


/* ==============================================
   0. PAGE CONTAINER
   ============================================== */

.repair-inner {
	max-width: var(--wows-container);
	margin: 0 auto;
	padding: 0 var(--wows-gutter);
}


/* ==============================================
   1. HERO
   ----------------------------------------------
   Full-bleed photo band with a white ramp from
   the left — the same pattern as About, Contact
   and the nine category heroes.

   NOT the mockup's split hero. The mockup puts a
   square photo card beside the copy; the image
   this page must keep is a ~3.2:1 banner, which
   an `aspect-ratio: 1.05` card would crop to a
   sliver. See the template's header.
   ============================================== */
.repair-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--wows-hero-min);
	overflow: hidden;
	/* Longhands, not the `background` shorthand — the inline style sets
	   background-image and would strand a shorthand's colour behind it. */
	background-color: var(--wows-tint-1);
	background-size: cover;
	background-position: 70% 50%;
	background-repeat: no-repeat;
}

/*
 * px ramp, not %, as in style.css §9 — a percentage ramp slides out from under
 * the headline as the viewport changes.
 *
 * Every stop is offset by `--wows-scrim-x`, the centred container's left edge.
 * Without it the ramp stays anchored to the window while the copy travels right
 * with the container, and the H1 walks off the white end above ~1900px. That is
 * the bug measured at 1.00:1 on three other heroes on 18 Aug 2026; do not
 * remove the offsets.
 */
.repair-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg,
			var(--wows-white) 0px,
			rgba(255, 255, 255, 0.96) calc(var(--wows-scrim-x) + 420px),
			rgba(255, 255, 255, 0.65) calc(var(--wows-scrim-x) + 620px),
			rgba(255, 255, 255, 0.15) calc(var(--wows-scrim-x) + 800px),
			rgba(255, 255, 255, 0) calc(var(--wows-scrim-x) + 960px));
}

.repair-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wows-container);
	margin: 0 auto;
	padding: var(--wows-section-xl) var(--wows-gutter);
	animation: wows-rise .6s ease both;
}

.repair-hero-inner > * {
	max-width: 560px;
}

.repair-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 var(--wows-sp-6);
	padding: 7px var(--wows-sp-3);
	background: var(--wows-accent-tint);
	border-radius: var(--wows-r-pill);
	font-size: var(--wows-fs-sm);
	font-weight: 600;
	color: var(--wows-accent-dark);
	letter-spacing: var(--wows-ls-wide);
}

.repair-hero__dot {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: var(--wows-r-pill);
	background: var(--wows-accent);
}

.repair-hero-inner h1 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-hero);
	font-weight: 700;
	line-height: var(--wows-lh-hero);
	letter-spacing: var(--wows-ls-hero);
	color: var(--wows-ink);
	margin: 0 0 var(--wows-sp-4);
	text-wrap: balance;
}

/* --wows-text-on-photo, not --wows-text: this paragraph is the one hero
   element with no surface of its own once the ramp goes translucent. Same
   decision as style.css §9's `.wows-hero__lede`. */
.repair-hero__lede {
	font-size: var(--wows-fs-lede);
	line-height: var(--wows-lh-lede);
	color: var(--wows-text-on-photo);
	margin: 0 0 var(--wows-sp-8);
}

.repair-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wows-sp-3);
	max-width: none;
}


/* ==============================================
   2. TRUST STRIP
   ----------------------------------------------
   Full-bleed dark band directly under the hero —
   **the About Us stats strip, not the mockup's
   four bordered tiles** (Eddy, 19 Aug 2026). Same
   device, same tokens, same accent left rule as
   `.about-stats` in css/about-us.css; if that one
   changes, change this with it.
   ============================================== */
.repair-trust {
	background: var(--wows-ink);
	padding: var(--wows-section-sm) 0;
}

.repair-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wows-sp-8);
}

.repair-trust__item {
	border-left: 2px solid var(--wows-value-rule);
	padding-left: var(--wows-sp-5);
}

/* Clamped, not fixed, for the same reason as `.about-stat__value`: "Since
   2004" and "Quote first" are several times the width of "11", and a fixed
   size wraps them mid-tile at laptop widths. */
.repair-trust__value {
	font-family: var(--wows-font-display);
	font-size: clamp(22px, 2.6vw, 34px);
	font-weight: 700;
	letter-spacing: var(--wows-ls-h2);
	line-height: 1.1;
	color: var(--wows-white);
}

.repair-trust__label {
	margin-top: 4px;
	font-size: var(--wows-fs-sm);
	color: var(--wows-on-dark-body);
}


/* ==============================================
   3. INTRO
   ============================================== */
.repair-intro {
	padding: var(--wows-section-lg) 0 var(--wows-sp-9);
	background: var(--wows-white);
}

.repair-intro p {
	font-size: var(--wows-fs-md);
	line-height: var(--wows-lh-lede);
	color: var(--wows-text);
	margin: 0 0 var(--wows-sp-2);
	max-width: 820px;
}

.repair-intro p:last-child {
	margin: 0;
}

/* The Chinese sub-line, 办公设备维修服务 — Malay/Chinese secondary copy
   stays, per INSTRUCTIONS.md §8. */
.repair-intro .repair-chinese {
	margin-top: var(--wows-sp-4);
	font-size: var(--wows-fs-md);
	font-weight: 600;
	color: var(--wows-ink);
}


/* ==============================================
   4. DIRECTORY — RAIL + PANELS
   ----------------------------------------------
   The rail is navigation. Every panel it points
   at is rendered and visible; js/repair-
   maintenance.js only highlights the row you are
   next to, and adds the filter input. Nothing
   here may hide a panel.
   ============================================== */
.repair-services {
	padding: 0 0 var(--wows-section-lg);
	background: var(--wows-white);
}

.repair-directory {
	display: grid;
	/* minmax(0, 1fr), never 1fr — the panel column holds images and would
	   otherwise refuse to shrink below their intrinsic width. */
	grid-template-columns: 330px minmax(0, 1fr);
	gap: var(--wows-sp-8);
	align-items: start;
}

.repair-rail {
	position: sticky;
	top: var(--wows-sticky-top);
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-lg);
	padding: var(--wows-sp-1);
	max-height: calc(100vh - 130px);
	overflow-y: auto;
}

.repair-rail__title {
	margin: 6px 6px var(--wows-sp-1);
	font-size: var(--wows-fs-xs);
	font-weight: 700;
	color: var(--wows-text-faint);
	letter-spacing: var(--wows-ls-eyebrow);
	text-transform: uppercase;
}

.repair-rail__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.repair-rail__link {
	display: flex;
	align-items: flex-start;
	gap: var(--wows-sp-2);
	padding: 13px var(--wows-sp-3);
	border-radius: 13px;
	text-decoration: none;
	color: var(--wows-ink);
	transition: background var(--wows-t-fast);
}

.repair-rail__link:hover,
.repair-rail__row.is-current .repair-rail__link {
	background: var(--wows-accent-tint);
}

.repair-rail__num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	border-radius: var(--wows-r-sm);
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-xs);
	font-weight: 700;
	background: var(--wows-search);
	color: var(--wows-text-faint);
}

.repair-rail__row.is-current .repair-rail__num {
	background: var(--wows-accent);
	color: var(--wows-white);
}

/* min-width: 0 so the brand line can ellipsis instead of forcing the rail
   wider than its column. */
.repair-rail__text {
	min-width: 0;
	flex: 1;
}

.repair-rail__name {
	display: block;
	font-size: var(--wows-fs-base);
	font-weight: 600;
	line-height: 1.3;
}

.repair-rail__brands {
	display: block;
	margin-top: 2px;
	font-size: var(--wows-fs-xs);
	color: var(--wows-text-faint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ==============================================
   5. SERVICE PANEL
   ----------------------------------------------
   Eleven <h2>-headed panels. The headings are the
   page's keyword structure — styling only, text
   and hierarchy untouched (INSTRUCTIONS.md §7).
   ============================================== */
.repair-panels {
	display: flex;
	flex-direction: column;
	gap: var(--wows-sp-8);
}

.repair-service-item {
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-xl);
	overflow: hidden;
	background: var(--wows-white);
	/* Clears the sticky header when a rail link or an off-site deep link
	   jumps to this panel's id. */
	scroll-margin-top: var(--wows-sticky-top);
}

/*
 * Flex, not grid: a service carries one to four images and a fixed grid would
 * leave a hole under the ones with one. The 2px gap over the border colour is
 * the same hairline trick as §2.
 */
.repair-img-grid {
	display: flex;
	gap: 2px;
	background: var(--wows-border-soft);
}

/*
 * `flex-basis: 0`, not `auto`. With auto the basis is each image's intrinsic
 * width, so three photos of different sizes end up three different widths —
 * and because the height comes from `aspect-ratio`, three different heights.
 * The strip renders as a ragged row. Zero basis makes the columns equal.
 */
.repair-img-grid img {
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
	aspect-ratio: 1.35;
	object-fit: cover;
	display: block;
	background: var(--wows-surface);
}

.repair-service-item__body {
	padding: var(--wows-sp-9) clamp(22px, 3vw, 34px);
}

.repair-service-item__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wows-sp-1);
	margin-bottom: var(--wows-sp-2);
}

.repair-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: var(--wows-r-pill);
	background: var(--wows-accent-tint);
	color: var(--wows-accent-dark);
	font-size: var(--wows-fs-xs);
	font-weight: 700;
	letter-spacing: var(--wows-ls-wide);
	white-space: nowrap;
}

.repair-service-item__mode {
	font-size: var(--wows-fs-sm);
	color: var(--wows-text-muted);
}

.repair-service-item h2 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-2xl);
	font-weight: 700;
	letter-spacing: var(--wows-ls-h2);
	line-height: var(--wows-lh-heading);
	color: var(--wows-ink);
	margin: 0 0 var(--wows-sp-2);
}

.repair-service-item h2 a {
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color var(--wows-t-base), border-color var(--wows-t-base);
}

.repair-service-item h2 a:hover,
.repair-service-item h2 a:focus {
	color: var(--wows-accent);
	border-bottom-color: var(--wows-accent);
}

/* The heading's leading "1." — still part of the heading text, just set apart
   from the name. */
.repair-service-item__num {
	color: var(--wows-text-faint);
	font-weight: 500;
}

.repair-service-item__blurb {
	font-size: var(--wows-fs-md);
	line-height: var(--wows-lh-lede);
	color: var(--wows-text);
	margin: 0 0 var(--wows-sp-7);
	max-width: 640px;
}

.repair-service-item__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--wows-sp-9);
}

.repair-label {
	margin: 0 0 var(--wows-sp-2);
	font-size: var(--wows-fs-xs);
	font-weight: 700;
	color: var(--wows-text-faint);
	letter-spacing: var(--wows-ls-eyebrow);
	text-transform: uppercase;
}

/*
 * Prose, not the mockup's chips (Eddy, 19 Aug 2026). The chips read as
 * buttons — bordered, rounded, on a fill — and nothing happens when you press
 * one. A quoted, comma-separated line makes the same list without promising an
 * interaction, and sits naturally beside "Brands serviced" in the next column,
 * which was always plain text.
 */
.repair-faults,
.repair-brands {
	margin: 0;
	font-size: var(--wows-fs-base);
	line-height: 1.75;
	color: var(--wows-text);
}

.repair-service-item__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wows-sp-2);
	margin-top: var(--wows-sp-8);
	padding-top: var(--wows-sp-7);
	border-top: 1px solid var(--wows-border-soft);
}


/* ==============================================
   6. WHY CHOOSE US
   ============================================== */
.repair-why {
	padding: var(--wows-section-lg) 0;
	background: var(--wows-surface-2);
	border-top: 1px solid var(--wows-border-soft);
	border-bottom: 1px solid var(--wows-border-soft);
}

.repair-why h2 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-section);
	font-weight: 700;
	line-height: var(--wows-lh-heading);
	letter-spacing: var(--wows-ls-h2);
	color: var(--wows-ink);
	text-align: center;
	margin: 0 0 var(--wows-sp-9);
}

.repair-why-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wows-sp-5);
}

.repair-why-card {
	background: var(--wows-white);
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-lg);
	padding: var(--wows-sp-8);
	transition: transform var(--wows-t-slow), box-shadow var(--wows-t-slow), border-color var(--wows-t-slow);
}

.repair-why-card:hover {
	transform: translateY(-4px);
	border-color: var(--wows-border-hover);
	box-shadow: var(--wows-shadow-card);
}

/* Was an emoji from v1's page content; now an inline SVG (inc/icons.php).
   The font-size stays because wows_icon_or_text() falls back to printing the
   raw value if a filter supplies something that is not an icon name. */
.repair-why-card .why-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--wows-sp-5);
	background: var(--wows-accent-tint);
	border-radius: var(--wows-r-chip);
	color: var(--wows-accent);
	font-size: var(--wows-fs-xl);
	line-height: 1;
}

.repair-why-card .why-icon .wows-icon {
	width: 24px;
	height: 24px;
}

.repair-why-card h3 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-lg);
	font-weight: 600;
	letter-spacing: var(--wows-ls-tight);
	color: var(--wows-ink);
	margin: 0 0 var(--wows-sp-1);
}

.repair-why-card p {
	font-size: var(--wows-fs-base);
	line-height: var(--wows-lh-body);
	color: var(--wows-text);
	margin: 0;
}


/* ==============================================
   7. HOW IT WORKS
   ----------------------------------------------
   Dark panel, per the mockup. Every heading in
   here carries an explicit colour: style.css §3
   colours h1–h4 --wows-ink, and a matching rule
   beats inheritance — without these the copy is
   ink on ink.
   ============================================== */
.repair-process {
	padding: var(--wows-section-lg) 0;
	background: var(--wows-white);
}

.repair-process__panel {
	background: var(--wows-ink);
	border-radius: var(--wows-r-2xl);
	padding: var(--wows-section-sm) var(--wows-gutter-panel);
}

.repair-process__panel h2 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-band);
	font-weight: 700;
	line-height: var(--wows-lh-heading);
	letter-spacing: var(--wows-ls-h2);
	color: var(--wows-white);
	margin: 0 0 var(--wows-sp-9);
}

.repair-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wows-sp-7);
}

.repair-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: var(--wows-sp-4);
	background: var(--wows-white);
	border-radius: 50%;
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-base);
	font-weight: 700;
	color: var(--wows-ink);
}

.repair-step h3 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-lg);
	font-weight: 600;
	letter-spacing: var(--wows-ls-tight);
	color: var(--wows-white);
	margin: 0 0 var(--wows-sp-1);
}

.repair-step p {
	font-size: var(--wows-fs-base);
	line-height: var(--wows-lh-body);
	color: var(--wows-on-dark-body);
	margin: 0;
}

.repair-step p a {
	color: var(--wows-white);
	font-weight: 600;
}


/* ==============================================
   8. INDEPENDENT SERVICE NOTICE
   ----------------------------------------------
   **Deliberately not the mockup's grey footnote.**
   This is the disclaimer that WOW Supplies is NOT
   affiliated with, authorised by or endorsed by
   any manufacturer. It is a trademark-safety
   statement, not decoration, so it keeps the amber
   rule v1 gave it. --wows-rating is the token
   set's only amber (v1's #e67e22 is retired).
   ============================================== */
.repair-notice {
	background: var(--wows-surface);
	border-top: 1px solid var(--wows-border-soft);
	border-bottom: 1px solid var(--wows-border-soft);
	border-left: 4px solid var(--wows-rating);
	padding: var(--wows-sp-4) 0;
	margin: 0;
}

.repair-notice p {
	font-size: var(--wows-fs-base);
	line-height: var(--wows-lh-body);
	color: var(--wows-text);
	margin: 0;
}

.repair-notice strong {
	color: var(--wows-ink);
	font-weight: 700;
}


/* ==============================================
   9. GET IN TOUCH + NINJA FORMS
   ----------------------------------------------
   The NF rules are verified against real markup —
   see the file header.
   ============================================== */
.repair-booking {
	padding: var(--wows-section-lg) 0;
	background: var(--wows-surface-2);
	border-top: 1px solid var(--wows-border-soft);
	/* The page links to #repair-contact-form from six buttons; clear the
	   sticky header so the panel heading is not under it. */
	scroll-margin-top: var(--wows-sticky-top);
}

.repair-booking__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	background: var(--wows-white);
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-xl);
	overflow: hidden;
}

/* No form on the page — the info panel takes the full width rather than
   leaving an empty white half. */
.repair-booking__grid--no-form {
	grid-template-columns: minmax(0, 1fr);
}

.repair-booking__info {
	background: var(--wows-gradient-accent);
	color: var(--wows-white);
	padding: var(--wows-sp-9);
}

/* Explicit, for the same reason as §7. */
.repair-booking__info h2 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-2xl);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: var(--wows-ls-h2);
	color: var(--wows-white);
	margin: 0 0 var(--wows-sp-3);
}

.repair-booking__lede {
	font-size: var(--wows-fs-base);
	line-height: var(--wows-lh-lede);
	color: var(--wows-on-accent);
	margin: 0 0 var(--wows-sp-9);
}

.repair-booking__points {
	display: flex;
	flex-direction: column;
	gap: var(--wows-sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.repair-booking__points li {
	display: flex;
	align-items: flex-start;
	gap: var(--wows-sp-2);
}

.repair-booking__icon {
	flex-shrink: 0;
	font-size: var(--wows-fs-lg);
	line-height: 1.3;
}

/* Nudged down so the icon centres on the point's first line rather than
   sitting on its cap height — the li aligns to flex-start. */
.repair-booking__icon .wows-icon {
	width: 19px;
	height: 19px;
	margin-top: 2px;
}

.repair-booking__point-title {
	display: block;
	font-size: var(--wows-fs-base);
	font-weight: 600;
	margin-bottom: 2px;
}

.repair-booking__point-body {
	display: block;
	font-size: var(--wows-fs-sm);
	line-height: 1.5;
	color: var(--wows-on-accent);
}

.repair-booking__address {
	margin-top: var(--wows-sp-9);
	padding-top: var(--wows-sp-6);
	border-top: 1px solid var(--wows-btn-ghost-border);
	font-style: normal;
	font-size: var(--wows-fs-base);
	line-height: 1.7;
	color: var(--wows-on-accent);
}

.repair-booking__address a {
	color: var(--wows-white);
	font-weight: 600;
	text-decoration: none;
}

.repair-booking__address a:hover {
	text-decoration: underline;
}

.repair-booking__form {
	padding: var(--wows-sp-9);
	background: var(--wows-white);
}

/*
 * Ninja Forms ships high-specificity CSS with a lot of !important; v1's
 * overrides answer it in kind and the !importants are kept for that reason.
 * Scoped to .repair-form-inner so nothing leaks.
 */
.repair-form-inner .nf-form-cont,
.repair-form-inner .nf-form-cont *,
.repair-form-inner .nf-field-label label,
.repair-form-inner .nf-field-description,
.repair-form-inner .nf-form-fields-required {
	font-family: var(--wows-font-body) !important;
	font-size: var(--wows-fs-base) !important;
	color: var(--wows-text);
}

.repair-form-inner .nf-field-label label {
	display: block;
	font-family: var(--wows-font-display) !important;
	font-size: var(--wows-fs-base) !important;
	font-weight: 600 !important;
	color: var(--wows-ink) !important;
	margin-bottom: var(--wows-sp-1);
}

/* The booking form groups its fields under its own headings. */
.repair-form-inner .nf-form-cont h3,
.repair-form-inner .nf-form-cont h4 {
	font-family: var(--wows-font-display) !important;
	font-size: var(--wows-fs-lg) !important;
	font-weight: 600 !important;
	color: var(--wows-ink) !important;
}

.repair-form-inner .ninja-forms-field,
.repair-form-inner input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
.repair-form-inner select,
.repair-form-inner textarea {
	width: 100%;
	box-sizing: border-box;
	padding: var(--wows-sp-2) var(--wows-sp-4) !important;
	font-family: var(--wows-font-body) !important;
	font-size: var(--wows-fs-md) !important;
	color: var(--wows-ink) !important;
	background: var(--wows-white);
	border: 1px solid var(--wows-border-strong) !important;
	border-radius: var(--wows-r-md) !important;
	transition: border-color var(--wows-t-base), box-shadow var(--wows-t-base);
}

.repair-form-inner .ninja-forms-field:focus,
.repair-form-inner input:focus,
.repair-form-inner select:focus,
.repair-form-inner textarea:focus {
	border-color: var(--wows-accent) !important;
	box-shadow: var(--wows-focus-ring) !important;
	outline: none !important;
}

/*
 * Ninja Forms' <select> needed its own rule, found once NF was installed
 * locally (16 Aug 2026) — until then these rules had never been seen against
 * real markup.
 *
 * Two NF defaults win over the shared input rule above: a fixed height that
 * clipped the option text to about two thirds of a line, and a grey fill that
 * made the State dropdown look disabled next to the white text inputs. Height
 * is released to auto and the fill forced, both !important because NF's own
 * stylesheet is equally specific and loads later.
 *
 * appearance is left alone deliberately — stripping it would take the native
 * dropdown arrow with it, and NF does not supply a replacement.
 */
.repair-form-inner select,
.repair-form-inner select.ninja-forms-field {
	height: auto !important;
	min-height: 0 !important;
	line-height: var(--wows-lh-body) !important;
	background-color: var(--wows-white) !important;
	color: var(--wows-ink) !important;
}

/* Radio / checkbox labels must not inherit the field-label weight. */
.repair-form-inner .nf-field-element label,
.repair-form-inner .nf-field-container label.nf-label-span {
	font-family: var(--wows-font-body) !important;
	font-size: var(--wows-fs-base) !important;
	font-weight: 400 !important;
	color: var(--wows-text) !important;
}

.repair-form-inner input[type="button"],
.repair-form-inner input[type="submit"] {
	background: var(--wows-accent) !important;
	color: var(--wows-white) !important;
	font-family: var(--wows-font-display) !important;
	font-size: var(--wows-fs-md) !important;
	font-weight: 600 !important;
	letter-spacing: var(--wows-ls-wide);
	padding: var(--wows-sp-3) var(--wows-sp-9) !important;
	border: none !important;
	border-radius: var(--wows-r-md) !important;
	cursor: pointer;
	transition: background var(--wows-t-base);
}

.repair-form-inner input[type="button"]:hover,
.repair-form-inner input[type="submit"]:hover {
	background: var(--wows-accent-dark) !important;
}

.repair-form-inner .nf-field-container {
	margin-bottom: var(--wows-sp-5);
}

/* NF renders its divider field as <hr class="ninja-forms-field">, which
   would otherwise pick up the input styling above. */
.repair-form-inner hr.ninja-forms-field {
	border: none !important;
	border-top: 1px solid var(--wows-divider) !important;
	margin: var(--wows-sp-1) 0 !important;
	height: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* Font Awesome tooltip glyph — nothing in v2 loads FA either. */
.repair-form-inner span.nf-help,
.repair-form-inner .fa-info-circle {
	display: none !important;
}


/* ==============================================
   10. RESPONSIVE
   ----------------------------------------------
   Theme breakpoints 1040 / 900 / 680.
   ============================================== */
@media (max-width: 1040px) {
	.repair-hero::before {
		background: linear-gradient(90deg,
				var(--wows-white) 0px,
				rgba(255, 255, 255, 0.95) 420px,
				rgba(255, 255, 255, 0.55) 600px,
				rgba(255, 255, 255, 0) 820px);
	}

	.repair-directory {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: var(--wows-sp-6);
	}

	.repair-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.repair-why-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Measured at 1000px: four steps in the dark panel are 192px wide each,
	   which wraps every body line to three or four words. */
	.repair-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wows-sp-8);
	}
}

@media (max-width: 900px) {
	/* Ramp flips vertical — style.css §17's reasoning. */
	.repair-hero {
		align-items: flex-end;
		min-height: 560px;
	}

	.repair-hero::before {
		background: linear-gradient(180deg,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 0.06) 20%,
				rgba(255, 255, 255, 0.72) 32%,
				rgba(255, 255, 255, 0.97) 42%,
				var(--wows-white) 50%);
	}

	.repair-hero-inner > * {
		max-width: none;
	}

	/*
	 * The rail stops being a sidebar and becomes a jump list above the panels.
	 * `position: static` matters as much as the column change — a sticky
	 * element in a single-column flow follows you down the whole page.
	 */
	.repair-directory {
		grid-template-columns: minmax(0, 1fr);
	}

	.repair-rail {
		position: static;
		max-height: none;
	}

	.repair-rail__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.repair-service-item__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wows-sp-7);
	}

	.repair-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wows-sp-8);
	}

	.repair-booking__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Four images at 1.35 each in one row is a 5:1 strip on a phone-width
	   panel. Wrap to two per row instead. */
	.repair-img-grid {
		flex-wrap: wrap;
	}

	.repair-img-grid img {
		flex: 1 1 calc(50% - 1px);
		min-width: calc(50% - 1px);
	}
}

@media (max-width: 680px) {
	.repair-hero {
		min-height: 480px;
	}

	.repair-hero-inner {
		padding-top: var(--wows-section);
		padding-bottom: var(--wows-section);
	}

	.repair-trust__grid,
	.repair-rail__list,
	.repair-why-grid,
	.repair-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.repair-img-grid img {
		flex: 1 1 100%;
		min-width: 100%;
		aspect-ratio: 1.6;
	}

	.repair-service-item__body,
	.repair-booking__info,
	.repair-booking__form {
		padding: var(--wows-sp-7) var(--wows-sp-6);
	}

	.repair-intro,
	.repair-why,
	.repair-process,
	.repair-booking {
		padding-top: var(--wows-section);
		padding-bottom: var(--wows-section);
	}

	.repair-process__panel {
		padding: var(--wows-sp-9) var(--wows-sp-6);
	}
}