/**
 * Redesigned Contact Us form.
 *
 * Scoped entirely to .ibox-contact-request-form so it only ever affects
 * this form -- the page's other CSS (.contact-us-section, .row-wrapper,
 * .contact-details, banner, etc. in css/style.css) is left completely
 * untouched. The old .gform_wrapper-scoped rules in style.css simply no
 * longer match anything on this page and are harmless.
 */

/* Page background: reuse the exact same blue already used by the
   Certifications section (.ibox-certifications in
   css/certifications-section.css) -- same var(--clay-bg-1) token and
   fallback, applied only to this page's wrapper. */
.ibox-contact-page {
	background-color: var(--clay-bg-1, #eaf6ff);
}

/**
 * Clean, image-less opening title section -- replaces the old
 * .main-banner-section hero banner (100vh, background image, white
 * text) per an earlier follow-up -- see template-contact.php's own doc
 * comment for the full removal rationale. Deliberately compact rather
 * than matching that old banner's full-viewport height, so removing
 * the image doesn't leave a large empty space behind -- just the page
 * title with comfortable breathing room above the contact section
 * below.
 *
 * padding-top CORRECTED again per a later follow-up. The comment that
 * used to live here said the floating navigation "has been removed
 * entirely" and that this was "ordinary top section padding only" --
 * that was accurate at the time it was written, but the floating nav
 * was subsequently rebuilt from scratch (css/site-glass-nav.css) and
 * this comment/value were never revisited, so it was stale and
 * actively misleading about the current state of the page. The
 * rebuilt nav already reserves its own clearance sitewide via a
 * global `body { padding-top: var(--glass-nav-content-offset) }`
 * (css/site-glass-nav.css) -- but rather than rely solely on that
 * indirect mechanism working correctly in combination with whatever
 * else is on this specific page, this now ALSO explicitly calculates
 * its own top padding directly from the nav's real height custom
 * properties (--glass-nav-height-full/-compact/-compact-small,
 * --glass-nav-top, all defined in css/site-glass-nav.css and left
 * completely untouched here), so the heading's clearance is
 * self-evidently correct from this rule alone, regardless of the
 * global mechanism. +32px beyond the nav's own bottom edge for a
 * comfortable gap, per this follow-up's suggested direction.
 */
.ibox-contact-page-header {
	position: relative;
	padding: calc(var(--glass-nav-top, 20px) + var(--glass-nav-height-full, 72px) + 32px) 20px 60px;
	text-align: center;
}

.ibox-contact-page-header h1 {
	color: var(--primary, #1B4C82);
	letter-spacing: -2.58px;
	margin: 0;
}

/* .ibox-contact-page-header .bookmark-link (downward scroll arrow) --
   removed entirely per an earlier follow-up, along with its element in
   template-contact.php. .ibox-contact-page-header's own padding below
   is ordinary section padding, not space reserved for the arrow, so
   nothing else needed to change. */

/**
 * Tablet/iPad (both orientations, 768-1024px): the nav itself switches
 * to its compact (burger-only) layout at 1140px and below (see
 * css/site-glass-nav.css) -- so this range uses
 * --glass-nav-height-compact (64px), not the full-nav height the base
 * rule above uses, plus a smaller +24px comfort gap ("a smaller
 * correction on iPad/tablet", per this follow-up).
 */
@media (max-width: 1024px) {
	.ibox-contact-page-header {
		padding: calc(var(--glass-nav-top, 20px) + var(--glass-nav-height-compact, 64px) + 24px) 20px 50px;
	}
}

/**
 * Mobile phones (<=767px): the nav is at its smallest compact height
 * here (--glass-nav-height-compact-small, 56px, active below 420px --
 * using the same variable at this whole tier is a safe, slightly
 * generous overestimate for 421-767px, where the nav is technically
 * a few px taller at 64px -- erring toward extra clearance rather than
 * too little). +40px comfort gap -- the LARGEST of the three tiers,
 * per this follow-up's explicit "use a larger correction on mobile,
 * where the overlap is strongest".
 */
@media (max-width: 767px) {
	.ibox-contact-page-header {
		padding: calc(var(--glass-nav-top, 20px) + var(--glass-nav-height-compact-small, 56px) + 40px) 20px 40px;
	}
}

.ibox-contact-request-form {
	margin-top: 8px;
}

.ibox-contact-request-form .ibox-catalog-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px 40px;
	margin-bottom: 25px;
}

.ibox-contact-request-form .ibox-catalog-form-field {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.ibox-contact-request-form .ibox-catalog-form-field.ibox-full-width {
	grid-column: 1 / -1;
}

.ibox-contact-request-form label {
	font-size: 18px;
	font-weight: 400;
	color: #212121;
	margin-bottom: 8px;
}

.ibox-contact-request-form input,
.ibox-contact-request-form textarea {
	background-color: #FFFFFF;
	border: 1px solid #FFFFFF;
	border-radius: 4px;
	padding: 0 24px;
	height: 52px;
	line-height: 52px;
	font-size: 15px;
	font-family: inherit;
	color: #212121;
	transition: border-color 0.3s, background-color 0.3s;
}

.ibox-contact-request-form textarea {
	height: 160px;
	line-height: 1.6;
	padding: 16px 24px;
	resize: vertical;
}

.ibox-contact-request-form input::placeholder,
.ibox-contact-request-form textarea::placeholder {
	color: #A4A4A6;
}

.ibox-contact-request-form input:focus,
.ibox-contact-request-form textarea:focus {
	background-color: #ffffff;
	border-color: #F6921E;
}

/* Override: css/claymorphism-theme.css (the sitewide skin layer, loaded
   after this file at enqueue priority 20 specifically to win the
   cascade) also targets this same selector --
   ".ibox-contact-request-form input, .ibox-contact-request-form
   textarea { background-color: var(--clay-bg-1) !important; }" -- which
   repaints the fields the page's own light-blue tint instead of white.
   That is the rule that was overriding the earlier fix. Rather than
   edit the shared skin file (it also styles the separate catalog
   request form via the same rule, on other pages), this adds the page
   wrapper class for higher specificity plus !important so it reliably
   wins here regardless of stylesheet load order, scoped to the Contact
   Us form only. Border, radius, shadow, spacing and focus ring from
   the skin layer are left untouched -- only the background is forced
   white. */
.ibox-contact-page .ibox-contact-request-form input,
.ibox-contact-page .ibox-contact-request-form textarea {
	background-color: #ffffff !important;
	background-image: none !important;
	opacity: 1 !important;
}

.ibox-contact-page .ibox-contact-request-form input:focus,
.ibox-contact-page .ibox-contact-request-form textarea:focus {
	background-color: #ffffff !important;
}

.ibox-contact-page .ibox-contact-request-form input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
	-webkit-text-fill-color: inherit !important;
}

.ibox-contact-request-form input.ibox-invalid,
.ibox-contact-request-form textarea.ibox-invalid {
	border-color: #C0392B;
}

.ibox-contact-request-form .ibox-catalog-field-error {
	display: block;
	min-height: 18px;
	font-size: 12px;
	color: #C0392B;
	margin-top: 6px;
}

/* Honeypot -- hidden from real visitors, out of the tab order too. */
.ibox-contact-request-form .ibox-catalog-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ibox-contact-request-form .ibox-catalog-submit-row {
	margin-top: 10px;
}

.ibox-contact-request-form .ibox-catalog-submit-btn {
	display: inline-block;
	border: none;
	cursor: pointer;
	font-family: inherit;
}

.ibox-contact-request-form .ibox-catalog-submit-btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.ibox-contact-request-form .ibox-catalog-form-message {
	display: none;
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 14px;
	margin-bottom: 20px;
	text-align: left;
}

.ibox-contact-request-form .ibox-catalog-form-message.is-visible {
	display: block;
}

.ibox-contact-request-form .ibox-catalog-form-message.is-success {
	background-color: #E6F4EA;
	color: #1E7E34;
}

.ibox-contact-request-form .ibox-catalog-form-message.is-error {
	background-color: #FBE7E7;
	color: #C0392B;
}

.ibox-contact-request-form.is-submitted-success .ibox-catalog-form-row,
.ibox-contact-request-form.is-submitted-success .ibox-catalog-submit-row {
	display: none;
}

/* Mobile: single-column layout */
@media (max-width: 767px) {
	.ibox-contact-request-form .ibox-catalog-form-row {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-bottom: 16px;
	}

	.ibox-contact-request-form .ibox-catalog-submit-btn {
		width: 100%;
		text-align: center;
	}
}