/* ==========================================================================
   Careers page: page-careers.php (.wf-careers, alongside .wf-industry.wf-service
   -- see inc/careers.php).

   Loaded AFTER assets/css/industry.css and assets/css/service.css, which own
   the shared section primitives this template reuses (.wf-industry__section,
   .wf-home-head, .wf-svc-grid, .wf-svc-tile, .wf-svc-prose). Only the
   careers-only blocks live here: the perk tile's image icon, the open
   position cards, and the WPForms résumé-upload card.

   SPECIFICITY NOTE -- same as industry.css/service.css/contact.css:
   Elementor's kit stylesheet ships element rules at 0-1-1
   (.elementor-kit-6 a / button / img), which beat a bare single class, so the
   .wf-careers scope on every rule (plus the resets below) is load-bearing,
   not cosmetic.
   ========================================================================== */

/* ---------- Scope resets ---------- */
body .wf-careers a {
	color: inherit;
}

body .wf-careers img {
	border-radius: 0;
	max-width: 100%;
	height: auto;
}

.wf-careers [hidden] {
	display: none !important;
}

/* ---------- Section rhythm ---------- */
.wf-careers .wf-careers__section--perks,
.wf-careers .wf-careers__section--apply {
	background: var(--wf-bg);
}

/* ---------- Perk tile icon (an uploaded image, not an inline SVG) -------- */
.wf-careers .wf-careers__perk-icon {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 16px;
}

.wf-careers .wf-careers__perk-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---------- Open positions ---------- */
.wf-careers__positions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	max-width: 860px;
	margin-inline: auto;
}

.wf-careers__position {
	padding: 24px;
	background: var(--wf-white);
	border: 1px solid var(--wf-border);
	border-radius: var(--wf-radius-md);
	box-shadow: var(--wf-shadow-sm);
}

.wf-careers__position-title {
	color: var(--wf-text-dark);
}

.wf-careers__position-meta {
	margin: 6px 0 0;
	font: 600 .8125rem/1.4 var(--wf-font-body);
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--wf-text-mute);
}

.wf-careers__position-desc {
	margin: 16px 0 0;
	font: 400 .9375rem/1.65 var(--wf-font-body);
	color: var(--wf-text);
}

.wf-careers__position-desc > :first-child {
	margin-top: 0;
}

.wf-careers__position-desc > :last-child {
	margin-bottom: 0;
}

.wf-careers__position-cta {
	margin-top: 20px;
}

.wf-careers__no-positions {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
	font: 400 1.0625rem/1.6 var(--wf-font-body);
	color: var(--wf-text);
}

/* ---------- Apply / résumé form card ---------- */
.wf-careers__form {
	max-width: 820px;
	margin-inline: auto;
	padding: 28px;
	background: var(--wf-white);
	border: 1px solid var(--wf-border);
	border-radius: var(--wf-radius-md);
	box-shadow: var(--wf-shadow-sm);
}

/* WPForms (Careers "Apply" form, id 530) -- normalised to the site's own
   field/button style, same treatment as assets/css/contact.css. */
.wf-careers .wpforms-form input[type="text"],
.wf-careers .wpforms-form input[type="email"],
.wf-careers .wpforms-form input[type="tel"],
.wf-careers .wpforms-form input[type="url"],
.wf-careers .wpforms-form input[type="number"],
.wf-careers .wpforms-form textarea,
.wf-careers .wpforms-form select {
	box-sizing: border-box;
	width: 100%;
	padding: 12px;
	border: 1px solid var(--wf-border);
	border-radius: var(--wf-radius-sm);
	font: 400 1rem/1.4 var(--wf-font-body);
	color: var(--wf-text-dark);
	background: var(--wf-white);
}

/* The file upload (Resume) field: left plain, no bordered-box treatment. */
.wf-careers .wpforms-form input[type="file"] {
	font: 400 .9375rem/1.4 var(--wf-font-body);
	color: var(--wf-text);
}

.wf-careers .wpforms-form input:focus,
.wf-careers .wpforms-form textarea:focus,
.wf-careers .wpforms-form select:focus {
	outline: 2px solid var(--wf-cyan);
	outline-offset: 1px;
}

.wf-careers .wpforms-submit {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font: 600 1rem/1 var(--wf-font-body);
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 13px 21px;
	border: 0;
	border-radius: var(--wf-radius-sm);
	background: linear-gradient(90deg, var(--wf-blue) 0%, var(--wf-cyan) 100%);
	color: var(--wf-white);
	cursor: pointer;
	transition: background var(--wf-dur) var(--wf-ease), color var(--wf-dur) var(--wf-ease);
}

.wf-careers .wpforms-submit:hover,
.wf-careers .wpforms-submit:focus-visible {
	background: var(--wf-gold);
	color: var(--wf-navy);
}