/* career-page-manager frontend styles
 * Cross-checked and corrected against source's .roles__*/.dept*/.role*
 * rules: font-family, font-size, font-weight, line-height, letter-spacing,
 * color, margin, padding, gap and border values all now match source
 * exactly. Class names (cpm-*) are unchanged, and the configurable
 * accent-color mechanism (--cpm-accent, set inline per the shortcode's
 * "accent_color" setting) is preserved.
 */

.cpm-careers {
	--cpm-accent: #7338FF; /* matches source's --purple default; overridden inline per-site setting */
	--cpm-text: #01001E;   /* matches source's --ink */
	--cpm-muted: rgba(1,0,30,.62); /* matches source's --ink-meta */
	--cpm-border: rgba(1,0,30,.14); /* matches source's --rule */
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.cpm-careers, .cpm-careers * {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
}
.cpm-careers h1, .cpm-careers h2, .cpm-careers h3, .cpm-careers h4, .cpm-careers h5, .cpm-careers h6,
.cpm-careers p, .cpm-careers ul, .cpm-careers figure, .cpm-careers blockquote, .cpm-careers dl, .cpm-careers dd {
	margin: 0 !important;
}

.cpm-careers__header.cpm-careers__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 32px !important; /* was 24px */
	margin-bottom: clamp(34px, 2.92vw, 56px) !important; /* was fixed 40px */
}

.cpm-careers__titles {
	flex: 1 1 280px;
	min-width: 0;
}

.cpm-careers__filter {
	flex: 0 0 auto;
	position: relative;
}

.cpm-careers__label.cpm-careers__label {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
	text-transform: uppercase !important;
	letter-spacing: 1.8px !important; /* was .08em */
	font-size: 12px !important;
	font-weight: 700 !important; /* was 600 */
	line-height: 1.33 !important;
	color: rgba(1,0,30,.62) !important;
	margin: 0 !important; /* was "0 0 8px" — spacing to heading comes from the heading's own margin-top instead */
}

.cpm-careers__heading.cpm-careers__heading {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
	margin-top: clamp(14px, 1.15vw, 22px) !important; /* was missing entirely */
	font-size: clamp(28px, 2.5vw, 48px) !important; /* was fixed 40px */
	line-height: 1.17 !important; /* was 1.1 */
	font-weight: 300 !important; /* was 400 */
	letter-spacing: -.026em !important; /* was missing */
	color: #01001E !important;
}

.cpm-careers .cpm-careers__filter select.cpm-department-select {
	appearance: none;
	-webkit-appearance: none;
	background-color: #fff !important;
	border: 1px solid rgba(1,0,30,.22) !important; /* was --cpm-border */
	border-radius: 40px !important; /* matches --r-pill */
	padding: clamp(11px, .73vw, 14px) clamp(46px, 3.13vw, 60px) clamp(11px, .73vw, 14px) clamp(16px, 1.25vw, 24px) !important; /* was fixed 12px/40px/12px/20px */
	font-size: clamp(14px, .83vw, 16px) !important; /* was fixed 15px */
	font-weight: 400 !important;
	color: #01001E !important;
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2301001E' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	transition: border-color .45s cubic-bezier(.22,1,.36,1); /* was missing */
}
.cpm-careers .cpm-careers__filter select.cpm-department-select:hover {
	border-color: rgba(1,0,30,.42) !important; /* was missing */
}
.cpm-careers .cpm-careers__filter select.cpm-department-select:focus-visible {
	outline: 2px solid var(--cpm-accent); /* was missing */
	outline-offset: 2px;
}

.cpm-department.cpm-department {
	margin-bottom: 0 !important; /* was 56px on every item */
}
.cpm-department.cpm-department + .cpm-department {
	margin-top: clamp(28px, 2.92vw, 56px) !important; /* matches source's ".dept + .dept" pattern exactly */
}

.cpm-department.cpm-department--hidden {
	display: none;
}

.cpm-department__name.cpm-department__name {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
	color: var(--cpm-accent) !important;
	font-size: clamp(15px, 1.04vw, 20px) !important; /* was fixed 20px */
	font-weight: 500 !important; /* was 600 */
	line-height: 1.6 !important; /* was missing */
	letter-spacing: -.01em !important; /* was missing */
	margin: 0 !important; /* was "0 0 4px" */
	padding-bottom: 0 !important; /* was 12px — source has no extra padding here */
	border-bottom: 1px solid rgba(1,0,30,.14) !important;
}

.cpm-opening,
a.cpm-opening,
a.cpm-opening:link,
a.cpm-opening:visited,
a.cpm-opening:hover,
a.cpm-opening:active {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: clamp(16px, 1.15vw, 22px) 0 !important; /* was fixed 22px */
	border-bottom: 1px solid rgba(1,0,30,.14) !important;
	text-decoration: none !important;
	color: inherit !important;
	outline: none;
	transition: padding-left .45s cubic-bezier(.22,1,.36,1); /* was missing */
}

a.cpm-opening {
	cursor: pointer;
}
a.cpm-opening:hover {
	padding-left: clamp(8px, .83vw, 16px) !important; /* matches source's hover indent, was entirely missing */
}

a.cpm-opening:focus-visible {
	outline: 2px solid var(--cpm-accent);
	outline-offset: 4px;
	border-radius: 6px;
}

.cpm-opening.cpm-opening--hidden {
	display: none;
}

.cpm-opening__text {
	display: flex;
	flex-direction: column;
	gap: 0; /* was 4px — source uses the meta line's own margin-top instead */
}

.cpm-opening__title.cpm-opening__title {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
	font-size: clamp(15px, 1.04vw, 20px) !important; /* was fixed 18px */
	font-weight: 400 !important; /* was 500 */
	line-height: 1.3 !important; /* was missing */
	color: #01001E !important;
	text-decoration: none !important;
	transition: color .45s cubic-bezier(.22,1,.36,1); /* was 0.2s ease */
}

.cpm-opening--highlight .cpm-opening__title {
	color: var(--cpm-accent) !important;
}

a.cpm-opening:hover .cpm-opening__title,
a.cpm-opening:focus-visible .cpm-opening__title {
	color: var(--cpm-accent) !important;
}

.cpm-opening__meta.cpm-opening__meta {
	margin-top: 6px !important; /* was relying on parent's 4px gap instead */
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
	font-size: clamp(13px, .78vw, 15px) !important; /* was fixed 14px */
	font-weight: 400 !important;
	line-height: 1.47 !important; /* was missing */
	color: rgba(1,0,30,.62) !important;
	text-decoration: none !important;
}

.cpm-opening__icon.cpm-opening__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(15px, .94vw, 18px) !important; /* was fixed 24px */
	height: clamp(15px, .94vw, 18px) !important;
	color: var(--cpm-accent) !important;
	text-decoration: none;
	transition: transform .45s cubic-bezier(.22,1,.36,1); /* was 0.2s ease */
}

a.cpm-opening:hover .cpm-opening__icon,
a.cpm-opening:focus-visible .cpm-opening__icon {
	transform: translateX(5px); /* was 6px */
}

.cpm-opening__icon img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.cpm-opening__icon svg {
	width: 100% !important; /* overrides the SVG's own hardcoded width="20" height="20" attributes */
	height: 100% !important;
	display: block;
}

.cpm-opening__icon--static {
	opacity: 0.4;
}

@media (max-width: 600px) {
	.cpm-careers__header {
		align-items: flex-start;
	}
}