/* =====================================================================
   Glassy Navbar - Pars Tadvin
   Deep-navy glass that blends with the site's blue hero, white text,
   and the logo's cyan (#00AAB3 family) used only as light and glow.
   ===================================================================== */
:root {
	/* glass */
	--gn-bg: rgba(4, 22, 44, 0.55);             /* deep navy, see-through */
	--gn-bg-hover: rgba(5, 26, 52, 0.68);
	--gn-solid-bg: rgba(4, 22, 44, 0.96);       /* browsers without blur */
	--gn-dropdown-bg: rgba(5, 22, 42, 0.92);
	--gn-border: rgba(140, 220, 255, 0.14);     /* cool, barely-blue edge */
	--gn-halo: rgba(0, 200, 220, 0.08);

	/* text */
	--gn-text: rgba(236, 244, 255, 0.78);
	--gn-text-hover: #ffffff;
	--gn-active-text: #ffffff;                  /* current page */
	--gn-placeholder: rgba(236, 244, 255, 0.42);

	/* accent (logo cyan) */
	--gn-accent: #2ee6f0;
	--gn-accent-glow: rgba(46, 230, 240, 0.3);

	/* hover + sliding pill */
	--gn-hover-bg: rgba(255, 255, 255, 0.06);
	--gn-pill-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
	--gn-pill-border: rgba(255, 255, 255, 0.12);
	--gn-pill-glow: rgba(46, 230, 240, 0.12);

	/* button */
	--gn-btn-bg: linear-gradient(135deg, #00aab3 0%, #0b7fc4 100%);
	--gn-btn-bg-hover: linear-gradient(135deg, #14c3cc 0%, #1993dc 100%);
	--gn-btn-border: rgba(255, 255, 255, 0.18);
	--gn-btn-text: #ffffff;
	--gn-btn-glow: rgba(0, 170, 200, 0.35);

	/* rotating light */
	--gn-light-color: #00c6d2;
	--gn-light-core: #e6fdff;                   /* bright centre of the beam */
	--gn-light-soft: rgba(0, 170, 179, 0.5);    /* second, softer beam */
	--gn-light-width: 1.5px;                    /* thickness of the light */
	--gn-light-speed: 6s;                       /* one full lap (faster = smaller) */

	/* shape */
	--gn-radius: 15px;
	--gn-blur: 18px;
}

/* =====================================================================
   The glass bar - add the CSS class "glassy-nav" to the header box
   (Elementor: container > Advanced > CSS Classes)
   ===================================================================== */
.glassy-nav,
.main-navigation.glassy-auto {
	position: relative;
	background: var(--gn-bg) !important;
	-webkit-backdrop-filter: blur(var(--gn-blur)) saturate(160%);
	backdrop-filter: blur(var(--gn-blur)) saturate(160%);
	border: 1px solid var(--gn-border) !important;
	border-radius: var(--gn-radius) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),     /* top glass highlight */
		0 10px 30px rgba(0, 10, 25, 0.45),          /* soft drop shadow */
		0 0 22px var(--gn-halo) !important;        /* faint cyan halo */
	color: var(--gn-text);
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

.glassy-nav:hover,
.main-navigation.glassy-auto:hover {
	background: var(--gn-bg-hover) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 14px 40px rgba(0, 10, 25, 0.55),
		0 0 30px var(--gn-accent-glow) !important;
}

/* Layout - only for block themes / classic menus. Elementor keeps its own layout. */
.wp-block-group.glassy-nav,
.main-navigation.glassy-auto {
	max-width: 1000px;
	margin: 16px auto !important;
	padding-block: 8px !important;
	padding-inline: 18px 10px !important;   /* logical: works for RTL sites too */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 13px;
}

/* Block themes: keep the header on screen while scrolling */
.wp-site-blocks > header:has(.glassy-nav) {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* Make sure the wrapper behind the bar is transparent so the blur shows the page */
.wp-site-blocks > header,
.site-header {
	background: transparent !important;
}

/* Logo / site title */
.glassy-nav .wp-block-site-title a,
.glassy-nav .site-title a {
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
	padding: 0 !important;
	background: none !important;
}

/* =====================================================================
   Menu links (block Navigation, classic menus, Elementor menus)
   ===================================================================== */
.glassy-nav .wp-block-navigation-item__content,
.glassy-nav .e-n-menu-title,
.glassy-nav .elementor-item,
.main-navigation.glassy-auto a {
	color: var(--gn-text) !important;
	text-decoration: none !important;
	border-radius: 9px;
	transition: background 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
}

.glassy-nav .wp-block-navigation-item__content,
.main-navigation.glassy-auto a {
	padding: 6px 12px;
}

/* keep each top-level label on one line */
.glassy-nav .wp-block-navigation__container > li > a,
.glassy-nav .e-n-menu-title,
.glassy-nav .elementor-nav-menu > li > a,
.main-navigation.glassy-auto > ul > li > a {
	white-space: nowrap;
}

.glassy-nav .e-n-menu-title a,
.glassy-nav .e-n-menu-title .e-n-menu-title-text {
	color: inherit !important;
}

.glassy-nav .wp-block-navigation-item__content:hover,
.glassy-nav .e-n-menu-title:hover,
.glassy-nav .elementor-item:hover,
.main-navigation.glassy-auto a:hover {
	color: var(--gn-text-hover) !important;
	background: var(--gn-hover-bg);
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

/* Current page */
.glassy-nav .current-menu-item > a,
.glassy-nav [aria-current="page"],
.glassy-nav .e-n-menu-title.e-current,
.glassy-nav .elementor-item-active,
.main-navigation.glassy-auto .current-menu-item > a {
	color: var(--gn-active-text) !important;
}

.glassy-nav .wp-block-navigation__container,
.main-navigation.glassy-auto ul {
	gap: 4px !important;
}

/* Dropdown chevrons */
.glassy-nav .wp-block-navigation__submenu-icon,
.glassy-nav .e-n-menu-dropdown-icon {
	opacity: 0.6;
}

.glassy-nav .wp-block-navigation__submenu-icon {
	width: 10px;
}

/* =====================================================================
   Dropdowns
   ===================================================================== */
.glassy-nav .wp-block-navigation__submenu-container,
.glassy-nav .sub-menu,
.main-navigation.glassy-auto .sub-menu {
	background: var(--gn-dropdown-bg) !important;
	-webkit-backdrop-filter: blur(var(--gn-blur));
	backdrop-filter: blur(var(--gn-blur));
	border: 1px solid var(--gn-border) !important;
	border-radius: 12px;
	padding: 6px !important;
	box-shadow: 0 12px 30px rgba(0, 10, 25, 0.5), 0 0 18px var(--gn-halo);
}

/* =====================================================================
   Buttons (Buttons block, Elementor Button, or menu item with class "gn-button")
   ===================================================================== */
.glassy-nav .wp-block-button__link,
.glassy-nav .elementor-button,
.glassy-nav .gn-button > a {
	background: var(--gn-btn-bg) !important;
	color: var(--gn-btn-text) !important;
	border: 1px solid var(--gn-btn-border) !important;
	border-radius: 10px !important;
	padding: 7px 16px !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 14px var(--gn-btn-glow);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.glassy-nav .wp-block-button__link:hover,
.glassy-nav .elementor-button:hover,
.glassy-nav .gn-button > a:hover {
	background: var(--gn-btn-bg-hover) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 22px var(--gn-btn-glow);
	transform: translateY(-1px);
}

/* =====================================================================
   Mobile overlay menu (block Navigation)
   ===================================================================== */
.glassy-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--gn-dropdown-bg) !important;
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	color: #fff !important;
}

@media (max-width: 600px) {
	.wp-block-group.glassy-nav,
	.main-navigation.glassy-auto {
		margin: 10px 12px !important;
	}
}

/* Fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glassy-nav,
	.main-navigation.glassy-auto {
		background: var(--gn-solid-bg) !important;
	}
}

/* =====================================================================
   Rotating light border
   ===================================================================== */
@property --gn-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@keyframes gn-spin {
	to { --gn-angle: 360deg; }
}

.glassy-nav::before,
.main-navigation.glassy-auto::before {
	content: "";
	position: absolute;
	inset: -1px;                     /* sit on top of the 1px border */
	padding: var(--gn-light-width);
	border-radius: inherit;
	background: conic-gradient(
		from var(--gn-angle),
		transparent 0deg,
		transparent 55deg,
		var(--gn-light-color) 78deg,
		var(--gn-light-core) 90deg,      /* main beam */
		var(--gn-light-color) 102deg,
		transparent 125deg,
		transparent 235deg,
		var(--gn-light-soft) 270deg,     /* softer second beam */
		transparent 305deg
	);
	/* show only the ring, not the middle */
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: gn-spin var(--gn-light-speed) linear infinite;
	pointer-events: none;
	z-index: 2;
}

/* Bar hover: the light spins faster */
.glassy-nav:hover::before,
.main-navigation.glassy-auto:hover::before {
	animation-duration: 2.5s;
}

/* =====================================================================
   Sliding hover pill (added by glassy-navbar.js)
   ===================================================================== */
.gn-indicator {
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	width: 0;
	border-radius: 9px;
	background: var(--gn-pill-bg);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 0 0 1px var(--gn-pill-border),
		0 0 14px var(--gn-pill-glow);
	opacity: 0;
	pointer-events: none;
	z-index: 0;
	transition:
		left 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		top 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.25s ease;
}

/* cyan light line under the pill */
.gn-indicator::after {
	content: "";
	position: absolute;
	left: 20%;
	right: 20%;
	bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--gn-light-core), transparent);
	box-shadow: 0 0 8px var(--gn-accent);
}

/* while the pill is active, top-level links sit above it and don't paint their own background */
.gn-has-indicator > li > a,
.gn-has-indicator > li > .e-n-menu-title {
	position: relative;
	z-index: 1;
	background: transparent !important;
}

/* =====================================================================
   Search button that expands into a field  ([glassy_search] shortcode)
   ===================================================================== */
.gn-search {
	position: relative;
	display: flex;
	align-items: center;
	align-self: center;          /* don't stretch to the full height of a flex header */
	flex-shrink: 0;
	margin: 0;
	z-index: 3;
}

/* The field slides out over the menu, so the menu never gets squeezed */
.gn-search input {
	position: absolute;
	top: 50%;
	inset-inline-end: calc(100% + 4px);   /* opens towards the menu - works for RTL and LTR */
	transform: translateY(-50%);
	height: 34px;
	width: 0;
	padding: 0;
	opacity: 0;
	border: 1px solid transparent;
	border-radius: 10px;
	outline: 0;
	background: var(--gn-dropdown-bg);
	-webkit-backdrop-filter: blur(var(--gn-blur));
	backdrop-filter: blur(var(--gn-blur));
	color: #fff;
	font: inherit;
	font-size: 13px;
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), padding 0.35s ease, opacity 0.25s ease;
}

.gn-search input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.gn-search input::placeholder {
	color: var(--gn-placeholder);
}

.gn-search-toggle {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--gn-text);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.gn-search-toggle:hover {
	background: var(--gn-hover-bg);
	color: var(--gn-accent);
}

.gn-search.is-open input {
	width: 220px;
	padding: 0 12px;
	opacity: 1;
	border-color: rgba(46, 230, 240, 0.35);
	box-shadow: 0 0 16px var(--gn-accent-glow), 0 8px 24px rgba(0, 10, 25, 0.4);
}

.gn-search.is-open .gn-search-toggle {
	color: var(--gn-accent);
}

@media (max-width: 600px) {
	.gn-search.is-open input { width: 170px; }
}

/* Respect users who turn off animations */
@media (prefers-reduced-motion: reduce) {
	.glassy-nav::before,
	.main-navigation.glassy-auto::before { animation: none; }
	.gn-indicator,
	.gn-search input { transition: none; }
}