/* ===================================================================
   Contact page (/contact/, post ID 135) polish pass — 2026-07-30
   -------------------------------------------------------------------
   Scoped entirely to `body.page-id-135` so nothing here can leak onto
   any other page. Enqueued from page-135.php, loaded AFTER
   strommen-v3-content (css-supplements/v3-content.css) so these rules
   win the cascade; selectors below also carry higher specificity than
   the .sv3-content-scoped rules they override, so the ordering is a
   belt-and-suspenders guarantee, not the only thing making this work.

   DIAGNOSIS (owner screenshot, 2026-07-30):
   Page 135's post_content carries a literal `<div class="sv3-content">`
   wrapper (baked into the page content itself -- present on BOTH local
   and production, confirmed via the REST API on strommeninc.com/contact/
   and a byte-for-byte diff of v3-content.css between the two). That
   wrapper pulls in the "unified V3 form styling" rules built for the V3
   specialty-page template family, which set
   `padding: 11px 13px !important` + `border: 2px solid !important` on
   every GF input/select but never touch the `height: 2.2em` those
   elements inherit from Astra's own Gravity Forms compatibility sheet.
   With box-sizing: border-box (set by GF's own theme CSS), 22px of
   vertical padding + 4px of border leaves ~4.5px of box for the text --
   hence the vertically clipped "Select One" / option text reported.
   This is a PRE-EXISTING PRODUCTION BUG, not something introduced by
   recent local-only CSS work -- v3-content.css is identical on both
   environments. Fixed below by giving the affected controls `height:
   auto` so the box grows to fit its own padding + line-height instead
   of being pinned to an inherited fixed height.

   Also pre-existing on production: this page uses Astra's "Plain
   Container" layout (body classes `ast-plain-container ast-no-sidebar`,
   identical on local + prod -- confirmed no sidebar is actually being
   rendered, so no sidebar/template-copy edit was needed here), which
   applies no max-width to .entry-content, letting the GF form's grid
   stretch edge-to-edge on wide viewports. Fixed below with a single
   centered max-width on .entry-content.

   NOT reproduced: the "thick red border on initial load" reported on
   the "What is your current level?" select. A clean load (local and
   prod) renders that field with `aria-invalid="false"` and no
   `.gfield_error` class, and the only red-border error rule in this
   theme (`#gform_wrapper_6 .gfield_error select`) is scoped to a
   different form entirely (the teacher application form, not form ID 1
   used here) -- it cannot bleed onto this page. No CSS rule was found
   that paints an error border on this field at rest. Most likely this
   was Gravity Forms' own (legitimate) client-validation error state,
   caught either right after a submit attempt or restored by the
   browser's back-forward cache on reload, not a resting-state styling
   bug. Nothing below touches error/validation styling one way or the
   other, so GF's real validation feedback still works normally.
   =================================================================== */

/* --- Comfortable single-column reading/form width, centered --- */
body.page-id-135 .entry-content {
	max-width: 680px;
	margin: 0 auto;
	padding: 0 20px;
}
body.page-id-135 .entry-content h1 {
	font-size: 30px;
	line-height: 1.15;
	margin: 0.2em 0 0.5em;
}
body.page-id-135 .sv3-content > p:first-child {
	font-size: 16px;
	color: #47474F;
	margin-bottom: 28px;
}

/* --- Field control sizing: fixes the vertical clipping (see diagnosis
   above) by letting height grow to fit padding + line-height instead of
   staying pinned to Astra's inherited 2.2em. Hairline, square-ish
   borders per the site's card v3 language. --- */
body.page-id-135 .gform_wrapper input[type=text],
body.page-id-135 .gform_wrapper input[type=email],
body.page-id-135 .gform_wrapper input[type=tel],
body.page-id-135 .gform_wrapper input[type=number],
body.page-id-135 .gform_wrapper input[type=password],
body.page-id-135 .gform_wrapper input[type=search],
body.page-id-135 .gform_wrapper input[type=date],
body.page-id-135 .gform_wrapper select,
body.page-id-135 .gform_wrapper textarea {
	height: auto !important;
	min-height: 46px;
	line-height: 1.4 !important;
	padding: 11px 14px !important;
	border: 1.5px solid #D9D9DF !important;
	border-radius: 2px !important;
	font-size: 15px !important;
	color: #1A1A2E;
	background: #fff;
	box-sizing: border-box;
}
body.page-id-135 .gform_wrapper textarea {
	min-height: 110px;
}
body.page-id-135 .gform_wrapper input:focus,
body.page-id-135 .gform_wrapper select:focus,
body.page-id-135 .gform_wrapper textarea:focus {
	border-color: #D81818 !important;
	outline: none;
}

/* --- Labels: consistent weight/spacing rhythm --- */
body.page-id-135 .gform_wrapper .gfield_label {
	font-weight: 700;
	color: #1A1A2E;
	font-size: 14px;
	margin-bottom: 6px;
}
body.page-id-135 .gform_wrapper .gfield_required {
	color: #D81818;
}

/* --- Grid rhythm: keep GF's own grid-gap (already a healthy 16px) but
   guarantee clean stacking under ~700px regardless of GF/theme version
   quirks in the half-width field classes. --- */
@media screen and (max-width: 700px) {
	body.page-id-135 .gform_wrapper .gfield--width-half,
	body.page-id-135 .gform_wrapper .gf_left_half,
	body.page-id-135 .gform_wrapper .gf_right_half {
		width: 100% !important;
		grid-column: 1 / -1 !important;
	}
}

/* --- Submit button: this is the general "Contact Us" inquiry form, not
   a booking action, so it takes the ink fill (site convention reserves
   red for booking CTAs -- see the "Get matched" module,
   .strm-get-matched__submit, in this same theme). Bumped up from
   v3-content.css's red 45px button to a clearer, higher-contrast
   primary action. --- */
body.page-id-135 .gform_wrapper input[type=submit],
body.page-id-135 .gform_wrapper .gform_button {
	background: #1A1A2E !important;
	border: 2px solid #1A1A2E !important;
	color: #fff !important;
	min-height: 48px;
	padding: 14px 34px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 2px !important;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
body.page-id-135 .gform_wrapper input[type=submit]:hover,
body.page-id-135 .gform_wrapper .gform_button:hover {
	background: #000 !important;
	border-color: #000 !important;
}

@media screen and (max-width: 480px) {
	body.page-id-135 .entry-content {
		padding: 0 16px;
	}
	body.page-id-135 .gform_wrapper input[type=submit],
	body.page-id-135 .gform_wrapper .gform_button {
		width: 100%;
	}
}

/* ===================================================================
   "Get matched" step-2 bridge banner (2026-07-31 "matchstep2" addendum)
   -------------------------------------------------------------------
   Injected by public/js/contact-match-prefill.js, directly above the GF
   form wrapper, ONLY when a visitor arrives with strommen_match=1 (never
   present on a plain /contact/ visit). Same V3 "branded callout" language
   as the "Get matched" module itself (.strm-get-matched in
   css-supplements/site-new-look-2023.css, /tutors/ etc.) -- cyan tint,
   bold 2px ink border, square corners -- so the two ends of the handoff
   read as one continuous flow rather than two different products. Colors
   hardcoded here (not var(--strm-sky-tint) etc.) because those custom
   properties are declared in site-new-look-2023.css's :root block, which
   this page never enqueues -- page-135.php only loads this stylesheet.
   =================================================================== */
body.page-id-135 .strm-match-banner {
	background: #E3F5FA;
	border: 2px solid #1A1A2E;
	border-radius: 0;
	padding: 16px 20px;
	margin: 0 0 24px;
}
body.page-id-135 .strm-match-banner__heading {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-weight: 800;
	font-size: 17px;
	letter-spacing: -0.01em;
	color: #1A1A2E;
	font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
}
body.page-id-135 .strm-match-banner__check {
	display: block;
	flex-shrink: 0;
	color: #009048;
}
body.page-id-135 .strm-match-banner__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #47474F;
	font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
}

/* One-time highlight fade on the prefilled VISIBLE field(s) (currently
   just the language select) so a visitor actually notices the prefill
   instead of it just being technically present. Class is added by JS on
   render and removed after the animation completes (animationend), so it
   only ever plays once per pageload, never loops. Respects
   prefers-reduced-motion below by skipping the animation entirely --
   the field is still prefilled, just without the motion cue. */
body.page-id-135 .strm-match-highlight {
	animation: strm-match-highlight-fade 1.5s ease-out;
}
@keyframes strm-match-highlight-fade {
	0% {
		background-color: #FFF3B0;
		box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.35);
	}
	100% {
		background-color: #fff;
		box-shadow: 0 0 0 0 rgba(255, 200, 0, 0);
	}
}
@media (prefers-reduced-motion: reduce) {
	body.page-id-135 .strm-match-highlight {
		animation: none;
	}
}

@media screen and (max-width: 480px) {
	body.page-id-135 .strm-match-banner {
		padding: 14px 16px;
	}
	body.page-id-135 .strm-match-banner__heading {
		font-size: 16px;
	}
}