/**
 * PowerSynch Menu — pill-shaped navigation bar.
 *
 * Every colour / size is a CSS custom property so the Elementor widget's
 * Style controls can override a single instance without touching this file.
 */

.psad-menu {
	--psad-menu-bg:            #111b2e;
	--psad-menu-radius:        999px;
	--psad-menu-padding:       6px;
	--psad-menu-gap:           4px;

	--psad-menu-link-color:        rgba( 255, 255, 255, 0.82 );
	--psad-menu-link-hover-color:  #ffffff;
	--psad-menu-link-size:         15px;
	--psad-menu-link-weight:       500;
	--psad-menu-link-padding:      10px 22px;
	--psad-menu-link-radius:       999px;

	--psad-menu-active-bg:      #33415a;
	--psad-menu-active-color:   #ffffff;
	--psad-menu-hover-bg:       rgba( 255, 255, 255, 0.08 );

	display: flex;
	justify-content: center;
}

.psad-menu__nav {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
}

.psad-menu__list {
	list-style: none;
	margin: 0;
	padding: var(--psad-menu-padding);
	display: flex;
	align-items: center;
	gap: var(--psad-menu-gap);
	background: var(--psad-menu-bg);
	border-radius: var(--psad-menu-radius);
}

.psad-menu__list li {
	margin: 0;
	padding: 0;
}

.psad-menu__list a {
	display: block;
	padding: var(--psad-menu-link-padding);
	border-radius: var(--psad-menu-link-radius);
	color: var(--psad-menu-link-color);
	font-size: var(--psad-menu-link-size);
	font-weight: var(--psad-menu-link-weight);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.psad-menu__list a:hover,
.psad-menu__list a:focus-visible {
	color: var(--psad-menu-link-hover-color);
	background: var(--psad-menu-hover-bg);
}

/* WordPress marks the page being viewed with these classes automatically. */
.psad-menu__list .current-menu-item > a,
.psad-menu__list .current_page_item > a,
.psad-menu__list .current-menu-ancestor > a,
.psad-menu__list .psad-menu__item--active > a {
	background: var(--psad-menu-active-bg);
	color: var(--psad-menu-active-color);
}

/* ---------- Sub-menus ---------- */
.psad-menu__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 6px;
	position: absolute;
	top: calc( 100% + 8px );
	left: 0;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--psad-menu-bg);
	border-radius: 16px;
	opacity: 0;
	visibility: hidden;
	transform: translateY( -6px );
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 20;
}

.psad-menu__list .menu-item-has-children {
	position: relative;
}

.psad-menu__list .menu-item-has-children:hover > .sub-menu,
.psad-menu__list .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

.psad-menu__list .sub-menu a {
	white-space: normal;
}

/* ---------- Alignment ---------- */
.psad-menu--align-left   { justify-content: flex-start; }
.psad-menu--align-center { justify-content: center; }
.psad-menu--align-right  { justify-content: flex-end; }

/* ---------- Mobile toggle ---------- */
.psad-menu__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--psad-menu-radius);
	background: var(--psad-menu-bg);
	color: #ffffff;
	font-size: var(--psad-menu-link-size);
	font-weight: var(--psad-menu-link-weight);
	cursor: pointer;
}

.psad-menu__toggle-bars {
	position: relative;
	width: 18px;
	height: 2px;
	background: currentColor;
	display: inline-block;
}

.psad-menu__toggle-bars::before,
.psad-menu__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.psad-menu__toggle-bars::before { top: -6px; }
.psad-menu__toggle-bars::after  { top: 6px; }

/*
 * Instances that pass mobile="yes" (data-mobile="on") collapse to a
 * hamburger button below 1024px. Above it, the full pill bar shows.
 */
@media ( max-width: 1024px ) {
	.psad-menu[data-mobile="on"] {
		flex-direction: column;
		align-items: stretch;
	}

	.psad-menu[data-mobile="on"] .psad-menu__toggle {
		display: inline-flex;
		align-self: center;
	}

	.psad-menu[data-mobile="on"] .psad-menu__nav {
		display: none;
		width: 100%;
		margin-top: 10px;
	}

	.psad-menu[data-mobile="on"].is-open .psad-menu__nav {
		display: flex;
	}

	.psad-menu[data-mobile="on"] .psad-menu__list {
		flex-direction: column;
		align-items: stretch;
		border-radius: 20px;
		width: 100%;
	}

	.psad-menu[data-mobile="on"] .psad-menu__list a {
		text-align: center;
	}

	.psad-menu[data-mobile="on"] .psad-menu__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: rgba( 255, 255, 255, 0.04 );
		margin-top: 2px;
	}
}