/* -----------------------------------------------------------------------
   Reusable components — the building blocks sections compose from.
   ----------------------------------------------------------------------- */

/* Icon ------------------------------------------------------------------- */

.icon {
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	fill: currentcolor;
}

.icon--sm {
	width: 1.25rem;
	height: 1.25rem;
}

.icon--lg {
	width: 2rem;
	height: 2rem;
}

/* Button ----------------------------------------------------------------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-12);
	min-height: 2.625rem; /* 42 */
	padding: var(--space-8) var(--space-24);
	border-radius: var(--radius-button);
	font-size: var(--fs-main);
	line-height: 1.2;
	text-align: center;
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast),
		box-shadow var(--transition-fast);
}

/* The taller 54px pill used in the hero and the footer. */
.button--lg {
	min-height: 3.375rem;
	padding-inline: var(--space-12);
  	max-height: 3.375rem;
  
}

.button--lg.button--light,
.button--light {
	justify-content: space-between;
}

.button--primary {
	min-width: 13rem; /* 208 */
	background-color: var(--color-primary);
	color: var(--color-white);
}

.button--primary:hover,
.button--primary:focus-visible {
	background-color: var(--color-primary-dark);
	color: var(--color-white);
}

/*
 * Hugs its content. Only the hero pins this variant to a fixed width, and the
 * footer stretches it — both say so where they use it.
 */
.button--light {
	gap: var(--space-12);
	min-height: 3.375rem; /* 54 */
	padding: var(--space-4) var(--space-4) var(--space-4) var(--space-16);
	background-color: var(--color-white);
	color: var(--color-black);
	box-shadow: var(--shadow-raised);
}

.button--light:hover,
.button--light:focus-visible {
	color: var(--color-black);
	box-shadow: var(--shadow-floating);
}

.button--outline {
	min-width: 13rem;
	border: 1px solid currentcolor;
	color: var(--color-black);
}

.button--outline:hover,
.button--outline:focus-visible {
	background-color: var(--color-black);
	color: var(--color-white);
}

/* The circular arrow badge that sits inside light buttons. */
.button__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem; /* 44 */
	height: 2.75rem;
	flex: none;
	border-radius: var(--radius-full);
	background-color: var(--color-primary);
	color: var(--color-white);
}

.button__badge .icon {
	width: 1.5rem;
	height: 1.5rem;
}

/* Section heading -------------------------------------------------------- */

.section-title {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

/*
 * The small label with the trailing rule, e.g. "Services ———". The design sets
 * it in 20 with its own leading — not the 24 of a heading, and not the body's
 * 1.5, which would leave the whole title block a line taller than it draws.
 */
.section-title__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	font-size: 1.25rem; /* 20 */
	line-height: var(--lh-heading);
	color: var(--color-primary);
	text-transform: uppercase;
}

.section-title__eyebrow::after {
	content: "";
	width: 3.7rem;
	height: 1px;
	background-color: var(--color-primary);
}

/* Every heading in the design is set at its font's own leading — 48 over 40. */
.section-title__heading {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	text-transform: uppercase;
}

.section-title--center {
	align-items: center;
	text-align: center;
}

.section-title--inverse .section-title__heading {
	color: var(--color-white);
}

/* A heading row that keeps its action button on the right on wide screens. */
.section-title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-24);
}

/* Card ------------------------------------------------------------------- */

.card-grid {
	display: grid;
	gap: var(--space-16);
	margin-block-start: var(--space-44);
}

.card-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	border-radius: var(--radius-card);
	background-color: var(--color-white);
	overflow: hidden;
}

.card__media {
	position: relative;
}

.card__image {
	width: 100%;
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.card__title {
	font-family: var(--font-display);
	font-size: var(--fs-h5);
	line-height: var(--lh-display);
	text-transform: uppercase;
}

.card__text {
	font-size: var(--fs-secondary);
}

/* Photo variant — image edge to edge with the icon badge hanging off it. */

.card--photo {
	border: 1px solid var(--color-gray-15);
}

.card--photo .card__image {
	aspect-ratio: 432 / 220;
	border-radius: var(--radius-card);
	object-fit: cover;
}

.card--photo .card__badge {
	position: absolute;
	inset-block-end: -1rem;
	inset-inline-start: var(--space-16);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem; /* 52 */
	height: 4.0625rem; /* 65 */
	border-radius: var(--space-8);
	background-color: var(--color-primary);
	color: var(--color-white);
}

.card--photo .card__badge .icon {
	width: 2rem;
	height: 2rem;
}

.card--photo .card__body {
	padding: 0 var(--space-16) var(--space-16);
}

/* Illustration variant — centred line-art above centred text. */

.card--illustration {
	align-items: center;
	padding: var(--space-12);
	text-align: center;
}

.card--illustration .card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 6.875rem; /* 110 */
}

.card--illustration .card__image {
	width: auto;
	max-height: 100%;
	object-fit: contain;
}

.card--illustration .card__body {
	width: 100%;
}

.card-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

/* Info card — icon badge, heading and a bulleted list. */

.info-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding: var(--space-16);
	border-radius: var(--radius-card);
	background-color: var(--color-white);
}

.info-card__head {
	display: flex;
	align-items: center;
	gap: var(--space-16);
}

.info-card__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem; /* 56 */
	height: 3.5rem;
	flex: none;
	border-radius: var(--radius-full);
	background-color: var(--color-primary);
	color: var(--color-white);
}

.info-card__badge .icon {
	width: 2rem;
	height: 2rem;
}

.info-card__title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: var(--lh-display);
	text-transform: uppercase;
}

.info-card__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.info-card__item {
	display: flex;
	align-items: center;
	gap: var(--space-12);
}

.info-card__item::before {
	content: "";
	width: 0.5625rem; /* 9 */
	height: 0.5625rem;
	flex: none;
	border-radius: var(--radius-full);
	background-color: var(--color-black);
}

/* Decorative route rule ---------------------------------------------------- */

.route-rule {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin-block-start: var(--space-44);
	color: var(--color-primary);
}

.route-rule__truck .icon,
.route-rule__pin .icon {
	width: 2.5rem;
	height: 2.5rem;
}

.route-rule__line {
	flex: 1;
	border-block-start: 2px dashed currentcolor;
}

/* Icon + text list item, used in the footer and several sections. */
.point {
	display: flex;
	align-items: flex-start;
	gap: var(--space-16);
}

.point .icon {
	margin-top: 0.15em;
	color: var(--color-black);
}

/* Form ------------------------------------------------------------------- */

/*
 * Contact Form 7 markup is authored in the admin, so these rules target the
 * plain elements rather than plugin-specific wrappers wherever possible.
 */

.nodir-form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	margin-block-end: var(--space-24);
}

/*
 * The design sets its labels, hints and the note in normal leading rather than
 * the body's 1.5 — that is what keeps a field to 83 and the whole column to the
 * spacing the design draws.
 */
.nodir-form label,
.nodir-form .form-control__hint,
.nodir-form .form-note {
	line-height: var(--lh-heading);
}

.nodir-form label {
	font-size: var(--fs-secondary);
}

.nodir-form .form-control {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding-inline: var(--space-12);
	border-radius: var(--radius-box);
	background-color: var(--color-white);
}

.nodir-form .form-control .icon {
	flex: none;
	color: var(--color-black);
}

/*
 * Contact Form 7 puts its own wrapper around each control. Left alone it is a
 * flex item sized to the field's `cols`/`size` attribute, so the field stops
 * well short of the rounded box it sits in.
 */
.nodir-form .wpcf7-form-control-wrap {
	display: block;
	flex: 1;
	min-width: 0;
}

.nodir-form input[type="text"],
.nodir-form input[type="email"],
.nodir-form input[type="tel"],
.nodir-form input[type="file"],
.nodir-form textarea {
	/* Block, or the line box adds a descender gap under the field. */
	display: block;
	width: 100%;
	min-height: 3rem; /* 48 */
	padding: 0.625rem 0;
	border: 0;
	background: none;
	font-size: var(--fs-main);
}

/* The design writes the prompts in the body colour, not the browser's grey. */
.nodir-form ::placeholder {
	color: var(--color-black);
	opacity: 1;
}

/*
 * A fixed height, not a floor: Contact Form 7 emits rows="10" on a textarea,
 * which a min-height would never rein in. Resizing is off because the design
 * has no grip, and the box is a fixed 117 tall.
 */
.nodir-form textarea {
	height: 7.3125rem; /* 117 */
	min-height: 7.3125rem;
	padding-block: 0.625rem;
	resize: none;
}

.nodir-form input:focus,
.nodir-form textarea:focus {
	outline: none;
}

/* Move the focus ring onto the rounded wrapper. */
.nodir-form .form-control:focus-within {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/*
 * In the design the upload field is a drop area: a white tile carrying the
 * download mark, the prompt under it, and no trace of the browser's own file
 * button. The input is stretched over the whole box at zero opacity, so the box
 * is the control — a click anywhere in it opens the picker, and the input still
 * takes focus and the keyboard.
 */
.nodir-form .form-control--file {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-16);
	min-height: 8.6875rem; /* 139 */
	padding: var(--space-16) var(--space-12);
	text-align: center;
}

.nodir-form .form-control--file .icon {
	width: 4.5rem; /* 72 */
	height: 4.5rem;
	padding: 1rem; /* leaves the 40 of glyph the design draws */
	border-radius: 2rem;
	background-color: var(--color-white);
	color: var(--color-primary);
}

.nodir-form .form-control--file .wpcf7-form-control-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex: none;
}

.nodir-form .form-control--file input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

/* Painted after the invisible input, so a rejected file still says why. */
.nodir-form .form-control--file .wpcf7-not-valid-tip {
	position: relative;
	padding-block-end: var(--space-8);
}

.nodir-form .form-control__hint {
	font-size: var(--fs-secondary);
}

.nodir-form .form-note {
	display: flex;
	align-items: center;
	gap: 1.375rem; /* 22 */
	margin-block-end: var(--space-24);
}

.nodir-form .form-note .icon {
	width: 2rem; /* 32 */
	height: 2rem;
	color: var(--color-primary);
}

.nodir-form .form-actions {
	position: relative;
	display: flex;
	justify-content: center;
}

.nodir-form input[type="submit"] {
	min-width: 20rem; /* 320 */
	min-height: 2.625rem;
	padding: var(--space-8) var(--space-24);
	border: 0;
	border-radius: var(--radius-button);
	background-color: var(--color-primary);
	color: var(--color-white);
	font-size: var(--fs-main);
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.nodir-form input[type="submit"]:hover {
	background-color: var(--color-primary-dark);
}

/* CF7's own status and validation messages. */

.nodir-form .wpcf7-not-valid-tip {
	color: var(--color-primary);
	font-size: var(--fs-small);
}

.nodir-form .wpcf7-response-output {
	margin: var(--space-16) 0 0;
	padding: var(--space-12) var(--space-16);
	border: 1px solid var(--color-gray-60);
	border-radius: var(--radius-card);
	font-size: var(--fs-secondary);
}

/*
 * Out of the flow: Contact Form 7 only hides the spinner's visibility, so left
 * in the row it would keep its width and push the button off centre.
 */
.nodir-form .wpcf7-spinner {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 50%;
	margin: 0;
	transform: translateY(-50%);
}

/* Responsive ------------------------------------------------------------- */

@media (width <= 62rem) {
	.card-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (width <= 48rem) {
	.card-grid--3,
	.card-grid--2 {
		grid-template-columns: 1fr;
	}

	.info-card__item {
		align-items: flex-start;
	}

	.info-card__item::before {
		margin-block-start: 0.5em;
	}

	/*
	 * Left with the heading and sized to its own text: a red bar the width of
	 * the screen under every section heading reads as the section's own banner
	 * rather than the small action it is.
	 */
	.section-title-row .button {
		align-self: flex-start;
	}

	.route-rule__truck .icon,
	.route-rule__pin .icon {
		width: 1.75rem;
		height: 1.75rem;
	}
}