/* Primary navigation — per-item accent, matching the previous site: each
   top-level item shows a coloured top bar that "drops down" to fill the item
   on hover/active (text turns white), cycling teal / coral / yellow / green.

   Pure CSS, desktop header nav only (the mobile drawer is separate). The colour
   cycles by position via :nth-child, so it applies to whatever sits in the
   header — a curated menu or the page-list fallback. */

/* Centre the items within the nav. True centring in the header row is a Kadence
   header-builder setting (put Navigation in the centre section); this centres
   the items within whatever container the nav occupies. */
.header-navigation .menu {
	justify-content: center;
}

.header-navigation .menu > li {
	position: relative;
}

/* The colour bar (5px) that expands to fill on hover */
.header-navigation .menu > li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	z-index: 0;
	background: var(--nav-accent, var(--color-teal));
	transition: height 0.25s ease;
}

.header-navigation .menu > li:hover::before,
.header-navigation .menu > li:focus-within::before,
.header-navigation .menu > li.current-menu-item::before,
.header-navigation .menu > li.current_page_item::before,
.header-navigation .menu > li.current-menu-ancestor::before {
	height: 100%;
}

/* Keep the link text above the fill; turn it white once filled */
.header-navigation .menu > li > a {
	position: relative;
	z-index: 1;
	transition: color 0.25s ease;
	font-size: 1.05rem;
}

/* Turn the item text white once the colour fills. Kadence sets its own nav
   link colour on hover/active via a fairly specific inline rule, so chaining
   both nav classes (.main-navigation.header-navigation) + the container path
   out-specifies it — otherwise the text would keep Kadence's highlight colour
   and vanish against the fill. */
.main-navigation.header-navigation .primary-menu-container > ul > li.menu-item:hover > a,
.main-navigation.header-navigation .primary-menu-container > ul > li.menu-item:focus-within > a,
.main-navigation.header-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a,
.main-navigation.header-navigation .primary-menu-container > ul > li.menu-item.current_page_item > a,
.main-navigation.header-navigation .primary-menu-container > ul > li.menu-item.current-menu-ancestor > a {
	color: var(--color-white);
}

/* Accent colour cycle by position */
.header-navigation .menu > li:nth-child(4n + 1) {
	--nav-accent: var(--color-teal);
}

.header-navigation .menu > li:nth-child(4n + 2) {
	--nav-accent: var(--color-coral);
}

.header-navigation .menu > li:nth-child(4n + 3) {
	--nav-accent: var(--color-yellow);
	--nav-accent-text: var(--color-heading);
}

.header-navigation .menu > li:nth-child(4n + 4) {
	--nav-accent: var(--color-green);
}

/* Submenu dropdowns — light grey panel (previous-site look), but hover/active
   now fill solid with the parent item's own accent colour (--nav-accent
   inherits down from the top-level <li>) instead of just darkening the text,
   for much stronger contrast. Chained selectors out-specify Kadence's own
   inline customizer CSS for .sub-menu, same technique as the top-level nav
   override above. */
.main-navigation.header-navigation .primary-menu-container ul ul.sub-menu {
	background: var(--color-bg);
	box-shadow: var(--shadow-card);
}

.main-navigation.header-navigation .primary-menu-container ul ul li.menu-item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.main-navigation.header-navigation .primary-menu-container ul ul li.menu-item > a {
	position: relative;
	color: var(--color-text);
	font-size: var(--font-size-base);
	transition: var(--transition);
}

.main-navigation.header-navigation .primary-menu-container ul ul li.menu-item > a:hover {
	background: var(--nav-accent, var(--color-coral));
	color: var(--nav-accent-text, var(--color-white));
}

/* Active/ancestor item — same solid fill as hover (so it reads as "selected",
   permanently), plus a white edge marker as the "you are here" effect that's
   visible without hovering. */
.main-navigation.header-navigation .primary-menu-container ul ul li.menu-item.current-menu-item > a,
.main-navigation.header-navigation .primary-menu-container ul ul li.menu-item.current-menu-ancestor > a {
	background: var(--nav-accent, var(--color-coral));
	color: var(--nav-accent-text, var(--color-white));
	box-shadow: inset 3px 0 0 var(--nav-accent-text, var(--color-white));
}