/**
 * helpDeskModern.php — supplemental styles only (loads after styles.css and
 * jobApplicationModern.css).
 *
 * Reuses base components from styles.css / jobApplicationModern.css:
 *   .page, .content-gutter, .hero-spacer, .hero-banner.hero-banner--compact,
 *   .application-section, .application-section__heading,
 *   .application-section__intro, .application-input(.__label/.__field/.__help),
 *   .application-input-row, .application-submit-row, .btn-application-next,
 *   .modernApplicant-customer-logo, .site-footer.
 *
 * Page is single-column (no right sidebar) per the request — there is no
 * .application-sidebar consumption here, only a single .helpDesk-main column
 * capped at --content-width.
 */

/* ----- Bootstrap container override scope (mirror jobApplicationModern pattern) ----- */
.helpDesk-page .helpDesk-main .container-fluid,
.helpDesk-page .hero-spacer .container-fluid {
	padding-left: 0;
	padding-right: 0;
	max-width: var(--content-width);
}

/* ----- Single-column main (single col; no sidebar) ----- */
.helpDesk-main {
	margin-top: 48px;
}

.helpDesk-grid {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

/* ----- Inline link inside intro paragraphs ----- */
.helpDesk-link {
	color: var(--color-black);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.helpDesk-link:hover,
.helpDesk-link:focus {
	color: var(--color-black);
	opacity: 0.85;
}

/* ----- "Heads up" callout (we're not the recruiter) ----- */
.helpDesk-callout {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 24px;
	border: 1px solid var(--color-neutral-200);
	border-radius: 12px;
	background: var(--color-neutral-25);
}

.helpDesk-callout > .ph {
	flex-shrink: 0;
	font-size: 24px;
	line-height: 26px;
	color: var(--color-black);
}

.helpDesk-callout__body {
	flex: 1 1 auto;
	min-width: 0;
}

.helpDesk-callout__body p {
	margin: 0;
	font-family: var(--font-dm);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0.032px;
	color: var(--color-black);
}

.helpDesk-callout__body p + p {
	margin-top: 6px;
}

.helpDesk-callout__title {
	font-weight: 700;
}

/* ----- Optional label suffix ----- */
.helpDesk-optional {
	font-weight: 400;
	color: var(--color-neutral-400);
}

/* ----- Description textarea — lift the min-height past the default 114px
        because help requests are longer than form free-text fields. ----- */
.helpDesk-textarea.application-input__field {
	min-height: 168px;
	height: 168px;
}

/* ----- reCAPTCHA spacing ----- */
.helpDesk-recaptcha {
	margin-top: 24px;
}

/* ----- Submit row: left-align (not flex-end) so the button doesn't sit by
        itself on the right of a wide single-column form. ----- */
.helpDesk-submit-row {
	justify-content: flex-start;
	margin-top: 24px;
}

/* ----- Post-submit message panel (rendered by mxDecode($_GET['mx'])) ----- */
.helpDesk-message {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--color-neutral-200);
	border-radius: 12px;
	background: var(--color-white);
	font-family: var(--font-dm);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0.032px;
	color: var(--color-black);
}

.helpDesk-message > .ph {
	flex-shrink: 0;
	font-size: 28px;
	line-height: 28px;
}

.helpDesk-message__body {
	flex: 1 1 auto;
	min-width: 0;
}

.helpDesk-message__body p {
	margin: 0;
}

.helpDesk-message__body p + p {
	margin-top: 8px;
}

.helpDesk-message--success {
	background: rgba(54, 203, 113, 0.08);
	border-color: rgba(54, 203, 113, 0.6);
}

.helpDesk-message--success > .ph {
	color: #36cb71;
}

.helpDesk-message--notice {
	background: rgba(94, 197, 228, 0.08);
	border-color: rgba(94, 197, 228, 0.6);
}

.helpDesk-message--notice > .ph {
	color: #5ec5e4;
}

.helpDesk-message__title {
	font-family: var(--font-dm);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 8px;
}

.helpDesk-message__actions {
	margin-top: 16px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
	.helpDesk-main {
		margin-top: 32px;
	}

	.helpDesk-grid {
		gap: 32px;
	}

	.helpDesk-callout {
		flex-direction: column;
		gap: 12px;
		padding: 18px;
	}
}

@media (max-width: 575px) {
	.helpDesk-main {
		margin-top: 24px;
	}

	.helpDesk-textarea.application-input__field {
		min-height: 200px;
		height: 200px;
	}
}