/**
 * EB Job Listings — replicates the DPAI About page Elementor jobs section.
 * Values pulled from computed styles / stylesheet rules on the live site.
 *
 * Theme :root variables (--section-xxs-padding-*, --fluid-side-padding-*)
 * are referenced with hardcoded fallbacks so the plugin also works standalone.
 */

/* ---------- Section shell ---------- */

.ebjl-section {
	width: 100%;
	background-color: #202020;
	border-bottom: 1px solid #ffffff;
}

.ebjl-inner {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	max-width: 1350px;
	width: 100%;
	margin: 0 auto;
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}

/* ---------- Columns ---------- */

.ebjl-col {
	display: flex;
	flex-direction: column;
	border-top: 1px solid #ffffff;
}

.ebjl-col--toggles {
	width: 40%;
	border-right: 1px solid #ffffff;
}

.ebjl-col--content {
	width: 60%;
}

/* section-xs / section-xxs padding — mirrors theme utility classes.
   Declared here (without !important) so the theme versions win if present. */
.ebjl-col--content {
	padding-top: clamp(var(--section-xs-padding-min, 2.5rem), 0vw + 2.5rem, var(--section-xs-padding-max, 2.5rem));
	padding-bottom: clamp(var(--section-xs-padding-min, 2.5rem), 0vw + 2.5rem, var(--section-xs-padding-max, 2.5rem));
	padding-left: clamp(var(--fluid-side-padding-min, 0.75rem), 6.522vw - 0.217rem, var(--fluid-side-padding-max, 2.5rem));
	padding-right: clamp(var(--fluid-side-padding-min, 0.75rem), 6.522vw - 0.217rem, var(--fluid-side-padding-max, 2.5rem));
}

.ebjl-label,
.ebjl-toggle__inner {
	padding-top: clamp(var(--section-xxs-padding-min, 1.5rem), 0vw + 1.5rem, var(--section-xxs-padding-max, 1.5rem));
	padding-bottom: clamp(var(--section-xxs-padding-min, 1.5rem), 0vw + 1.5rem, var(--section-xxs-padding-max, 1.5rem));
	padding-left: clamp(var(--fluid-side-padding-min, 0.75rem), 6.522vw - 0.217rem, var(--fluid-side-padding-max, 2.5rem));
	padding-right: clamp(var(--fluid-side-padding-min, 0.75rem), 6.522vw - 0.217rem, var(--fluid-side-padding-max, 2.5rem));
}

/* ---------- Left column: label ---------- */

.ebjl-label {
	border-bottom: 1px solid #ffffff;
}

.ebjl-label p {
	margin: 0 0 0.45em;
	color: #ffffff;
	font-family: "mundial-narrow-variable", sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 54px;
	text-transform: uppercase;
}

/* ---------- Left column: toggle rows ---------- */

.ebjl-toggle {
	display: flex;
	flex-direction: column;
	background-color: #202020;
	border-bottom: 1px solid #ffffff;
	cursor: pointer;
	transition: background-color 0.3s, border-color 0.3s;
	-webkit-user-select: none;
	user-select: none;
}

.ebjl-toggle * {
	cursor: pointer;
}

.ebjl-toggle__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ebjl-toggle__title {
	margin: 0;
	color: #ffffff;
	font-family: "Inter", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	transition: color 0.3s;
}

.ebjl-toggle:hover,
.ebjl-toggle.is-active {
	background-color: #cfdf6a;
	border-color: #ffffff;
}

.ebjl-toggle:hover .ebjl-toggle__title,
.ebjl-toggle.is-active .ebjl-toggle__title {
	color: #000000;
}

.ebjl-toggle:focus-visible {
	outline: 2px solid #cfdf6a;
	outline-offset: -2px;
}

/* Empty state: not interactive */
.ebjl-toggle--empty,
.ebjl-toggle--empty * {
	cursor: default;
}

.ebjl-toggle--empty:hover {
	background-color: #202020;
}

.ebjl-toggle--empty:hover .ebjl-toggle__title {
	color: #ffffff;
}

.ebjl-spacer {
	height: 150px;
}

/* ---------- Right column: content boxes ---------- */

.ebjl-intro,
.ebjl-box {
	display: none;
	color: #ffffff;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 24px;
}

.ebjl-intro {
	display: block;
}

.ebjl-intro.is-hidden {
	display: none;
}

.ebjl-box.is-open {
	display: block;
}

.ebjl-intro p {
	color: #ffffff;
	margin: 0 0 0.9em;
}

.ebjl-box__content {
	color: #ffffff;
	font-family: "mundial-narrow-variable", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

.ebjl-box__content p {
	color: #ffffff;
	font-family: "mundial-narrow-variable", sans-serif;
	font-size: 16px;
	line-height: 24px;
	margin: 0 0 0.9em;
}

.ebjl-box__content ul,
.ebjl-box__content ol {
	margin: 0 0 0.9em;
	padding-left: 2.5em;
}

.ebjl-box__content li {
	color: #ffffff;
	font-family: "mundial-narrow-variable", sans-serif;
	font-size: 16px;
	line-height: 24px;
}

.ebjl-box__content a {
	color: #ee7b45;
	text-decoration: none;
}

.ebjl-box__content strong {
	font-weight: 700;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
	.ebjl-inner {
		flex-direction: column;
		border-left: none;
		border-right: none;
	}

	.ebjl-col--toggles,
	.ebjl-col--content {
		width: 100%;
	}

	.ebjl-col--toggles {
		border-right: none;
	}

	.ebjl-toggle__inner {
		padding: 15px;
	}

	.ebjl-spacer {
		height: 0;
	}
}