/**
 * Header utility buttons for Register (primary) and Call for Scores
 * (secondary outline). Mirrors the recipes already used by
 * .isjac-utility--member / --donate in _09-header.generated.css so the
 * new LI classes style without editing generated CSS.
 *
 * WP puts the class on the <li>; brand buttons style the inner <a>.
 * Tokens only. No !important.
 */

/* Adjacent utility buttons share pad-sm — same rhythm as member→donate. */
.menu-item.isjac-utility + .menu-item.isjac-utility--register {
	margin-left: var(--isjac-pad-sm);
}

.menu-item.isjac-utility + .menu-item.isjac-utility--scores {
	margin-left: var(--isjac-pad-sm);
}

/* Register — primary filled (same recipe as Become a member). */
.main-navigation .primary-menu-container > ul > li.menu-item.isjac-utility--register > a {
	background: var(--isjac-color-brand-deep);
	color: var(--isjac-color-paper);
	border-color: var(--isjac-color-brand-deep);

	&:hover,
	&:focus-visible {
		background: color-mix(in oklch, var(--isjac-button-primary-bg), var(--isjac-color-paper) var(--isjac-state-lift));
		color: var(--isjac-color-paper);
		border-color: color-mix(in oklch, var(--isjac-button-primary-bg), var(--isjac-color-paper) var(--isjac-state-lift));
	}
}

/* Call for Scores and Papers — secondary outline (same recipe as Donate). */
.main-navigation .primary-menu-container > ul > li.menu-item.isjac-utility--scores > a {
	background: transparent;
	color: var(--isjac-color-brand-deep);
	border-color: var(--isjac-color-brand-deep);

	&:hover,
	&:focus-visible {
		background: var(--isjac-color-brand-wash);
		color: var(--isjac-color-brand-deep);
		border-color: var(--isjac-color-brand-deep);
	}
}

/* Transparent-header (dark hero) variants. */
body.transparent-header .main-navigation .primary-menu-container > ul > li.menu-item.isjac-utility--register > a {
	background: var(--isjac-color-brand-deep);
	color: var(--isjac-color-paper);
	border-color: var(--isjac-color-brand-deep);

	&:hover,
	&:focus-visible {
		background: color-mix(in oklch, var(--isjac-button-primary-bg), var(--isjac-color-paper) var(--isjac-state-lift));
		color: var(--isjac-color-paper);
		border-color: color-mix(in oklch, var(--isjac-button-primary-bg), var(--isjac-color-paper) var(--isjac-state-lift));
	}
}

body.transparent-header .main-navigation .primary-menu-container > ul > li.menu-item.isjac-utility--scores > a {
	background: transparent;
	color: var(--isjac-color-paper);
	border-color: var(--isjac-color-paper);

	&:hover,
	&:focus-visible {
		background: color-mix(in oklch, transparent, var(--isjac-color-paper) var(--isjac-state-lift));
		color: var(--isjac-color-paper);
		border-color: var(--isjac-color-paper);
	}
}