/**
 * csa-apply-page
 *
 * Two jobs: neutralise the modal chrome when the apply flow is rendered inline,
 * and style the collapsible job summary.
 */

/* -------------------------------------------------------------------------- */
/* Inline apply form                                                          */
/* -------------------------------------------------------------------------- */

.csa-apply-form-host {
	position: relative;
	min-height: 120px;
}

/*
 * Cap the form's width and centre it. --csa-apply-form-max comes from the
 * module setting and is simply absent when set to zero, in which case the
 * fallback leaves the form filling its column and the auto margins do nothing.
 *
 * The heading is capped to the same width and centred with it. It sits outside
 * the host as a sibling, so centring only the container would leave the
 * heading hard left with the form floating in the middle of the column.
 */
.csa-apply-form-module .csa-apply-form-heading,
.csa-apply-form-module .csa-apply-form-host #csa-form-container {
	max-width: var(--csa-apply-form-max, none);
	margin-left: auto;
	margin-right: auto;
}

.csa-apply-form-heading {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
}

/*
 * apply-page.js moves #csa-apply-modal into the host and adds this class. The
 * element keeps its id and inner structure so every selector in job-apply.js
 * still resolves; only the presentation changes.
 */
.csa-apply-form-host .csa-modal.csa-apply-inline {
	display: block !important;
	position: static;
	inset: auto;
	width: 100%;
	min-height: 0 !important;
	background: none;
	overflow: visible;
	z-index: auto;
}

.csa-apply-form-host .csa-apply-inline .csa-modal-overlay,
.csa-apply-form-host .csa-apply-inline .csa-modal-close {
	display: none;
}

.csa-apply-form-host .csa-apply-inline .csa-modal-content {
	position: static;
	transform: none;
	max-width: none;
	width: 100%;
	max-height: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	overflow: visible;
}

/*
 * The modal's own "Apply for: {title}" header is redundant inline — the Job
 * Summary module already names the job, and the form supplies its own step
 * heading. Hidden rather than removed, because job-apply.js writes the job
 * title into #csa-job-title and would throw on a missing node.
 */
.csa-apply-form-host .csa-apply-inline .csa-modal-header {
	display: none;
}

.csa-apply-form-host .csa-apply-inline .csa-modal-body {
	padding: 0;
	max-height: none;
	overflow: visible;
}

/*
 * The modal locks scrolling while it is open. Inline there is nothing to lock,
 * and leaving it set strands the page when the flow finishes.
 */
body.csa-apply-page-inline.csa-modal-open {
	overflow: auto;
}

.csa-apply-form-booting {
	display: flex;
	justify-content: center;
	padding: 48px 0;
}

/*
 * Form density.
 *
 * job-apply.css is tuned for the modal, where the form sits in a narrow column
 * on a dimmed background and tight spacing reads as focused. Given a full page
 * column the same values read as cramped — small labels, short inputs, rows
 * running together. These are inline-only overrides; scoped to the host, so
 * the modal keeps the styling it was designed with.
 *
 * px again, not rem, for the 10px-root reason above.
 */
/*
 * Two kinds of label in this form: the question, which is a bare <label>, and
 * the individual choices, which carry .csa-radio-label. They need opposite
 * treatment, so neither can be styled with a blanket label rule — doing that
 * put Yes and No inline on the end of the question.
 */
.csa-apply-form-host #csa-form-container .csa-form-field > label:not(.csa-radio-label) {
	display: block;
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}

/* Stacked, as on the reference, rather than running along after the question. */
.csa-apply-form-host #csa-form-container .csa-radio-label {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

.csa-apply-form-host #csa-form-container input[type="text"],
.csa-apply-form-host #csa-form-container input[type="email"],
.csa-apply-form-host #csa-form-container input[type="tel"],
.csa-apply-form-host #csa-form-container input[type="number"],
.csa-apply-form-host #csa-form-container input[type="date"],
.csa-apply-form-host #csa-form-container select,
.csa-apply-form-host #csa-form-container textarea {
	width: 100%;
	min-height: 42px;
	padding: 9px 12px;
	font-size: 16px;
	line-height: 1.4;
}

.csa-apply-form-host #csa-form-container textarea {
	min-height: 120px;
}

/* Radio and checkbox rows need the opposite treatment: aligned, not stretched. */
.csa-apply-form-host #csa-form-container input[type="radio"],
.csa-apply-form-host #csa-form-container input[type="checkbox"] {
	width: auto;
	min-height: 0;
	margin-right: 8px;
	transform: translateY(1px);
}

/* Breathing room between questions, which is most of what the reference has
 * and the modal does not. */
.csa-apply-form-host #csa-form-container .csa-form-field {
	margin-bottom: 16px;
}

.csa-apply-form-host #csa-form-container .csa-field-error {
	margin-top: 6px;
	font-size: 13px;
}

.csa-apply-form-host .csa-form-actions,
.csa-apply-form-host #csa-next-step,
.csa-apply-form-host #csa-prev-step,
.csa-apply-form-host #csa-submit-btn {
	margin-top: 8px;
}

.csa-apply-form-host #csa-next-step,
.csa-apply-form-host #csa-prev-step,
.csa-apply-form-host #csa-submit-btn {
	min-height: 42px;
	padding: 9px 24px;
	font-size: 16px;
}

/* -------------------------------------------------------------------------- */
/* Job summary                                                                */
/* -------------------------------------------------------------------------- */

/*
 * Sizes here are px, deliberately.
 *
 * The Beaver Builder theme sets a 10px root font size, so rem units render at
 * 62.5% of their apparent value — 1rem headings came out at 10px against 14px
 * body text, i.e. smaller than the paragraphs they were labelling. Anything
 * relative is a trap on a theme that rescales the root, and this module has to
 * survive whatever theme a client site is running.
 */
.csa-job-summary {
	--csa-jd-height: 260px;
	--csa-jd-fade: #ffffff;
	font-size: 14px;
	line-height: 1.5;
}

.csa-job-summary-title {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.csa-job-summary-location {
	margin: 0;
	font-size: 14px;
	opacity: 0.75;
}

.csa-job-summary-rule {
	margin: 16px 0;
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 0.12;
}

.csa-job-summary-meta {
	margin: 0 0 16px;
	font-size: 14px;
}

.csa-job-summary-meta-row {
	margin-bottom: 6px;
}

.csa-job-summary-meta-row dt,
.csa-job-summary-meta-row dd {
	display: inline;
	margin: 0;
}

.csa-job-summary-meta-row dt {
	font-weight: 700;
}

.csa-job-summary-meta-row dd::before {
	content: " ";
}

.csa-job-summary-desc-label {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
}

/*
 * Clamped by height rather than truncated, so the whole description stays in
 * the document: findable with the browser's own find, readable by assistive
 * tech that ignores the visual clip, and expandable with no second request.
 */
.csa-job-summary-desc {
	position: relative;
	overflow: hidden;
	max-height: var(--csa-jd-height);
	transition: max-height 0.3s ease;
}

.csa-job-summary-desc::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 72px;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent, var(--csa-jd-fade));
	transition: opacity 0.2s ease;
}

/*
 * Expanded is still bounded.
 *
 * These descriptions run to 2,800px. Letting the card grow to that pushes the
 * page a long way down and strands the reader far from the form, so the text
 * scrolls inside the card instead of the card growing to fit it.
 */
.csa-job-summary.is-expanded .csa-job-summary-desc {
	max-height: var(--csa-jd-expanded-max, 60vh);
	overflow-y: auto;
}

/*
 * Sticky card, matching production, which pins its right pane at top: 16px.
 *
 * Laid out as a flex column so the description takes whatever height is left
 * after the title, meta and toggle, rather than a guessed pixel offset that
 * breaks the moment a job has a longer title or an extra meta row.
 *
 * Sticky is silently inert if any ancestor has overflow other than visible.
 * The module's help text says so, because there is no way to detect it here
 * and the symptom is simply that nothing happens.
 */
.csa-job-summary.is-sticky {
	position: sticky;
	top: var(--csa-jd-sticky-top, 16px);
	max-height: calc(100vh - var(--csa-jd-sticky-top, 16px) - 24px);
	display: flex;
	flex-direction: column;
}

/* Flex children default to min-height:auto and refuse to shrink below their
 * content, which would defeat the max-height above. */
.csa-job-summary.is-sticky .csa-job-summary-desc {
	min-height: 0;
}

.csa-job-summary.is-sticky.is-expanded .csa-job-summary-desc {
	flex: 1 1 auto;
	max-height: none;
}

.csa-job-summary.is-expanded .csa-job-summary-desc::after {
	opacity: 0;
}

/*
 * Nothing to expand: apply-page.js adds this when the description already fits,
 * so a short posting does not get a fade and a control that does nothing.
 */
.csa-job-summary.csa-jd-fits .csa-job-summary-desc {
	max-height: none;
}

.csa-job-summary.csa-jd-fits .csa-job-summary-desc::after,
.csa-job-summary.csa-jd-fits .csa-job-summary-toggle {
	display: none;
}

.csa-job-summary-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 4px 0;
	background: none;
	border: 0;
	font-weight: 600;
	cursor: pointer;
}

.csa-job-summary-toggle:hover .csa-job-summary-toggle-text {
	text-decoration: underline;
}

.csa-job-summary-chevron {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
}

.csa-job-summary[class*="is-expanded"] .csa-job-summary-chevron {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* -------------------------------------------------------------------------- */
/* Notices                                                                    */
/* -------------------------------------------------------------------------- */

.csa-apply-notice {
	padding: 24px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
}

.csa-apply-notice-title {
	margin: 0 0 6px;
	font-weight: 700;
}

.csa-apply-notice-body {
	margin: 0;
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	.csa-job-summary-desc,
	.csa-job-summary-desc::after,
	.csa-job-summary-chevron {
		transition: none;
	}
}