/*
 * Program-name links in the primary nav (task 41046338, per John K on 40975121).
 *
 * The "I Need Help" mega-menu program rail and the mobile program cards used to
 * treat the whole program tile as a panel toggle, so the program name did not
 * navigate anywhere. Each program name is now a direct link to that program's
 * own overview ("View All Services") page, with a separate arrow button that
 * expands the program's service submenu. This holds the layout and the arrow
 * styling for that split.
 *
 * Hand-written and served as-is (enqueued after cckc-tailwind), not compiled
 * into dist/main.css, the same way card-align.css and a11y-focus.css are.
 * The accent hover/active treatment still comes from the --cckc-cat* custom
 * properties the walker writes onto the row; only the split layout lives here.
 */

/* ---- Desktop mega-menu program rail ---- */

.cckc-site-header .cckc-cat-rowsplit {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
}

.cckc-site-header .cckc-cat-link {
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.cckc-site-header .cckc-cat-arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-right: 4px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background-color: transparent;
	color: var(--cckc-cat, #192a4a);
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

/* The arrow lights up with the rest of the tile on hover / when its panel is active. */
.cckc-site-header .cckc-cat-tab:hover .cckc-cat-arrow,
.cckc-site-header .cckc-cat-tab[data-active='true'] .cckc-cat-arrow {
	opacity: 1;
}

.cckc-site-header .cckc-cat-arrow:hover,
.cckc-site-header .cckc-cat-arrow:focus-visible {
	background-color: var(--cckc-cat-tint, rgba(0, 0, 0, 0.06));
	opacity: 1;
}

/* ---- Mobile program cards ---- */

/*
 * Split the bordered card into a name link + a separate arrow button that opens
 * the service panel. The card border stays on the wrapper; the arrow gets a
 * hairline divider so the two hit targets read as distinct.
 */
.cckc-site-header .cckc-mnav-card-split {
	display: flex;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
}

.cckc-site-header .cckc-mnav-card-split > .cckc-mnav-card-link {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 16px;
	text-decoration: none;
}

.cckc-site-header .cckc-mnav-card-arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	border: 0;
	border-left: 1px solid var(--color-line, #e5e5e0);
	background-color: transparent;
	color: var(--cckc-cat, #192a4a);
	cursor: pointer;
	transition: background-color 0.2s ease-out;
}

.cckc-site-header .cckc-mnav-card-arrow:hover,
.cckc-site-header .cckc-mnav-card-arrow:focus-visible {
	background-color: color-mix(in srgb, var(--cckc-cat, #192a4a) 8%, transparent);
}