/* ==========================================================================
   GoWP Style Guide Header Navigation & Dropdowns
   Scoped strictly inside .gowp-style-guide-hero
   ========================================================================== */

.gowp-style-guide-hero {
	position: relative;
	z-index: 100;
}

.gowp-style-guide-hero .cns-pill a,
.gowp-style-guide-hero .wp-block-heading a {
	color: inherit;
	text-decoration: none;
}

.gowp-style-guide-hero .gowp-style-guide-nav {
	position: relative;
	margin-top: var(--gowp-space-sm);
}

.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation__container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gowp-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Top Level Navigation Items */
.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation-item {
	position: relative;
}

.gowp-style-guide-hero .gowp-style-guide-nav > .wp-block-navigation__container > .wp-block-navigation-item,
.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation__container > .wp-block-navigation-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	border-radius: var(--gowp-space-xxs);
	background-color: transparent;
	transition: background-color 0.2s ease;
}

/* Invisible Bridge downwards from Top-Level Item to prevent hover closing */
.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation-item.has-child::after {
	content: "";
	position: absolute;
	left: -10px;
	right: -10px;
	top: 100%;
	height: 16px;
	background: transparent;
	z-index: 1000;
	pointer-events: auto;
}

.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation-item:hover,
.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation-item.is-dropdown-open,
.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation-item:focus-within {
	background-color: rgba(255, 255, 255, 0.18);
}

.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	padding: var(--gowp-space-xs) var(--gowp-space-sm);
	color: var(--wp--preset--color--white) !important;
	font-size: var(--gowp-font-sm);
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
}

.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--gowp-space-xs);
	margin-left: calc(-1 * var(--gowp-space-xxs));
	background: transparent;
	border: none;
	color: var(--wp--preset--color--white);
	cursor: pointer;
}

.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation-item > .wp-block-navigation-submenu__toggle svg {
	stroke: var(--wp--preset--color--white);
	fill: none;
}

/* ==========================================================================
   Dropdown Submenu Container - Solid White Background & No-Gap Hover Bridge
   ========================================================================== */

.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation__submenu-container,
.gowp-style-guide-nav .wp-block-navigation__submenu-container,
.wp-block-navigation.gowp-style-guide-nav .wp-block-navigation__submenu-container {
	position: absolute !important;
	top: calc(100% - 1px) !important;
	left: 0 !important;
	min-width: 280px !important;
	max-width: 380px !important;
	background-color: var(--wp--preset--color--white, #ffffff) !important;
	background: var(--wp--preset--color--white, #ffffff) !important;
	border: 1px solid var(--wp--preset--color--ui-framing-cool-gray-2, #e2e8f0) !important;
	border-radius: var(--gowp-space-xs, 8px) !important;
	box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.28), 0 8px 12px -6px rgba(0, 0, 0, 0.16) !important;
	padding: var(--gowp-space-xxs, 6px) 0 !important;
	margin: 0 !important;
	list-style: none !important;
	z-index: 9999 !important;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Invisible Bridge upwards from Submenu to overlap Top Item */
.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation__submenu-container::before,
.gowp-style-guide-nav .wp-block-navigation__submenu-container::before {
	content: "" !important;
	position: absolute !important;
	top: -16px !important;
	left: -10px !important;
	right: -10px !important;
	height: 16px !important;
	background: transparent !important;
	z-index: 1001 !important;
	pointer-events: auto !important;
}

/* Submenu Items & Links */
.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation__submenu-container .wp-block-navigation-item,
.gowp-style-guide-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: var(--wp--preset--color--white, #ffffff) !important;
	background: var(--wp--preset--color--white, #ffffff) !important;
}

.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content,
.gowp-style-guide-nav .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content {
	display: flex !important;
	align-items: center !important;
	padding: 9px 18px !important;
	color: var(--wp--preset--color--primary, #001E62) !important;
	font-size: var(--gowp-font-sm, 14px) !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	background-color: var(--wp--preset--color--white, #ffffff) !important;
	background: var(--wp--preset--color--white, #ffffff) !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
	white-space: nowrap !important;
}

.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content:hover,
.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content:focus,
.gowp-style-guide-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.gowp-style-guide-nav .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content:hover,
.gowp-style-guide-nav .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content:focus {
	background-color: var(--wp--preset--color--ui-framing-cool-gray-2, #f1f5f9) !important;
	background: var(--wp--preset--color--ui-framing-cool-gray-2, #f1f5f9) !important;
	color: var(--wp--preset--color--primary-light-blue, #006CFA) !important;
}

/* ==========================================================================
   Show Submenu on Hover, Focus-within, .is-dropdown-open, or when WordPress marks it open
   ========================================================================== */

.gowp-style-guide-hero .gowp-style-guide-nav .has-child:hover > .wp-block-navigation__submenu-container,
.gowp-style-guide-hero .gowp-style-guide-nav .has-child.is-dropdown-open > .wp-block-navigation__submenu-container,
.gowp-style-guide-hero .gowp-style-guide-nav .has-child:focus-within > .wp-block-navigation__submenu-container,
.gowp-style-guide-hero .gowp-style-guide-nav .has-child.is-menu-open > .wp-block-navigation__submenu-container,
.gowp-style-guide-hero .gowp-style-guide-nav .has-child button[aria-expanded="true"] + .wp-block-navigation__submenu-container,
.gowp-style-guide-hero .gowp-style-guide-nav .has-child button[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
.gowp-style-guide-nav .has-child:hover > .wp-block-navigation__submenu-container,
.gowp-style-guide-nav .has-child.is-dropdown-open > .wp-block-navigation__submenu-container,
.gowp-style-guide-nav .has-child:focus-within > .wp-block-navigation__submenu-container,
.gowp-style-guide-nav .has-child.is-menu-open > .wp-block-navigation__submenu-container,
.gowp-style-guide-nav .has-child button[aria-expanded="true"] + .wp-block-navigation__submenu-container,
.gowp-style-guide-nav .has-child button[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	display: block !important;
}