/**
 * Careers — vacancy table and application form.
 *
 * The table carries six columns, which is too many for a phone, so below 780px
 * each row becomes a stacked card with the column name shown as a label from
 * the cell's data-label attribute.
 *
 * @package homesavers
 */

.hs-careers__head { padding: 42px 0 8px; }
.hs-careers__title {
	font-family: var(--hs-font-bold);
	font-size: clamp(28px, 4.5vw, 45px);
	line-height: 1.12;
	color: var(--hs-red);
	margin: 0 0 14px;
}
.hs-careers__intro { font-size: 16px; line-height: 1.6; max-width: 68ch; color: var(--hs-ink); }
.hs-careers__intro p { margin: 0 0 10px; }
.hs-careers__empty { margin: 32px 0 64px; font-size: 16px; color: var(--hs-muted); }

/* --- filters ------------------------------------------------------- */
.hs-careers__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 28px 0 0;
}
.hs-careers__filter { display: flex; flex-direction: column; gap: 5px; min-width: 190px; }
.hs-careers__filter--grow { flex: 1 1 260px; }
.hs-careers__filter > span {
	font-size: 13px;
	font-family: var(--hs-font-semibold, var(--hs-font));
	color: var(--hs-muted);
}
.hs-careers__filter select,
.hs-careers__filter input {
	padding: 10px 12px;
	border: 1px solid var(--hs-input-border, #ccc);
	border-radius: var(--hs-radius, 8px);
	font-family: var(--hs-font);
	font-size: 15px;
	color: var(--hs-ink);
	background: #fff;
}
.hs-careers__filter select:focus-visible,
.hs-careers__filter input:focus-visible { outline: none; border-color: var(--hs-green); }

.hs-careers__count { margin: 16px 0 0; font-size: 14px; color: var(--hs-muted); }
.hs-careers__noresults { margin: 20px 0 0; font-size: 15px; color: var(--hs-muted); }

/* --- table --------------------------------------------------------- */
.hs-careers__tablewrap { overflow-x: auto; margin: 14px 0 clamp(48px, 6vw, 80px); }

.hs-careers__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.hs-careers__table th {
	text-align: left;
	/* Regular weight. The family matters as much as font-weight here: the theme's
	   bold is a separate face, so font-weight alone would not lighten it. */
	font-family: var(--hs-font);
	font-weight: normal;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hs-muted);
	padding: 10px 14px 10px 0;
	border-bottom: 2px solid var(--hs-line);
	white-space: nowrap;
}
.hs-careers__table td {
	padding: 14px 14px 14px 0;
	border-bottom: 1px solid var(--hs-line);
	vertical-align: middle;
	color: var(--hs-ink);
}
.hs-careers__table tr[hidden] { display: none; }
/* 16px, not the table's 15px: at exactly 15px the semibold face draws the dot of
   the "i" touching its stem, so "Retail Assistant" reads as "Retall Asslstant". */
.hs-careers__role { font-family: var(--hs-font-semibold, var(--hs-font)); font-size: 16px; }
.hs-careers__ref { font-variant-numeric: tabular-nums; color: var(--hs-muted); white-space: nowrap; }
.hs-careers__cta { padding-right: 0; text-align: right; white-space: nowrap; }

.hs-careers__apply,
.hs-careers__apply:link,
.hs-careers__apply:visited {
	display: inline-block;
	padding: 9px 20px;
	background: var(--hs-green);
	color: #fff;
	border-radius: 999px;
	font-family: var(--hs-font-bold);
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
}
.hs-careers__apply:hover,
.hs-careers__apply:focus-visible { background: #1d7526; color: #fff; }

/* --- application page ---------------------------------------------- */
.hs-apply__inner { max-width: 720px; }
.hs-apply__head { padding: 42px 0 8px; }
.hs-apply__title {
	font-family: var(--hs-font-bold);
	font-size: clamp(26px, 4vw, 38px);
	line-height: 1.14;
	color: var(--hs-red);
	margin: 0 0 12px;
}
.hs-apply__for {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: var(--hs-bg-soft, #f5f5f5);
	border-left: 3px solid var(--hs-green);
	border-radius: 0 6px 6px 0;
	font-family: var(--hs-font-semibold, var(--hs-font));
	font-size: 15px;
}
.hs-apply__intro { font-size: 16px; line-height: 1.6; color: var(--hs-ink); }
.hs-apply__form { margin: 26px 0 0; }
.hs-apply__missing { color: var(--hs-muted); }
.hs-apply__back { margin: 28px 0 clamp(48px, 6vw, 80px); font-size: 15px; }

/* A pre-filled field is locked because it identifies the vacancy. Show that. */
.hs-apply__form .is-prefilled { background: var(--hs-bg-soft, #f5f5f5); color: var(--hs-muted); }

/* Contact Form 7 6.x wraps loose inline content in <p>, so these rules have to
   tolerate the controls sitting a level deeper than the markup suggests. */
.hs-apply__form .hs-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.hs-apply__form .hs-field label { font-size: 14px; font-family: var(--hs-font-semibold, var(--hs-font)); }
.hs-apply__form .hs-req { color: var(--hs-red); }
.hs-apply__form input[type="text"],
.hs-apply__form input[type="email"],
.hs-apply__form input[type="tel"],
.hs-apply__form select,
.hs-apply__form textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--hs-input-border, #ccc);
	border-radius: var(--hs-radius, 8px);
	font-family: var(--hs-font);
	font-size: 15px;
	color: var(--hs-ink);
	background: #fff;
}
.hs-apply__form textarea { min-height: 130px; resize: vertical; }
.hs-apply__form .hs-consent { margin: 6px 0 18px; font-size: 14px; line-height: 1.5; }
.hs-apply__form input[type="submit"] {
	padding: 13px 34px;
	background: var(--hs-green);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-family: var(--hs-font-bold);
	font-size: 16px;
	cursor: pointer;
}
.hs-apply__form input[type="submit"]:hover { background: #1d7526; }

/* --- stacked rows on small screens --------------------------------- */
@media (max-width: 780px) {
	.hs-careers__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.hs-careers__table,
	.hs-careers__table tbody,
	.hs-careers__table tr,
	.hs-careers__table td { display: block; width: 100%; }
	.hs-careers__table tr {
		border: 1px solid var(--hs-line);
		border-radius: var(--hs-radius, 8px);
		padding: 14px 16px;
		margin-bottom: 12px;
	}
	.hs-careers__table td { border: 0; padding: 3px 0; }
	.hs-careers__table td::before {
		content: attr(data-label) ": ";
		font-family: var(--hs-font-semibold, var(--hs-font));
		color: var(--hs-muted);
	}
	.hs-careers__cta { text-align: left; padding-top: 12px; }
	.hs-careers__cta::before { content: none; }
	.hs-careers__apply { width: 100%; text-align: center; }
}

/* Seven columns now (matching the client's live table) plus the Apply button,
   so the narrow ones need to stop wrapping and the row number stays quiet. */
.hs-careers__no {
	font-variant-numeric: tabular-nums;
	color: var(--hs-muted);
	white-space: nowrap;
}
.hs-careers__table th,
.hs-careers__table td { padding-right: 12px; }