/**
 * JSD Primary Navigation
 *
 * Kadence renders and drives the menu; this file only finishes the dropdown
 * panel to the JSD system and guarantees a visible keyboard focus ring.
 *
 * Everything colour-related (panel background, item colour, hover, dividers)
 * is set through Kadence's own Customizer controls. What is left here is what
 * Kadence has no control for: the panel's outer hairline, removing the drop
 * shadow, and focus styling.
 */

/* Dropdown panel ---------------------------------------------------------- */

.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.submenu {
	min-width: 220px;
	border: 1px solid #e5e5e5;
	border-radius: 0;
	/* A hairline reads as cleanly as a shadow and keeps the header flat. */
	box-shadow: none;
}

.header-navigation .header-menu-container ul ul.sub-menu li:last-child > a {
	border-bottom: 0;
}

/*
 * Kadence separates items with a bottom border on the link. The last one sits
 * on the panel border, so it is dropped above; the rest stay as configured.
 */
.header-navigation .header-menu-container ul ul.sub-menu li > a {
	padding: 12px 16px;
	line-height: 1.35;
}

/* Focus -------------------------------------------------------------------- */

/*
 * Kadence relies on the browser default, which is invisible against a black
 * header. These are deliberately high-contrast and drawn inside the item so
 * nothing shifts when focus lands.
 */
.header-navigation .header-menu-container ul li > a:focus-visible,
.header-navigation .header-menu-container ul li > button:focus-visible {
	outline: 2px solid #000000;
	outline-offset: -2px;
}

.header-navigation .header-menu-container ul ul.sub-menu li > a:focus-visible {
	outline: 2px solid #111111;
	outline-offset: -2px;
	background-color: #f4f4f4;
}

/* Mobile drawer ------------------------------------------------------------ */

.mobile-navigation ul li > a:focus-visible,
.mobile-navigation ul li > button:focus-visible,
.mobile-toggle-open-container .menu-toggle-open:focus-visible {
	outline: 2px solid #000000;
	outline-offset: -2px;
}

/*
 * The drawer is a fixed-width panel; long labels should wrap rather than push
 * the drawer wider than the viewport.
 */
.mobile-navigation ul li > a {
	overflow-wrap: break-word;
}