/**
 * TMT Careers Widget
 *
 * Every selector is namespaced under .tmt-careers / .tmt-careers-modal.
 * Values here are the baseline that matches the reference design; the Elementor
 * style controls ship the same values as their defaults and override these
 * without needing !important. Only the layout rules that have no matching
 * control (stacking on small screens) live in media queries.
 */

/* ---------------------------------------------------------------------------
 * Listing
 * ------------------------------------------------------------------------ */

.tmt-careers {
	background-color: #eef2f5;
	padding: 64px 20px;
}

.tmt-careers__inner {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

.tmt-careers__heading {
	margin: 0 0 28px;
	color: #16324f;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
}

.tmt-careers__empty {
	margin: 0;
	color: #5c7488;
	font-size: 16px;
}

.tmt-careers__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tmt-careers__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0;
	padding: 26px 32px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(22, 50, 79, 0.07);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* min-width:0 lets a long unbroken job title wrap instead of pushing the
   button out of the card. */
.tmt-careers__item-main {
	min-width: 0;
	flex: 1 1 auto;
}

.tmt-careers__title {
	margin: 0 0 10px;
	color: #16324f;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: break-word;
	transition: color 0.2s ease;
}

.tmt-careers__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	column-gap: 28px;
	row-gap: 2px;
	color: #5c7488;
	font-size: 14px;
	line-height: 1.5;
}

.tmt-careers__meta-item {
	margin: 0;
	overflow-wrap: break-word;
}

.tmt-careers__button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 88px;
	min-height: 46px;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	background-color: #0f6e9e;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.tmt-careers__button:hover {
	transform: translateY(-1px);
}

.tmt-careers__button:active {
	transform: translateY(0);
}

.tmt-careers__button:focus-visible,
.tmt-careers-modal__nav-button:focus-visible,
.tmt-careers-modal__close:focus-visible,
.tmt-careers-modal__action:focus-visible {
	outline: 2px solid #0d86c7;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Modal shell
 * ------------------------------------------------------------------------ */

.tmt-careers-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 20px;
}

.tmt-careers-modal[hidden] {
	display: none;
}

/* During the fade-out the element is still in the layout at opacity 0, and an
   overlay at opacity 0 is still hit-testable. Without this it would swallow
   clicks for the length of the transition. */
.tmt-careers-modal:not(.is-open) {
	pointer-events: none;
}

.tmt-careers-modal__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(11, 26, 38, 0.6);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.tmt-careers-modal.is-open .tmt-careers-modal__overlay {
	opacity: 1;
}

.tmt-careers-modal__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 848px;
	max-height: 100%;
	background-color: #eef2f5;
	border-radius: 3px;
	box-shadow: 0 24px 60px rgba(11, 26, 38, 0.28);
	opacity: 0;
	transform: translateY(10px) scale(0.985);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.tmt-careers-modal.is-open .tmt-careers-modal__dialog {
	opacity: 1;
	transform: none;
}

.tmt-careers-modal__dialog:focus {
	outline: none;
}

/* Horizontal padding lives on the scroll container so the scrollbar sits flush
   with the panel edge, exactly as it does in the reference. overscroll-behavior
   stops a flick at the end of the list from scrolling the page behind. */
.tmt-careers-modal__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 0 56px 48px;
}

/* The bar carries the panel's top padding itself, so making it sticky (see the
   "Keep Modal Header Visible" control) leaves no gap above it. */
.tmt-careers-modal__bar {
	padding-top: 40px;
	background-color: #eef2f5;
}

.tmt-careers-modal__close-row {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 70px;
}

.tmt-careers-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 14px;
	margin-right: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #e03a2f;
	color: #fff;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tmt-careers-modal__close svg {
	display: block;
	width: 8px;
	height: 8px;
}

.tmt-careers-modal__title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.tmt-careers-modal__title {
	margin: 0;
	max-width: 68%;
	color: #16324f;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.18;
	overflow-wrap: break-word;
}

.tmt-careers-modal__navigation {
	flex: 0 0 auto;
	display: flex;
	gap: 10px;
	padding-top: 6px;
}

.tmt-careers-modal__nav-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 20px;
	border: 1px solid #a33b5e;
	border-radius: 999px;
	background-color: transparent;
	color: #16324f;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tmt-careers-modal__nav-button[disabled] {
	color: #9aaab7;
	border-color: #d3dce3;
	cursor: default;
}

.tmt-careers-modal__nav-button[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Modal meta chips
 * ------------------------------------------------------------------------ */

.tmt-careers-modal__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 22px 0 0;
	padding: 0;
}

/* display:flex above would otherwise beat the hidden attribute. */
.tmt-careers-modal__meta[hidden] {
	display: none;
}

.tmt-careers-modal__meta-item {
	margin: 0;
	padding: 7px 11px;
	border: 1px solid transparent;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
}

.tmt-careers-modal__meta-item[hidden] {
	display: none;
}

.tmt-careers-modal__meta-item--type {
	background-color: #e0512a;
	border-color: #e0512a;
	color: #fff;
}

.tmt-careers-modal__meta-item--salary {
	background-color: #16324f;
	border-color: #16324f;
	color: #fff;
}

.tmt-careers-modal__meta-item--location {
	background-color: #fff;
	border-color: #dae2e8;
	color: #16324f;
}

/* ---------------------------------------------------------------------------
 * Modal content (editor-supplied HTML)
 * ------------------------------------------------------------------------ */

.tmt-careers-modal__content {
	margin-top: 26px;
	color: #1d4159;
	font-size: 17px;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.tmt-careers-modal__content > *:first-child {
	margin-top: 0;
}

.tmt-careers-modal__content > *:last-child {
	margin-bottom: 0;
}

.tmt-careers-modal__content p {
	margin: 0 0 1em;
}

.tmt-careers-modal__content h1,
.tmt-careers-modal__content h2,
.tmt-careers-modal__content h3,
.tmt-careers-modal__content h4,
.tmt-careers-modal__content h5,
.tmt-careers-modal__content h6 {
	margin: 34px 0 14px;
	color: #16324f;
	font-weight: 700;
}

/* Distinct sizes per level so a description can carry a real hierarchy: a big
   section title (H2) with smaller bold sub-headings beneath it (H3, H4). */
.tmt-careers-modal__content h1,
.tmt-careers-modal__content h2 {
	font-size: 28px;
	line-height: 1.25;
}

.tmt-careers-modal__content h3 {
	font-size: 18px;
	line-height: 1.35;
}

.tmt-careers-modal__content h4,
.tmt-careers-modal__content h5,
.tmt-careers-modal__content h6 {
	font-size: 17px;
	line-height: 1.4;
}

.tmt-careers-modal__content ul,
.tmt-careers-modal__content ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.tmt-careers-modal__content li {
	margin-bottom: 0.35em;
}

.tmt-careers-modal__content li:last-child {
	margin-bottom: 0;
}

.tmt-careers-modal__content a {
	color: #0f6e9e;
	text-decoration: underline;
}

.tmt-careers-modal__content img {
	max-width: 100%;
	height: auto;
}

/* Long tables would otherwise force the whole panel to scroll sideways. */
.tmt-careers-modal__content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* ---------------------------------------------------------------------------
 * Apply / download
 * ------------------------------------------------------------------------ */

.tmt-careers-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.tmt-careers-modal__actions[hidden] {
	display: none;
}

.tmt-careers-modal__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tmt-careers-modal__action[hidden] {
	display: none;
}

.tmt-careers-modal__action--apply {
	background-color: #0f6e9e;
	border-color: #0f6e9e;
	color: #fff;
}

.tmt-careers-modal__action--file {
	background-color: transparent;
	border-color: #a33b5e;
	color: #16324f;
}

/* ---------------------------------------------------------------------------
 * Screen-reader announcement region
 * ------------------------------------------------------------------------ */

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

/* ---------------------------------------------------------------------------
 * Tablet
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.tmt-careers__meta {
		column-gap: 20px;
	}

	.tmt-careers-modal__title {
		max-width: 60%;
	}

	.tmt-careers-modal__content h1,
	.tmt-careers-modal__content h2 {
		font-size: 26px;
	}
}

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

@media (max-width: 767px) {
	.tmt-careers__item {
		flex-direction: column;
		align-items: stretch;
	}

	/* One meta value per line -- three labels never fit side by side at this
	   width without wrapping mid-label. */
	.tmt-careers__meta {
		flex-direction: column;
		row-gap: 3px;
	}

	.tmt-careers__button {
		width: 100%;
	}

	.tmt-careers__button:hover {
		transform: none;
	}

	/* Full-bleed panel, as the reference does on a phone. */
	.tmt-careers-modal {
		padding: 36px 0;
	}

	.tmt-careers-modal__title-row {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.tmt-careers-modal__title {
		max-width: 100%;
		font-size: 28px;
	}

	/* The reference keeps Prev/Next compact and left-aligned under the title
	   rather than stretching them across the panel. */
	.tmt-careers-modal__navigation {
		padding-top: 0;
		justify-content: flex-start;
	}

	.tmt-careers-modal__content h1,
	.tmt-careers-modal__content h2 {
		font-size: 23px;
	}

	.tmt-careers-modal__content h3 {
		font-size: 17px;
	}

	.tmt-careers-modal__action {
		flex: 0 1 auto;
	}

	/* Full-bleed on mobile, so a stray radius would clip against the edge. */
	.tmt-careers-modal__dialog {
		border-radius: 0;
	}
}

/* Landscape phones: vertical space is the scarce resource, so claw back the
   padding that would otherwise leave almost no room for the description. */
@media (max-height: 520px) {
	.tmt-careers-modal__bar {
		padding-top: 16px;
	}

	.tmt-careers-modal__close-row {
		margin-bottom: 12px;
	}

	.tmt-careers-modal__title {
		font-size: 22px;
	}

	.tmt-careers-modal__meta {
		margin-top: 14px;
	}

	.tmt-careers-modal__content {
		margin-top: 16px;
	}

	.tmt-careers-modal__actions {
		margin-top: 20px;
	}
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.tmt-careers__item,
	.tmt-careers__title,
	.tmt-careers__button,
	.tmt-careers-modal__overlay,
	.tmt-careers-modal__dialog,
	.tmt-careers-modal__nav-button,
	.tmt-careers-modal__close,
	.tmt-careers-modal__action {
		transition: none;
	}

	.tmt-careers__button:hover {
		transform: none;
	}

	.tmt-careers-modal__dialog {
		transform: none;
	}
}

/* Modal content blocks -----------------------------------------------------
 *
 * The structured heading + content blocks produced by the vacancy repeater's
 * numbered slots. Deliberately separate from `__content h1..h6`, which styles
 * headings typed inside a WYSIWYG: a sub-heading written inside a block keeps
 * that styling, while the block's own heading takes these rules. Every value
 * here is a default that the widget's Style controls override.
 */

.tmt-careers-modal .tmt-careers-modal__block {
	margin-top: 34px;
}

.tmt-careers-modal .tmt-careers-modal__block:first-child {
	margin-top: 34px;
}

.tmt-careers-modal .tmt-careers-modal__block-heading {
	margin: 0 0 14px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	color: #12384b;
	overflow-wrap: break-word;
}

.tmt-careers-modal .tmt-careers-modal__block-text {
	font-size: 16px;
	line-height: 1.6;
	color: #12384b;
}

.tmt-careers-modal .tmt-careers-modal__block-text > *:first-child {
	margin-top: 0;
}

.tmt-careers-modal .tmt-careers-modal__block-text > *:last-child {
	margin-bottom: 0;
}

/* Sub-headings typed inside a block sit a clear step below its own heading. */
.tmt-careers-modal .tmt-careers-modal__block-text h1,
.tmt-careers-modal .tmt-careers-modal__block-text h2,
.tmt-careers-modal .tmt-careers-modal__block-text h3,
.tmt-careers-modal .tmt-careers-modal__block-text h4,
.tmt-careers-modal .tmt-careers-modal__block-text h5,
.tmt-careers-modal .tmt-careers-modal__block-text h6 {
	margin: 22px 0 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: #12384b;
}

.tmt-careers-modal .tmt-careers-modal__block-text ul,
.tmt-careers-modal .tmt-careers-modal__block-text ol {
	margin: 0 0 14px;
	padding-left: 22px;
}

.tmt-careers-modal .tmt-careers-modal__block-text li {
	margin-bottom: 6px;
}

@media (max-width: 767px) {
	.tmt-careers-modal .tmt-careers-modal__block-heading {
		font-size: 24px;
	}
}