/* ==========================================================================
   Velocity Careers — role modal and application form.

   The modal shell (.vel-modal / .vel-modal-backdrop / .vel-modal-card /
   .vel-modal-close / .vel-modal-title) is the theme's, styled in velocity.css.
   Everything here either extends that shell for a taller, scrollable dialog or
   styles the .velcr-* form, which has no equivalent in the theme.

   Design tokens come from :root in velocity.css. The fallbacks are the same
   values, so this stylesheet still renders correctly if it is ever loaded on a
   page where the theme CSS is not.
   ========================================================================== */

/* ----- modal shell overrides -------------------------------------------- */

/* A job description is long, so unlike the Book a Demo modal this one has to
   scroll internally and be capped to the viewport. The card becomes the flex
   container; .velcr-modal-scroll is the only thing that scrolls. */
.velcr-modal .velcr-modal-card {
	max-width: 720px;
	max-height: 86vh;
	margin: 7vh auto 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.velcr-modal .vel-modal-close {
	z-index: 2;
}

/* flex:1 1 auto so it fills the capped card, and min-height:0 so it is allowed
   to shrink below its content. Without that second one a flex item's automatic
   minimum size floors it at the full height of the description plus the form,
   overflow-y has no constrained height to scroll inside, and the card's
   overflow:hidden clips the lot — a white, empty dialog. */
.velcr-modal-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 40px 44px 44px;
	-webkit-overflow-scrolling: touch;
}

.velcr-modal-head {
	padding-right: 40px; /* clears the close button */
}

.velcr-modal .vel-modal-title {
	margin-bottom: 6px;
}

.velcr-modal-meta {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--vel-slate-light, #74829A);
	margin: 0 0 24px;
}

/* ----- role description ------------------------------------------------- */

.velcr-modal-content {
	color: var(--vel-slate, #41546b);
	font-size: 16px;
	line-height: 1.7;
}

.velcr-modal-content > :first-child { margin-top: 0; }
.velcr-modal-content > :last-child { margin-bottom: 0; }

.velcr-modal-content h2,
.velcr-modal-content h3,
.velcr-modal-content h4 {
	color: var(--vel-navy, #0E2037);
	font-weight: 600;
	line-height: 1.35;
	margin: 28px 0 10px;
}

.velcr-modal-content h2 { font-size: 20px; }
.velcr-modal-content h3 { font-size: 17px; }
.velcr-modal-content h4 { font-size: 15px; }

.velcr-modal-content p { margin: 0 0 14px; }

.velcr-modal-content ul,
.velcr-modal-content ol {
	margin: 0 0 16px;
	padding-left: 20px;
}

.velcr-modal-content li { margin: 0 0 8px; }

.velcr-modal-content a {
	color: var(--vel-navy, #0E2037);
	text-decoration: underline;
}

.velcr-modal-content img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

/* ----- apply form ------------------------------------------------------- */

.velcr-apply-wrap {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--vel-line, #e6ebf1);
}

.velcr-apply-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--vel-navy, #0E2037);
	margin: 0 0 18px;
}

/* The form is replaced by the confirmation once it succeeds. */
.velcr-form.is-done .velcr-row,
.velcr-form.is-done .velcr-field,
.velcr-form.is-done .velcr-actions {
	display: none;
}

.velcr-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.velcr-field {
	margin: 0 0 16px;
}

.velcr-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--vel-navy, #0E2037);
	margin: 0 0 6px;
}

.velcr-req { color: var(--vel-orange-deep, #e08758); }

.velcr-opt {
	font-weight: 500;
	color: var(--vel-slate-light, #74829A);
}

.velcr-field input[type="text"],
.velcr-field input[type="email"],
.velcr-field input[type="tel"],
.velcr-field textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 15px;
	color: var(--vel-navy, #0E2037);
	background: #fff;
	border: 1px solid var(--vel-line, #e6ebf1);
	border-radius: var(--vel-radius-btn, 10px);
	padding: 11px 14px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.velcr-field textarea {
	resize: vertical;
	min-height: 96px;
	line-height: 1.6;
}

.velcr-field input:focus,
.velcr-field textarea:focus {
	outline: none;
	border-color: var(--vel-navy-soft, #1d3252);
	box-shadow: 0 0 0 3px rgba(29, 50, 82, .12);
}

.velcr-field input::placeholder,
.velcr-field textarea::placeholder {
	color: var(--vel-slate-light, #74829A);
}

/* ----- file input ------------------------------------------------------- */

.velcr-file {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	/* Containing block for the visually-hidden file input below. Without it the
	   input is positioned against the fixed modal shell instead of this row, and
	   the focus the browser restores after the file picker closes scrolls
	   .velcr-modal-scroll to its maximum — the form vanishes off the top. */
	position: relative;
}

/* Visually hidden, not display:none — the real input stays focusable and
   keyboard-operable, and the <label> is what people click. */
.velcr-file input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.velcr-file-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px !important;
	font-weight: 600;
	color: var(--vel-navy, #0E2037) !important;
	background: var(--vel-bg-soft, #f5f7fa);
	border: 1px dashed var(--vel-line, #e6ebf1);
	border-radius: var(--vel-radius-btn, 10px);
	padding: 10px 16px;
	margin: 0 !important;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.velcr-file-btn:hover {
	background: #eef2f7;
	border-color: var(--vel-slate-light, #74829A);
}

.velcr-file-btn svg { width: 16px; height: 16px; }

/* The file input is off-screen, so its focus ring has to be drawn on the
   label instead or keyboard users get no focus indication at all. */
.velcr-file input[type="file"]:focus-visible + .velcr-file-btn {
	outline: 2px solid var(--vel-navy-soft, #1d3252);
	outline-offset: 2px;
}

.velcr-file-name {
	font-size: 14px;
	color: var(--vel-slate, #41546b);
	word-break: break-all;
}

.velcr-file-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--vel-slate-light, #74829A);
	cursor: pointer;
}

.velcr-file-clear:hover { color: var(--vel-navy, #0E2037); }
.velcr-file-clear svg { width: 13px; height: 13px; }

.velcr-hint {
	font-size: 12px;
	color: var(--vel-slate-light, #74829A);
	margin: 8px 0 0;
}

/* ----- screen-reader-only text ------------------------------------------ */

/* The role name appended to every Apply/View button rides in a
   .screen-reader-text span. That class is a core-theme convention, not
   something WordPress guarantees to a front end, and neither velocity.css nor
   the page stylesheets define it — so without this rule the label reads
   "View role for Senior SW Engineer" in plain sight on the button. Defined
   defensively: if the parent theme does supply it, this matches it. */
.velcr-modal .screen-reader-text,
.velp-ab-role .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ----- honeypot --------------------------------------------------------- */

/* Off-screen rather than display:none or hidden — some bots skip fields that
   are obviously not rendered, and this one is meant to look fillable. */
.velcr-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ----- feedback and actions --------------------------------------------- */

.velcr-feedback {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

.velcr-feedback:empty { display: none; }

.velcr-feedback.is-error {
	color: #b32d2e;
	background: #fcf0f1;
	border-radius: var(--vel-radius-btn, 10px);
	padding: 10px 14px;
	margin: 0 0 14px;
}

.velcr-feedback.is-success {
	color: #1c5f2c;
	background: #f0f7f0;
	border-radius: var(--vel-radius-btn, 10px);
	padding: 14px 16px;
	font-weight: 500;
}

.velcr-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 18px;
}

.velcr-submit[disabled] {
	opacity: .6;
	cursor: default;
}

.velcr-privacy {
	font-size: 12px;
	color: var(--vel-slate-light, #74829A);
	margin: 0;
	flex: 1 1 220px;
}

/* ----- careers row: the button is a <button> now ------------------------ */

/* .velp-ab-role's Apply control used to always be an <a>. For inline roles it
   is a <button>, which carries UA styles the theme's .vel-btn never had to
   override. */
.velp-ab-role .velcr-open {
	font-family: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

/* ----- responsive ------------------------------------------------------- */

@media (max-width: 640px) {
	.velcr-modal .velcr-modal-card {
		max-height: 92vh;
		margin: 4vh auto 0;
		border-radius: 16px;
	}

	.velcr-modal-scroll {
		padding: 30px 22px 32px;
	}

	.velcr-row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.velcr-modal .vel-modal-title { font-size: 20px; }
}

/* ----- reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.velcr-field input,
	.velcr-field textarea,
	.velcr-file-btn {
		transition: none;
	}
}