/*
 * Sujiin Header Active State
 * Brand color: #475132
 */

body.sujiin-header-state #site-header {
	--sujiin-header-green: #475132;
	--sujiin-header-green-deep: #334027;
	--sujiin-header-sage: #e7eadf;
	--sujiin-header-hover: #f2f4ed;
}

body.sujiin-header-state #site-header .menu > li > a {
	box-sizing: border-box;
	text-decoration: none;
	transition:
		color .2s ease,
		background-color .2s ease,
		box-shadow .2s ease,
		transform .2s ease;
}

/* Desktop: the current page uses a clear avocado-green pill. */
@media (min-width: 1025px) {
	body.sujiin-header-state #site-header .site-navigation .menu > li > a {
		position: relative;
		display: inline-block !important;
		width: auto !important;
		min-width: 0 !important;
		padding: 12px 14px !important;
		border-radius: 999px;
		text-align: center !important;
	}

	body.sujiin-header-state #site-header .site-navigation .menu > li:not(.current-menu-item):not(.current_page_item) > a:hover {
		color: var(--sujiin-header-green) !important;
		background: var(--sujiin-header-hover) !important;
	}

	body.sujiin-header-state #site-header .site-navigation .menu > li:is(
		.current-menu-item,
		.current_page_item,
		.current-menu-ancestor,
		.current-page-ancestor
	) > a,
	body.sujiin-header-state #site-header .site-navigation .menu > li > a[aria-current="page"] {
		color: #fff !important;
		background: var(--sujiin-header-green) !important;
		box-shadow: 0 6px 18px rgba(71, 81, 50, .18) !important;
		font-weight: 600 !important;
	}

	body.sujiin-header-state #site-header .site-navigation .menu > li:is(
		.current-menu-item,
		.current_page_item,
		.current-menu-ancestor,
		.current-page-ancestor
	) > a:hover,
	body.sujiin-header-state #site-header .site-navigation .menu > li > a[aria-current="page"]:hover {
		color: #fff !important;
		background: var(--sujiin-header-green-deep) !important;
		transform: translateY(-1px);
	}
}

/* Mobile and tablet dropdown: full-width, calm sage selection state. */
@media (max-width: 1024px) {
	body.sujiin-header-state #site-header .site-navigation-dropdown .menu {
		padding: 8px 10px !important;
	}

	body.sujiin-header-state #site-header .site-navigation-dropdown .menu > li > a {
		width: 100%;
		margin: 3px 0;
		padding: 13px 16px !important;
		border-left: 3px solid transparent;
		border-radius: 10px;
	}

	body.sujiin-header-state #site-header .site-navigation-dropdown .menu > li:not(.current-menu-item):not(.current_page_item) > a:hover {
		color: var(--sujiin-header-green) !important;
		background: var(--sujiin-header-hover) !important;
	}

	body.sujiin-header-state #site-header .site-navigation-dropdown .menu > li:is(
		.current-menu-item,
		.current_page_item,
		.current-menu-ancestor,
		.current-page-ancestor
	) > a,
	body.sujiin-header-state #site-header .site-navigation-dropdown .menu > li > a[aria-current="page"] {
		color: var(--sujiin-header-green-deep) !important;
		background: var(--sujiin-header-sage) !important;
		border-left-color: var(--sujiin-header-green) !important;
		font-weight: 600 !important;
	}
}

/* Visible keyboard focus for accessibility. */
body.sujiin-header-state #site-header .menu > li > a:focus-visible {
	outline: 2px solid var(--sujiin-header-green) !important;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body.sujiin-header-state #site-header .menu > li > a {
		transition: none !important;
	}
}