/* Careers application form — Aperture tokens, scoped under .tsp-careers.

   Sized for a reading column rather than full width: a form whose inputs run
   the width of a 1200px page is measurably harder to complete.

   v1.10.309: the form is a card that can sit in the Careers page's right-hand
   column OR stand alone as a block, so every width rule is a @container query
   on .tsp-careers-wrap rather than a @media query. Container queries match only
   DESCENDANTS, which is why the wrapper exists at all — a rule targeting the
   container element itself would silently never apply. */

/* scroll-margin-top clears the sticky masthead when the hero CTA or the
   post-submit scroll lands on this element — without it the top of the form
   card sits underneath the header. */
.tsp-careers-wrap{container-type:inline-size;scroll-margin-top:110px}

.tsp-careers{
	--tsp-red:#C8102E;
	--tsp-dark-red:#9C0F27;
	--tsp-ink:#16181F;
	--tsp-muted:#676E7B;
	--tsp-hairline:#E8E5DE;
	--tsp-wash:#F6F4EF;
	--tsp-field:46px;
	max-width:680px;
	margin:0 auto;
	font-family:var(--tsp-font-ui);
	color:var(--tsp-ink);
	background:#fff;
	border:1px solid var(--tsp-hairline);
	border-radius:14px;
	padding:32px;
}
.tsp-careers *{box-sizing:border-box}
.tsp-careers__h{font-family:var(--tsp-font-display);font-weight:700;font-size:clamp(22px,2.4cqi + 18px,28px);line-height:1.25;margin:0 0 8px;color:var(--tsp-ink)}
.tsp-careers__intro{font-size:15px;line-height:1.6;color:var(--tsp-muted);margin:0 0 26px}

/* ------------------------------------------------------------- result state */

.tsp-careers__notice{border-radius:10px;padding:16px 18px;margin:0 0 24px;font-size:14.5px;line-height:1.55;border:1px solid var(--tsp-hairline);display:block}
.tsp-careers__notice:focus{outline:2px solid var(--tsp-red);outline-offset:2px}
.tsp-careers__notice-h{display:block;font-family:var(--tsp-font-display);font-size:18px;font-weight:700;margin-bottom:4px}
.tsp-careers__notice--ok{background:#f0f8f2;border-color:#bfe3c9;color:#1c5a2c}
.tsp-careers__notice--err{background:#fdf2f3;border-color:#f0c4c9;color:#8a1c26}

/* ----------------------------------------------------------------- controls */

.tsp-careers__row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.tsp-careers__field{margin:0 0 20px}
.tsp-careers__field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--tsp-ink);letter-spacing:.01em}
.tsp-careers__req{color:var(--tsp-red)}

.tsp-careers__field input[type=text],
.tsp-careers__field input[type=email],
.tsp-careers__field select,
.tsp-careers__field textarea{
	width:100%;
	min-height:var(--tsp-field);
	border:1px solid #D9D5CC;
	background:#fff;
	border-radius:9px;
	padding:12px 14px;
	font-family:inherit;
	/* 16px, not 15.5px — same reason as the Contact form this file is kept in
	   line with: iOS Safari zooms on focus below 16px. VIEWPORT behaviour, so
	   it is deliberately not a @container rule even though every width rule in
	   this file is one. Measured zooming at 320/360/390/430. */
	font-size:16px;
	color:var(--tsp-ink);
	transition:border-color .15s,box-shadow .15s;
}
.tsp-careers__field textarea{resize:vertical;min-height:158px;line-height:1.6}

/* Native arrow removed for a consistent control across browsers; the element
   stays a real <select>, so keyboard and screen-reader behaviour is untouched. */
.tsp-careers__field select{
	appearance:none;
	padding-right:42px;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23676E7B' stroke-width='1.8' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 16px center;
}

.tsp-careers__field input:hover,
.tsp-careers__field select:hover,
.tsp-careers__field textarea:hover{border-color:#B9B3A8}

.tsp-careers__field input:focus-visible,
.tsp-careers__field select:focus-visible,
.tsp-careers__field textarea:focus-visible{outline:2px solid var(--tsp-red);outline-offset:1px;border-color:var(--tsp-red)}

/* Error styling carries a border AND the browser's own message, so colour is
   never the only signal. :user-invalid rather than :invalid so an untouched
   required field is not red before the visitor has typed anything. */
.tsp-careers__field input:user-invalid,
.tsp-careers__field select:user-invalid,
.tsp-careers__field textarea:user-invalid{border-color:var(--tsp-red);box-shadow:0 0 0 3px rgba(200,16,46,.10)}

/* --------------------------------------------------------------- CV upload */

.tsp-careers__field--file input[type=file]{
	width:100%;
	min-height:var(--tsp-field);
	font-family:inherit;
	font-size:14.5px;
	padding:12px 14px;
	border:1px dashed #C9C3B6;
	border-radius:9px;
	background:var(--tsp-wash);
	color:var(--tsp-ink);
	cursor:pointer;
}
.tsp-careers__field--file input[type=file]:hover{border-color:var(--tsp-red);background:#fbf7f2}
.tsp-careers__field--file input[type=file]:focus-visible{outline:2px solid var(--tsp-red);outline-offset:1px}
.tsp-careers__field--file input[type=file]::file-selector-button{
	font-family:inherit;
	font-size:13.5px;
	font-weight:600;
	color:var(--tsp-ink);
	background:#fff;
	border:1px solid #D9D5CC;
	border-radius:7px;
	padding:8px 14px;
	margin-right:14px;
	cursor:pointer;
}
.tsp-careers__field--file input[type=file]:hover::file-selector-button{border-color:var(--tsp-red);color:var(--tsp-red)}

.tsp-careers__help{display:block;font-size:12.5px;color:var(--tsp-muted);margin-top:7px;line-height:1.5}

/* ------------------------------------------------------------------ consent */

.tsp-careers__consent{display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:start;margin:4px 0 0}
.tsp-careers__consent input[type=checkbox]{width:24px;height:24px;margin:0;flex:0 0 auto;accent-color:var(--tsp-red);cursor:pointer}
.tsp-careers__consent input[type=checkbox]:focus-visible{outline:2px solid var(--tsp-red);outline-offset:2px}
.tsp-careers__consent label{font-size:13.5px;line-height:1.55;color:var(--tsp-ink);cursor:pointer}

/* Honeypot: removed from the layout and from the accessibility tree, but not
   display:none — some bots skip hidden inputs, which would defeat it. */
.tsp-careers__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------------ actions */

.tsp-careers__actions{margin:26px 0 0}
/* inline-flex + gap rather than a literal space before the arrow: the space was
   being swallowed, and min-height keeps the control a 48px touch target.

   Scoped under .tsp-careers to raise specificity to (0,2,0). Blocksy's
   `.button, .ct-button, …, [type="submit"], .wp-element-button` rule in
   main.min.css is also (0,1,0) and loads AFTER this sheet, so an unscoped
   `.tsp-careers__submit` lost on source order alone — it was silently supplying
   min-height:var(--theme-button-min-height) (40px) and 5px padding. Not an
   !important candidate: specificity is the actual fix. */
.tsp-careers .tsp-careers__submit{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	min-height:48px;
	background:var(--tsp-red);
	color:#fff;
	border:none;
	border-radius:40px;
	padding:13px 34px;
	font-family:inherit;
	font-weight:700;
	font-size:15px;
	letter-spacing:.02em;
	cursor:pointer;
	transition:background .15s;
}
.tsp-careers .tsp-careers__submit:hover{background:var(--tsp-dark-red);color:#fff}
.tsp-careers .tsp-careers__submit:focus-visible{background:var(--tsp-dark-red);color:#fff;outline:2px solid var(--tsp-ink);outline-offset:2px}
.tsp-careers__privacy{font-size:12.5px;color:var(--tsp-muted);margin:16px 0 0;line-height:1.55}

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

/* The name row stacks on the CONTAINER, not the viewport: in the Careers page's
   right-hand column the form is ~520px wide on a 1440px desktop, so a viewport
   rule would have kept two cramped name fields side by side. */
@container (max-width:520px){
	.tsp-careers{padding:26px 22px}
	.tsp-careers__row{grid-template-columns:1fr}
	.tsp-careers .tsp-careers__submit{width:100%}
}
@container (max-width:360px){
	.tsp-careers{padding:22px 18px;border-radius:12px}
	.tsp-careers__field--file input[type=file]{font-size:13.5px;padding:11px 12px}
	.tsp-careers__field--file input[type=file]::file-selector-button{margin-right:10px;padding:7px 11px}
}

@media (prefers-reduced-motion:reduce){
	.tsp-careers__submit,
	.tsp-careers__field input,
	.tsp-careers__field select,
	.tsp-careers__field textarea{transition:none}
}

/* v1.10.430 — the consent checkbox meets the minimum target size.
 *
 * Found in the UX audit: every text field in this form is 46px tall and the
 * consent checkbox was 20x20 — under the 24x24 floor WCAG 2.5.8 sets for a
 * pointer target, and the one control in the form a reader MUST hit before the
 * form will submit. 24x24 with no margin, and the row aligned so the box sits
 * with the first line of its label rather than drifting above it. */