/*
 * UNIGRID contact section. Everything is scoped under .ug-contact-form so it can't collide with
 * the theme. Mobile-first: single column by default, paired rows from 40rem up.
 *
 * Sizes come from Aaron's Figma design (Contact_Form/Contact_Form.png; specs in PLAN.md,
 * "Design pass"). The theme already loads Lexend, Archivo, Lato and Exo 2.
 *
 * Deliberate choices, per Aaron:
 *   - the info@ link is #00B03C on white (2.89:1 contrast)
 *   - text sizes: Claude's readability recommendations are applied on top of Aaron's design (see the
 *     "Aaron's design:" notes). Git tag `contact-form-aaron-design` holds his exact version.
 *   - the boxes have no focus ring; the blinking cursor and floating label show focus. The
 *     button, links and checkbox keep a keyboard-only :focus-visible ring.
 */

.ug-contact-form {
	--ug-dark: #002B2E;
	--ug-green: #00B03C;
	--ug-green-dark: #008F31; /* link hover: slightly darker */
	--ug-error: #B3261E;
	--ug-bg: #FFFFFF;

	--ug-font-top: "Lexend", system-ui, sans-serif;
	--ug-font-heading: "Archivo", system-ui, sans-serif;
	--ug-font-body: "Lato", system-ui, sans-serif;
	--ug-font-field: "Exo 2", system-ui, sans-serif;

	color: var(--ug-dark);
	font-family: var(--ug-font-body);
	line-height: 1.4;
	max-inline-size: 49.75rem; /* 796px: two 374px boxes + 48px gap */
	margin-inline: auto;

	/*
	 * Space above and below the section. The theme's nav bar floats over the page
	 * (Site_CSS/additional-css.css), so the top padding = where the nav's bottom edge sits + the
	 * design's gap. contact-form.js measures that edge live and sets --ug-nav-bottom (in rem), because
	 * the bar's height changes with width when its tagline wraps. The --ug-nav-height values below
	 * are only a fallback if the script doesn't run (measured on staging 2026-10-05: nav bottom
	 * ~110px on narrow phones, 81px from 640px, 108px at 1024px, 91px from 1280px).
	 * Gaps: 80px under the nav on every screen size (Aaron, 2026-10-05; Figma had 104px), and
	 * 136px above the footer (64px on phones).
	 */
	--ug-nav-height: 6.875rem;   /* fallback: 110px */
	--ug-gap-top: 4rem;          /* 64px on phones (manager note, 2026-10-06: 16px tighter) */
	--ug-gap-bottom: 4rem;       /* 64px on phones */
	padding-block-start: calc(var(--ug-nav-bottom, var(--ug-nav-height)) + var(--ug-gap-top));
	padding-block-end: var(--ug-gap-bottom);
}

@media (min-width: 40rem) { /* 640px */
	.ug-contact-form {
		--ug-gap-top: 5rem;         /* 80px from 640px up */
		--ug-nav-height: 5.0625rem; /* fallback: 81px */
		--ug-gap-bottom: 8.5rem;    /* 136px (Figma) */
	}
}

@media (min-width: 64rem) { /* 1024px */
	.ug-contact-form {
		--ug-nav-height: 6.75rem;   /* fallback: 108px */
	}
}

@media (min-width: 80rem) { /* 1280px */
	.ug-contact-form {
		--ug-nav-height: 5.6875rem; /* fallback: 91px */
	}
}

.ug-contact-form *,
.ug-contact-form *::before,
.ug-contact-form *::after {
	box-sizing: border-box;
}

/* Keyboard-only focus ring for the button, links and checkbox. */
.ug-contact-form a:focus-visible,
.ug-contact-form .ug-submit:focus-visible,
.ug-contact-form .ug-checkbox:focus-visible {
	outline: 0.125rem solid var(--ug-dark);
	outline-offset: 0.1875rem;
}

/* ---- Header --------------------------------------------------------------------------------- */

.ug-contact-form .ug-header {
	text-align: center;
}

.ug-contact-form .ug-topline {
	margin: 0 0 0.75rem; /* 12px to the heading */
	font-family: var(--ug-font-top);
	font-weight: 300;
	font-size: 0.75rem; /* 12px on phones */
	padding-inline-start: 0.5rem; /* 8px on phones only (Aaron, 2026-10-05) */
	color: var(--ug-dark);
}

@media (min-width: 40rem) {
	.ug-contact-form .ug-topline {
		font-size: 1rem; /* 16px */
		padding-inline-start: 0;
	}
}

/* From 1024px wide (Aaron, 2026-10-05). Keep this AFTER the rules above, or they win. */
@media (min-width: 64rem) {
	.ug-contact-form .ug-topline {
		padding-inline-start: 0.25rem; /* 4px */
	}
}

.ug-contact-form .ug-topline a {
	color: var(--ug-green);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color 0.2s ease;
}

.ug-contact-form .ug-topline a:hover {
	color: var(--ug-green-dark);
}

.ug-contact-form .ug-heading {
	margin: 0 0 1.75rem; /* 28px to the intro */
	font-family: var(--ug-font-heading);
	font-weight: 700;
	font-size: clamp(2.5rem, 1.5rem + 5vw, 5rem); /* ~40px on phones, 80px on desktop */
	line-height: 1.1;
	color: var(--ug-dark);
}

.ug-contact-form .ug-intro {
	margin: 0 0 4rem; /* 64px to "All fields are required" */
	font-family: var(--ug-font-body);
	font-weight: 400;
	font-size: 1rem; /* 16px on phones */
	line-height: 1.35;
	color: var(--ug-dark);
}

@media (min-width: 40rem) {
	.ug-contact-form .ug-intro {
		font-size: 1.3rem; /* 20.8px from 640px up (Aaron, 2026-10-05; Figma: 1.5rem) */
	}
}

.ug-contact-form .ug-intro sup {
	font-size: 0.55em;
	line-height: 0;
}

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

.ug-contact-form .ug-required-note {
	margin: 0 0 1rem; /* 16px to the first boxes */
	font-family: var(--ug-font-body);
	font-style: italic;
	font-size: 1rem;
	color: var(--ug-dark);
}

.ug-contact-form .ug-grid {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 2rem; /* 32px on phones (manager note, 2026-10-06) */
}

@media (min-width: 40rem) {
	.ug-contact-form .ug-grid {
		grid-template-columns: 1fr 1fr;
		row-gap: 2.5rem; /* 40px from 640px up */
		column-gap: 3rem; /* 48px */
	}
	.ug-contact-form .ug-field--full {
		grid-column: 1 / -1;
	}
}

/* ---- Phones (below 640px): less scrolling (Aaron + manager, 2026-10-06) -------------------------
 * - Company and Title share a row (both short); Name, Email, Subject and Message stay full width,
 *   so email addresses are never cut off.
 * - Tighter header: 16px heading → intro (was 28px), 24px intro → form (was 64px).
 * Restore point before this change: git tag contact-form-before-mobile-pairing.
 */
@media (max-width: 39.99rem) {
	.ug-contact-form .ug-grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 0.75rem; /* 12px between Company and Title */
	}
	.ug-contact-form .ug-field:not(:has(#ug-company)):not(:has(#ug-role)) {
		grid-column: 1 / -1;
	}
	.ug-contact-form .ug-heading {
		margin-block-end: 1rem;    /* 16px */
	}
	.ug-contact-form .ug-intro {
		margin-block-end: 1.5rem;  /* 24px */
	}
}

.ug-contact-form .ug-field {
	min-inline-size: 0;
}

.ug-contact-form .ug-control {
	position: relative;
}

.ug-contact-form .ug-input {
	display: block;
	inline-size: 100%;
	block-size: 2.5rem; /* 40px */
	margin: 0;
	/* 12px inline. No block padding on the 40px single-line boxes: the browser centers the text,
	   and 12px top + bottom left only 14px for 16px text, clipping p/q/y/g. */
	padding-block: 0;
	padding-inline: 0.75rem;
	font-family: var(--ug-font-field);
	font-weight: 400;
	font-size: 1rem; /* 16px on phones: iPhones zoom into anything smaller */
	line-height: 1.3;
	color: var(--ug-dark);
	background-color: var(--ug-bg);
	border: 0.0625rem solid var(--ug-dark);
	border-radius: 0.3125rem; /* 5px */
	box-shadow: none;
	outline: none; /* no focus ring on the boxes (design decision) */
	appearance: none;
}

@media (min-width: 40rem) {
	.ug-contact-form .ug-input {
		font-size: 0.875rem; /* 14px typed text on desktop */
	}
}

.ug-contact-form .ug-input::placeholder {
	color: transparent; /* the placeholder is a single space, only there to drive :placeholder-shown */
}

.ug-contact-form .ug-textarea {
	padding-block: 0.75rem; /* 12px: Message text starts at the top */
	block-size: 6.25rem; /* 100px */
	min-block-size: 6.25rem;
	line-height: 1.4;
	resize: vertical;
}

.ug-contact-form .ug-select {
	padding-inline-end: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23002B2E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
	cursor: pointer;
}

.ug-contact-form .ug-input[aria-invalid="true"] {
	border-color: var(--ug-error);
}

/* Floating label: sits inside the box like a placeholder, slides up onto the top border once the
   box is focused or has a value. The white background only hides the border line behind it. */
.ug-contact-form .ug-label {
	position: absolute;
	inset-inline-start: 0.75rem;
	inset-block-start: 50%;
	transform: translateY(-50%);
	max-inline-size: calc(100% - 1.5rem);
	padding-inline: 0.25rem;
	margin-inline-start: -0.25rem;
	font-family: var(--ug-font-field);
	font-weight: 400;
	font-size: 0.875rem; /* 14px (Aaron's design: 0.75rem) */
	line-height: 1.3; /* room for descenders (p, y, j, g); 1.0 clipped them */
	color: var(--ug-dark);
	background-color: transparent;
	white-space: nowrap;
	pointer-events: none;
	transition: inset-block-start 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.ug-contact-form .ug-control--textarea .ug-label {
	inset-block-start: 0.75rem;
	transform: none;
}

.ug-contact-form .ug-control:focus-within .ug-label,
.ug-contact-form .ug-control.is-filled .ug-label,
.ug-contact-form .ug-input:not(.ug-select):not(:placeholder-shown) + .ug-label {
	inset-block-start: 0;
	transform: translateY(-50%);
	background-color: var(--ug-bg);
}

.ug-contact-form .ug-input[aria-invalid="true"] + .ug-label {
	color: var(--ug-error);
}

/* ---- Errors and status ---------------------------------------------------------------------- */

.ug-contact-form .ug-error {
	display: flex;
	gap: 0.25rem;
	align-items: flex-start;
	margin: 0.375rem 0 0;
	font-family: var(--ug-font-body);
	font-size: 0.75rem; /* 12px (Aaron's design: 0.625rem) */
	line-height: 1.4;
	color: var(--ug-error);
}

/* Empty slots stay in the DOM (so screen readers announce them when filled) but take no space. */
.ug-contact-form .ug-error:empty {
	margin: 0;
}

.ug-contact-form .ug-error a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.ug-contact-form .ug-error-icon {
	flex: none;
	inline-size: 0.75rem;
	block-size: 0.75rem;
}

.ug-contact-form .ug-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Short screens: keep Submit above the fold ------------------------------------------------
 * On laptops (under ~900px of visible height) the full Figma spacing pushed Submit ~130–260px below
 * the bottom of the screen. Below 900px viewport height, from 640px wide up, the vertical spacing
 * is compressed; Aaron chose this as option 1, 2026-10-05. Taller screens keep the exact Figma
 * spacing.
 *   intro → fields 64 → 24px | row gaps 40 → 20px | heading 80 → 64px
 *   (The gap under the nav is now 80px on every screen, set on .ug-contact-form.)
 */
@media (min-width: 40rem) and (max-height: 56.25rem) {
	.ug-contact-form {
	}
	.ug-contact-form .ug-heading {
		font-size: clamp(2.5rem, 1.5rem + 5vw, 4rem); /* tops out at 64px (tall screens: 80px) */
	}
	.ug-contact-form .ug-intro {
		margin-block-end: 1.5rem;  /* 24px (tall screens: 64px) */
	}
	.ug-contact-form .ug-grid {
		row-gap: 1.25rem;          /* 20px (tall screens: 40px) */
	}
}

/* ---- Two columns on wide screens (trial, 2026-10-05) --------------------------------------------
 * From 1024px wide: the header (Contact Us line, Get In Touch, intro) on the left, the form and its
 * fine print on the right, so the form starts near the top of the screen. Narrower screens keep the
 * stacked, centered layout. If Aaron rejects this, git tag `contact-form-centered-fallback` is the
 * centered version he wants instead.
 */
@media (min-width: 64rem) {
	.ug-contact-form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		grid-template-rows: auto 1fr;  /* extra height goes to row 2, so the fine print stays right under the header */
		column-gap: 4rem;              /* 64px between the columns */
		align-items: start;
		max-inline-size: 76rem;        /* 1216px */
	}
	.ug-contact-form .ug-header {
		text-align: start;
	}
	.ug-contact-form .ug-heading {
		font-size: clamp(2.5rem, 1rem + 4.2vw, 5rem); /* fits the column: ~59px at 1024px, 80px from ~1520px */
	}
	.ug-contact-form .ug-intro {
		margin-block-end: 0;           /* the form sits beside the header, not under it */
	}
	/* Left column: header, then the fine print under it. Right column: the form, spanning both. */
	.ug-contact-form .ug-header {
		grid-column: 1;
		grid-row: 1;
	}
	.ug-contact-form .ug-form {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
	.ug-contact-form .ug-fine-print {
		grid-column: 1;
		grid-row: 2;
		/* Its top margin is set in the Fine print section below (it must come after the base rule). */
	}
}

@media (min-width: 64rem) and (max-height: 56.25rem) {
	.ug-contact-form .ug-heading {
		font-size: clamp(2.5rem, 1rem + 4.2vw, 4rem); /* short screens: tops out at 64px */
	}
}

/* ---- Honeypot ------------------------------------------------------------------------------- */

.ug-contact-form .ug-hp {
	position: absolute;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

/* ---- Turnstile, button row ------------------------------------------------------------------ */

/* Invisible unless Cloudflare needs a click (interaction-only); JS adds .is-visible then. */
.ug-contact-form .ug-turnstile {
	max-inline-size: 100%;
}

.ug-contact-form .ug-turnstile.is-visible {
	margin-block-start: 2.375rem;
}

.ug-contact-form .ug-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	margin-block-start: 2.375rem; /* 38px below Message */
}

.ug-contact-form .ug-turnstile.is-visible ~ .ug-actions {
	margin-block-start: 1rem;
}

@media (min-width: 40rem) {
	.ug-contact-form .ug-actions {
		flex-direction: row;
		align-items: center;
		gap: 2.3125rem; /* 37px from button to message */
	}
}

/* Matches the site's .button--ghost: white pill, green border, fills green on hover. */
.ug-contact-form .ug-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 11rem; /* 176px */
	block-size: 2.5rem; /* 40px */
	margin: 0;
	padding-inline: 0.625rem; /* 10px */
	font-family: var(--ug-font-field);
	font-weight: 600;
	font-size: 0.875rem; /* 14px */
	line-height: 1;
	color: var(--ug-dark);
	background-color: var(--ug-bg);
	border: 0.125rem solid var(--ug-green); /* 2px, inside (border-box) */
	border-radius: 100px;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.ug-contact-form .ug-submit:hover {
	color: #FFFFFF;
	background-color: var(--ug-green);
}

.ug-contact-form .ug-form[aria-busy="true"] .ug-submit {
	cursor: progress;
}

/* Beside the button: the opt-in line, swapped for the thank-you message after a successful submit
   (contact-form.js adds .is-submitted and holds the block's height so nothing jumps). Error
   messages like "Something went wrong" show under the opt-in line. Below the button on phones. */
.ug-contact-form .ug-side {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
	min-inline-size: 0;
}

.ug-contact-form .ug-side.is-submitted {
	justify-content: center;
}

.ug-contact-form .ug-status {
	margin: 0;
	font-family: var(--ug-font-body);
	font-size: 0.75rem; /* 12px (Aaron's design: 0.625rem) */
	line-height: 1.4;
	color: var(--ug-dark);
}

.ug-contact-form .ug-status:empty {
	display: none;
}

.ug-contact-form .ug-status--error {
	color: var(--ug-error);
}

/* ---- Fine print ----------------------------------------------------------------------------- */

.ug-contact-form .ug-fine-print {
	margin-block-start: 4rem; /* 64px: below 1024px wide (stacked layout) */
}

/* From 1024px wide (two columns): space between the intro and the fine print. Aaron, 2026-10-05:
   2rem; change this value when wanted. Keep this rule AFTER the one above, or the 4rem wins. */
@media (min-width: 64rem) {
	.ug-contact-form .ug-fine-print {
		margin-block-start: 2rem;
	}
}

/* Same small-print style for the fine print and the opt-in line beside the button. */
.ug-contact-form .ug-fine-print,
.ug-contact-form .ug-consent {
	font-family: var(--ug-font-body);
	font-weight: 400;
	font-size: 0.6875rem; /* 11px (Aaron's design: 0.625rem) */
	line-height: 1.4;
	color: var(--ug-dark);
	opacity: 0.65; /* 4.96:1 contrast, the lowest that passes 4.5:1 (Aaron's design: 0.5 = 3.15:1) */
}

.ug-contact-form .ug-fine-print p {
	margin: 0 0 1em;
}

.ug-contact-form .ug-consent p {
	margin: 0;
}

.ug-contact-form .ug-fine-print p:last-child {
	margin-block-end: 0;
}

.ug-contact-form .ug-fine-print a,
.ug-contact-form .ug-consent a {
	color: inherit;
	text-decoration: underline;
}

.ug-contact-form .ug-optin {
	display: flex;
	align-items: flex-start;
	gap: 0.375rem;
}

.ug-contact-form .ug-optin label {
	cursor: pointer;
}

.ug-contact-form .ug-checkbox {
	flex: none;
	inline-size: 0.75rem;
	block-size: 0.75rem;
	margin: 0.0625rem 0 0;
	border: 0.0625rem solid var(--ug-dark);
	border-radius: 0.125rem;
	background-color: var(--ug-bg);
	appearance: none;
	cursor: pointer;
}

.ug-contact-form .ug-checkbox:checked {
	background-color: var(--ug-dark);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E");
	background-size: 100%;
}

/* ---- Admin notice --------------------------------------------------------------------------- */

.ug-contact-form .ug-admin-notice {
	padding: 0.75rem 1rem;
	border: 0.125rem dashed var(--ug-error);
	color: var(--ug-error);
}

@media (prefers-reduced-motion: reduce) {
	.ug-contact-form * {
		transition: none !important;
	}
}