/**
 * Kerrigan — Base / reset / layout primitives
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--white);
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: var(--lh-body);
	overflow-x: hidden;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--primary-green);
	text-decoration: none;
	transition: var(--transition);
}

a:hover,
a:focus-visible {
	color: var(--primary-black);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--primary-black);
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: var(--lh-heading);
}

p {
	margin: 0 0 var(--space-20);
}

p:last-child {
	margin-bottom: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

:focus-visible {
	outline: 2px solid var(--primary-green);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------
 * Container
 * max-width 1440 + (60 * 2) = 1560. At 1920 viewport margin-inline auto
 * gives (1920 - 1560) / 2 = 180px each side + 60px padding = content
 * starts at 240px and is 1440px wide, matching Figma exactly.
 * ------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: calc(var(--container-max) + (var(--container-pad) * 2));
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* -------------------------------------------------------------------
 * Section wrapper. Full-bleed background, constrained inner content.
 * Vertical rhythm is 120px unless a block overrides it.
 * ------------------------------------------------------------------- */
.section {
	position: relative;
	padding-block: var(--section-rhythm);
}

.section-pale {
	background-color: var(--pale-green);
}

.section-white {
	background-color: var(--white);
}

.section-mid {
	background-color: var(--mid-green);
}

.section-black {
	background-color: var(--primary-black);
	color: var(--white);
}

/* -------------------------------------------------------------------
 * Shared section settings, emitted by kerrigan_section_atts() from the
 * fields in kerrigan_layout_common_fields(). All opt-in: a layout that
 * leaves them empty renders exactly as its own stylesheet says.
 * ------------------------------------------------------------------- */
.section-image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* The overlay sits between the image and the content, so every section that
 * uses one needs its own content above it. Blocks give their inner wrapper
 * `position: relative`; this pseudo-element takes z-index 0. */
.section-overlay-dark::before,
.section-overlay-dark-fade::before,
.section-overlay-green::before,
.section-overlay-pale-left::before {
	position: absolute;
	z-index: 0;
	content: "";
	inset: 0;
	pointer-events: none;
}

/* Our Team's team_bio band is the only flat dark wash in the design, and Figma
 * builds it the other way round: a black section with the photo laid over it at
 * 30% opacity. Compositing an image at 30% over black is the same thing as 70%
 * black over the image, so that is the figure — not the 50% this was built with. */
.section-overlay-dark::before {
	background-color: rgb(0 0 0 / 70%);
}

/* Contact section 7 ("Fast and Reliable Storm Damage Repairs") is a gradient,
 * not a flat wash: GRADIENT_LINEAR #010101, 0.8 alpha to 39.81% then clearing
 * by 100%. As with the green overlay, those numbers are STOP POSITIONS, not
 * alphas.
 *
 * 270deg, so the solid end is on the right where the copy sits (its block
 * starts at x790 of the 1440 container). The node's transform carries no
 * rotation and reads as left-to-right, which is the wrong way round — sampling
 * the 1:1 export settles it: luminance falls 144 → 17 from x=40 to x=1880.
 *
 * Kept separate from `dark` because the two sections that ask for a dark
 * overlay are drawn differently — Our Team's is a flat wash — and folding them
 * together would mean inventing a compromise that matches neither. */
.section-overlay-dark-fade::before {
	background-image: linear-gradient(
		270deg,
		rgba(var(--primary-black-rgb), 0.8) 39.81%,
		rgba(var(--primary-black-rgb), 0) 100%
	);
}

/* Figma: GRADIENT_LINEAR #1A3412 left to right, opaque at the left and clearing
 * by ~76% across.
 *
 * The 27 / 46 / 76 in the node are STOP POSITIONS, not alphas — this rule used
 * to read them as alphas and invent the positions (0.76/0.46/0.27 at 0/55/100),
 * which put the darkest part in roughly the right place but faded it far too
 * slowly and never reached transparent. */
.section-overlay-green::before {
	background-image: linear-gradient(
		90deg,
		rgba(var(--overlay-green-rgb), 0.9) 27.11%,
		rgba(var(--overlay-green-rgb), 0.63944) 45.94%,
		rgba(var(--overlay-green-rgb), 0) 76.2%
	);
}

/* Figma location section — the exact three-layer stack from the design.
 * Figma's radial gradients carry a rotation CSS cannot express, so the two
 * radial layers are approximations of their unrotated form; the linear layer
 * is exact. Together they wash the map out under the copy column and leave
 * the pin readable on the right. */
.section-overlay-pale-left::before {
	background:
		radial-gradient(41.51% 73.45% at 81.77% 48.57%, rgba(242, 250, 245, 0) 42.15%, #F2FAF5 83.92%),
		linear-gradient(212deg, rgba(242, 250, 245, 0) 48.69%, #F2FAF5 71.15%),
		radial-gradient(31.09% 55.38% at 77.45% 53.43%, rgba(242, 250, 245, 0) 1.92%, rgba(242, 250, 245, 0.5) 71.07%);
}

/* Below 992 the copy stops sitting in the right-hand half and runs the full
 * width, so the gradient's clear end no longer falls on empty photo — it falls
 * behind text. Carried darker at both ends at the developer's instruction:
 * 0.8 -> 0.7 where it is solid, and 0 -> 0.5 where it cleared entirely. */
@media (max-width: 991px) {

	.section-overlay-dark-fade::before {
		background-image: linear-gradient(
			270deg,
			rgba(var(--primary-black-rgb), 0.7) 39.81%,
			rgba(var(--primary-black-rgb), 0.5) 100%
		);
	}
}

/* The wash is aimed at the right-hand side of a 1920 band, so on a narrow
 * screen its clear zone lands over the copy instead of the pin. 150% at the
 * developer's instruction — overhanging the section pushes the transparent end
 * off-canvas and leaves the readable pale over the text. `inset: 0` above sets
 * left/right, so the width needs the right edge released to take effect.
 *
 * 1199, raised from 767: the wash starts landing on the copy as soon as the
 * container stops being full width, not only on phones. Scoped to the overlay
 * class rather than `.location-map` — that band is its only user today, but the
 * clip belongs to whatever element owns the overhanging pseudo-element. */
@media (max-width: 1199px) {

	/* Clipped, or the 150% below overhangs the viewport and scrolls the whole
	 * page sideways — the section is full-bleed, so there is nothing else to
	 * contain it. */
	.section-overlay-pale-left {
		overflow: hidden;
	}

	.section-overlay-pale-left::before {
		right: auto;
		width: 150%;
	}
}

/* The class is tripled deliberately. These are explicit per-row overrides set
 * by an editor, so they have to beat a block's own `padding-block` — and at
 * equal specificity the block stylesheet wins, because it is enqueued after
 * base.css. Repeating the selector raises specificity without !important.
 *
 * Doubling was not enough: `.section.product-rows { padding-block: 150px }` is
 * itself two classes, so it tied and won on order, and Get a Quote's services
 * section kept its 150 top padding where the design has none. Three covers
 * every block rule in the project — a block needing more than that should be
 * fixed rather than out-specified here. */
.section-pt-none.section-pt-none.section-pt-none { padding-top: 0; }
.section-pt-xs.section-pt-xs.section-pt-xs { padding-top: var(--space-40); }
.section-pt-small.section-pt-small.section-pt-small { padding-top: var(--space-60); }
.section-pt-large.section-pt-large.section-pt-large { padding-top: var(--section-rhythm); }
.section-pb-none.section-pb-none.section-pb-none { padding-bottom: 0; }
.section-pb-xs.section-pb-xs.section-pb-xs { padding-bottom: var(--space-40); }
.section-pb-small.section-pb-small.section-pb-small { padding-bottom: var(--space-60); }
.section-pb-large.section-pb-large.section-pb-large { padding-bottom: var(--section-rhythm); }

/* Utility */
.screen-reader-text {
	position: absolute !important;
	overflow: hidden;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	word-wrap: normal !important;
}

/* Accent words inside a heading are a bare <span> — no class needed, so an
 * editor can just wrap a word without remembering a class name. `.is-accent`
 * is kept as an alias for content authored before this change. */
h1 span,
h2 span,
h3 span,
.is-accent {
	color: var(--primary-green);
}