/* ============================================================
   AMIR SUITE — Desktop Nav Bar v2 (Two-Row)
   ============================================================ */

@property --nd-border-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}
@keyframes nd-spin { to { --nd-border-angle: 360deg; } }

/* ── Gradient border wrapper ── */
.as-nd-grad-wrap {
	--nd-bc1: #4ee08a;
	--nd-bc2: #60a5fa;
	--nd-bc3: transparent;
	display: block;
	width: 100%;
	background: conic-gradient(from var(--nd-border-angle), var(--nd-bc1), var(--nd-bc2), var(--nd-bc1));
	border-radius: inherit;
}

.as-nd-grad-wrap.has-c3 {
	background: conic-gradient(from var(--nd-border-angle), var(--nd-bc1), var(--nd-bc2), var(--nd-bc3), var(--nd-bc1));
}

.as-nd-grad-ring {
	position: absolute;
	inset: -3px;
	border-radius: inherit;
	background: inherit;
	filter: blur(10px);
	opacity: 0.4;
	z-index: -1;
}

.as-nd-grad-ring.is-spinning { animation: nd-spin 5s linear infinite; }

/* ── Bar (outer container) ── */
.as-nd-bar {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}

.as-nd-bar.bg-glass {
	backdrop-filter: blur(16px) saturate(1.6);
	-webkit-backdrop-filter: blur(16px) saturate(1.6);
	background-color: rgba(13,17,23,0.72) !important;
}

.as-nd-bar.bg-transparent { background-color: transparent !important; }

.as-nd-bar.is-sticky {
	position: sticky;
	top: 0;
	z-index: 9999;
}

.as-nd-bar.is-sticky.is-hidden { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.as-nd-bar.is-scrolled { box-shadow: 0 6px 32px rgba(0,0,0,.5); }

/* ── Row 1: Top Bar ── */
.as-nd-row1 {
	width: 100%;
	min-height: 40px;
	background-color: rgba(0,0,0,.3);
	border-bottom: 1px solid rgba(255,255,255,.08);
	display: flex;
	align-items: stretch;
}

.as-nd-row1-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 24px;
	min-height: inherit;
	gap: 16px;
	font-size: 13px;
	color: rgba(240,246,252,.7);
}

.as-nd-row1-right { display: flex; align-items: center; gap: 12px; }
.as-nd-row1-left  { display: flex; align-items: center; gap: 12px; }

/* RTL flips */
.as-nd-bar[dir="rtl"] .as-nd-row1-inner { flex-direction: row; }
.as-nd-bar[dir="ltr"] .as-nd-row1-inner { flex-direction: row-reverse; }

/* ── Row 2: Main Nav ── */
.as-nd-row2 {
	width: 100%;
	min-height: 70px;
	display: flex;
	align-items: stretch;
}

.as-nd-row2-inner {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0 24px;
	gap: 20px;
	min-height: inherit;
}

.as-nd-bar[dir="rtl"] .as-nd-row2-inner { flex-direction: row; }
.as-nd-bar[dir="ltr"] .as-nd-row2-inner { flex-direction: row-reverse; }

/* Logo */
.as-nd-logo-wrap { flex-shrink: 0; }

.as-nd-logo {
	font-size: 22px;
	font-weight: 700;
	color: #f0f6fc;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .2s;
}
.as-nd-logo:hover { opacity: .8; }

/* Nav content slot */
.as-nd-nav-content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}

/* Editor hints */
.as-nd-edit-hint {
	width: 100%;
	text-align: center;
	font-size: 13px;
	color: rgba(78,224,138,.7);
	padding: 8px 12px;
	border: 1px dashed rgba(78,224,138,.3);
	border-radius: 6px;
}

.as-nd-edit-hint-sm {
	font-size: 11px;
	color: rgba(240,246,252,.3);
	font-style: italic;
}

/* Scrolled state */
.as-nd-bar.is-scrolled .as-nd-row1 { opacity: .85; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.as-nd-grad-ring.is-spinning { animation: none; }
	.as-nd-bar { transition: none; }
}