/**
 * Contact — page styles.
 *
 * The comp hand-wrote a static <form>; the real page renders Gravity Forms, whose
 * markup nests fields in .gform_fields > .gfield and adds its own theme CSS. These
 * rules re-point the comp's .form-card styling at GF's structure so the rendered
 * form is visually identical to the comp.
 */

/* GF's own wrappers must not add spacing on top of .form-card's padding. */
.eti-tpl.eti-tpl--theme-contact-php .form-card .gform_wrapper {
	margin: 0;
}

.eti-tpl.eti-tpl--theme-contact-php .form-card .gform_fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eti-tpl.eti-tpl--theme-contact-php .form-card .gfield {
	margin: 0;
}

/* Comp: label{margin-top:20px} with the first label flush to the card top. */
.eti-tpl.eti-tpl--theme-contact-php .form-card .gfield_label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 8px;
	margin-top: 20px;
}

/*
 * The first VISIBLE field, which is not always the first .gfield.
 *
 * With GF's anti-spam on (it is, on production), GF injects a honeypot as the
 * first .gfield — a .gform_validation_container that is display:none. That steals
 * :first-child from the real first field, so the reset landed on an invisible
 * element and the Name label kept its 20px, pushing the whole form down. The
 * second selector covers the honeypot case; the first covers anti-spam being off.
 */
.eti-tpl.eti-tpl--theme-contact-php .form-card .gfield:first-child .gfield_label,
.eti-tpl.eti-tpl--theme-contact-php .form-card .gform_validation_container + .gfield .gfield_label {
	margin-top: 0;
}

.eti-tpl.eti-tpl--theme-contact-php .form-card input[type="text"],
.eti-tpl.eti-tpl--theme-contact-php .form-card input[type="email"],
.eti-tpl.eti-tpl--theme-contact-php .form-card select,
.eti-tpl.eti-tpl--theme-contact-php .form-card textarea {
	width: 100%;
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	color: var(--ink);
	font-size: 14.5px;
	font-family: inherit;

	/* GF's framework pins every control to block-size:var(--gf-local-height),
	   which computes to 38px. With border-box, 24px of padding and a 1.5px
	   border, that leaves an 11px content box for 14.5px text — inputs survive
	   because GF also gives them a matching line-height and centre their text
	   internally, but the native select clips its descenders.
	   `auto` lets padding drive the height, as it does in the comp (input 43px,
	   select 45px). Setting GF's own custom property works with its cascade
	   instead of fighting it, so no !important is needed here. */
	--gf-local-height: auto;
	--gf-local-min-height: 0;

	/* With height:auto, GF's line-height (38px, sized to the old fixed height)
	   would then drive the box instead — inflating the input to 64px and the
	   textarea to 244px. The comp uses `normal` on all three controls. */
	--gf-local-line-height: normal;
	line-height: normal;
}

/**
 * GF sets the placeholder to the field's own text colour, so placeholders were
 * indistinguishable from typed input. The comp relied on the browser default
 * (#757575). This uses the palette's ink at 55% instead of a neutral grey, so the
 * placeholder keeps the design's purple cast while reading as clearly secondary.
 *
 * ~4.4:1 on the white field. Every field here has a visible <label>, so the
 * placeholder is supplementary rather than the accessible name.
 */
.eti-tpl.eti-tpl--theme-contact-php .form-card input::placeholder,
.eti-tpl.eti-tpl--theme-contact-php .form-card textarea::placeholder {
	color: rgba(22, 16, 51, .55);
	opacity: 1; /* Firefox applies its own opacity to ::placeholder. */
}

.eti-tpl.eti-tpl--theme-contact-php .form-card input:focus,
.eti-tpl.eti-tpl--theme-contact-php .form-card select:focus,
.eti-tpl.eti-tpl--theme-contact-php .form-card textarea:focus {
	outline: none;
	border-color: var(--purple);
}

.eti-tpl.eti-tpl--theme-contact-php .form-card textarea {
	/* The comp's textarea had no rows attribute, so min-height alone gave it
	   100px. GF renders rows="10", whose intrinsic height wins over min-height —
	   hence an explicit height to match the comp. Still user-resizable. */
	height: 100px;
	min-height: 100px;
	resize: vertical;
}

/* The comp used a native select and let the browser draw the arrow. GF sets
   appearance:none and supplies its own arrow as a background-image, which the
   `background` shorthand above removes — leaving a control with no affordance. */
.eti-tpl.eti-tpl--theme-contact-php .form-card select {
	-webkit-appearance: auto;
	appearance: auto;
}

/* The comp's submit button reuses .cta-pill; GF renders a plain <input>/<button>.
   GF's theme framework sizes the button with LOGICAL properties fed by custom
   properties (inline-size: var(--gf-local-width)), which override a physical
   `width`; its framework sheet also loads after this file and wins the remaining
   ties at equal specificity. !important is the pragmatic escape hatch here — it is
   scoped to this one button inside this one template, and the alternative is
   chasing GF's selector weights on every plugin update. */
.eti-tpl.eti-tpl--theme-contact-php .form-card .gform_footer {
	display: block;
	margin: 0;
	padding: 0;
}

.eti-tpl.eti-tpl--theme-contact-php .form-card .gform_button {
	margin-top: 26px !important;
	inline-size: 100% !important;
	text-align: center;
	border: none !important;
	cursor: pointer;
	background: var(--grad) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	font-family: inherit;
	padding: 15px 34px !important;
	border-radius: 100px !important;
	box-shadow: 0 10px 26px rgba(139, 63, 245, .32);
}

.eti-tpl.eti-tpl--theme-contact-php .form-card .gform_button:hover {
	filter: brightness(1.08);
}

/*
 * Required markers.
 *
 * GF sizes the asterisk at 12px against a 13px label, so it read as a speck of
 * lint rather than a marker. 22px with line-height:1 gives it real presence; the
 * nudge is because an asterisk glyph sits high in its em box, so at this size it
 * floats well above the label's cap height and reads as detached. The nudge drops
 * it back onto the label. 22px is deliberately the ceiling — at 26px it starts to
 * out-weigh the label it modifies.
 *
 * This covers the asterisk in the legend sentence too, not just the field labels:
 * the legend exists to tell the reader what the marker looks like, so showing it
 * at anything other than its real size defeats the point.
 */
.eti-tpl.eti-tpl--theme-contact-php .form-card .gfield_required {
	color: var(--purple);
}

.eti-tpl.eti-tpl--theme-contact-php .form-card .gfield_required_asterisk {
	font-size: 22px;
	/* line-height:0 keeps the enlarged glyph out of the label's line box. Without
	   it the 22px asterisk grew every required field's label row by 3px, so
	   required and optional fields stopped sharing a vertical rhythm. */
	line-height: 0;
	margin-left: 2px;
	position: relative;
	top: 4px;
}

/*
 * GF adds this line whenever the required indicator is an asterisk. Unstyled it
 * inherits 20px — larger than the 13px labels it exists to explain, so it read as
 * a heading. Sized to the labels and dimmed to sit behind them.
 */
.eti-tpl.eti-tpl--theme-contact-php .form-card .gform_required_legend {
	font-size: 13px;
	color: var(--dim);
}

/*
 * Breathing room between the legend and the first field. The spacing goes on
 * .gform_heading rather than the legend itself: the heading is GF's container for
 * this block and is a sibling of the <form>, so the gap survives if GF ever adds a
 * form title or description alongside the legend. It cannot come from the first
 * label's margin-top either — that is reset to 0 so the label sits flush when the
 * legend is absent (required indicator set to text rather than asterisk).
 */
.eti-tpl.eti-tpl--theme-contact-php .form-card .gform_heading {
	margin-bottom: 14px;
}

.eti-tpl.eti-tpl--theme-contact-php .form-card .validation_message,
.eti-tpl.eti-tpl--theme-contact-php .form-card .gform_validation_errors {
	font-size: 13px;
	margin-top: 8px;
}

/* Replaces the comp's inline styles on the "Connect" card lines. */
.eti-tpl.eti-tpl--theme-contact-php .info-note {
	font-size: 14.5px;
	color: var(--dim);
}

.eti-tpl.eti-tpl--theme-contact-php .info-note + .info-note {
	margin-top: 6px;
}

.eti-tpl.eti-tpl--theme-contact-php .info-note a {
	color: var(--blue);
	font-weight: 700;
}