/* Career Manager — styled to match demow.live's own site identity
   (cream / white / cyan accent / Bahnschrift / pill buttons), not de-babel.com's dark theme. */

.cm-jobs-wrap,
.cm-form-wrap {
	font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
	max-width: 1140px;
	margin: 0 auto;
	padding: 48px 20px;
	box-sizing: border-box;
}

.cm-jobs-wrap *,
.cm-form-wrap * {
	box-sizing: border-box;
}

.cm-jobs-heading,
.cm-form-heading {
	font-family: 'Bahnschrift', 'Segoe UI', sans-serif !important;
	text-align: center;
	font-size: 28px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.5px !important;
	text-transform: none !important;
	margin: 0 0 32px !important;
	color: #1c1c1c;
}

/* ---- Job cards ---- */

.cm-jobs-grid {
	display: grid;
	grid-template-columns: repeat(var(--cm-columns, 3), 1fr);
	gap: 24px;
	align-items: start;
}

@media (max-width: 900px) {
	.cm-jobs-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.cm-jobs-grid {
		grid-template-columns: 1fr;
	}
}

.cm-job-card {
	background: #ffffff;
	border-radius: 14px;
	padding: 28px 24px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cm-job-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cm-badge {
	display: inline-block;
	background: #96daea;
	color: #0d3b45;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 999px;
	letter-spacing: 0.3px;
}

.cm-badge-alt {
	background: #f0ede4;
	color: #6b5f3f;
}

.cm-job-title {
	font-family: 'Bahnschrift', 'Segoe UI', sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 4px 0 0 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: #1c1c1c;
}

.cm-job-location {
	font-size: 13px;
	color: #7a7a7a;
	margin: 0;
}

.cm-job-desc {
	font-size: 14px;
	line-height: 1.6;
	color: #4a4a4a;
	margin: 0;
	flex-grow: 1;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cm-apply-btn,
.cm-submit-btn {
	align-self: flex-start;
	background: #96daea;
	color: #0d3b45;
	border: none;
	padding: 10px 26px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
	font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
	margin-top: 4px;
}

.cm-apply-btn:hover,
.cm-submit-btn:hover {
	background: #7cc9db;
	transform: translateY(-1px);
}

.cm-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.cm-no-jobs {
	text-align: center;
	color: #7a7a7a;
}

/* ---- Application form ---- */

.cm-form-wrap {
	background: #f0ede4;
	border-radius: 18px;
	margin-top: 40px;
}

.cm-application-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 640px;
	margin: 0 auto;
}

.cm-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
}

.cm-form-row-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

@media (max-width: 600px) {
	.cm-form-row-2col {
		grid-template-columns: 1fr;
	}
}

.cm-application-form label {
	font-size: 13px;
	font-weight: 600;
	color: #1c1c1c;
}

.cm-req {
	color: #c0392b;
}

.cm-application-form input[type='text'],
.cm-application-form input[type='email'],
.cm-application-form input[type='tel'],
.cm-application-form input[type='file'],
.cm-application-form select,
.cm-application-form textarea {
	font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
	font-size: 14px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid #d8d3c4;
	background: #ffffff;
	color: #1c1c1c;
	width: 100%;
}

.cm-application-form textarea {
	resize: vertical;
}

.cm-submit-btn {
	align-self: center;
	padding: 12px 40px;
}

.cm-form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cm-form-message {
	max-width: 640px;
	margin: 0 auto 18px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
	text-align: center;
}

.cm-message-success {
	background: #e4f7ea;
	color: #1e6b3a;
}

.cm-message-error {
	background: #fbe7e7;
	color: #a23127;
}


/* ---------------------------------------------------------------
   2026-08-29 client request: show the full job description text
   (no truncation), while keeping the "Apply Now" button aligned
   at the same bottom edge across all cards in a row, regardless
   of how long each job's description is.
   --------------------------------------------------------------- */
.cm-jobs-grid { align-items: stretch; }

.cm-job-desc {
	display: block;
	-webkit-line-clamp: unset;
	-webkit-box-orient: unset;
	overflow: visible;
}

.cm-apply-btn { margin-top: auto; }


/* -----------------------------------------------------------
   2026-08-30 (session 9) - Careers card polish, all client-requested.
   ----------------------------------------------------------- */

/* 1. Tags with no pill frame - plain text labels. The badges never had a
      border; the visible frame was the filled pill, so the background and
      padding come off and the gap grows to keep them readable apart. */
.cm-badge,
.cm-badge.cm-badge-alt {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.cm-job-badges { gap: 18px !important; }

/* 2. Job title in capitals, like the rest of the site. */
.cm-job-title { text-transform: uppercase !important; }

/* 3. Modern pin icon. The old one was a literal U+1F4CD in the template,
      which WordPress swaps for its own colour emoji IMAGE from s.w.org -
      hence the dated red pin AND an extra external request. The emoji img
      is hidden and replaced with an inline SVG outline pin (no PHP edit,
      no network request), tinted to match the location text (#7a7a7a). */
.cm-job-location img.emoji { display: none !important; }
.cm-job-location::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 7px;
  vertical-align: -2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.4-8 12-8 12s-8-7.6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* 4. Apply button: blue with BLACK capital text (it was inheriting a pale
      cream from a theme rule, which is why it looked washed out), turning
      solid black on hover/press like every other button on the site. */
.cm-apply-btn,
.cm-submit-btn {
  background: #96daea !important;
  color: #000 !important;
  text-transform: uppercase !important;
}
.cm-apply-btn:hover, .cm-apply-btn:focus-visible, .cm-apply-btn:active,
.cm-submit-btn:hover, .cm-submit-btn:focus-visible, .cm-submit-btn:active {
  background: #000 !important;
  color: #fff !important;
}

/* 5. No drop shadow under the cards. */
.cm-job-card { box-shadow: none !important; }