/**
 * All colors are CSS custom properties with sensible defaults below.
 * Override any of them from Settings > Greenhouse Connect > Appearance
 * (no file editing needed) - that admin screen outputs a small
 * :root-like override block for #ghconnect-app that beats these
 * defaults. See class-gh-shortcode.php (build_style_overrides()).
 *
 * The "Additional CSS" box in that same admin screen is appended after
 * everything below, so it can override anything here too.
 */

#ghconnect-app {
	--ghconnect-text-color: inherit;
	--ghconnect-link-color: inherit;
	--ghconnect-border-color: #ddd;
	--ghconnect-hover-bg: #f7f7f7;
	--ghconnect-hover-text-color: inherit;
	--ghconnect-required-color: #c00;
	--ghconnect-error-color: #c00;

	width: 100% !important;
	box-sizing: border-box;
	color: var( --ghconnect-text-color );
}

.ghconnect-job-count-row {
	margin-bottom: 0.5em;
}

.ghconnect-job-count {
	font-weight: 600;
	opacity: 0.8;
}

.ghconnect-filters {
	margin-bottom: 1.25em;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 0.75em;
	align-items: center;
}

.ghconnect-filter-col input[type="search"],
.ghconnect-filter-col select {
	width: 100% !important;
	box-sizing: border-box;
	padding: 0.6em 0.8em;
}

@media ( max-width: 640px ) {
	.ghconnect-filters {
		grid-template-columns: 1fr;
	}
}

.ghconnect-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.ghconnect-department-group {
	margin-bottom: 1.5em;
}

.ghconnect-department-heading {
	margin: 0 0 0.25em;
	padding-bottom: 0.4em;
	border-bottom: 2px solid var( --ghconnect-border-color );
}

.ghconnect-job-list,
.ghconnect-job-list-group {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100% !important;
}

.ghconnect-job-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
	padding: 0.9em 0.5em;
	border-bottom: 1px solid var( --ghconnect-border-color );
}

.ghconnect-job-row:hover {
	background: var( --ghconnect-hover-bg );
	color: var( --ghconnect-hover-text-color );
}

/* Links/location don't set their own color by default (inherit from
   the row above), so a hover text-color override actually takes
   effect instead of being overridden right back by a child rule. */
.ghconnect-job-link {
	font-weight: 600;
	text-decoration: none;
	flex: 1 1 auto;
	color: var( --ghconnect-link-color );
}

.ghconnect-job-row:hover .ghconnect-job-link,
.ghconnect-job-row:hover .ghconnect-job-location {
	color: var( --ghconnect-hover-text-color );
}

.ghconnect-job-location {
	font-size: 0.9em;
	flex: 0 0 auto;
	margin-left: 1.5em;
	white-space: nowrap;
	opacity: 0.75;
}

.ghconnect-field-wrap {
	margin-bottom: 1em;
}

/* Groups several fields under one rounded card border — used for the
   Contact Info, Resume/Cover Letter, and custom-questions groupings in
   renderJobDetail(), on request after the per-field border (0.12.2)
   turned out to be the wrong level: borders on the SECTION, not each
   individual input. Education entries and Compliance sections already
   have their own equivalent card border (.ghconnect-education-entry,
   .ghconnect-compliance-section) and are untouched by this. */
.ghconnect-section-card {
	position: relative;
	padding: 1em;
	margin-bottom: 1em;
	border: 1px solid var( --ghconnect-border-color );
	border-radius: 6px;
}

.ghconnect-section-card .ghconnect-field-wrap:last-child {
	margin-bottom: 0;
}

.ghconnect-field-error input[type="text"],
.ghconnect-field-error input[type="file"],
.ghconnect-field-error textarea,
.ghconnect-field-error select {
	border: 1px solid var( --ghconnect-error-color );
}

.ghconnect-field-error label {
	color: var( --ghconnect-error-color );
}

.ghconnect-field-wrap label {
	display: block;
	margin-bottom: 0.25em;
	font-weight: 600;
}

.ghconnect-field-wrap input[type="text"],
.ghconnect-field-wrap input[type="file"],
.ghconnect-field-wrap textarea,
.ghconnect-field-wrap select {
	width: 100%;
	padding: 0.5em;
	box-sizing: border-box;
}

.ghconnect-checkbox {
	display: block;
	font-weight: normal;
}

.ghconnect-required {
	color: var( --ghconnect-required-color );
}

.ghconnect-required-note {
	margin: 0 0 1.25em;
	font-size: 0.875em;
	opacity: 0.75;
}

.ghconnect-file-hint {
	margin: 0.35em 0 0;
	font-size: 0.8125em;
	font-weight: normal;
	opacity: 0.7;
}

.ghconnect-locate-wrap {
	margin: -0.5em 0 1.25em;
}

.ghconnect-locate-wrap a {
	color: var( --ghconnect-link-color );
	font-size: 0.875em;
}

.ghconnect-locate-wrap a:hover {
	color: var( --ghconnect-hover-text-color );
}

.ghconnect-field-row {
	display: flex;
	gap: 1em;
}

.ghconnect-field-row .ghconnect-field-half {
	flex: 1 1 50%;
	min-width: 0;
}

@media ( max-width: 480px ) {
	.ghconnect-field-row {
		flex-direction: column;
		gap: 0;
	}
}

.ghconnect-education-entry {
	position: relative;
	padding: 1em;
	margin-bottom: 1em;
	border: 1px solid var( --ghconnect-border-color );
	border-radius: 6px;
}

.ghconnect-education-entry .ghconnect-field-wrap:last-of-type {
	margin-bottom: 0;
}

.ghconnect-edu-date-row {
	display: flex;
	gap: 0.5em;
}

.ghconnect-edu-date-row select {
	flex: 1 1 50%;
}

.ghconnect-edu-school-wrap {
	position: relative;
}

.ghconnect-edu-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 6;
	max-height: 12em;
	overflow-y: auto;
	background: var( --ghconnect-bg-color, #fff );
	border: 1px solid var( --ghconnect-border-color );
	border-radius: 4px;
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.15 );
}

.ghconnect-edu-suggestion {
	display: block;
	width: 100%;
	text-align: left;
	font: inherit;
	padding: 0.5em 0.75em;
	border: none;
	background: transparent;
	cursor: pointer;
	color: inherit;
}

.ghconnect-edu-suggestion:hover,
.ghconnect-edu-suggestion:focus {
	background: var( --ghconnect-hover-bg );
	color: var( --ghconnect-hover-text-color );
}

.ghconnect-edu-remove {
	font: inherit;
	font-size: 0.875em;
	padding: 0.3em 0.7em;
	border: 1px solid var( --ghconnect-border-color );
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

#ghconnect-edu-add {
	font: inherit;
	font-weight: 600;
	padding: 0.5em 1em;
	border: 1px solid var( --ghconnect-border-color );
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.ghconnect-filetext-wrap > label {
	margin-bottom: 0.5em;
}

.ghconnect-filetext-tabs {
	display: flex;
	gap: 0.5em;
	margin-bottom: 0.5em;
}

.ghconnect-filetext-tab {
	font: inherit;
	font-weight: 600;
	padding: 0.4em 0.9em;
	border: 1px solid var( --ghconnect-border-color );
	border-radius: 999px;
	background: transparent;
	color: var( --ghconnect-text-color );
	cursor: pointer;
}

.ghconnect-filetext-tab.is-active {
	background: var( --ghconnect-hover-bg );
	border-color: var( --ghconnect-text-color );
}

.ghconnect-filetext-panel textarea {
	min-height: 8em;
}

#ghconnect-apply-form {
	position: relative;
}

.ghconnect-loading-overlay {
	display: none;
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.45 );
	border-radius: 4px;
	z-index: 5;
}

.ghconnect-form-submitting .ghconnect-loading-overlay {
	display: flex;
}

.ghconnect-loading-dots {
	display: flex;
	gap: 0.4em;
}

.ghconnect-loading-dots span {
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: #fff;
	animation: ghconnect-bounce 1.4s ease-in-out infinite both;
}

.ghconnect-loading-dots span:nth-child( 1 ) {
	animation-delay: -0.32s;
}

.ghconnect-loading-dots span:nth-child( 2 ) {
	animation-delay: -0.16s;
}

@keyframes ghconnect-bounce {
	0%, 80%, 100% {
		transform: scale( 0.4 );
		opacity: 0.5;
	}
	40% {
		transform: scale( 1 );
		opacity: 1;
	}
}

.ghconnect-form-message {
	margin-top: 1em;
	font-weight: 600;
}

.ghconnect-error {
	color: var( --ghconnect-error-color );
}

.ghconnect-hidden {
	display: none;
}

.ghconnect-back {
	margin-bottom: 1em;
}

.ghconnect-back a {
	text-decoration: none;
	color: var( --ghconnect-link-color );
}

.ghconnect-job-detail-location {
	font-size: 0.95em;
	opacity: 0.75;
	margin-top: -0.5em;
	margin-bottom: 1em;
}

/*
 * The job description is raw, externally-authored HTML from Greenhouse
 * with no spacing conventions of its own guaranteed - normalize the
 * common elements so headings/lists/paragraphs don't run together.
 */
.ghconnect-job-content p {
	margin: 0 0 1em;
}

.ghconnect-job-content ul,
.ghconnect-job-content ol {
	margin: 0 0 1em;
	padding-left: 1.5em;
}

.ghconnect-job-content li {
	margin-bottom: 0.4em;
}

.ghconnect-job-content h1,
.ghconnect-job-content h2,
.ghconnect-job-content h3,
.ghconnect-job-content h4 {
	margin: 1.2em 0 0.5em;
}

.ghconnect-job-content > *:first-child {
	margin-top: 0;
}

.ghconnect-job-content > *:last-child {
	margin-bottom: 0;
}

.ghconnect-related-jobs {
	margin-top: 2.5em;
	padding-top: 1.5em;
	border-top: 1px solid var( --ghconnect-border-color );
}

.ghconnect-related-heading {
	margin: 0 0 1em;
}

.ghconnect-related-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1em;
}

@media ( max-width: 640px ) {
	.ghconnect-related-grid {
		grid-template-columns: 1fr;
	}
}

.ghconnect-related-card {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	padding: 1em;
	border: 1px solid var( --ghconnect-border-color );
	text-decoration: none;
	color: var( --ghconnect-text-color );
	box-sizing: border-box;
}

.ghconnect-related-card:hover {
	background: var( --ghconnect-hover-bg );
	color: var( --ghconnect-hover-text-color );
}

.ghconnect-related-title {
	font-weight: 600;
	color: var( --ghconnect-link-color );
}

.ghconnect-related-card:hover .ghconnect-related-title {
	color: var( --ghconnect-hover-text-color );
}

.ghconnect-related-location {
	font-size: 0.9em;
	opacity: 0.75;
}

.ghconnect-thank-you {
	padding: 1.5em 0;
}

/* Honeypot: off-screen, not display:none or type=hidden — some spam
   bots specifically skip fields that use those. */
.ghconnect-hp-wrap {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

/* EEOC/Affirmative Action/Voluntary Self-Identification sections
   (renderComplianceSections() in gh-connect.js). Semantic <h3> for
   section headings deliberately left uncolored here — the surrounding
   theme's own heading styles cascade onto it, matching the rest of
   the page (e.g. the orange "Apply for this job" heading) rather than
   this plugin guessing at brand colors it doesn't know. */
.ghconnect-compliance-section {
	margin: 1.5em 0;
	padding: 1.25em;
	border: 1px solid var( --ghconnect-border-color );
	border-radius: 6px;
}

.ghconnect-compliance-heading {
	margin: 0 0 0.5em;
}

.ghconnect-compliance-copy {
	margin: 0 0 1em;
	font-size: 0.9375em;
	line-height: 1.6;
	opacity: 0.85;
}

/* This holds real HTML from Greenhouse (h3/strong/p/br — confirmed by
   it showing up as literal escaped tag text when it was being treated
   as plain text and escaped instead), so its own paragraph/heading
   margins handle spacing — just trim the outer edges so it doesn't
   add extra gap above/below what .ghconnect-compliance-copy already
   provides. */
.ghconnect-compliance-copy > :first-child {
	margin-top: 0;
}

.ghconnect-compliance-copy > :last-child {
	margin-bottom: 0;
}

.ghconnect-compliance-section .ghconnect-field-wrap:last-child {
	margin-bottom: 0;
}