/*
 * Program Finder Wizard V2 -- visually identical to survey-wizard.css.
 * Every selector is prefixed `pf2-` so V1 and V2 can never cross-talk if
 * both happen to be present on the same page (V1's JS uses unscoped
 * document-level delegates on bare class names like .option/.close-btn).
 * Shared design-system classes (.btn, .font-20, etc.) are reused as-is.
 */
.pf2-wizard-open {
	overflow: hidden;
}
.pf2-wizard-container {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	background: var(--color-navy);
	color: var(--color-white);
	display: none;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	z-index: 9999999;
}
.pf2-wizard-container.show {
	display: flex;
}
.pf2-survey-wizard-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column;
	justify-content: center;
	padding-block: var(--spacing-xl);
	overflow: auto;
	position: relative;
}
.pf2-survey-wizard {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	height: 100%;
	gap: var(--spacing-md);
}
.pf2-survey-wizard > div {
	padding-inline: var(--spacing-5xl);
}
.pf2-survey-wizard .pf2-progress-bar {
	padding-inline: 0;
}
.pf2-steps-wrapper {
	max-width: 1410px;
	margin: 0 auto;
	width: 100%;
	overflow-y: auto;
	display: flex;
	flex-flow: column;
	justify-content: center;
	/* Q2 (up to 16 interest terms across several rows) is taller than any
	   single V1 step -- without this, justify-content:space-between on the
	   parent has no guard against content growth pushing the absolutely-
	   positioned nav buttons past the fixed-height viewport with no scroll
	   affordance to reach them. This guarantees the steps area always takes
	   exactly the remaining space and scrolls internally instead. */
	flex: 1 1 auto;
	min-height: 0;
}
.pf2-top-item-wrap,
.pf2-progress-bar {
	flex-shrink: 0;
}

.pf2-options {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: var(--spacing-md);
}

.pf2-option.selected,
.pf2-options button:hover {
	background: var(--color-yellow);
	color: var(--color-navy);
	border-color: var(--color-yellow);
}

.pf2-option.disabled {
	opacity: 0.4;
	pointer-events: none;
}

.pf2-step {
	display: none;
	text-align: center;
	overflow-y: auto;
}

.pf2-step.active {
	display: block;
}
.pf2-step > div {
	margin-bottom: var(--spacing-2xl);
}
.pf2-step .pf2-step-header {
	margin-bottom: var(--spacing-xl);
}

.pf2-navigation:has(.pf2-continue-btn):not(:has(.pf2-prev-btn)) {
	justify-content: flex-end;
}
.pf2-navigation:has(.pf2-prev-btn):not(:has(.pf2-continue-btn)) {
	justify-content: flex-start;
}

.pf2-step .pf2-navigation {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	position: absolute;
	bottom: var(--spacing-5xl);
	padding-inline: var(--spacing-5xl);
	right: 0;
	margin: 0;
	width: 100%;
	left: 0;
}
.pf2-survey-wizard button[disabled] {
	opacity: 0.7;
	cursor: not-allowed;
}

.pf2-top-item-wrap {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-md);
}

.pf2-top-item-wrap :is(.font-20) {
	font-weight: bold;
	text-transform: uppercase;
}

.pf2-right-wrapper {
	display: flex;
	gap: var(--spacing-md);
	position: relative;
}

.pf2-right-wrapper a {
	text-decoration: underline;
}

.pf2-right-wrapper .pf2-wizad-tooltip a:hover {
	color: var(--color-white);
}

.pf2-right-wrapper a:hover {
	color: var(--color-yellow);
}
.pf2-progress-bar {
	display: flex;
	justify-content: space-between;
	position: relative;
	gap: 8px;
	margin-bottom: var(--spacing-7xl);
}

.pf2-progress-step {
	width: 100%;
	height: 15px;
	background-color: #0073b24d;
	z-index: 2;
	position: relative;
}

.pf2-progress-step.active {
	background-color: var(--color-blue);
}

/* Format (Q4) and Credential (Q3) steps share the same icon-card
   treatment -- pf2_format term slugs are deliberately set to in-person/
   online/hybrid/no-preference, and pf2_credential's cred-* slugs are
   mapped below, so these rules apply with zero new icon work beyond a
   background-image per data-value. Container ids keep the "pf2-pf2-"
   double prefix that render_survey_wizard_v2() generates for every
   taxonomy (str_replace('_','-','pf2_format') = 'pf2-format', then
   prefixed again with 'pf2-'). */
#pf2-pf2-format-options button,
#pf2-pf2-credential-options button {
	height: 250px;
	width: 210px;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: space-between;
	font-size: var(--font-20);
	padding: var(--spacing-md);
	position: relative;
}

#pf2-pf2-format-options button::before,
#pf2-pf2-credential-options button::before {
	content: "";
	height: 100%;
	width: 105px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: var(--transition-base);
}

#pf2-pf2-format-options .selected::before,
#pf2-pf2-format-options button:hover::before,
#pf2-pf2-credential-options .selected::before,
#pf2-pf2-credential-options button:hover::before {
	filter: brightness(0.2) saturate(0) hue-rotate(200deg);
}

#pf2-pf2-format-options button[data-value="hybrid"]::before {
	background-image: url("/wp-content/themes/brunswick/assets/images/hybrid.svg");
	width: 145px;
}
#pf2-pf2-format-options button[data-value="in-person"]::before {
	background-image: url("/wp-content/themes/brunswick/assets/images/person.svg");
}
#pf2-pf2-format-options button[data-value="online"]::before {
	background-image: url("/wp-content/themes/brunswick/assets/images/online.svg");
}
#pf2-pf2-format-options button[data-value="no-preference"]::before {
	background-image: url("/wp-content/themes/brunswick/assets/images/certificate.svg");
}

#pf2-pf2-credential-options button[data-value="cred-deg"]::before {
	background-image: url("/wp-content/themes/brunswick/assets/images/degree.svg");
}
#pf2-pf2-credential-options button[data-value="cred-dip"]::before {
	background-image: url("/wp-content/themes/brunswick/assets/images/diploma.svg");
}
#pf2-pf2-credential-options button[data-value="cred-cert"]::before {
	background-image: url("/wp-content/themes/brunswick/assets/images/certificate.svg");
}
#pf2-pf2-credential-options button[data-value="cred-ahs"]::before {
	background-image: url("/wp-content/themes/brunswick/assets/images/adult-high-school.svg");
}
#pf2-pf2-credential-options button[data-value="cred-hse"]::before {
	background-image: url("/wp-content/themes/brunswick/assets/images/equivalency.svg");
}
#pf2-pf2-credential-options button[data-value="cred-np"]::before {
	background-image: url("/wp-content/themes/brunswick/assets/images/not-sure-yet.svg");
}
#pf2-pf2-credential-options button[data-value="cred-de"]::before {
	background-image: url("/wp-content/themes/brunswick/assets/images/dual-enrollment.svg");
}
/* Same asset V1 used for its "industry-credential" outcome option -- it
   needs its own explicit size/offset rather than the shared 105px/100%
   box to look right at this icon-card scale. */
#pf2-pf2-credential-options button[data-value="cred-ind"]::before {
	background-image: url("/wp-content/themes/brunswick/assets/images/workforce-training.svg");
	height: 80px;
	width: 80px;
	position: relative;
	top: 50px;
}

/* Credential step (Q3) hover tooltip: shows each term's WP description,
   mirroring V1's now-removed outcome-tooltip on its Step 6 (pure-CSS
   hover via a sibling selector, no JS needed to show/hide). Container id
   keeps the "pf2-pf2-" double prefix that render_survey_wizard_v2()
   generates for this taxonomy (str_replace('_','-','pf2_credential') =
   'pf2-credential', then prefixed again with 'pf2-'). */
#pf2-pf2-credential-options {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 915px;
	margin-inline: auto;
	position: relative;
}

#pf2-pf2-credential-options .pf2-credential-option-wrapper {
	position: relative;
}

#pf2-pf2-credential-options .pf2-credential-tooltip {
	position: absolute;
	background: var(--color-yellow);
	margin: 0 auto;
	color: var(--color-black);
	font-size: var(--font-14);
	padding: var(--spacing-sm);
	top: 0;
	left: 210px;
	width: 235px;
	height: 100%;
	display: flex;
	align-items: center;
	text-align: left;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transition: all var(--transition-base);
}

#pf2-pf2-credential-options button:hover ~ .pf2-credential-tooltip {
	opacity: 1;
	visibility: visible;
}

/* 4 columns down to 1081px -- the last item in every row of 4 flips its
   tooltip to the left so it doesn't overflow the container's right edge. */
@media (min-width: 1081px) {
	#pf2-pf2-credential-options .pf2-credential-option-wrapper:nth-child(4n) .pf2-credential-tooltip {
		left: auto;
		right: 210px;
	}
}

.pf2-step .pf2-results-actions {
	display: flex;
	justify-content: center;
	gap: var(--spacing-md);
	position: fixed;
	bottom: var(--spacing-5xl);
	left: 0;
	right: 0;
	max-width: 500px;
	margin: auto;
	z-index: 1;
}
.pf2-results:has(> .pf2-loading) {
	display: flex;
}
.pf2-result-text {
	max-width: 62ch;
	margin: var(--spacing-sm) auto var(--spacing-xl);
}
.pf2-explore-all {
	margin: var(--spacing-xl) auto var(--spacing-md);
	width: fit-content;
}
.pf2-wizad-tooltip .pf2-help-text,
.pf2-wizad-tooltip .pf2-help-location {
	margin: 0 0 8px;
	font-size: 13px;
}
.pf2-steps-wrapper .pf2-loading {
	height: auto;
	border: none;
	font-size: var(--font-20);
	color: var(--color-white) !important;
	justify-content: center;
}
#pf2-step6 .pf2-step-header {
	max-width: 450px;
	margin-inline: auto;
	position: relative;
}

#pf2-step6 .pf2-step-header::before {
	content: "";
	background: url(/wp-content/themes/brunswick/assets/images/celebration.svg);
	height: 60px;
	width: 60px;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	margin: 0 auto 25px;
}
.pf2-results > div {
	min-height: 280px;
	width: 100%;
	border: 2px solid var(--color-white);
	font-size: var(--font-28);
	font-family: var(--font-heading);
	font-weight: bold;
	display: flex;
	align-items: flex-end;
	line-height: 1.1;
	text-align: left;
	padding: var(--spacing-sm);
	word-break: break-word;
}

.pf2-results {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--spacing-md);
	overflow-y: auto;
}

.pf2-program-card {
	position: relative;
	transition: var(--transition-base);
}

/* Make the whole card clickable/tappable, not just the title text -- the
   card itself stays a normal flex child (so .no-results/.error, which have
   no link, are unaffected), but a direct-child link is stretched to cover
   the full content box via absolute positioning, re-declaring the same
   bottom-left text alignment .pf2-results > div gave it in normal flow. */
.pf2-program-card > a {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 10px 10px;
}

.pf2-program-card:hover,
.pf2-program-card.selected {
	background: var(--color-yellow);
	border-color: var(--color-yellow);
	color: var(--color-navy);
}
.pf2-program-card a,
.pf2-program-card span.pf2-program-title {
	color: var(--color-white);
}
.pf2-program-card:hover a,
.pf2-program-card.selected a,
.pf2-program-card:hover span.pf2-program-title,
.pf2-program-card.selected span.pf2-program-title {
	color: var(--color-navy);
}

.pf2-results:not(:has(> *:nth-child(5))) {
	justify-content: center;
}
.pf2-results::-webkit-scrollbar,
.pf2-step::-webkit-scrollbar {
	width: 0px;
}
.pf2-results::-webkit-scrollbar-track,
.pf2-step::-webkit-scrollbar-track {
	background: transparent;
}

.pf2-results::-webkit-scrollbar-thumb,
.pf2-step::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 2px;
}
.pf2-wizad-tooltip {
	position: absolute;
	right: 91px;
	background: var(--color-yellow);
	width: 450px;
	padding: 20px;
	font-size: 15px;
	top: 30px;
	opacity: 0;
	color: var(--color-navy);
	line-height: 1.3;
	visibility: hidden;
	transition: var(--transition-base);
	z-index: 1;
}

.pf2-right-wrapper > .pf2-tooltip-btn.show + .pf2-wizad-tooltip {
	opacity: 1;
	visibility: visible;
	top: 23px;
}
.pf2-right-wrapper > .pf2-tooltip-btn.show {
	color: var(--color-yellow);
}

.pf2-step .pf2-program-card.no-results {
	min-height: 200px;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: none;
	background: transparent !important;
	margin-top: var(--spacing-xl);
}

.pf2-results:has(.no-results) {
	display: flex;
	margin: 0;
}

.pf2-step .pf2-program-card.no-results * {
	color: var(--color-white);
}

.pf2-survey-wizard.hide {
	display: none;
}

.pf2-step-content-wrapper {
	display: grid;
	padding-inline: var(--spacing-5xl);
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-3xl);
	text-align: left;
	max-width: 80%;
	margin: 0 auto !important;
}

.pf2-step-content-wrapper .pf2-content-inner {
	display: flex;
	flex-flow: column;
	gap: var(--spacing-md);
}

.pf2-step-content-wrapper .pf2-content-inner img {
	height: auto !important;
	max-width: max-content;
}

.pf2-details-form {
	display: flex;
	flex-flow: column;
	gap: var(--spacing-md);
}

.pf2-details-form input {
	padding: var(--spacing-sm);
	border-radius: 0;
	border: none;
}
.pf2-form-message,
span.pf2-error-message {
	color: red;
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-size: var(--font-16);
}

span.pf2-error-message {
	margin-top: calc(-1 * var(--spacing-sm));
}
label.pf2-gdpr-consent.error span.pf2-error-message {
	display: none;
}
.pf2-details-form:has(.pf2-error-message) button {
	cursor: not-allowed;
}
.pf2-success-message * {
	color: green;
	fill: green;
}

/* Responsive -- mirrors survey-wizard.css breakpoint-for-breakpoint */

@media (max-width: 1441px) {
	.pf2-step-content-wrapper {
		max-width: 100%;
	}
}

@media (max-width: 1281px) {
	.pf2-steps-wrapper:has(#pf2-step6.active) .pf2-navigation {
		bottom: var(--spacing-5xl);
	}
	.pf2-step .pf2-navigation {
		bottom: var(--spacing-xl);
		padding-inline: var(--spacing-3xl);
	}
	.pf2-survey-wizard > div {
		padding-inline: var(--spacing-3xl);
	}
	.pf2-progress-bar {
		margin-bottom: var(--spacing-5xl);
	}
	.pf2-steps-wrapper:has(#pf2-step6.active) ~ .pf2-progress-bar {
		margin-bottom: var(--spacing-7xl);
	}
}

@media (max-width: 1200px) {
	.pf2-results {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 1081px) {
	#pf2-pf2-credential-options {
		grid-template-columns: 1fr 1fr;
		max-width: 445px;
	}
	#pf2-pf2-credential-options .pf2-credential-option-wrapper:nth-child(even) .pf2-credential-tooltip {
		left: auto;
		right: 210px;
	}
}

@media (max-width: 930px) {
	.pf2-results {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 840px) {
	.pf2-step .pf2-results-actions {
		gap: var(--spacing-sm);
	}
	.pf2-steps-wrapper:has(#pf2-step6.active) .pf2-navigation {
		bottom: var(--spacing-md);
	}
	.pf2-step-content-wrapper {
		padding: var(--spacing-xl) var(--spacing-3xl);
		grid-template-columns: repeat(1, 1fr);
		gap: var(--spacing-xl);
	}
}

@media (max-width: 768px) {
	#pf2-pf2-format-options button {
		height: 230px;
		width: 200px;
		font-size: var(--font-18);
	}
	#pf2-pf2-format-options button::before {
		width: 80px;
	}
	#pf2-pf2-format-options button[data-value="hybrid"]::before {
		width: 110px;
	}
	.pf2-results > div {
		min-height: 230px;
	}
	.pf2-wizad-tooltip {
		right: 88px;
		width: 200px;
	}
	#pf2-pf2-credential-options {
		grid-template-columns: 1fr 1fr;
		max-width: 365px;
	}
	#pf2-pf2-credential-options button {
		height: 230px;
		width: 200px;
		font-size: var(--font-18);
	}
	#pf2-pf2-credential-options button::before {
		width: 80px;
	}
	#pf2-pf2-credential-options button[data-value="cred-ind"]::before {
		height: 60px;
		width: 60px !important;
		top: 45px;
	}
	#pf2-pf2-credential-options .pf2-credential-tooltip {
		left: 200px;
		width: 225px;
	}
	#pf2-pf2-credential-options .pf2-credential-option-wrapper:nth-child(even) .pf2-credential-tooltip {
		right: 200px;
	}
}

@media (max-width: 700px) {
	.pf2-results {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 541px) {
	.pf2-step .pf2-results-actions * {
		padding: var(--spacing-xs) var(--spacing-sm);
	}
	.pf2-steps-wrapper:has(#pf2-step6.active) ~ .pf2-progress-bar {
		margin-bottom: var(--spacing-7xl);
	}
	.pf2-survey-wizard > div {
		padding-inline: 20px;
	}
	.pf2-step .pf2-navigation {
		padding-inline: 20px;
	}
	.pf2-options {
		gap: var(--spacing-sm);
	}
	.pf2-step .pf2-step-header {
		margin-bottom: var(--spacing-md);
	}
	.pf2-step > div {
		margin-bottom: var(--spacing-md);
	}
	.pf2-top-item-wrap :is(.font-20) {
		font-size: 14px;
	}
	.pf2-right-wrapper {
		gap: var(--spacing-sm);
	}
	.pf2-steps-wrapper:has(#pf2-step6.active) .pf2-navigation {
		bottom: 20px;
	}
	.pf2-step .pf2-navigation {
		bottom: 30px;
		padding-inline: 20px;
	}
	.pf2-survey-wizard-container {
		padding-block: 20px;
	}
	#pf2-step6 .pf2-step-header::before {
		height: 40px;
		width: 40px;
		margin: 0 auto 20px;
	}
	#pf2-pf2-format-options button {
		height: 180px;
		width: 155px;
		font-size: var(--font-16);
		line-height: 1;
	}
	.pf2-wizad-tooltip {
		right: 63px;
	}
	.pf2-step-content-wrapper {
		grid-template-columns: repeat(1, 1fr);
	}
	#pf2-pf2-format-options {
		flex-flow: column;
		align-items: center;
	}
	#pf2-pf2-credential-options {
		grid-template-columns: 1fr;
		max-width: max-content;
	}
	#pf2-pf2-credential-options button {
		height: 180px;
		width: 155px;
		font-size: var(--font-16);
		line-height: 1;
	}
	#pf2-pf2-credential-options button[data-value="cred-ind"]::before {
		top: 15px;
	}
	/* Single column: no room to fly the tooltip out sideways, so it drops
	   below the card instead, centered under it (-72px = (155 - 300) / 2). */
	#pf2-pf2-credential-options .pf2-credential-tooltip {
		left: -72px;
		width: 300px;
		right: auto;
		top: 180px;
		height: 110%;
	}
	#pf2-pf2-credential-options .pf2-credential-option-wrapper:nth-child(even) .pf2-credential-tooltip {
		right: auto;
		left: -72px;
	}
	/* The very last card has nothing below it to drop into -- flip that
	   one's tooltip to appear above instead. */
	#pf2-pf2-credential-options .pf2-credential-option-wrapper:last-child .pf2-credential-tooltip {
		top: auto;
		bottom: 180px;
	}
}

@media (max-width: 430px) {
	.pf2-results {
		grid-template-columns: repeat(1, 1fr);
	}
	.pf2-results > div {
		font-size: 1.7rem;
	}
}