/**
 * Midrand landing page — /it-company-midrand/
 *
 * The page is built from the homepage's own classes: fp-hero for the hero,
 * fp-section / fp-section__inner for every band, fp-eyebrow + fp-section__title
 * for headings, fp-btn for buttons, fp-home-cta for the closing band. Nothing
 * in that list is restyled here.
 *
 * What remains below is only what the homepage has no class for (text cards,
 * chips, FAQ, the two-column CTA). Each rule copies its values from the
 * homepage equivalent named in the comment above it, so the two pages stay in
 * step. Colours and type come from the plugin's CSS variables throughout.
 *
 * @package Theme_It_Services_Child
 */

/* --------------------------------------------------------------------------
   Hero — fp-hero does all the work. Only change: proof points stack in a
   single left column rather than wrapping in a row, since this page carries
   longer proof lines than the homepage.
   -------------------------------------------------------------------------- */

.site-main--midrand .mid-hero__proof {
	flex-direction: column;
	gap: var(--space-xs);
}

/*
 * Hero overlay — scoped override of .fp-hero::before / ::after.
 *
 * The homepage's overlay is near-uniform (78% → 52% → 70% navy), which suits a
 * hero whose photo is texture. This page's photo has a person in the right
 * third, and the flat wash buries them. Same colours and the same two-layer
 * structure, redistributed: heavier navy behind the left-hand text column than
 * the homepage uses, falling away across the right so the subject reads.
 * child.css is untouched — the homepage hero is unaffected.
 */
.site-main--midrand .fp-hero::before {
	background-image: linear-gradient(
		115deg,
		color-mix(in srgb, var(--color-dark) 72%, transparent) 0%,
		color-mix(in srgb, var(--color-secondary) 46%, transparent) 55%,
		color-mix(in srgb, var(--color-dark) 62%, transparent) 100%
	);
}

/*
 * From 960px the hero is two-column (text in the left 48%, photo focal point
 * right), so the overlay can run left-to-right: full strength under the text,
 * clearing almost entirely by the right edge.
 */
@media (min-width: 960px) {
	.site-main--midrand .fp-hero::before {
		background-image: linear-gradient(
			95deg,
			color-mix(in srgb, var(--color-dark) 88%, transparent) 0%,
			color-mix(in srgb, var(--color-dark) 80%, transparent) 38%,
			color-mix(in srgb, var(--color-secondary) 40%, transparent) 58%,
			color-mix(in srgb, var(--color-dark) 16%, transparent) 78%,
			color-mix(in srgb, var(--color-dark) 8%, transparent) 100%
		);
	}
}

/*
 * The accent bloom sits at 70% 10% — directly over the subject's head on this
 * photo. Kept, but lightened so it reads as rim colour rather than a red haze.
 */
.site-main--midrand .fp-hero::after {
	background: radial-gradient(
		ellipse 90% 70% at 72% 12%,
		color-mix(in srgb, var(--color-accent) 10%, transparent) 0%,
		transparent 58%
	);
	opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Optional section background imagery.

   Structure copies .fp-hero: an absolutely positioned media layer at z-index 0,
   an overlay pseudo-element at z-index 1, content lifted to z-index 2. Every
   image on this page is optional — without one, none of these rules match and
   the section renders exactly as it did before.
   -------------------------------------------------------------------------- */

.site-main--midrand .mid-section--has-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.site-main--midrand .mid-section__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.site-main--midrand .mid-section__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.site-main--midrand .mid-section--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.site-main--midrand .mid-section--has-bg > .fp-section__inner {
	position: relative;
	z-index: 2;
}

/*
 * Light sections: near-solid wash so the photo reads as texture only and text
 * contrast is unchanged from the plain background. The wash inherits whichever
 * background the alternation gave the section, so this works on both the white
 * and the muted band.
 */
.site-main--midrand .mid-section--has-bg-light::before {
	background: color-mix(in srgb, var(--color-bg) 90%, transparent);
}

.site-main--midrand .mid-section--has-bg-light.fp-section--muted::before {
	background: color-mix(in srgb, var(--color-bg-alt) 90%, transparent);
}

/*
 * Navy sections: the hero's overlay family, carrying about 11 points more navy
 * than .fp-hero::before (78/52/70 → 89/63/81). The hero only has to hold type
 * over its photo; this band has to hold card text over a bright constellation
 * image, which needs the extra weight. Still well short of opaque — the image
 * reads clearly through it.
 */
.site-main--midrand .mid-section--has-bg-navy::before {
	background-image: linear-gradient(
		115deg,
		color-mix(in srgb, var(--color-dark) 89%, transparent) 0%,
		color-mix(in srgb, var(--color-secondary) 63%, transparent) 55%,
		color-mix(in srgb, var(--color-dark) 81%, transparent) 100%
	);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* …plus the hero's accent bloom, so the two bands sit in the same family. */
.site-main--midrand .mid-section--has-bg-navy::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(
		ellipse 90% 70% at 70% 10%,
		color-mix(in srgb, var(--color-accent) 18%, transparent) 0%,
		transparent 55%
	);
	opacity: 0.9;
}

/*
 * Cards stay translucent so the photo reads through them, but carry more navy
 * than the band behind them — the extra weight is local to the card area,
 * where body copy sits, rather than flattening the whole image.
 */
.site-main--midrand .mid-section--has-bg-navy .mid-card--on-dark {
	background: color-mix(in srgb, var(--color-dark) 72%, transparent);
	border-color: color-mix(in srgb, var(--color-dark-text) 24%, transparent);
}

/* --------------------------------------------------------------------------
   Section lead paragraph — values from .fp-client-logos__sub
   -------------------------------------------------------------------------- */

.site-main--midrand .mid-lead {
	margin: -0.25rem 0 var(--space-md);
	max-width: min(42rem, 100%);
	font-size: clamp(0.95rem, 1.6vw, 1.05rem);
	line-height: 1.55;
	color: color-mix(in srgb, var(--color-text) 88%, var(--color-text-light) 12%);
}

.site-main--midrand .mid-lead--on-dark {
	color: color-mix(in srgb, var(--color-dark-text) 92%, var(--color-bg-alt) 8%);
}

/* --------------------------------------------------------------------------
   Card grid — geometry from .fp-why-grid, so cards collapse at exactly the
   same widths as the homepage's tiles (auto-fit, no page-specific breakpoints:
   1 column at ~375px, 2 at ~768px, 3–4 on desktop).
   -------------------------------------------------------------------------- */

.site-main--midrand .mid-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
	gap: clamp(0.85rem, 2.2vw, 1.35rem);
	margin: clamp(1.25rem, 3.5vw, 2rem) 0 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
   Text card — surface from .fp-services__featured, padding from
   .fp-step__panel, type from .fp-step__title / .fp-step__copy
   -------------------------------------------------------------------------- */

.site-main--midrand .mid-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(1rem, 2.5vw, 1.35rem) clamp(1rem, 2.5vw, 1.35rem);
	border-radius: calc(var(--border-radius-lg) + 2px);
	background: var(--color-bg);
	border: 1px solid color-mix(in srgb, var(--color-secondary) 14%, transparent);
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--color-bg) 80%, var(--color-secondary) 20%),
		0 24px 48px color-mix(in srgb, var(--color-dark) 8%, transparent);
	transition:
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

/* Hover lift copied from .fp-services__featured:hover */
@media (prefers-reduced-motion: no-preference) {
	.site-main--midrand .mid-card--linked:hover,
	.site-main--midrand .mid-card--linked:focus-within {
		box-shadow:
			0 1px 0 color-mix(in srgb, var(--color-bg) 70%, var(--color-accent) 30%),
			0 28px 56px color-mix(in srgb, var(--color-dark) 11%, transparent);
		border-color: color-mix(in srgb, var(--color-accent) 22%, var(--color-secondary) 78%);
	}
}

/* On navy — surface from .fp-why-card */
.site-main--midrand .mid-card--on-dark {
	background: color-mix(in srgb, var(--color-dark-text) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-dark-text) 16%, transparent);
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--color-dark-text) 10%, transparent),
		0 20px 44px color-mix(in srgb, var(--color-dark) 22%, transparent);
}

/*
 * Icon tile — gradient chip in the brand's navy→red ramp, sized off the
 * homepage's .fp-step__dot rhythm. Cards without an icon are unaffected.
 */
.site-main--midrand .mid-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--space-sm);
	font-size: 1.15rem;
	line-height: 1;
	color: var(--color-dark-text);
	border-radius: var(--border-radius-lg);
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--color-secondary) 92%, var(--color-dark) 8%) 0%,
		color-mix(in srgb, var(--color-accent) 88%, var(--color-dark) 12%) 100%
	);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--color-dark-text) 22%, transparent),
		0 8px 20px color-mix(in srgb, var(--color-dark) 22%, transparent);
}

/* On navy the tile lightens its rim so it does not disappear into the band. */
.site-main--midrand .mid-card--on-dark .mid-card__icon {
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--color-dark-text) 30%, transparent),
		0 8px 20px color-mix(in srgb, var(--color-dark) 40%, transparent);
}

/* --------------------------------------------------------------------------
   Services banner strip — optional, sits between the intro and the cards.
   Navy gradient wash matches the hero/navy-band family.
   -------------------------------------------------------------------------- */

.site-main--midrand .mid-banner {
	position: relative;
	overflow: hidden;
	margin: clamp(1.25rem, 3.5vw, 2rem) 0 0;
	border-radius: calc(var(--border-radius-lg) + 2px);
	border: 1px solid color-mix(in srgb, var(--color-secondary) 14%, transparent);
	box-shadow: 0 24px 48px color-mix(in srgb, var(--color-dark) 8%, transparent);
	/* Taller crop on phones so the subject survives the narrow viewport. */
	aspect-ratio: 16 / 9;
}

@media (min-width: 600px) {
	.site-main--midrand .mid-banner {
		aspect-ratio: 21 / 9;
	}
}

@media (min-width: 900px) {
	.site-main--midrand .mid-banner {
		aspect-ratio: 4 / 1;
	}
}

.site-main--midrand .mid-banner__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.site-main--midrand .mid-banner__wash {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		115deg,
		color-mix(in srgb, var(--color-dark) 62%, transparent) 0%,
		color-mix(in srgb, var(--color-secondary) 32%, transparent) 55%,
		color-mix(in srgb, var(--color-dark) 45%, transparent) 100%
	);
}

.site-main--midrand .mid-card__title {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-heading);
	font-size: clamp(1.08rem, 2.2vw, 1.35rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--color-text);
}

.site-main--midrand .mid-card__copy {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: color-mix(in srgb, var(--color-text) 93%, var(--color-secondary) 7%);
}

.site-main--midrand .mid-card--on-dark .mid-card__title {
	color: var(--color-dark-text);
}

.site-main--midrand .mid-card--on-dark .mid-card__copy {
	color: color-mix(in srgb, var(--color-dark-text) 82%, transparent);
}

/*
 * The link itself is .fp-services__featured-cta — the homepage's in-card CTA.
 * Only the accent-bar offset it carries on the homepage is removed, and it is
 * pushed to the foot of the card so rows of different lengths line up.
 */
.site-main--midrand .mid-card__cta {
	margin-top: auto;
	margin-left: 0;
	padding-top: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Sectors — chip row
   -------------------------------------------------------------------------- */

.site-main--midrand .mid-sectors__list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.5rem, 1.4vw, 0.65rem);
	margin: clamp(1.25rem, 3.5vw, 2rem) 0 0;
	padding: 0;
	list-style: none;
}

.site-main--midrand .mid-sectors__chip {
	padding: 0.55rem 1.05rem;
	font-family: var(--font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid color-mix(in srgb, var(--color-secondary) 14%, transparent);
	border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Reviews — manual testimonial cards sit on .mid-card; the shortcode embed
   gets a wrapper only, since the reviews plugin ships its own styling.
   -------------------------------------------------------------------------- */

.site-main--midrand .mid-review {
	border-left: 3px solid var(--color-accent);
}

.site-main--midrand .mid-review__mark {
	margin-bottom: var(--space-xs);
	font-size: 1.15rem;
	line-height: 1;
	color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

.site-main--midrand .mid-review__quote {
	margin: 0;
}

.site-main--midrand .mid-review__quote p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: color-mix(in srgb, var(--color-text) 93%, var(--color-secondary) 7%);
}

.site-main--midrand .mid-review__author {
	margin: auto 0 0;
	padding-top: var(--space-sm);
	font-family: var(--font-heading);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-accent) 75%, var(--color-text) 25%);
}

.site-main--midrand .mid-review__author-company {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--color-text-light);
}

.site-main--midrand .mid-reviews__embed {
	margin-top: clamp(1.25rem, 3.5vw, 2rem);
}

.site-main--midrand .mid-reviews__embed > :first-child {
	margin-top: 0;
}

.site-main--midrand .mid-reviews__embed > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Editor body copy
   -------------------------------------------------------------------------- */

.site-main--midrand .mid-body__prose {
	max-width: min(42rem, 100%);
}

/* --------------------------------------------------------------------------
   FAQ — rules and type follow the .fp-step__panel / .fp-step__title family
   -------------------------------------------------------------------------- */

/*
 * No side image: narrow the whole band rather than the list alone, so the
 * heading and the questions stay on the same left edge — the homepage never
 * centres a heading.
 */
.site-main--midrand .mid-faq:not(.mid-faq--has-media) > .fp-section__inner {
	max-width: min(56rem, 100%);
}

.site-main--midrand .mid-faq__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.25rem, 3.5vw, 2rem);
	align-items: start;
}

/* Beside the questions from the same width the CTA band splits at. */
@media (min-width: 900px) {
	.site-main--midrand .mid-faq--has-media .mid-faq__cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
	}
}

.site-main--midrand .mid-faq__list {
	max-width: min(48rem, 100%);
	margin: clamp(1.25rem, 3.5vw, 2rem) 0 0;
	border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

/*
 * Stacked (below 900px): the grid is one column, so the wrapper is dissolved
 * with display: contents and the image ordered between the heading and the
 * questions. Row gap goes to zero there so the eyebrow → heading → list
 * spacing stays exactly what their own margins give it with no image set.
 */
@media (max-width: 899px) {
	.site-main--midrand .mid-faq--has-media .mid-faq__cols {
		row-gap: 0;
	}

	.site-main--midrand .mid-faq--has-media .mid-faq__main {
		display: contents;
	}

	.site-main--midrand .mid-faq--has-media .mid-faq__media {
		order: 1;
	}

	.site-main--midrand .mid-faq--has-media .mid-faq__list {
		order: 2;
	}
}

.site-main--midrand .mid-faq__media {
	position: relative;
	overflow: hidden;
	border-radius: calc(var(--border-radius-lg) + 2px);
	border: 1px solid color-mix(in srgb, var(--color-secondary) 14%, transparent);
	box-shadow: 0 24px 48px color-mix(in srgb, var(--color-dark) 8%, transparent);
	aspect-ratio: 16 / 10;
}

/*
 * Beside the questions: the grid starts at the section's eyebrow, and
 * align-items: start puts the image's top edge on the eyebrow's top edge.
 * It then sticks as the questions scroll past.
 */
@media (min-width: 900px) {
	.site-main--midrand .mid-faq__media {
		position: sticky;
		top: calc(var(--site-header-height, 4.5rem) + 1.5rem);
		aspect-ratio: 4 / 5;
	}
}

.site-main--midrand .mid-faq__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.site-main--midrand .mid-faq__wash {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		160deg,
		color-mix(in srgb, var(--color-dark) 38%, transparent) 0%,
		color-mix(in srgb, var(--color-secondary) 18%, transparent) 55%,
		color-mix(in srgb, var(--color-dark) 32%, transparent) 100%
	);
}

.site-main--midrand .mid-faq__item {
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.site-main--midrand .mid-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: clamp(0.85rem, 2.5vw, 1.1rem) 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-heading);
	font-size: clamp(1rem, 2.2vw, 1.08rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--color-text);
}

.site-main--midrand .mid-faq__q::-webkit-details-marker {
	display: none;
}

.site-main--midrand .mid-faq__q::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--color-accent);
}

.site-main--midrand .mid-faq__item[open] .mid-faq__q::after {
	content: "\2013";
}

.site-main--midrand .mid-faq__q:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.site-main--midrand .mid-faq__a {
	padding: 0 0 clamp(0.85rem, 2.5vw, 1.1rem);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: color-mix(in srgb, var(--color-text) 93%, var(--color-secondary) 7%);
}

/* --------------------------------------------------------------------------
   Closing CTA — the band is .fp-home-cta (homepage treatment). Only the
   two-column split for the form is page-specific. It stacks below 900px, the
   same width at which the homepage CTA drops to a single column.
   -------------------------------------------------------------------------- */

/*
 * #midrand-enquiry is both the hero button's target and where the form handler
 * redirects after a submission. The site header is fixed, so without this the
 * top of the band sits underneath it.
 */
.site-main--midrand .mid-cta {
	scroll-margin-top: calc(var(--site-header-height, 4.5rem) + 1rem);
}

.site-main--midrand .mid-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 2.75rem);
	align-items: start;
}

@media (min-width: 900px) {
	.site-main--midrand .mid-cta__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	}
}

.site-main--midrand .mid-cta__panel {
	min-width: 0;
}

.site-main--midrand .mid-cta__contacts {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin: var(--space-md) 0 0;
	padding: 0;
	list-style: none;
}

.site-main--midrand .mid-cta__contact {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 600;
}

.site-main--midrand .mid-cta__contact i {
	color: color-mix(in srgb, var(--color-accent) 80%, var(--color-dark-text) 20%);
}

.site-main--midrand .mid-cta__contact a {
	color: var(--color-dark-text);
	text-decoration: none;
}

.site-main--midrand .mid-cta__contact a:hover,
.site-main--midrand .mid-cta__contact a:focus-visible {
	text-decoration: underline;
}

.site-main--midrand .mid-cta__form {
	min-width: 0;
}

/* Light card so the shared form markup reads on the navy band. Surface values
   from .fp-services__featured; nothing inside the form is restyled. */
.site-main--midrand .mid-cta__form .wired-lead-form-wrap {
	padding: clamp(1.1rem, 2.5vw, 1.75rem);
	border-radius: calc(var(--border-radius-lg) + 2px);
	background: var(--color-bg);
	border: 1px solid color-mix(in srgb, var(--color-dark-text) 16%, transparent);
	box-shadow: 0 28px 80px color-mix(in srgb, #000 45%, transparent);
}

/* --------------------------------------------------------------------------
   Nothing on this page may create a horizontal scrollbar — long service names
   and the embedded reviews widget are the two candidates.
   -------------------------------------------------------------------------- */

.site-main--midrand .mid-card,
.site-main--midrand .mid-sectors__chip,
.site-main--midrand .mid-faq__q {
	overflow-wrap: anywhere;
}

.site-main--midrand .mid-reviews__embed {
	max-width: 100%;
	overflow-x: auto;
}