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

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

	& > .wp-block-gowp-container {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding-left: var(--wp--preset--spacing--md) !important;
		padding-right: var(--wp--preset--spacing--md) !important;
		margin-left: auto !important;
		margin-right: auto !important;

		& > .wp-block-gowp-container {
			width: var(--wp--style--global--wide-size) !important;
			max-width: 100% !important;
			box-sizing: border-box !important;
			margin-left: auto !important;
			margin-right: auto !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
		}
	}
}

@media screen and (max-width: 782px) {
	.gowp-style-guide-hero {
		& > .wp-block-gowp-container {
			padding-left: var(--gowp-space-sm) !important;
			padding-right: var(--gowp-space-sm) !important;
		}
	}
}

.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;
}

/* ==========================================================================
   Style Guide Copy Button Interactive Styles
   ========================================================================== */

.copy-button {
	cursor: pointer !important;
	user-select: none;
	transition: opacity 0.2s ease, transform 0.1s ease;
}

.copy-button:hover {
	opacity: 0.85;
}

.copy-button:active {
	transform: scale(0.98);
}

.copy-button.is-copied {
	opacity: 1 !important;
}

.copy-button.is-copied .gowp-list-item__link,
.copy-button.is-copied p,
.copy-button.is-copied span {
	color: var(--wp--preset--color--alert-success, #00A806) !important;
	font-weight: 700;
}

/* ==========================================================================
   Mobile-Friendly Toggle Button & Responsive Accordion (< 782px)
   ========================================================================== */

.gowp-style-guide-mobile-toggle {
	display: none;
}

@media (max-width: 781px) {
	.gowp-style-guide-hero .gowp-style-guide-mobile-toggle,
	.gowp-style-guide-mobile-toggle {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		padding: 12px 16px !important;
		min-height: 48px !important;
		background: rgba(255, 255, 255, 0.15) !important;
		border: 1px solid rgba(255, 255, 255, 0.3) !important;
		border-radius: var(--gowp-space-xxs, 6px) !important;
		color: var(--wp--preset--color--white, #ffffff) !important;
		font-family: inherit !important;
		font-size: var(--gowp-font-sm, 14px) !important;
		font-weight: 600 !important;
		cursor: pointer !important;
		box-sizing: border-box !important;
		transition: background-color 0.2s ease, border-color 0.2s ease !important;
	}

	.gowp-style-guide-mobile-toggle:hover,
	.gowp-style-guide-mobile-toggle:focus {
		background: rgba(255, 255, 255, 0.25) !important;
		border-color: rgba(255, 255, 255, 0.5) !important;
		outline: none !important;
	}

	.gowp-style-guide-mobile-toggle__label {
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
	}

	.gowp-style-guide-mobile-toggle__icon {
		stroke: var(--wp--preset--color--white, #ffffff) !important;
		flex-shrink: 0 !important;
	}

	.gowp-style-guide-mobile-toggle__chevron {
		stroke: var(--wp--preset--color--white, #ffffff) !important;
		flex-shrink: 0 !important;
		transition: transform 0.25s ease !important;
	}

	.gowp-style-guide-nav.is-mobile-open .gowp-style-guide-mobile-toggle__chevron {
		transform: rotate(180deg) !important;
	}

	/* Submenu container bridge cleanup on mobile */
	.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation-item.has-child::after,
	.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation__submenu-container::before,
	.gowp-style-guide-nav .wp-block-navigation__submenu-container::before {
		display: none !important;
	}

	/* Nav List Container on Mobile */
	.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation__container,
	.gowp-style-guide-nav .wp-block-navigation__container {
		display: none !important;
		flex-direction: column !important;
		width: 100% !important;
		gap: 8px !important;
		margin-top: 10px !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.gowp-style-guide-hero .gowp-style-guide-nav.is-mobile-open .wp-block-navigation__container,
	.gowp-style-guide-nav.is-mobile-open .wp-block-navigation__container {
		display: flex !important;
	}

	/* Top-level Navigation Items on Mobile */
	.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation-item,
	.gowp-style-guide-nav .wp-block-navigation-item {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		width: 100% !important;
		flex: 0 0 100% !important;
		background-color: rgba(255, 255, 255, 0.12) !important;
		border-radius: var(--gowp-space-xxs, 6px) !important;
		margin: 0 !important;
		overflow: hidden !important;
		transition: background-color 0.2s ease !important;
	}

	.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation-item.is-current-ancestor,
	.gowp-style-guide-nav .wp-block-navigation-item.is-current-ancestor {
		background-color: rgba(255, 255, 255, 0.2) !important;
	}

	.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation-item > .wp-block-navigation-item__content,
	.gowp-style-guide-nav .wp-block-navigation-item > .wp-block-navigation-item__content {
		flex: 1 1 auto !important;
		padding: 12px 16px !important;
		min-height: 48px !important;
		font-size: var(--gowp-font-sm, 14px) !important;
		font-weight: 600 !important;
		color: var(--wp--preset--color--white, #ffffff) !important;
		white-space: normal !important;
		line-height: 1.4 !important;
		box-sizing: border-box !important;
	}

	.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation-item > .wp-block-navigation-submenu__toggle,
	.gowp-style-guide-nav .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
		padding: 12px 16px !important;
		min-width: 48px !important;
		min-height: 48px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		color: var(--wp--preset--color--white, #ffffff) !important;
		background: transparent !important;
		border: none !important;
		cursor: pointer !important;
		transition: transform 0.2s ease !important;
	}

	.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation-item.is-dropdown-open > .wp-block-navigation-submenu__toggle,
	.gowp-style-guide-nav .wp-block-navigation-item.is-dropdown-open > .wp-block-navigation-submenu__toggle {
		transform: rotate(180deg) !important;
	}

	/* Submenu Container on Mobile */
	.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: static !important;
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		box-shadow: none !important;
		border: none !important;
		border-top: 1px solid var(--wp--preset--color--ui-framing-cool-gray-2, #e2e8f0) !important;
		border-radius: 0 0 var(--gowp-space-xxs, 6px) var(--gowp-space-xxs, 6px) !important;
		background-color: var(--wp--preset--color--white, #ffffff) !important;
		background: var(--wp--preset--color--white, #ffffff) !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		box-sizing: border-box !important;
	}

	.gowp-style-guide-hero .gowp-style-guide-nav .has-child:not(.is-dropdown-open) > .wp-block-navigation__submenu-container,
	.gowp-style-guide-nav .has-child:not(.is-dropdown-open) > .wp-block-navigation__submenu-container {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
	}

	.gowp-style-guide-hero .gowp-style-guide-nav .has-child.is-dropdown-open > .wp-block-navigation__submenu-container,
	.gowp-style-guide-nav .has-child.is-dropdown-open > .wp-block-navigation__submenu-container {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	/* Submenu Items on Mobile */
	.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;
		background-color: var(--wp--preset--color--white, #ffffff) !important;
		background: var(--wp--preset--color--white, #ffffff) !important;
		border-radius: 0 !important;
		border-bottom: 1px solid var(--wp--preset--color--ui-framing-cool-gray-2, #f1f5f9) !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child,
	.gowp-style-guide-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
		border-bottom: none !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: block !important;
		width: 100% !important;
		padding: 12px 18px !important;
		min-height: 48px !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;
		white-space: normal !important;
		box-sizing: border-box !important;
		transition: background-color 0.15s ease, color 0.15s ease !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: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:focus {
		background-color: var(--wp--preset--color--ui-framing-cool-gray-2, #f1f5f9) !important;
		color: var(--wp--preset--color--primary-light-blue, #006CFA) !important;
	}

	.gowp-style-guide-hero .gowp-style-guide-nav .wp-block-navigation__submenu-container .wp-block-navigation-item.is-current-page .wp-block-navigation-item__content,
	.gowp-style-guide-nav .wp-block-navigation__submenu-container .wp-block-navigation-item.is-current-page .wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--ui-framing-cool-gray-2, #f1f5f9) !important;
		color: var(--wp--preset--color--primary-light-blue, #006CFA) !important;
		font-weight: 700 !important;
		border-left: 4px solid var(--wp--preset--color--primary-light-blue, #006CFA) !important;
	}
}