/* Contact page (Figma 33535-18371 desktop; 33535-18984 form mobile; 33538-19105 facilities mobile).
 * Hero bottom radius comes from the shared .cmp-mt-hero class. */

/* The hero component (33535:18374) centers its heading in a 447px box, but the
 * page slots it at 425px with the bottom 22px clipped — so the heading sits
 * 11px below the slot's center. Asymmetric padding reproduces that. */
@media (min-width: 782px) {
	.cmp-contact-hero {
		padding-top: 122px !important;
		padding-bottom: 78px !important;
	}
}

/* --- Form section (33535:18378) --------------------------------------- */

/* GF gravity-theme, restyled to the Figma field spec: 10%-white fills, 4px
 * radius, placeholder-as-label (labels are hidden_label on every field) */
.cmp-cform-card .gform_wrapper.gravity-theme .gform_fields {
	grid-column-gap: 24px;
	grid-row-gap: 24px;
}

.cmp-cform-card .gform_wrapper .gform_required_legend {
	display: none;
}

/* Field = 8px pad + 24px line = 40px like the design's clipped-label fields.
 * width:100% — markup round 2 pin 51: the .gfield grid cells already span the
 * right columns (6/6/12/12/12/12) but the inputs sat at their intrinsic width. */
.cmp-cform-card .gform_wrapper.gravity-theme input:not([type='submit']),
.cmp-cform-card .gform_wrapper.gravity-theme textarea {
	width: 100%;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.1);
	border: 0;
	border-radius: 4px;
	padding: 8px;
	color: var(--wp--preset--color--theme-01);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 1rem !important;
	line-height: 1.5 !important;
}

.cmp-cform-card .gform_wrapper.gravity-theme input::placeholder,
.cmp-cform-card .gform_wrapper.gravity-theme textarea::placeholder {
	color: var(--wp--preset--color--theme-01);
	opacity: 1;
}

/* Message box: 139px like the design (33535:18411); block display kills the
 * inline-block baseline gap that grows the container 11px */
.cmp-cform-card .gform_wrapper.gravity-theme textarea {
	display: block;
	height: 139px;
	line-height: 1.7 !important;
	resize: vertical;
}

/* Submit = fill button: theme-03, 4px radius, right-aligned (33535:18419) */
.cmp-cform-card .gform_wrapper.gravity-theme .gform_footer {
	margin: 24px 0 0;
	padding: 0;
	justify-content: flex-end;
}

.cmp-cform-card .gform_wrapper.gravity-theme input[type='submit'] {
	background: var(--wp--preset--color--theme-03);
	color: var(--wp--preset--color--theme-01);
	border: 0;
	border-radius: 4px;
	padding: 8px 20px;
	margin-bottom: 0 !important;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.6 !important;
	cursor: pointer;
}

/* Section runs the design's 100px gutters; the 1240px content box comes from
 * the group's contentSize either way (33535:18378) */
@media (min-width: 782px) {
	.cmp-contact-form {
		padding-left: 100px !important;
		padding-right: 100px !important;
	}

	/* Self-hosted DM Sans runs wider than Figma's; release the title into the
	 * 54px column gutter so the design's 2-line break holds (addcap wide-h2
	 * precedent). min-width pins the flex column so the wide title cannot
	 * grow its min-content width and wrap the row. */
	.cmp-cform-intro {
		min-width: 0;
		flex: 0 0 543px !important;
	}

	.cmp-cform-intro h2 {
		width: 520px;
		max-width: none;
	}

	/* The intro's authored break is the mobile artboard's (33535:18993);
	 * desktop wraps naturally (mill-turn br precedent) */
	.cmp-cform-intro p br {
		display: none;
	}
}

/* --- Reach-out section (33535:18435) ----------------------------------- */

/* Markup round 2 pin 52 (2026-09-03): more air between the photo and the copy
 * on desktop (row gap 40 -> 80). Mobile keeps the shared cmp-cta-split stack. */
@media (min-width: 782px) {
	.cmp-contact-reach .cmp-cta-row {
		gap: 80px !important;
	}

	/* The block authors both columns as a fixed 50% flex-basis on a wrapping
	 * row, so 50% + 50% + the 80px gap above overflows the 1320px row and the
	 * copy column wraps under the photo. Take the gap out of each column's
	 * basis, one extra pixel each so sub-pixel rounding can never tip the
	 * line over (calc(50% - 40px) still wrapped at exactly 782px), and let
	 * flex-grow hand those two pixels back. The two-class selector outranks
	 * the hashed wp-container-content-* rule that sets the 50%. */
	.cmp-contact-reach .cmp-cta-row > .cmp-cta-img,
	.cmp-contact-reach .cmp-cta-row > .cmp-cta-content {
		flex: 1 1 calc(50% - 41px);
		min-width: 0;
	}
}

/* --- Facilities section (33535:18483 / mobile 33538:19105) ------------- */

/* The featured Compass card is the map card's mobile stand-in; desktop
 * shows the same info on the map section instead (33535:18435) */
.cmp-cfac-featured {
	display: none;
}

.cmp-cfac-btn {
	opacity: 0.8;
}

.cmp-cfac-btn a {
	color: inherit;
	text-decoration: none;
}

.cmp-cfac-btn a:hover,
.cmp-cfac-btn a:focus-visible {
	text-decoration: underline;
}

/* Section runs the design's 100px gutters like the form section (33535:18483) */
@media (min-width: 782px) {
	.cmp-contact-facilities {
		padding-left: 100px !important;
		padding-right: 100px !important;
	}

	/* Intro's authored break is the mobile artboard's (33538:19112);
	 * desktop runs one line (33535:18490) */
	.cmp-contact-facilities > .wp-block-group:nth-of-type(1) > .wp-block-group:nth-of-type(2) p br {
		display: none;
	}
}

@media (max-width: 781px) {
	/* Form section mobile artboard: 60px section rhythm, stacked columns,
	 * centered 28/700 title, 15/500 dimmed intro (33535:18984) */
	.cmp-contact-form {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}

	/* Mobile rhythm: title -> 24 -> intro -> 37 -> form card (33535:18985/18992) */
	.cmp-cform-cols {
		gap: 37px !important;
	}

	.cmp-cform-cols > .wp-block-group {
		flex-basis: 100% !important;
	}

	.cmp-cform-intro {
		padding: 0 !important;
	}

	.cmp-cform-intro > * + * {
		margin-block-start: 24px !important;
	}

	.cmp-cform-intro h2 {
		text-align: center;
		font-weight: 700 !important;
		letter-spacing: 0 !important;
	}

	.cmp-cform-intro p {
		text-align: center;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 500 !important;
		line-height: 1.4 !important;
		color: rgba(255, 255, 255, 0.8) !important;
	}

	.cmp-cform-card {
		padding: 24px !important;
	}

	.cmp-cform-card .gform_wrapper.gravity-theme .gform_fields {
		grid-row-gap: 8px;
	}

	.cmp-cform-card .gform_wrapper.gravity-theme .gform_footer {
		margin-top: 8px;
	}

	/* Mobile Submit: 13/700 (I33535:19044) */
	.cmp-cform-card .gform_wrapper.gravity-theme input[type='submit'] {
		font-size: 13px !important;
		line-height: 1.4 !important;
	}

	/* Reach-out keeps the shared cmp-cta-split mobile behavior; only the
	 * asymmetric desktop right padding needs re-balancing */
	.cmp-contact-reach {
		padding-right: var(--wp--preset--spacing--40) !important;
	}

	/* Facilities mobile artboard: 54px rhythm, screen-blend flare + tiled grid
	 * texture, 8px card gutters, two-up 50% cards, 16px inner rhythm
	 * (33538:19105 fills: SCREEN 0.5 stretch + TILE 0.2) */
	.cmp-contact-facilities {
		position: relative;
		padding-top: 54px !important;
		padding-bottom: 54px !important;
	}

	.cmp-contact-facilities::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		background: url('/wp-content/uploads/2026/09/contact-flare.jpg') center / 100% 100% no-repeat;
		mix-blend-mode: screen;
		opacity: 0.5;
		pointer-events: none;
	}

	.cmp-contact-facilities::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		background: url('/wp-content/uploads/2026/08/aerospace-twocol-grid-a.png') top left / 922px 461px repeat;
		opacity: 0.2;
		pointer-events: none;
	}

	.cmp-contact-facilities > * {
		position: relative;
		z-index: 1;
	}

	.cmp-cfac-grid {
		gap: 8px !important;
	}

	.cmp-cfac-grid > .cmp-cfac-card {
		flex-basis: calc(50% - 4px) !important;
		padding: 24px 16px !important;
	}

	.cmp-cfac-card > * + * {
		margin-block-start: 16px !important;
	}

	.cmp-cfac-card .wp-block-image:not(.cmp-cfac-arrow) img {
		width: 136px !important;
		height: 50px !important;
		object-fit: contain;
	}

	/* Accu-Tool's mobile logo box is 174 wide in the artboard (33538:19129);
	 * contain-fit renders the mark at the same scale either way */
	.cmp-cfac-grid > .wp-block-group:nth-of-type(2) .wp-block-image:not(.cmp-cfac-arrow) img {
		width: 174px !important;
		max-width: none !important;
	}

	/* name 16/600, address 14/400 (33538:19131 / 33538:19132) */
	.cmp-cfac-card p:not(.cmp-cfac-btn p) {
		font-size: 1rem !important;
		font-weight: 600 !important;
		letter-spacing: -0.03em !important;
		line-height: 1.2 !important;
	}

	.cmp-cfac-card .wp-block-group p + p {
		font-size: var(--wp--preset--font-size--x-small) !important;
		font-weight: 400 !important;
		letter-spacing: 0 !important;
		line-height: 1.3 !important;
	}

	.cmp-cfac-btn p {
		font-size: 12px !important;
		font-weight: 700 !important;
		line-height: 1.4 !important;
	}

	.cmp-cfac-card .cmp-cfac-arrow img {
		width: 22px !important;
		height: 23px !important;
	}

	/* Facilities heading mobile: 28/700, no tracking (33538:19111) */
	.cmp-contact-facilities h2 {
		font-weight: 700 !important;
		letter-spacing: 0 !important;
	}

	/* Featured Compass card: full-width, 194x55 logo, 15/700 View Site
	 * (33538:19117) */
	.cmp-cfac-grid > .cmp-cfac-featured {
		display: block;
		flex-basis: 100% !important;
	}

	.cmp-cfac-featured .wp-block-image:not(.cmp-cfac-arrow) img {
		width: 194px !important;
		height: 55px !important;
	}

	.cmp-cfac-featured .cmp-cfac-btn p {
		font-size: var(--wp--preset--font-size--medium) !important;
	}
}

/* --- Consent checkbox (external markup round pin 10, 2026-09-10) ---------
 * GF consent field (form 1, field 7). The generic input rule above stretches
 * every non-submit input to 100% with a 10%-white fill, which would turn the
 * checkbox into a bar, so the box is pulled back to a native 20px control in
 * the site accent. The inline label keeps body weight; the privacy link keeps
 * its underline so the legal reference stays visible on the dark card. */
.cmp-cform-card .gform_wrapper.gravity-theme .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.cmp-cform-card .gform_wrapper.gravity-theme .ginput_container_consent input[type='checkbox'] {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	padding: 0;
	appearance: auto;
	accent-color: var(--cmp-accent-blue, #1897ff);
	background: transparent;
	border-radius: 4px;
	cursor: pointer;
}

.cmp-cform-card .gform_wrapper.gravity-theme .gfield_consent_label {
	margin: 0;
	color: var(--wp--preset--color--theme-01);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
}

.cmp-cform-card .gform_wrapper.gravity-theme .gfield_consent_label a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.cmp-cform-card .gform_wrapper.gravity-theme .gfield_consent_label a:hover,
.cmp-cform-card .gform_wrapper.gravity-theme .gfield_consent_label a:focus-visible {
	color: var(--cmp-accent-blue, #1897ff);
}

.cmp-cform-card .gform_wrapper.gravity-theme .gfield_consent_label .gfield_required {
	color: var(--cmp-accent-blue, #1897ff);
}

.cmp-cform-card .gform_wrapper.gravity-theme .gfield--type-consent .gfield_description {
	color: var(--wp--preset--color--theme-01);
}

/* Mobile review 2026-09-11 (M7): the 174px Accu-Tool logo (max-width:none
 * above) plus 32px card padding pushed that card past calc(50% - 4px), so it
 * sat alone, centred, and the 2-up grid started a row late. Cap every
 * non-featured card at half width and let the logo shrink to the card. */
@media (max-width: 781px) {
	.cmp-cfac-grid > .cmp-cfac-card:not(.cmp-cfac-featured) {
		max-width: calc(50% - 4px);
		min-width: 0;
	}

	.cmp-cfac-grid > .wp-block-group:nth-of-type(2) .wp-block-image:not(.cmp-cfac-arrow) img {
		max-width: 100% !important;
	}
}