/*
 * G&A careers -- fully separate stylesheet, fully separate DOM scope
 * (#ga-jobs-wrapper / #ga-apply-wrapper). Nothing here touches JazzHR's
 * shared "Legacy Layout and Jobs Widget Custom CSS" box, so it can't
 * affect EFM's Basic Widget, and nothing EFM does there can affect this.
 *
 * The custom properties below are placeholders carried over from EFM's
 * job board styling, so this doesn't render unstyled before G&A's own
 * brand tokens (fonts, colors, spacing) are dropped in. Fonts, colors and
 * type sizes read from these variables, so a rebrand is mostly a one-block
 * change; layout values copied from the widget (15% inset, 16pt arrow) are
 * written inline in the rules that use them.
 */

#ga-jobs-wrapper,
#ga-apply-wrapper {
	--ga-font: "Suisse", Helvetica, Arial, sans-serif;
	--ga-title-color: #ffffff;
	--ga-title-size: 22px;
	--ga-info-color: #bdbdbd;
	--ga-info-size: 13px;
	--ga-details-size: 16px;
	--ga-gap: clamp(15px, 4vw, 45px);
	/* Apply-page layout hooks. Override any of these from the theme's
	 * Additional CSS (e.g. #ga-apply-wrapper { --ga-apply-width: 60%; })
	 * instead of editing the plugin. */
	--ga-apply-width: 70%;
	--ga-apply-align: left; /* left | center: header, description and form */
	--ga-apply-title-size: clamp(32px, 4.5vw, 60px);
	--ga-field-max-width: 560px;
	--ga-field-bg: #000; /* page background: the dropdown list and fields blend into it */
	--ga-apply-bottom-gap: 96px;
	/* Two-column job page: description left, form right. */
	--ga-apply-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	--ga-apply-col-gap: clamp(32px, 5vw, 80px);
	--ga-aside-position: static; /* "sticky" keeps the form in view while the description scrolls */
	--ga-aside-top: 24px;
	--ga-desc-align: var(--ga-apply-align);
	--ga-desc-color: var(--ga-info-color); /* softer than the white title: easier on the eyes in long text */
	--ga-desc-line-height: 1.5;
	--ga-desc-heading-size: 18px;
	--ga-desc-bottom-gap: 48px;
	font-family: var(--ga-font);
	font-weight: normal;
	color: var(--ga-title-color);
	padding-left: var(--ga-gap);
}

/* ---- Job list ----
 * Values mirror the final Basic Widget overrides EFM's board ended up with,
 * so both boards read as one design. */

#ga-jobs-wrapper {
	padding-left: 15%;
}

#ga-jobs-wrapper .ga-job {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin-top: 20px; /* space above the divider; not specified by the widget CSS, adjust to taste */
}

/* Divider sits on the title, 5px above the text, as in the widget. */
#ga-jobs-wrapper .ga-job-title {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font: normal var(--ga-title-size) / 1.3em var(--ga-font);
	color: var(--ga-title-color);
	text-decoration: none;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 5px;
}

/* No divider above the very first job. */
#ga-jobs-wrapper .ga-job:first-child {
	margin-top: 0;
}

#ga-jobs-wrapper .ga-job:first-child .ga-job-title {
	border-top: none;
}

#ga-jobs-wrapper .ga-job:hover .ga-job-title {
	text-decoration: underline;
	cursor: pointer;
}

#ga-jobs-wrapper .ga-job-info {
	display: block;
	width: 100%;
	font-size: var(--ga-info-size);
	font-weight: normal;
	color: var(--ga-info-color);
	margin-top: 6px;
	margin-bottom: 16px;
}

/* "View details": text and arrow are generated content so the arrow can
 * sit on the text's centerline and slide on hover. */
#ga-jobs-wrapper .ga-job-view-details {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	margin-bottom: 13px;
	text-decoration: none;
	color: var(--ga-info-color);
}

#ga-jobs-wrapper .ga-job-view-details::before {
	content: "View details";
	font-size: var(--ga-details-size);
	text-decoration: none;
}

#ga-jobs-wrapper .ga-job-view-details::after {
	content: "\2192"; /* → */
	font-size: 16pt;
	display: inline-block;
	transition: transform 500ms ease;
}

#ga-jobs-wrapper .ga-job:hover .ga-job-view-details::after {
	transform: translateX(6px);
}

#ga-jobs-wrapper .ga-empty,
#ga-jobs-wrapper .ga-error,
#ga-apply-wrapper .ga-error {
	font-size: var(--ga-info-size);
	color: var(--ga-info-color);
}

/* ---- Job page + application form ----
 * One column, centered on the page at --ga-apply-width, with everything
 * aligned to the same edge (--ga-apply-align). Hierarchy, top to bottom:
 * back link, large title, small meta line, divider, description with
 * sub-headings, "Apply" heading, form. */

#ga-apply-wrapper {
	width: var(--ga-apply-width);
	max-width: 100%;
	margin: 0 auto;
	padding: 0 var(--ga-gap) var(--ga-apply-bottom-gap);
	box-sizing: border-box;
	text-align: var(--ga-apply-align);
}

#ga-apply-wrapper .ga-back {
	display: inline-block;
	margin: 0 0 28px;
	font-size: var(--ga-info-size);
	color: var(--ga-info-color);
	text-decoration: none;
}

#ga-apply-wrapper .ga-back:hover {
	text-decoration: underline;
}

/* Two columns: description (left) and application form (right). The
 * header above (back link, title, meta) spans both. A job page with no
 * description column (the open application) is a single column, and
 * everything stacks, description first, below 900px. */
#ga-apply-wrapper .ga-apply-layout {
	display: grid;
	grid-template-columns: var(--ga-apply-columns);
	column-gap: var(--ga-apply-col-gap);
	align-items: start;
}

#ga-apply-wrapper .ga-apply-layout--single {
	grid-template-columns: minmax(0, var(--ga-field-max-width));
}

#ga-apply-wrapper .ga-apply-aside {
	position: var(--ga-aside-position);
	top: var(--ga-aside-top);
}

#ga-apply-wrapper .ga-apply-aside .ga-form-heading {
	margin: 0 0 24px;
	padding: 0;
	border-top: 0;
}

@media (max-width: 900px) {
	#ga-apply-wrapper .ga-apply-layout,
	#ga-apply-wrapper .ga-apply-layout--single {
		grid-template-columns: minmax(0, 1fr);
	}

	#ga-apply-wrapper .ga-apply-aside {
		position: static;
		/* the description's own bottom gap separates it from the form */
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		padding-top: 32px;
	}

	#ga-apply-wrapper .ga-apply-layout--single .ga-apply-aside {
		border-top: 0;
		padding-top: 0;
	}
}

/* Job title (or "Open application"). */
#ga-apply-wrapper .ga-apply-heading {
	margin: 0 0 14px;
	padding: 0;
	font: bold var(--ga-apply-title-size) / 1.05 var(--ga-font);
	letter-spacing: -0.01em;
	color: var(--ga-title-color);
}

/* Department / location / type, with the divider that opens the body. */
#ga-apply-wrapper .ga-apply-meta {
	margin: 0 0 32px;
	padding: 0 0 32px;
	font-size: 15px;
	color: var(--ga-info-color);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Job description. Alignment, line height and spacing come from the
 * variables at the top, and the block has its own class, so layout tweaks
 * belong in the theme's Additional CSS, not in the plugin.
 * JazzHR descriptions carry inline color, font and indent styling from its
 * editor (often black Arial, odd margins), which looks wrong on a dark page,
 * so color/font/indent are reset below to follow this page's type. The
 * theme also zeroes margins on p/li/ul, so spacing is set explicitly. */
#ga-apply-wrapper .ga-job-description {
	text-align: var(--ga-desc-align);
	color: var(--ga-desc-color);
	font-size: var(--ga-details-size);
	line-height: var(--ga-desc-line-height);
	margin: 0 0 var(--ga-desc-bottom-gap);
}

#ga-apply-wrapper .ga-job-description * {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	background: transparent !important;
	text-align: inherit !important;
}

/* Flatten the editor's inline indents on text blocks (lists keep theirs). */
#ga-apply-wrapper .ga-job-description p,
#ga-apply-wrapper .ga-job-description div,
#ga-apply-wrapper .ga-job-description span,
#ga-apply-wrapper .ga-job-description h1,
#ga-apply-wrapper .ga-job-description h2,
#ga-apply-wrapper .ga-job-description h3,
#ga-apply-wrapper .ga-job-description h4 {
	margin-left: 0 !important;
	padding-left: 0 !important;
	text-indent: 0 !important;
}

#ga-apply-wrapper .ga-job-description p {
	margin: 0 0 1em;
}

/* Sub-headings: real headings, plus paragraphs that are nothing but bold
 * text ("About the Role", "Key Responsibilities"); the plugin tags those
 * paragraphs with .ga-desc-heading when it tidies the description. */
#ga-apply-wrapper .ga-job-description h1,
#ga-apply-wrapper .ga-job-description h2,
#ga-apply-wrapper .ga-job-description h3,
#ga-apply-wrapper .ga-job-description h4,
#ga-apply-wrapper .ga-job-description .ga-desc-heading {
	font-size: var(--ga-desc-heading-size) !important;
	font-weight: bold;
	line-height: 1.3;
	margin: 2em 0 0.6em;
}

/* Headings and bold text stay full-strength against the softer body text. */
#ga-apply-wrapper .ga-job-description h1,
#ga-apply-wrapper .ga-job-description h2,
#ga-apply-wrapper .ga-job-description h3,
#ga-apply-wrapper .ga-job-description h4,
#ga-apply-wrapper .ga-job-description strong,
#ga-apply-wrapper .ga-job-description b {
	color: var(--ga-title-color) !important;
}

#ga-apply-wrapper .ga-job-description > :first-child {
	margin-top: 0;
}

#ga-apply-wrapper .ga-job-description ul,
#ga-apply-wrapper .ga-job-description ol {
	margin: 0 0 1em;
	padding-left: 1.25em;
	list-style-position: outside;
}

#ga-apply-wrapper .ga-job-description ul {
	list-style-type: disc;
}

#ga-apply-wrapper .ga-job-description li {
	margin: 0 0 0.4em;
	padding: 0;
}

#ga-apply-wrapper .ga-job-description li p {
	margin: 0;
}

/* The site theme draws its own dash on list items (a ::before), which sat
 * next to the browser's bullet as a double marker. Keep the real bullet,
 * drop the theme's decoration. */
#ga-apply-wrapper .ga-job-description li::before,
#ga-apply-wrapper .ga-job-description li::after {
	content: none !important;
	display: none !important;
}

#ga-apply-wrapper .ga-form-heading {
	margin: 0 0 24px;
	padding: 32px 0 0;
	font: bold var(--ga-desc-heading-size) / 1.3 var(--ga-font);
	color: var(--ga-title-color);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* The site theme restyles form controls globally (one of its rules
 * collapsed these fields to zero width), so the form's layout properties are
 * pinned here. */
#ga-apply-wrapper form,
#ga-apply-wrapper .ga-field {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
	float: none !important;
	position: static !important;
	overflow: visible !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
}

#ga-apply-wrapper .ga-field {
	margin: 0 0 18px;
	padding: 0;
	color: var(--ga-info-color);
	font-size: var(--ga-info-size);
}

#ga-apply-wrapper .ga-field label {
	display: block !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	float: none !important;
	margin: 0 0 6px;
	padding: 0;
	overflow: visible !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	color: var(--ga-info-color);
	font-size: var(--ga-info-size);
	line-height: 1.4;
	text-align: left;
}

#ga-apply-wrapper input[type="text"],
#ga-apply-wrapper input[type="email"],
#ga-apply-wrapper input[type="tel"],
#ga-apply-wrapper input[type="file"],
#ga-apply-wrapper select {
	display: block !important;
	width: 100% !important;
	max-width: var(--ga-field-max-width) !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
	margin: 0;
	text-align: left;
	font-family: var(--ga-font);
	font-size: var(--ga-details-size);
	color: var(--ga-title-color);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 10px 12px;
	box-sizing: border-box;
	min-height: 44px;
	-webkit-appearance: none;
	appearance: none;
}

/* Dropdown: flat like the text fields, with a thin chevron instead of the
 * browser's arrow. color-scheme: dark makes the browser draw the open list
 * dark too (Chrome, Edge, Firefox); the option colors cover the rest. The
 * highlighted row is drawn by the browser and can't be restyled. */
#ga-apply-wrapper select {
	color-scheme: dark;
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
	cursor: pointer;
}

#ga-apply-wrapper select option {
	color: var(--ga-title-color);
	background: var(--ga-field-bg);
}

/* File picker: its button matches the outlined style instead of the
 * browser's gray one. */
#ga-apply-wrapper input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 6px 14px;
	font: inherit;
	font-size: var(--ga-info-size);
	color: var(--ga-title-color);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	cursor: pointer;
}

#ga-apply-wrapper input[type="file"]::file-selector-button:hover {
	border-color: var(--ga-title-color);
}

#ga-apply-wrapper .ga-submit {
	font-family: var(--ga-font);
	font-size: var(--ga-details-size);
	color: #000;
	background: #fff;
	border: none;
	padding: 12px 24px;
	cursor: pointer;
}

#ga-apply-wrapper .ga-submit:disabled {
	opacity: 0.5;
	cursor: default;
}

#ga-apply-wrapper .ga-form-status {
	margin-top: 12px;
	font-size: var(--ga-info-size);
	color: var(--ga-info-color);
}

/* Phones and small tablets: 70% would be too narrow. */
@media (max-width: 768px) {
	#ga-apply-wrapper {
		--ga-apply-width: 100%;
	}
}