/* ==========================================================================
   DSM — Primary & mobile navigation (Kadence-compatible)
   Loads late so current item + hover states win over Customizer defaults.
   ========================================================================== */

/* ── Header bar: clearer separation from content ── */
#masthead.site-header,
#masthead {
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	background-color: rgba(255, 255, 255, 0.88) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: var(--dsm-shadow-sm), inset 0 -1px 0 var(--dsm-border-subtle);
}

.site-header-inner-wrap {
	border-bottom: none;
	padding-inline: clamp(0.75rem, 1vw + 0.5rem, 1.5rem);
}

.site-header-row-container-inner {
	gap: clamp(0.75rem, 1vw + 0.25rem, 1.5rem);
	min-height: 78px;
}

#masthead .header-navigation,
#masthead .primary-navigation,
#masthead .primary-menu-container {
	display: flex;
	align-items: center;
}

#masthead ul.menu,
#masthead .primary-menu-container ul.menu,
#masthead nav.primary-navigation ul.menu,
#masthead .sf-menu {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	flex-wrap: wrap;
}

/* ── All top-level nav links this theme may output ── */
#masthead ul.menu > li > a,
#masthead .primary-menu-container ul.menu > li > a,
#masthead nav.primary-navigation ul.menu > li > a,
#masthead .main-navigation ul.menu > li > a,
#masthead .header-menu-container ul.menu > li > a,
#masthead nav[aria-label] ul.menu > li > a,
#masthead .sf-menu > li > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.55rem 0.9rem;
	margin: 0;
	border-radius: 999px;
	font-family: var(--dsm-font-heading);
	font-weight: var(--dsm-fw-medium);
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	line-height: 1.2;
	color: var(--dsm-text) !important;
	text-decoration: none !important;
	transition:
		background-color var(--dsm-transition),
		color var(--dsm-transition),
		box-shadow var(--dsm-transition),
		transform var(--dsm-transition);
}

#masthead ul.menu > li > a:hover,
#masthead ul.menu > li > a:focus-visible,
#masthead .primary-menu-container ul.menu > li > a:hover,
#masthead .primary-menu-container ul.menu > li > a:focus-visible,
#masthead nav.primary-navigation ul.menu > li > a:hover,
#masthead nav.primary-navigation ul.menu > li > a:focus-visible,
#masthead .main-navigation ul.menu > li > a:hover,
#masthead .main-navigation ul.menu > li > a:focus-visible,
#masthead .header-menu-container ul.menu > li > a:hover,
#masthead .sf-menu > li > a:hover,
#masthead .sf-menu > li > a:focus {
	color: var(--dsm-primary) !important;
	background-color: color-mix(in srgb, var(--dsm-primary) 9%, transparent) !important;
}

#masthead ul.menu > li.current-menu-item > a,
#masthead ul.menu > li.current-menu-ancestor > a,
#masthead ul.menu > li.current_page_item > a,
#masthead ul.menu > li.current_page_parent > a,
#masthead ul.menu > li.current-menu-parent > a,
#masthead .primary-menu-container ul.menu > li.current-menu-item > a,
#masthead .primary-menu-container ul.menu > li.current-menu-ancestor > a,
#masthead .primary-menu-container ul.menu > li.current_page_item > a,
#masthead nav.primary-navigation ul.menu > li.current-menu-item > a,
#masthead nav.primary-navigation ul.menu > li.current-menu-ancestor > a,
#masthead .main-navigation ul.menu > li.current-menu-item > a,
#masthead .main-navigation ul.menu > li.current-menu-ancestor > a,
#masthead .header-menu-container ul.menu > li.current-menu-item > a,
#masthead .sf-menu > li.current-menu-item > a,
#masthead .sf-menu > li.current-menu-ancestor > a {
	color: var(--dsm-primary) !important;
	background-color: color-mix(in srgb, var(--dsm-primary) 16%, transparent) !important;
	font-weight: var(--dsm-fw-semibold) !important;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--dsm-primary) 35%, transparent);
}

/* Hover on already-active: slightly stronger */
#masthead ul.menu > li.current-menu-item > a:hover,
#masthead ul.menu > li.current-menu-ancestor > a:hover,
#masthead nav.primary-navigation ul.menu > li.current-menu-item > a:hover,
#masthead nav.primary-navigation ul.menu > li.current-menu-ancestor > a:hover {
	background-color: color-mix(in srgb, var(--dsm-primary) 22%, transparent) !important;
}

/* ── Donate / CTA style links in menu (optional .dsm-nav-cta on menu item in WP admin) ── */
#masthead ul.menu > li.dsm-nav-cta,
#masthead ul.menu > li.menu-item-donate,
#masthead ul.menu > li.dsm-btn-donate {
	display: flex;
	align-items: center;
	padding: 0;
	margin-left: 0.5rem;
	background: transparent !important;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
}

#masthead ul.menu > li.dsm-nav-cta > a,
#masthead ul.menu > li.menu-item-donate > a,
#masthead ul.menu > li.dsm-btn-donate > a {
	min-height: 42px;
	padding: 0.7rem 1.15rem;
	margin: 0;
	background: var(--dsm-white) !important;
	color: var(--dsm-cta) !important;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: var(--dsm-fw-semibold);
	letter-spacing: 0.01em;
	line-height: 1;
	text-shadow: none;
	box-shadow: 0 4px 12px rgba(12, 74, 110, 0.08);
	border: 1.5px solid color-mix(in srgb, var(--dsm-cta) 82%, white);
}

#masthead ul.menu > li.dsm-nav-cta > a:hover,
#masthead ul.menu > li.menu-item-donate > a:hover,
#masthead ul.menu > li.dsm-btn-donate > a:hover {
	background: var(--dsm-cta) !important;
	color: var(--dsm-white) !important;
	box-shadow: 0 10px 22px rgba(3, 105, 161, 0.18);
	transform: translateY(-1px);
}

#masthead ul.menu > li.dsm-nav-cta > a:focus-visible,
#masthead ul.menu > li.menu-item-donate > a:focus-visible,
#masthead ul.menu > li.dsm-btn-donate > a:focus-visible {
	outline: none;
	color: var(--dsm-white) !important;
	background: var(--dsm-cta) !important;
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--dsm-white) 92%, transparent),
		0 0 0 6px color-mix(in srgb, var(--dsm-cta) 26%, transparent),
		0 10px 22px rgba(3, 105, 161, 0.16);
}

#masthead ul.menu > li.dsm-nav-cta.current-menu-item > a,
#masthead ul.menu > li.menu-item-donate.current-menu-item > a,
#masthead ul.menu > li.dsm-btn-donate.current-menu-item > a,
#masthead ul.menu > li.dsm-nav-cta.current-menu-ancestor > a,
#masthead ul.menu > li.menu-item-donate.current-menu-ancestor > a,
#masthead ul.menu > li.dsm-btn-donate.current-menu-ancestor > a {
	background: var(--dsm-white) !important;
	color: var(--dsm-cta) !important;
	font-weight: var(--dsm-fw-semibold) !important;
	border: 1.5px solid color-mix(in srgb, var(--dsm-cta) 82%, white);
	box-shadow: 0 4px 12px rgba(12, 74, 110, 0.08) !important;
}

#masthead ul.menu > li.dsm-nav-cta.current-menu-item > a:hover,
#masthead ul.menu > li.menu-item-donate.current-menu-item > a:hover,
#masthead ul.menu > li.dsm-btn-donate.current-menu-item > a:hover,
#masthead ul.menu > li.dsm-nav-cta.current-menu-ancestor > a:hover,
#masthead ul.menu > li.menu-item-donate.current-menu-ancestor > a:hover,
#masthead ul.menu > li.dsm-btn-donate.current-menu-ancestor > a:hover {
	background: var(--dsm-cta) !important;
	color: var(--dsm-white) !important;
	box-shadow: 0 10px 22px rgba(3, 105, 161, 0.18) !important;
}

/* ── Dropdown / sub-menu readability ── */
#masthead ul.menu .sub-menu,
#masthead .sf-menu ul {
	border-radius: var(--dsm-radius-card);
	border: 1px solid rgba(255, 255, 255, 0.45);
	box-shadow: var(--dsm-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.7);
	padding: var(--dsm-space-sm) 0;
	background-color: rgba(255, 255, 255, 0.92) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	min-width: 14rem;
}

#masthead ul.menu .sub-menu li > a,
#masthead .sf-menu ul li > a {
	display: block;
	padding: 0.5rem var(--dsm-space-md);
	margin: 0 0.25rem;
	border-radius: var(--dsm-radius-btn);
	font-size: 0.9rem;
	color: var(--dsm-text) !important;
	font-weight: var(--dsm-fw-regular);
}

#masthead ul.menu .sub-menu li > a:hover,
#masthead .sf-menu ul li > a:hover {
	background-color: color-mix(in srgb, var(--dsm-primary) 8%, transparent) !important;
	color: var(--dsm-primary) !important;
}

#masthead ul.menu .sub-menu li.current-menu-item > a,
#masthead ul.menu .sub-menu .current-menu-item > a,
#masthead .sf-menu ul li.current-menu-item > a {
	background-color: color-mix(in srgb, var(--dsm-primary) 12%, transparent) !important;
	color: var(--dsm-primary) !important;
	font-weight: var(--dsm-fw-semibold);
	box-shadow: none;
}

/* ── Mobile toggle (hamburger) button ── */
#mobile-toggle.menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem;
	border: none;
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	color: var(--dsm-text);
	transition: background-color var(--dsm-transition), color var(--dsm-transition);
}

#mobile-toggle.menu-toggle-open:hover,
.mobile-toggle-open-container .menu-toggle-open:hover {
	background-color: color-mix(in srgb, var(--dsm-primary) 9%, transparent);
	color: var(--dsm-primary);
}

/* ── Drawer overlay ── */
#mobile-drawer .drawer-overlay,
.popup-drawer .drawer-overlay {
	background-color: rgba(2, 26, 38, 0.48);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

/* ── Drawer panel ── */
#mobile-drawer .drawer-inner,
.popup-drawer .drawer-inner {
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: var(--dsm-shadow-xl);
	border-left: 1px solid rgba(255, 255, 255, 0.45);
}

/* ── Drawer header (close button row) ── */
#mobile-drawer .drawer-header,
.popup-drawer .drawer-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 68px;
	padding: var(--dsm-space-sm) var(--dsm-space-md);
	border-bottom: 1px solid var(--dsm-border-subtle);
}

/* ── Close button ── */
#mobile-drawer .menu-toggle-close,
.popup-drawer .menu-toggle-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem;
	border: none;
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	color: var(--dsm-text);
	transition: background-color var(--dsm-transition), color var(--dsm-transition);
}

#mobile-drawer .menu-toggle-close:hover,
.popup-drawer .menu-toggle-close:hover {
	background-color: color-mix(in srgb, var(--dsm-primary) 9%, transparent);
	color: var(--dsm-primary);
}

/* ── Mobile nav list ── */
#mobile-drawer .mobile-navigation,
.popup-drawer .mobile-navigation {
	padding: var(--dsm-space-sm) var(--dsm-space-md);
}

#mobile-drawer .mobile-navigation ul.menu,
.popup-drawer .mobile-navigation ul.menu {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ── Mobile nav links ── */
#mobile-drawer .mobile-navigation ul.menu > li > a,
.popup-drawer .mobile-navigation ul.menu > li > a,
.drawer-navigation ul.menu > li > a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0.75rem var(--dsm-space-md);
	border-radius: var(--dsm-radius-btn);
	border-left: 3px solid transparent;
	font-family: var(--dsm-font-heading);
	font-size: 1.05rem;
	font-weight: var(--dsm-fw-medium);
	color: var(--dsm-text) !important;
	text-decoration: none !important;
	transition: background-color var(--dsm-transition), color var(--dsm-transition), border-color var(--dsm-transition);
}

#mobile-drawer .mobile-navigation ul.menu > li > a:hover,
.popup-drawer .mobile-navigation ul.menu > li > a:hover {
	background-color: color-mix(in srgb, var(--dsm-primary) 8%, transparent);
	color: var(--dsm-primary) !important;
}

#mobile-drawer .mobile-navigation ul.menu > li.current-menu-item > a,
#mobile-drawer .mobile-navigation ul.menu > li.current-menu-ancestor > a,
#mobile-drawer .mobile-navigation ul.menu > li.current_page_item > a,
.popup-drawer .mobile-navigation ul.menu > li.current-menu-item > a,
.popup-drawer .mobile-navigation ul.menu > li.current-menu-ancestor > a,
.drawer-navigation ul.menu > li.current-menu-item > a {
	background-color: color-mix(in srgb, var(--dsm-primary) 14%, transparent) !important;
	color: var(--dsm-primary) !important;
	font-weight: var(--dsm-fw-semibold) !important;
	border-left-color: var(--dsm-primary);
	padding-left: calc(var(--dsm-space-md) - 3px);
}

/* ── Sub-menus in mobile ── */
#mobile-drawer .mobile-navigation ul.menu .sub-menu,
.popup-drawer .mobile-navigation ul.menu .sub-menu {
	padding: var(--dsm-space-xs) 0 var(--dsm-space-xs) var(--dsm-space-md);
	border-left: 2px solid var(--dsm-border-subtle);
	margin-left: var(--dsm-space-md);
}

#mobile-drawer .mobile-navigation ul.menu .sub-menu a,
.popup-drawer .mobile-navigation ul.menu .sub-menu a {
	font-size: 0.9rem;
	min-height: 40px;
	padding: 0.55rem var(--dsm-space-md);
}

/* ── Donate / CTA in mobile menu ── */
#mobile-drawer .mobile-navigation ul.menu > li.dsm-nav-cta,
#mobile-drawer .mobile-navigation ul.menu > li.menu-item-donate,
#mobile-drawer .mobile-navigation ul.menu > li.dsm-btn-donate,
.popup-drawer .mobile-navigation ul.menu > li.dsm-nav-cta,
.popup-drawer .mobile-navigation ul.menu > li.menu-item-donate,
.popup-drawer .mobile-navigation ul.menu > li.dsm-btn-donate,
#mobile-drawer .mobile-navigation ul.menu > li.dsm-nav-cta:hover,
#mobile-drawer .mobile-navigation ul.menu > li.menu-item-donate:hover,
#mobile-drawer .mobile-navigation ul.menu > li.dsm-btn-donate:hover,
#mobile-drawer .mobile-navigation ul.menu > li.dsm-nav-cta:focus,
#mobile-drawer .mobile-navigation ul.menu > li.menu-item-donate:focus,
#mobile-drawer .mobile-navigation ul.menu > li.dsm-btn-donate:focus,
#mobile-drawer .mobile-navigation ul.menu > li.dsm-nav-cta:active,
#mobile-drawer .mobile-navigation ul.menu > li.menu-item-donate:active,
#mobile-drawer .mobile-navigation ul.menu > li.dsm-btn-donate:active,
.popup-drawer .mobile-navigation ul.menu > li.dsm-nav-cta:hover,
.popup-drawer .mobile-navigation ul.menu > li.menu-item-donate:hover,
.popup-drawer .mobile-navigation ul.menu > li.dsm-btn-donate:hover,
.popup-drawer .mobile-navigation ul.menu > li.dsm-nav-cta:focus,
.popup-drawer .mobile-navigation ul.menu > li.menu-item-donate:focus,
.popup-drawer .mobile-navigation ul.menu > li.dsm-btn-donate:focus,
.popup-drawer .mobile-navigation ul.menu > li.dsm-nav-cta:active,
.popup-drawer .mobile-navigation ul.menu > li.menu-item-donate:active,
.popup-drawer .mobile-navigation ul.menu > li.dsm-btn-donate:active {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	margin-top: var(--dsm-space-sm);
	padding-top: var(--dsm-space-sm);
	border-top: 1px solid var(--dsm-border-subtle) !important;
}

#mobile-drawer .mobile-navigation ul.menu > li.dsm-nav-cta > a,
#mobile-drawer .mobile-navigation ul.menu > li.menu-item-donate > a,
#mobile-drawer .mobile-navigation ul.menu > li.dsm-btn-donate > a,
.popup-drawer .mobile-navigation ul.menu > li.dsm-nav-cta > a,
.popup-drawer .mobile-navigation ul.menu > li.menu-item-donate > a,
.popup-drawer .mobile-navigation ul.menu > li.dsm-btn-donate > a {
	justify-content: center;
	background: var(--dsm-white) !important;
	color: var(--dsm-cta) !important;
	font-weight: var(--dsm-fw-semibold) !important;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	border: 1.5px solid color-mix(in srgb, var(--dsm-cta) 82%, white) !important;
	border-left: 1.5px solid color-mix(in srgb, var(--dsm-cta) 82%, white) !important;
	border-radius: 999px !important;
	box-shadow: 0 4px 12px rgba(12, 74, 110, 0.08);
}

#mobile-drawer .mobile-navigation ul.menu > li.dsm-nav-cta > a:hover,
#mobile-drawer .mobile-navigation ul.menu > li.menu-item-donate > a:hover,
#mobile-drawer .mobile-navigation ul.menu > li.dsm-btn-donate > a:hover,
#mobile-drawer .mobile-navigation ul.menu > li.dsm-nav-cta > a:active,
#mobile-drawer .mobile-navigation ul.menu > li.menu-item-donate > a:active,
#mobile-drawer .mobile-navigation ul.menu > li.dsm-btn-donate > a:active,
.popup-drawer .mobile-navigation ul.menu > li.dsm-nav-cta > a:hover,
.popup-drawer .mobile-navigation ul.menu > li.menu-item-donate > a:hover,
.popup-drawer .mobile-navigation ul.menu > li.dsm-btn-donate > a:hover,
.popup-drawer .mobile-navigation ul.menu > li.dsm-nav-cta > a:active,
.popup-drawer .mobile-navigation ul.menu > li.menu-item-donate > a:active,
.popup-drawer .mobile-navigation ul.menu > li.dsm-btn-donate > a:active {
	background: var(--dsm-cta) !important;
	color: var(--dsm-white) !important;
	border-left-color: color-mix(in srgb, var(--dsm-cta) 82%, white) !important;
	box-shadow: 0 10px 22px rgba(3, 105, 161, 0.18);
	outline: none !important;
	transform: translateY(-1px);
}

/* ── Kadence Navigation (block) / Header builder ── */
.wp-block-kadence-navigation .menu-item > .kb-link-wrap,
.wp-block-kadence-navigation .menu-item > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.45rem 0.95rem;
	margin: 0 0.1rem;
	border-radius: 999px;
	transition:
		background-color var(--dsm-transition),
		color var(--dsm-transition),
		box-shadow var(--dsm-transition);
}

.wp-block-kadence-navigation .kb-nav-link-content,
.wp-block-kadence-navigation .menu-item > a {
	font-family: var(--dsm-font-heading);
	font-weight: var(--dsm-fw-medium);
	font-size: 0.9375rem;
	color: var(--dsm-text) !important;
	text-decoration: none !important;
}

.wp-block-kadence-navigation .menu-item > .kb-link-wrap:hover,
.wp-block-kadence-navigation .menu-item > a:hover {
	background-color: color-mix(in srgb, var(--dsm-primary) 9%, transparent);
	color: var(--dsm-primary) !important;
}

.wp-block-kadence-navigation .menu-item.current-menu-item > .kb-link-wrap,
.wp-block-kadence-navigation .menu-item.current-menu-ancestor > .kb-link-wrap,
.wp-block-kadence-navigation .menu-item.current-menu-item > a,
.wp-block-kadence-navigation .menu-item.current-menu-ancestor > a,
.wp-block-kadence-navigation li.current_page_item > .kb-link-wrap,
.wp-block-kadence-navigation .current-menu-item .kb-nav-link-content,
.wp-block-kadence-navigation .current-menu-ancestor .kb-nav-link-content {
	background-color: color-mix(in srgb, var(--dsm-primary) 16%, transparent) !important;
	color: var(--dsm-primary) !important;
	font-weight: var(--dsm-fw-semibold) !important;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--dsm-primary) 35%, transparent);
}

/* ── Smart sticky: slide out on scroll-down, slide in on scroll-up ── */
.site-main-header-wrap.item-is-fixed {
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
	will-change: transform;
}

.site-main-header-wrap.item-is-fixed.dsm-nav--hidden {
	transform: translateY(-100%) !important;
}

@media (prefers-reduced-motion: reduce) {
	.site-main-header-wrap.item-is-fixed {
		transition: none !important;
	}
}