/**
 * Luminii Jobs
 *
 * Styles for the open positions list and the single posting page.
 *
 * The palette is taken from the theme variables in
 * devsrc/scss/utility/_variables.scss, so the plugin sits inside the design
 * system rather than beside it:
 *
 *   $luminii    #e76831   brand orange, the bar, the caret and the hover
 *   $grey_F2    #f2f2f2   the application panel background
 *   $grey_E6    #e6e6e6   hairlines, the only line colour the theme uses
 *   $grey_66    #666666   secondary text
 *   $charcoal   #313131   body text
 *   $white      #ffffff   row background
 *   $font_ibm   IBM Plex Sans
 *
 * Type sizes follow the theme ramp: the title matches the compiled h2 size
 * and body copy matches the compiled p size.
 */

/* -------------------------------------------------------------------------
 * OPEN POSITIONS
 * ---------------------------------------------------------------------- */

.luminii-jobs {
	margin: 0;
}

.luminii-jobs__heading {
	font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
	font-weight: 600;
	font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
	line-height: 1.2;
	margin: 0 0 8px;
	color: #000;
}

.luminii-jobs__intro {
	font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	color: #666;
	margin: 0 0 24px;
}

/*
 * Each row carries its own top and bottom hairline, so the list itself does
 * not draw one.
 */
.luminii-jobs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 0;
}

.luminii-jobs__item {
	position: relative;
	margin: 0 0 10px;
	padding: 0;
	background: #ffffff;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	border-left: 4px solid #e76831;
}

.luminii-jobs__item:last-child {
	margin-bottom: 0;
}

/*
 * The theme styles list items inside .global-text-format, which is the
 * wrapper the Careers page puts its content in. Those rules add a bullet and
 * an indent, so they have to be undone for this list specifically.
 */
.global-text-format .luminii-jobs__list,
.global-text-format ul.luminii-jobs__list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.global-text-format .luminii-jobs__item,
.global-text-format li.luminii-jobs__item {
	list-style: none;
	margin: 0 0 10px 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
}

.global-text-format .luminii-jobs__item:last-child,
.global-text-format li.luminii-jobs__item:last-child {
	margin-bottom: 0;
}

.luminii-jobs__link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 56px 20px 20px;
	text-decoration: none;
	color: inherit;
}

.luminii-jobs__link:hover,
.luminii-jobs__link:focus {
	text-decoration: none;
}

.luminii-jobs__title {
	font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
	font-weight: 600;
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	line-height: 1.25;
	color: #000;
	margin: 0;
	transition: color 0.2s ease;
}

/*
 * The theme sets its own size, weight, line height and margin on headings
 * inside the content wrapper, and those rules are more specific than the
 * class above, so they win. The General Inquiry title is a heading and has
 * to match the position titles exactly, so all of it is put back.
 */
.global-text-format .luminii-jobs__title {
	font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
	font-weight: 600;
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	line-height: 1.25;
	color: #000;
	margin: 0;
}

.luminii-jobs__link:hover .luminii-jobs__title,
.luminii-jobs__link:focus .luminii-jobs__title {
	color: #e76831;
}

/*
 * The caret that points at the single posting. Font Awesome is already
 * loaded by the theme, so the icon set the site uses is used here too.
 */
.luminii-jobs__caret {
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	color: #e76831;
	font-size: 18px;
	line-height: 1;
	transition: transform 0.2s ease;
}

.luminii-jobs__link:hover .luminii-jobs__caret,
.luminii-jobs__link:focus .luminii-jobs__caret {
	transform: translateY(-50%) translateX(3px);
}

.luminii-jobs__meta {
	font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
	font-weight: 400;
	font-size: 0.9375rem;
	color: #666;
}

/* -------------------------------------------------------------------------
 * APPLICATION PANEL
 * ---------------------------------------------------------------------- */

/*
 * The space that separates the postings from the form.
 */
.luminii-jobs__apply {
	margin: 48px 0 0;
	padding-top: 32px;
	padding-bottom: 40px;
}

.luminii-jobs__apply-panel {
	background: #f2f2f2;
	border-radius: 4px;
	padding: 32px;
}

.luminii-jobs__apply-head {
	margin: 0 0 24px;
}

.luminii-jobs__apply-intro {
	font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
	font-size: clamp(0.875rem, 5vw, 1.125rem);
	line-height: 1.55;
	font-weight: 300;
	color: #666;
	margin: 6px 0 0;
}

/*
 * The theme sets size, weight and margin on every paragraph inside the
 * content wrapper, so the intro needs the same treatment as the title.
 */
.global-text-format .luminii-jobs__apply-intro {
	font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
	font-size: clamp(0.875rem, 5vw, 1.125rem);
	line-height: 1.55;
	font-weight: 300;
	color: #666;
	margin: 6px 0 0;
}

/*
 * Forminator generates its stylesheet per form, with the form id in the
 * selector, so a plain class rule cannot win on specificity. The row margin
 * is what sets the distance between the fields, and the mock this follows
 * sets it tighter than the Forminator default.
 */
.luminii-jobs-form .forminator-row {
	margin-bottom: 16px !important;
}

/* The last field, the free text one, sits a little lower. */
.luminii-jobs-form .forminator-field-textarea {
	margin-top: 20px !important;
}

.luminii-jobs-form label {
	font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
}

/* The form sits on the panel, so it must not paint over it. */
.luminii-jobs__apply-panel .forminator-custom-form {
	background: transparent;
}

/* -------------------------------------------------------------------------
 * SINGLE POSTING
 * ---------------------------------------------------------------------- */

.luminii-job {
	padding: 40px 0 60px;
}

.luminii-job__title {
	font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
	font-weight: 600;
	font-size: clamp(1.875rem, 1.25rem + 2.2vw, 3rem);
	line-height: 1.15;
	margin: 0 0 12px;
	color: #000;
}

.luminii-job__meta {
	font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
	font-size: 1rem;
	color: #666;
	margin: 0 0 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e6e6e6;
}

.luminii-job__body {
	margin-bottom: 32px;
}

.luminii-job__back {
	margin: 0;
	font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
}

.luminii-job__back a {
	color: #e76831;
	text-decoration: underline;
}

.luminii-job__apply {
	background: #ffffff;
	padding: 40px 0 50px;
	margin-top: 20px;
}

.luminii-job__apply-heading {
	font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
	font-weight: 600;
	font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
	margin: 0 0 24px;
	color: #000;
}

/* -------------------------------------------------------------------------
 * SMALL SCREENS
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	.luminii-job {
		padding: 24px 0 40px;
	}

	.luminii-jobs__link {
		padding: 16px 44px 16px 16px;
	}

	.luminii-jobs__caret {
		right: 16px;
	}

	.luminii-jobs__apply {
		margin-top: 32px;
		padding-top: 24px;
	}

	.luminii-jobs__apply-panel {
		padding: 24px 20px;
	}

	.luminii-jobs-form .forminator-row {
		margin-bottom: 14px !important;
	}
}