/* a2z primary nav — Elementor Nav Menu widget (.a2z-primary-nav).
   Container-level header styling (sticky wrapper, blur band, the centred flex
   row and its child sizing) lives in each container's Elementor Custom CSS,
   because container _css_classes do not render on the front end in this build. */

.a2z-primary-nav .elementor-nav-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	justify-content: center;
	margin: 0;
	padding: 0;
}

/* pill link — matches the source nav <a> exactly */
.a2z-primary-nav .elementor-item {
	display: inline-flex !important;
	align-items: center;
	min-height: 44px;
	padding: 0 12px !important;
	border-radius: var(--radius-pill) !important;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	color: var(--color-text-primary) !important;
	fill: var(--color-text-primary);
	text-decoration: none;
	border: 0;
	transition: background var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out);
}

.a2z-primary-nav .elementor-item:hover,
.a2z-primary-nav .elementor-item:focus {
	background: var(--color-surface-accent) !important;
	color: var(--color-brand-primary) !important;
}

/* current-page dot — inline after the label: 6px clay, 7px offset (from
   _parts/header-home.html). Only the active item shows it, exactly like the
   source headers. position:static overrides Elementor's absolute pointer ::after
   so the dot flows after the text instead of overlapping it. */
.a2z-primary-nav .current-menu-item > .elementor-item::after,
body.a2z-p-cra-account .a2z-primary-nav .a2z-nav-resources > .elementor-item::after,
body.a2z-p-select-accountant .a2z-primary-nav .a2z-nav-resources > .elementor-item::after {
	content: "";
	display: block !important;
	position: static !important;
	inset: auto !important;
	transform: none !important;
	width: 6px !important;
	height: 6px !important;
	border-radius: 999px !important;
	background: var(--color-brand-primary) !important;
	margin: 0 0 0 7px !important;
	flex: 0 0 auto !important;
}

/* mobile toggle (WP-native collapse; no equivalent in the static source) */
.a2z-primary-nav .elementor-menu-toggle { color: var(--color-text-primary); }
.a2z-primary-nav .elementor-nav-menu--dropdown { background: rgba(251, 243, 231, 0.98); }