/**
 * RSI Toolkit — Job Application Form widget.
 *
 * Accent bar, heading, intro, then one Gravity Form on a near-white panel.
 * Replaces careers.css (the job board), removed in 1.27.0.
 *
 * Logical properties throughout, so Arabic and English mirror off one
 * stylesheet and rtl.css needs no entry for this widget. Mobile-first.
 *
 * ⚠️ The Gravity Forms rules below are prefixed with .rsi-apply on purpose.
 * Woodmart's base stylesheet styles form controls by TAG and by ATTRIBUTE
 * (`input[type="text"]`, `textarea`, `select`), which is specificity 0,1,0 or
 * 0,0,1 — a bare `.gform_wrapper input` merely ties with the attribute rules,
 * and the theme sheet loads after this one, so the theme wins on source order.
 * The ancestor takes these to 0,3,0. Do not simplify the selectors.
 * (Same trap as the old careers search input, and as the Woodmart button note.)
 */

.rsi-apply {
	--rsi-ap-accent: #bf0031;
	--rsi-ap-panel-bg: #f7f8f9;
	--rsi-ap-ink: #0a0a0a;
	--rsi-ap-muted: #5b6670;
	--rsi-ap-line: #e5e7eb;

	background: #ffffff;
}

.rsi-apply__inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 64px 0;
}

/* ------------------------------- header --------------------------------- */
.rsi-apply__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 32px;
}

.rsi-apply__bar {
	display: block;
	width: 48px;
	height: 9px;
	border-radius: 2px;
	background: var(--rsi-ap-accent);
}

.rsi-apply__heading {
	margin: 0;
	font-family: 'Alexandria', sans-serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 1.25;
	letter-spacing: .25px;
	color: var(--rsi-ap-ink);
	text-align: start;
}

.rsi-apply__intro {
	margin: 0;
	max-width: 620px;
	font-family: 'Alexandria', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 27px;
	color: var(--rsi-ap-muted);
	text-align: start;
}

/* Editor-only: the widget returns nothing on the front end when no form is set. */
.rsi-apply__notice {
	margin: 0;
	padding: 20px 24px;
	border: 1px dashed var(--rsi-ap-line);
	border-radius: 12px;
	font-family: 'Alexandria', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--rsi-ap-muted);
	text-align: start;
}

/* -------------------------------- form ---------------------------------- */
.rsi-apply__form {
	background: var(--rsi-ap-panel-bg);
	border: 1px solid var(--rsi-ap-line);
	border-radius: 16px;
	padding: 24px 20px;
}

.rsi-apply__form .gform_wrapper {
	margin: 0;
}

.rsi-apply .gform_wrapper,
.rsi-apply .gform_wrapper label,
.rsi-apply .gform_wrapper legend,
.rsi-apply .gform_wrapper input,
.rsi-apply .gform_wrapper textarea,
.rsi-apply .gform_wrapper select,
.rsi-apply .gform_wrapper .gform_button {
	font-family: 'Alexandria', sans-serif;
}

.rsi-apply .gform_wrapper .gfield_label,
.rsi-apply .gform_wrapper legend.gfield_label {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.5;
	color: var(--rsi-ap-ink);
	text-align: start;
}

.rsi-apply .gform_wrapper input[type="text"],
.rsi-apply .gform_wrapper input[type="email"],
.rsi-apply .gform_wrapper input[type="tel"],
.rsi-apply .gform_wrapper input[type="url"],
.rsi-apply .gform_wrapper input[type="number"],
.rsi-apply .gform_wrapper textarea,
.rsi-apply .gform_wrapper select {
	width: 100%;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: var(--rsi-ap-ink);
	background: #ffffff;
	border: 1px solid var(--rsi-ap-line);
	border-radius: 6px;
	padding: 14px 16px;
	height: auto; /* Woodmart pins a height on bare inputs. */
	text-align: start;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

.rsi-apply .gform_wrapper select {
	/* Room for the native arrow on the trailing edge. */
	padding-inline-end: 40px;
	cursor: pointer;
}

.rsi-apply .gform_wrapper textarea {
	min-height: 140px;
	resize: vertical;
}

.rsi-apply .gform_wrapper input[type="text"]:focus,
.rsi-apply .gform_wrapper input[type="email"]:focus,
.rsi-apply .gform_wrapper input[type="tel"]:focus,
.rsi-apply .gform_wrapper input[type="url"]:focus,
.rsi-apply .gform_wrapper input[type="number"]:focus,
.rsi-apply .gform_wrapper textarea:focus,
.rsi-apply .gform_wrapper select:focus {
	outline: none;
	border-color: var(--rsi-ap-accent);
	box-shadow: 0 0 0 3px rgba(191, 0, 49, .12);
}

/* The file input is a native control — left as the browser draws it apart from
   the type voice, because restyling it means hiding it behind a label and that
   costs keyboard users the filename readout. */
.rsi-apply .gform_wrapper input[type="file"] {
	font-family: 'Alexandria', sans-serif;
	font-size: 14px;
	color: var(--rsi-ap-muted);
	max-width: 100%;
}

.rsi-apply .gform_wrapper .gfield_required {
	color: var(--rsi-ap-accent);
}

.rsi-apply .gform_wrapper .gfield_description,
.rsi-apply .gform_wrapper .gform_fileupload_rules {
	font-family: 'Alexandria', sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: var(--rsi-ap-muted);
	text-align: start;
}

/* The consent checkbox keeps its native control; only the wording is re-voiced. */
.rsi-apply .gform_wrapper .gfield--type-consent label {
	font-weight: 400;
	font-size: 14px;
	line-height: 1.7;
	color: var(--rsi-ap-muted);
}

.rsi-apply .gform_wrapper .gform_footer {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* ⚠️ THE SUBMIT BUTTON IS STYLED THROUGH GRAVITY FORMS' OWN VARIABLES.
 *
 * Two different stylesheets want to own this button, and neither of them loses
 * to a plain rule in this file — measured on staging, where the button rendered
 * #204CE5, 3px radius, `0 16px` padding, weight 500, min-height 38px while every
 * other rule in this stylesheet applied normally:
 *
 *   1. Gravity Forms' ORBITAL theme (the actual owner here). Its framework
 *      stylesheet paints buttons entirely from custom properties declared on
 *      `.gform-theme--framework` — `--gf-ctrl-btn-bg-color-primary`
 *      (= `--gf-color-primary`, #204ce5), `--gf-ctrl-btn-radius`,
 *      `--gf-ctrl-btn-padding-y: 0`, `--gf-ctrl-btn-size`, `--gf-ctrl-btn-font-weight: 500`.
 *   2. Woodmart's `base.css`, whose `:is(.btn, .button, button, …)` rule paints
 *      from `--btn-*` and is enqueued AFTER every plugin stylesheet.
 *
 * So this block sets the VARIABLES BOTH OF THEM READ rather than fighting either
 * on specificity — the owning rule then paints the RSI button whichever one wins,
 * and the same holds if the form is ever switched to GF's "basic" theme. GF's
 * declarations sit on `.gform-theme--framework` (0,1,0) and Woodmart's on the
 * button (0,1,0); `.rsi-apply .gform_wrapper` and `.rsi-apply … .gform_button`
 * are 0,2,0 / 0,3,0, so these win cleanly with no `!important`.
 *
 * ⚠️ Don't "simplify" this to a plain `background`/`border-radius` block. That is
 * exactly what was tried first, and it did nothing.
 */
.rsi-apply .gform_wrapper {
	/* The form's whole accent — required marks and focus rings included, which
	   is why this is set on the wrapper and not just on the button. */
	--gf-color-primary: var(--rsi-ap-accent);
	--gf-ctrl-accent-color: var(--rsi-ap-accent);

	--gf-ctrl-btn-bg-color-primary: var(--rsi-ap-accent);
	--gf-ctrl-btn-bg-color-hover-primary: var(--rsi-ap-accent);
	--gf-ctrl-btn-bg-color-focus-primary: var(--rsi-ap-accent);
	--gf-ctrl-btn-color-primary: #ffffff;
	--gf-ctrl-btn-color-hover-primary: #ffffff;
	--gf-ctrl-btn-color-focus-primary: #ffffff;
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-border-color-hover-primary: transparent;
	--gf-ctrl-btn-border-color-focus-primary: transparent;

	--gf-ctrl-btn-radius: 999px;
	--gf-ctrl-btn-padding-y: 14px;
	--gf-ctrl-btn-font-family: 'Alexandria', sans-serif;
	--gf-ctrl-btn-font-weight: 600;

	/* ⚠️ The horizontal padding, font size and height come from the `-md`
	   variants, NOT the unsuffixed ones. GF gives every button a size and the
	   submit button's own rule reads `--gf-ctrl-btn-padding-x-md`,
	   `--gf-ctrl-btn-font-size-md` and `--gf-ctrl-btn-size-md` directly — so
	   setting only `--gf-ctrl-btn-padding-x` left the button at GF's 16px, which
	   is what happened on the first pass. Both are set: the unsuffixed pair is
	   the documented knob and covers any other size GF might render. */
	--gf-ctrl-btn-padding-x: 32px;
	--gf-ctrl-btn-padding-x-md: 32px;
	--gf-ctrl-btn-font-size: 15px;
	--gf-ctrl-btn-font-size-md: 15px;
	--gf-ctrl-btn-size: auto; /* Not the 38px floor — the padding sets the height. */
	--gf-ctrl-btn-size-md: auto;
}

.rsi-apply .gform_wrapper .gform_button {
	/* What Woodmart's `:is()` rule reads, for the same button. */
	--btn-bgcolor: var(--rsi-ap-accent);
	--btn-bgcolor-hover: var(--rsi-ap-accent);
	--btn-color: #ffffff;
	--btn-color-hover: #ffffff;
	--btn-brd-radius: 999px;
	--btn-brd-width: 0px;
	--btn-brd-color: transparent;
	--btn-brd-color-hover: transparent;
	--btn-padding: 14px 32px;
	--btn-font-weight: 600;
	--btn-font-family: 'Alexandria', sans-serif;
	--btn-font-size: 15px;
	--btn-transform: none;
	--btn-height: 0px; /* Not the theme's 42px floor either. */

	/* And the literal values, for anywhere neither of them is in the way. */
	background: var(--rsi-ap-accent);
	color: #ffffff;
	border: 0;
	border-radius: 999px;
	padding: 14px 32px;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
}

.rsi-apply .gform_wrapper .gform_button:hover,
.rsi-apply .gform_wrapper .gform_button:focus {
	opacity: .88;
}

/* Validation + confirmation, in the section's own voice rather than GF's. */
.rsi-apply .gform_wrapper .gform_validation_errors,
.rsi-apply .gform_wrapper .validation_message,
.rsi-apply .gform_confirmation_message {
	font-family: 'Alexandria', sans-serif;
	text-align: start;
}

.rsi-apply .gform_confirmation_message {
	font-size: 16px;
	line-height: 27px;
	color: var(--rsi-ap-ink);
}

/* ------------------------------- desktop -------------------------------- */
@media (min-width: 768px) {
	.rsi-apply__inner {
		padding: 96px 0;
	}

	.rsi-apply__form {
		padding: 36px 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Woodmart's own `transition: all .25s ease` on the button, turned off. */
	.rsi-apply .gform_wrapper .gform_button {
		transition: none;
	}
}