/* VM4G Website Services: "Services" dropdown in the main menu. Scoped to .vm4gws-services. */

/* Desktop: menu labels never break onto two lines. */
.wp-block-navigation.vm4gws-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	white-space: nowrap;
}
/* Small laptops (just above the theme's menu-button size): slightly tighter spacing keeps one line. */
@media (max-width: 1099px) {
	.wp-block-navigation.vm4gws-nav .wp-block-navigation__container {
		column-gap: 10px;
	}
}

/* The Services button looks exactly like the other menu links. */
.wp-block-navigation .vm4gws-services > .vm4gws-services__toggle {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}
.wp-block-navigation .vm4gws-services .vm4gws-services__icon {
	margin-left: 0;
	transition: transform .15s ease;
}
.wp-block-navigation .vm4gws-services > .vm4gws-services__toggle[aria-expanded="true"] .vm4gws-services__icon,
.wp-block-navigation .vm4gws-services:not(.vm4gws-dismissed):hover .vm4gws-services__icon {
	transform: rotate(180deg);
}
.wp-block-navigation .vm4gws-services > .vm4gws-services__toggle:focus-visible {
	outline: 2px solid #00838a;
	outline-offset: 4px;
	border-radius: 2px;
}

/* Dropdown panel: the header's dark background, VM4G teal accent. */
.wp-block-navigation .vm4gws-services > .vm4gws-services__menu {
	left: auto;
	right: -1em;
	top: 100%;
	min-width: 220px;
	margin: 0;
	padding: .5em 0;
	list-style: none;
	background-color: var(--wp--preset--color--page-background, #111818);
	color: var(--wp--preset--color--page-text, #f4f6f6);
	border: 1px solid rgba(255, 255, 255, .12);
	border-top: 2px solid #00838a;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
	z-index: 100;
}
/* Invisible bridge so the pointer can travel from "Services" to the panel without it closing. */
.wp-block-navigation .vm4gws-services > .vm4gws-services__menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 12px;
}
.wp-block-navigation .vm4gws-services > .vm4gws-services__menu > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	padding: .6em 1.25em;
	color: inherit;
	white-space: nowrap;
	text-decoration: none;
}
.wp-block-navigation .vm4gws-services > .vm4gws-services__menu > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.wp-block-navigation .vm4gws-services > .vm4gws-services__menu > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .vm4gws-services > .vm4gws-services__menu > .current-menu-item > .wp-block-navigation-item__content {
	background: rgba(0, 131, 138, .22);
	color: #fff;
	outline: none;
}

/* Without the script (or before it loads), keyboard focus still opens the panel. */
.wp-block-navigation .vm4gws-services:not(.vm4gws-js):focus-within > .vm4gws-services__menu {
	height: auto;
	min-width: 220px;
	opacity: 1;
	overflow: visible;
	visibility: visible;
	width: auto;
}

/* Closed with Escape or a second click: stays closed while the pointer is still over it
   (specific enough to beat WordPress's own :hover rule). */
.wp-block-navigation .has-child.vm4gws-services.vm4gws-dismissed > .wp-block-navigation__submenu-container.vm4gws-services__menu {
	height: 0;
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
}

/* Phone menu overlay: Services is a heading with its links listed underneath, always open.
   (Selectors repeat the core classes so they outrank WordPress's own overlay rules.) */
.wp-block-navigation__responsive-container.is-menu-open .vm4gws-services {
	flex-direction: column;
	align-items: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open .vm4gws-services > .vm4gws-services__toggle {
	pointer-events: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child.vm4gws-services > .wp-block-navigation__submenu-container.vm4gws-services__menu {
	position: static;
	display: flex;
	flex-direction: column;
	gap: .9em;
	height: auto;
	width: auto;
	min-width: 0;
	opacity: 1;
	overflow: visible;
	visibility: visible;
	margin: .9em 0 0 .25em;
	padding: .1em 0 .1em 1em;
	background: transparent;
	color: inherit;
	border: 0;
	border-left: 2px solid #00838a;
	border-radius: 0;
	box-shadow: none;
}
.wp-block-navigation__responsive-container.is-menu-open .vm4gws-services > .vm4gws-services__menu::before {
	display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .vm4gws-services > .vm4gws-services__menu > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 0;
	background: none;
	color: inherit;
}