/**
 * Guided entry tool.
 *
 * brand.css .pathfinder and the .pf-* family. Two differences from the
 * prototype, both deliberate:
 *
 *   - the intent picker is a real <select>, styled with appearance: none, not
 *     a div-based listbox, so it is keyboard and screen-reader correct for
 *     free and behaves natively on mobile;
 *   - the result panel is a status line under the button rather than a
 *     separate dashed card, because the button itself becomes the link.
 */

.nysf-pf {
	max-width: 940px;
	margin: 0 auto;
	background: var(--nysf-card);
	border: 1px solid var(--nysf-line);
	border-radius: var(--nysf-r-lg);
	box-shadow: var(--nysf-shadow);
	padding: 42px;
}

.nysf-pf__title {
	text-align: center;
	font-family: var(--nysf-display);
	font-weight: 700;
	font-size: 27px;
	letter-spacing: -0.5px;
	color: var(--nysf-navy);
	margin: 0;
}

.nysf-pf__sub {
	text-align: center;
	color: var(--nysf-ink-soft);
	margin: 6px 0 28px;
}

.nysf-pf__label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: var(--nysf-navy);
	margin-bottom: 10px;
}

/* ---- Audience chips ---- */

.nysf-pf__audience {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin-bottom: 26px;
}

.nysf-pf__aud {
	background: var(--nysf-bg);
	border: 1px solid var(--nysf-line);
	border-radius: 16px;
	padding: 18px 8px;
	text-align: center;
	cursor: pointer;
	transition: 0.2s;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	color: var(--nysf-navy);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
}

.nysf-pf__aud-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nysf-navy);
	transition: 0.2s;
}

.nysf-pf__aud:hover {
	border-color: var(--nysf-gold);
	transform: translateY(-2px);
}

.nysf-pf__aud.is-active {
	background: var(--nysf-navy);
	border-color: var(--nysf-navy);
	color: var(--nysf-light);
}

.nysf-pf__aud.is-active .nysf-pf__aud-icon {
	color: var(--nysf-light);
}

/* ---- Intent select ---- */

.nysf-pf__row {
	display: flex;
	gap: 18px;
	align-items: center;
	margin-bottom: 18px;
}

.nysf-pf__row .nysf-pf__label {
	margin-bottom: 0;
	flex: 0 0 92px;
}

.nysf-pf__intent {
	position: relative;
	flex: 1;
}

.nysf-pf__select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background: var(--nysf-bg);
	border: 1px solid var(--nysf-line);
	border-radius: 14px;
	padding: 16px 48px 16px 20px;
	cursor: pointer;
	font-family: var(--nysf-sans);
	font-size: 15px;
	color: var(--nysf-navy);
	transition: 0.2s;
}

.nysf-pf__select:hover {
	border-color: var(--nysf-navy);
}

/* The chevron, as a background image so appearance: none does not lose it. */
.nysf-pf__intent::after {
	content: '';
	position: absolute;
	right: 20px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border: solid var(--nysf-navy);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	pointer-events: none;
}

/* ---- Action ---- */

/*
 * This button prints its own arrow span, so suppress the shared ::after that
 * :is(.nysf-btn ..., a.nysf-btn) adds, or it renders two.
 *
 * Both rules have to out-specify that shared list. `:is()` takes the
 * specificity of its heaviest branch, and the heaviest there is
 * `.nysf-btn .elementor-button` at (0,2,0), so a bare `.nysf-pf__go` at
 * (0,1,0) lost: the button was rendering two arrows and taking the shared
 * 15px/26px padding instead of its own. Matching the element as well as both
 * classes puts these at (0,3,0).
 */
:is(a, button).nysf-btn.nysf-pf__go {
	width: 100%;
	justify-content: center;
	padding: 18px;
	font-size: 16px;
	margin-top: 6px;
}

:is(a, button).nysf-btn.nysf-pf__go::after {
	content: none;
}

.nysf-pf__go-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--nysf-navy);
	color: var(--nysf-gold);
	font-size: 13px;
}

.nysf-pf__go[aria-disabled='true'] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.nysf-pf__note {
	margin: 14px 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--nysf-ink-soft);
}

/* ---- Navy variant, for light inner pages ---- */

.nysf-pf--navy {
	background: var(--nysf-navy);
	border-color: var(--nysf-line-navy);
}

.nysf-pf--navy .nysf-pf__title,
.nysf-pf--navy .nysf-pf__label {
	color: var(--nysf-light);
}

.nysf-pf--navy .nysf-pf__sub,
.nysf-pf--navy .nysf-pf__note {
	color: #c7d2d6;
}

.nysf-pf--navy .nysf-pf__aud {
	background: var(--nysf-line-navy);
	border-color: var(--nysf-line-navy);
	color: var(--nysf-light);
}

.nysf-pf--navy .nysf-pf__aud .nysf-pf__aud-icon {
	color: var(--nysf-light);
}

.nysf-pf--navy .nysf-pf__aud.is-active {
	background: var(--nysf-gold);
	border-color: var(--nysf-gold);
	color: var(--nysf-navy);
}

.nysf-pf--navy .nysf-pf__aud.is-active .nysf-pf__aud-icon {
	color: var(--nysf-navy);
}

.nysf-pf--navy .nysf-pf__select {
	background: var(--nysf-line-navy);
	border-color: var(--nysf-line-navy);
	color: var(--nysf-light);
}

.nysf-pf--navy .nysf-pf__intent::after {
	border-color: var(--nysf-light);
}

@media (max-width: 780px) {
	.nysf-pf__audience {
		grid-template-columns: repeat(3, 1fr);
	}

	.nysf-pf__row {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
}

@media (max-width: 440px) {
	.nysf-pf {
		padding: 26px;
	}

	.nysf-pf__audience {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nysf-pf__aud {
		transition: none;
	}

	.nysf-pf__aud:hover {
		transform: none;
	}
}