/*
 * Career page, following the design in arkan_careers_apply.html.
 *
 * The page reuses the theme's contact classes so the JS bundle keeps driving
 * validation, the submit and the modals (see page-career.php), but the look is
 * entirely from the reference: role pills, plain underline fields, an inline
 * attach link, an outlined submit.
 *
 * Sizes are in px rather than the theme's rem. The theme's rem is viewport
 * fluid (html font-size: 0.625vw), which is what made this form balloon on wide
 * screens; the reference specifies fixed sizes, and fixed is what a form full
 * of 17-19px controls actually wants.
 *
 * This file is enqueued only on page-career.php (arkan_career_assets), so
 * nothing here can reach the contact page.
 */

/* --------------------------------------------------------------- Shell -- */

/* Overrides the theme's 20rem/24rem section padding. */
.cb-career.cb-contact {
	padding: 0;
}

/*
 * The reference page has a static header, so its hero sits near the top. This
 * theme's navbar is fixed, and the section padding zeroed above was what used
 * to clear it — without a top offset the hero runs underneath the nav links.
 */
/*
 * Left-aligned, not centred.
 *
 * The shell mirrors the theme's shared container (max-width 140rem, 2rem
 * gutter) so the form's left edge lands on the same line as the navbar logo
 * and the footer columns. The content itself is then capped below, which is
 * what keeps it left-aligned inside that container instead of centred.
 *
 * rem here is deliberate — it is the theme's viewport-fluid unit, so the gutter
 * tracks the rest of the site. The form's own sizes stay in px.
 */
.cb-career-shell {
	max-width: 140rem;
	margin: 0 auto;
	padding: 160px 2rem 80px;
}

.cb-career-hero.cb-contact-header,
.cb-career-form.cb-contact-form {
	max-width: 900px;
}

.cb-career-hp {
	position: absolute;
	inset-inline-start: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------- Hero -- */

/*
 * .cb-contact-header centres itself and sets a 9rem font at >=768px, and
 * .cb-contact-form adds a 15rem top margin, because the contact page leads with
 * a big centred headline. This design is left-aligned with the hero sitting
 * close to the form, so both are reset here.
 */
.cb-career-hero.cb-contact-header {
	padding: 0 0 12px 0;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	text-align: start;
}

.cb-career-form.cb-contact-form {
	margin: 0;
}

.cb-career-title {
	margin: 0 0 28px 0;
	font-weight: 800;
	font-size: clamp(40px, 7vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.02em;
}

/* -------------------------------------------------------------- Groups -- */

/*
 * .cb-contact-group is kept on each block so the bundle's entrance animation
 * still staggers them in; its 8rem margin is replaced here.
 */
.cb-career-form .cb-contact-group {
	margin: 0 0 34px 0;
	padding: 0;
	border: 0;
}

.cb-career-form .cb-career-roles {
	margin: 0 0 44px 0;
}

.cb-career-section-label {
	display: block;
	margin: 0 0 18px 0;
	padding: 0;
	color: #0d0d0d;
	font-size: 17px;
	line-height: 1.4;
}

/* --------------------------------------------------------------- Pills -- */

.cb-career-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/*
 * Sizing only. The pill's outline, the ink fill that rises on select, the label
 * sliding up to its data-text duplicate on hover, and the magnetic hover the
 * bundle attaches to ".cb-input_checkbox" all come from the theme's own
 * component — the same one the contact page uses. The only thing wrong for this
 * page is the scale: the theme sets 3.2rem at >=768px, which on a nine-pill row
 * is enormous.
 */
.cb-career-pill .cb-input_checkbox-box {
	padding: 14px 26px;
	font-size: 17px;
	font-weight: 500;
}

/* -------------------------------------------------------------- Fields -- */

/* Every field shares one measure, the textarea included. */
.cb-career-field {
	max-width: 560px;
}

/*
 * No border-bottom: the rule under each field is the theme's own animated
 * .cb-input_light-line — a 300%-wide wavy SVG that slides to translateX(0) over
 * 0.8s on focus, the same underline used on the contact page. The fields carry
 * .cb-input_light so those rules apply; everything below re-sizes them, since
 * the theme's own 3.2rem/2rem values are built for that page, not this one.
 *
 * Selectors are deliberately specific (.cb-career-form ...) to outrank
 * ".cb-input_light input" rather than relying on stylesheet order.
 */
.cb-career-form .cb-career-field input,
.cb-career-form .cb-career-field textarea,
.cb-career-form .cb-career-curr-trigger {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
	padding: 10px 2px 14px;
	color: #0d0d0d;
	background: transparent;
	border: none;
	border-radius: 0;
	outline: none;
	font-family: inherit;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4;
}

.cb-career-form .cb-career-field textarea {
	min-height: 90px;
	resize: vertical;
}

.cb-career-form .cb-career-field input::placeholder,
.cb-career-form .cb-career-field textarea::placeholder {
	color: #9a9a9a;
	/* The theme sizes the textarea placeholder separately; match the field. */
	font-size: 18px;
}

/*
 * The currency trigger is a <button>, so the theme's
 * "input:focus + .cb-input_light-line" sibling rules never match it. These
 * mirror that behaviour for the trigger, including while the menu is open.
 */
.cb-career-curr-trigger:hover + .cb-input_light-line {
	opacity: 0.6;
}

.cb-career-curr-trigger:focus-visible + .cb-input_light-line,
.cb-career-curr.-open .cb-input_light-line {
	opacity: 1;
	transform: translateX(0);
	transition-duration: 0.8s, 0.4s;
}

.cb-career-salary {
	display: flex;
	align-items: flex-end;
	gap: 16px;
}

/* --------------------------------------------------- Currency dropdown -- */

/*
 * A native <select> draws its open list through the operating system, which no
 * stylesheet can reach — hence a custom control. The real <select> is still in
 * the form, only visually hidden, so FormData is unchanged.
 *
 * The group needs its own layer: the bundle animates every .cb-contact-group
 * with GSAP, and the transform that leaves behind makes each group a stacking
 * context, which would trap this menu under the fields below it.
 */
.cb-career-salary-group {
	position: relative;
	z-index: 10;
}

.cb-career-curr {
	position: relative;
	flex: 0 0 84px;
	width: 84px;
}

.cb-career-curr-native {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.cb-career-curr-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	text-align: start;
	cursor: pointer;
}

.cb-career-curr-chev {
	flex: none;
	width: 14px;
	height: 14px;
	opacity: 0.5;
	transition: transform 0.2s ease;
}

.cb-career-curr.-open .cb-career-curr-chev {
	transform: rotate(180deg);
}

.cb-career-curr.-open .cb-career-curr-trigger {
	border-bottom-color: #0d0d0d;
}

.cb-career-curr-menu {
	position: absolute;
	inset-inline-start: 0;
	top: calc(100% + 6px);
	min-width: 100%;
	padding: 6px;
	/* Opaque on purpose: the fields behind must not read through. */
	background: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
}

.cb-career-curr-option {
	display: block;
	width: 100%;
	margin: 0;
	padding: 9px 12px;
	color: #0d0d0d;
	background: none;
	border: 0;
	border-radius: 6px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.2;
	text-align: start;
	cursor: pointer;
}

.cb-career-curr-option:hover {
	background: #f4f4f4;
}

.cb-career-curr-option.-selected {
	background: #0d0d0d;
	color: #fff;
}

.cb-career-amount {
	flex: 1 1 auto;
}

.cb-career-hint {
	margin: 8px 0 0 0;
	color: #8a8a8a;
	font-size: 13px;
	line-height: 1.4;
}

/* Per-field validation message, filled in by career.js. */
.cb-career-error {
	margin: 8px 0 0 0;
	color: #e0483e;
	font-size: 13px;
	line-height: 1.4;
}

.cb-career-error:empty {
	display: none;
}

/*
 * Error state. The theme already swaps .cb-input_light-line for a red one off
 * ".-error"; these carry that colour into the rest of the field so a missing
 * answer is obvious without reading the message.
 */
.cb-career-field.-error input::placeholder,
.cb-career-field.-error textarea::placeholder {
	color: #e0483e;
	opacity: 1;
}

/* The roles group has no underline to redden, so the label and pills carry it. */
.cb-career-roles.-error .cb-career-section-label {
	color: #e0483e;
}

.cb-career-roles.-error .cb-input_checkbox-border {
	border-color: #e0483e;
}

.cb-career-attach.-error .cb-input_file-btn {
	color: #e0483e;
}

/* -------------------------------------------------------------- Attach -- */

.cb-career-attach {
	position: relative;
	display: block;
	width: 100%;
	max-width: 560px;
}

/*
 * The theme draws its own underline under the button's label — a faint
 * span:before plus a span:after that scales in on hover. That is the second
 * rule under "Attach your CV"; the animated .cb-input_light-line is the one
 * being kept, so these are removed.
 */
.cb-career-attach .cb-input_file-btn span::before,
.cb-career-attach .cb-input_file-btn span::after {
	display: none;
}

/*
 * Shrink-wrap the line to the label. The box is what the line stretches to, so
 * making it inline-block sizes the rule to "Attach your CV" rather than the
 * full 560px column.
 */
.cb-career-attach .cb-input_light-box {
	display: inline-block;
}

/* The bundle clicks this input itself; it must never be visible. */
.cb-career-attach input[type='file'] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/*
 * No border-bottom here: the rule under the attach row is the theme's animated
 * .cb-input_light-line, matching the fields above it. The button sits above the
 * line and sizes to its label, so the line ends with the text.
 */
.cb-career-attach .cb-input_file-btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	width: auto;
	margin: 0;
	padding: 10px 2px 14px;
	color: #0d0d0d;
	background: none;
	border: none;
	border-radius: 0;
	/*
	 * The browser's default ring would draw a box round the whole 560px row.
	 * The text fields suppress theirs too (the theme sets outline:0 on them) and
	 * signal focus with the line going to full opacity — this matches that, so
	 * the cue stays visible and consistent.
	 */
	outline: none;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	text-align: start;
	cursor: pointer;
}

/*
 * The theme's line reacts to "input:focus + line"; this is a button, so it
 * needs the equivalent rules spelled out, as the currency trigger does.
 */
.cb-career-attach .cb-input_file-btn:hover + .cb-input_light-line {
	opacity: 0.6;
}

.cb-career-attach .cb-input_file-btn:focus + .cb-input_light-line,
.cb-career-attach .cb-input_file-btn:focus-visible + .cb-input_light-line {
	opacity: 1;
	transform: translateX(0);
	transition-duration: 0.8s, 0.4s;
}

.cb-career-attach .cb-input_file-btn svg {
	flex: none;
	width: 16px;
	height: 16px;
}

.cb-career-attach.-dragover .cb-input_file-btn {
	opacity: 0.55;
}

.cb-career-attach .cb-input_file-items {
	display: block;
	margin: 0;
	padding: 0;
}

.cb-career-attach .cb-input_file-items:empty {
	display: none;
}

/*
 * The theme renders each attachment as <i></i><b>name</b>, with the <i> drawing
 * the remove cross. Row-reverse puts that cross after the filename, as in the
 * reference chip, without touching the bundle's markup.
 */
.cb-career-attach .cb-input_file-item {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 10px;
	margin: 14px 0 0 0;
	padding: 9px 18px;
	max-width: fit-content;
	background: #f6f6f6;
	border: 1px solid #dcdcdc;
	border-radius: 999px;
	color: #0d0d0d;
	font-size: 14px;
	line-height: 1.2;
	word-break: break-word;
	cursor: pointer;
}

.cb-career-attach .cb-input_file-item i {
	margin: 0;
	color: #8a8a8a;
}

.cb-career-attach .cb-input_file-message {
	margin: 10px 0 0 0;
	color: #e0483e;
	font-size: 14px;
}

.cb-career-attach .cb-input_file-message:empty {
	display: none;
}

/* ------------------------------------------------------------- Actions -- */

.cb-career-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 26px;
	margin-top: 12px;
}

.cb-career-submit {
	width: 100%;
	max-width: 560px;
	padding: 20px 0;
	color: #0d0d0d;
	background: #fff;
	border: 2px solid #0d0d0d;
	border-radius: 999px;
	font-family: inherit;
	font-size: 19px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition:
		background 0.15s ease,
		color 0.15s ease,
		transform 0.05s ease;
}

.cb-career-submit:hover:not(:disabled) {
	color: #fff;
	background: #0d0d0d;
}

.cb-career-submit:active:not(:disabled) {
	transform: translateY(1px);
}

.cb-career-submit:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.cb-career-clear {
	margin: 20px 0 0 0;
	padding: 0;
	color: #8a8a8a;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: underline;
	cursor: pointer;
}

.cb-career-clear:hover {
	color: #0d0d0d;
}

/* -------------------------------------------------------------- Modals -- */

/*
 * The result modals live outside .cb-career (they are siblings of the section,
 * not children), so they carry their own class to be reachable from here.
 */
.cb-career-modal .cb-modal_box-message {
	text-align: center;
}

.cb-career-modal .cb-modal_box-message-text {
	margin-inline: auto;
}

/*
 * The backdrop already carries data-modal-close, so clicking anywhere outside
 * the text does close the modal — this just says so.
 */
.cb-career-modal-hint {
	margin: 3rem 0 0 0;
	opacity: 0.4;
	font-size: 14px;
	line-height: 1.4;
}

/* -------------------------------------------------------------- Mobile -- */

@media (max-width: 600px) {
	.cb-career-shell {
		padding: 110px 20px 64px;
	}

	.cb-career-pill .cb-input_checkbox-box {
		padding: 12px 20px;
		font-size: 15px;
	}

	.cb-career-field input,
	.cb-career-field textarea,
	.cb-career-curr,
	.cb-career-field input::placeholder,
	.cb-career-field textarea::placeholder {
		font-size: 16px;
	}

	.cb-career-submit {
		max-width: 100%;
		padding: 18px 0;
		font-size: 17px;
	}
}