/**
 * El Jefe's Taqueria — Careers application form
 * Seat EJT-CAREERS, 2026-08-27.
 *
 * Enqueued ONLY on the Careers page (see functions.php: testo_child_careers_assets).
 * Handle `testo-child-careers`, dependent on `testo-child-brand`, so the brand
 * tokens in :root are guaranteed present before these rules are read.
 *
 * ⛔ CASCADE NOTE, measured 2026-08-27 by EJT-MOBILE-NAV and re-confirmed here:
 * the Customizer row 1487 is emitted as <style id="wp-custom-css"> AFTER every
 * <link rel=stylesheet> in the head. Row 1487 defines `.ejt-btn` at (0,1,0).
 * This file therefore does NOT restyle `.ejt-btn` — the submit button reuses the
 * site button so it stays consistent — and any rule here that must beat row 1487
 * carries a `.ejt-apply` ancestor to reach (0,2,0). No !important is used.
 */

/* ⛔ The form's measure, and it lives HERE and not in Customizer row 1487.
 * `.wpcf7` is a site-wide selector and row 1487 is served on every page, so a
 * max-width there would silently narrow the live contact form on /contact-us/,
 * which carries its own `.wpcf7` at 1120px. This file is enqueued only on the
 * Careers page (is_page( array( 2278, 'careers' ) )), so the rule reaches this
 * form and nothing else. Measured by EJT-CF7-SPACING; re-measured by EJT-CF7-FIX.
 * `.wpcf7` has no competing width declaration, so (0,1,0) is enough.
 *
 * ⛔ LEFT-ALIGNED, NOT CENTRED (EJT-CF7-ALIGN, 2026-08-28). `margin-left: 0`
 * pins the box to the container's content edge; `margin-right: auto` absorbs all
 * the slack on the right. LONGHANDS DELIBERATELY, never the `margin` shorthand —
 * a shorthand here would reset the other side as a side effect. Nothing else in
 * this file, and nothing in Customizer row 1487, declares margin on `.wpcf7`.
 *
 * ⚠ The owner's attempt `.ejt-apply .wpcf7 { … }` selects ZERO elements: the
 * nesting is div.wpcf7 > form.wpcf7-form > div.ejt-apply, so `.ejt-apply` is a
 * DESCENDANT of `.wpcf7`, not an ancestor. It was a non-match, not a lost
 * override — querySelectorAll('.ejt-apply .wpcf7') === 0 on the live page. */
.wpcf7 {
	max-width: 560px;
	margin-left: 0;
	margin-right: auto;
}

.ejt-apply {
	--ejt-apply-hint:   #595959;  /* 7.00:1 on white — AA body                */
	--ejt-apply-line:   #858585;  /* --ejtb-gray-t1, 3.69:1 on white — WCAG 1.4.11 */
	--ejt-apply-error:  #C24544;  /* --ejtb-red, 4.97:1 on white — AA body    */

	max-width: 640px;
	font-family: var(--ejtb-font-body, 'Poppins', sans-serif);
	color: var(--ejtb-gray, #333333);
}

/* ---- fields ------------------------------------------------------------ */

.ejt-apply .ejt-apply-field {
	display: block;
	margin: 0 0 28px;
}

.ejt-apply .ejt-apply-field > label {
	display: block;
	margin: 0 0 8px;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ejtb-gray, #333333);
}

.ejt-apply .ejt-req {
	/* ⛔ The parent theme's `.wpcf7 span { display: block; margin-bottom: 30px }`
	 * (themes/testo/css/styles.css:3719, written for its demo booking form) reaches
	 * this span. `display` put "(required)" on its own line under every label, and
	 * the 30px COLLAPSED THROUGH the label's bottom edge — max(30, 8) — so the 8px
	 * set above was the computed value and had no effect on the pixel gap.
	 * (0,2,0) beats (0,1,1) on specificity, so no !important is needed. */
	display: inline;
	margin-bottom: 0;
	font-weight: 400;
	font-size: 14px;
	color: var(--ejt-apply-hint);
}

.ejt-apply .ejt-apply-hint {
	display: block;
	margin: 0 0 8px;   /* was 10px; matched to the label gap above */
	font-size: 14px;
	line-height: 1.5;
	color: var(--ejt-apply-hint);
}

/* The control wrapper CF7 emits around every field. */
.ejt-apply .wpcf7-form-control-wrap {
	display: block;
	/* Same parent rule as `.ejt-req` above: this span is the field <p>'s last
	 * in-flow child, so its 30px collapsed through the <p>'s bottom edge and beat
	 * the 28px set on `.ejt-apply-field`. Zeroing it lets that 28px operate. */
	margin-bottom: 0;
}

.ejt-apply .ejt-input,
.ejt-apply .ejt-select,
.ejt-apply .ejt-file {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;   /* 16px stops iOS Safari zooming the viewport on focus */
	line-height: 1.4;
	color: var(--ejtb-gray, #333333);
	background-color: var(--ejtb-paper, #FFFFFF);
	border: 1px solid var(--ejt-apply-line);
	border-radius: 2px;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.ejt-apply .ejt-select {
	/* keep the native control: it is keyboard operable and screen-reader
	 * correct for free, which a custom listbox would have to re-earn. */
	appearance: auto;
	height: auto;
	/* ⛔ The parent theme floats EVERY <select> below 767px:
	 * themes/testo/css/styles.css:7725 `select { float: left; max-width: 250px;
	 * width: 100% }`, specificity (0,0,1), read from Chrome's matched-rules list.
	 * A block box whose only in-flow child is a float has zero height, so the
	 * `.wpcf7-form-control-wrap` around the select collapsed to 0, the control
	 * escaped its <p>, and at 390 it OVERLAPPED the next label by 31px.
	 * The rules above already beat that parent rule on `width` and `max-width`
	 * at (0,2,0) — this file simply never spoke on `float`, so there was nothing
	 * to beat. (0,2,0) over (0,0,1); no !important. Above 767px the parent rule
	 * is not in play and the computed float is already `none`, so this is inert
	 * there. Measured before and after by EJT-CF7-ALIGN. */
	float: none;
}

.ejt-apply .ejt-file {
	padding: 10px 12px;
	background-color: #FCFCFC;
	cursor: pointer;
}

/* ---- focus: visible, and never removed ---------------------------------- */

.ejt-apply .ejt-input:focus,
.ejt-apply .ejt-select:focus,
.ejt-apply .ejt-file:focus,
.ejt-apply .ejt-apply-submit:focus {
	outline: 3px solid var(--ejtb-red, #C24544);
	outline-offset: 2px;
	border-color: var(--ejtb-red, #C24544);
}

/* Keep the ring for keyboard users even where the theme resets outlines. */
.ejt-apply .ejt-input:focus-visible,
.ejt-apply .ejt-select:focus-visible,
.ejt-apply .ejt-file:focus-visible,
.ejt-apply .ejt-apply-submit:focus-visible {
	outline: 3px solid var(--ejtb-red, #C24544);
	outline-offset: 2px;
}

/* ---- validation --------------------------------------------------------- */

.ejt-apply .wpcf7-not-valid {
	border-color: var(--ejt-apply-error);
	box-shadow: 0 0 0 1px var(--ejt-apply-error);
}

.ejt-apply .wpcf7-not-valid-tip {
	display: block;
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--ejt-apply-error);
}

/* CF7's own response banner, shown for form-level messages. */
.ejt-apply-wrap .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 16px;
	border: 2px solid var(--ejtb-gray-t4, #CCCCCC);
	border-radius: 2px;
	font-size: 15px;
	line-height: 1.5;
}

.ejt-apply-wrap form.invalid .wpcf7-response-output,
.ejt-apply-wrap form.failed .wpcf7-response-output,
.ejt-apply-wrap form.aborted .wpcf7-response-output {
	border-color: #C24544;
	color: #8F302F;   /* 7.98:1 on white — AA body, measured by EJT-BRAND */
}

.ejt-apply-wrap form.sent .wpcf7-response-output {
	border-color: #299631;
	color: #1F6E24;
}

/* ---- submit ------------------------------------------------------------- */

/* `.ejt-btn` is defined in Customizer row 1487 and served last; the button
 * deliberately inherits it. Only geometry is set here, at (0,2,0) so it wins
 * over row 1487's (0,1,0) without !important. */
.ejt-apply .ejt-apply-submit {
	display: inline-block;
	padding: 15px 42px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	border-width: 1px;
	border-style: solid;
	border-radius: 2px;
	cursor: pointer;
}

.ejt-apply .ejt-apply-actions {
	margin: 0;
}

/* CF7's AJAX spinner sits next to the button. */
.ejt-apply .wpcf7-spinner {
	margin: 0 0 0 12px;
	vertical-align: middle;
}

/* ---- narrow viewports --------------------------------------------------- */

@media (max-width: 767px) {
	.ejt-apply .ejt-apply-submit {
		display: block;
		width: 100%;
		text-align: center;
	}
	.ejt-apply .wpcf7-spinner {
		display: block;
		margin: 12px auto 0;
	}
}

/* ---- download buttons (Elementor-rendered, styled by the kit) ----------- */

/* The two application-PDF buttons are Elementor button widgets and take their
 * colour from the kit globals. Only the icon spacing is set here. */
.ejt-careers-downloads .elementor-button {
	margin: 0 12px 12px 0;
}

@media (prefers-reduced-motion: reduce) {
	.ejt-apply .ejt-input,
	.ejt-apply .ejt-select,
	.ejt-apply .ejt-file {
		transition: none;
	}
}