/* ── FixPro Nav ─────────────────────────────────────────────────────────────── */

:root {
	--fp-nav-h:       60px;
	--fp-nav-bg:      #1A56DB;
	--fp-nav-text:    rgba(255, 255, 255, 0.88);
	--fp-nav-hover:   #ffffff;
	--fp-nav-accent:  #F97316;
	--fp-nav-shadow:  0 2px 8px rgba(0, 0, 0, 0.18);
	--fp-nav-radius:  6px;
	--fp-nav-z:       1100;
}

/* ── Push body content below fixed nav ──────────────────────────────────────── */

body.fp-page {
	padding-top: var(--fp-nav-h) !important;
}

/* ── Hide Hello Elementor site header on plugin pages ────────────────────────── */

body.fp-page .site-header,
body.fp-page #masthead {
	display: none !important;
}

/* ── Nav wrapper ─────────────────────────────────────────────────────────────── */

.fp-nav {
	position:   fixed;
	top:        0;
	left:       0;
	right:      0;
	height:     var(--fp-nav-h);
	background: var(--fp-nav-bg);
	box-shadow: var(--fp-nav-shadow);
	z-index:    var(--fp-nav-z);
}

.fp-nav-inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	height:          100%;
	max-width:       1280px;
	margin:          0 auto;
	padding:         0 24px;
	gap:             16px;
}

/* ── Logo ────────────────────────────────────────────────────────────────────── */

.fp-nav-logo {
	flex-shrink:     0;
	font-size:       18px;
	font-weight:     700;
	color:           #ffffff;
	text-decoration: none;
	letter-spacing:  -0.3px;
	line-height:     1;
}

.fp-nav-logo:hover,
.fp-nav-logo:focus {
	color:           #ffffff;
	text-decoration: none;
	opacity:         0.9;
}

/* ── Menu list ───────────────────────────────────────────────────────────────── */

.fp-nav-menu {
	display:     flex;
	align-items: center;
	list-style:  none;
	margin:      0;
	padding:     0;
	gap:         4px;
}

.fp-nav-item a {
	display:         block;
	padding:         6px 13px;
	font-size:       14px;
	font-weight:     500;
	color:           var(--fp-nav-text);
	text-decoration: none;
	border-radius:   var(--fp-nav-radius);
	white-space:     nowrap;
	position:        relative;
	transition:      color 0.15s, background 0.15s;
}

.fp-nav-item a:hover,
.fp-nav-item a:focus {
	color:      var(--fp-nav-hover);
	background: rgba(255, 255, 255, 0.12);
	outline:    none;
}

/* Active link */
.fp-nav-current a,
.fp-nav-item.fp-nav-current > a {
	color: #ffffff;
}

.fp-nav-current a::after {
	content:          '';
	display:          block;
	position:         absolute;
	bottom:           -2px;
	left:             13px;
	right:            13px;
	height:           2px;
	border-radius:    2px;
	background:       var(--fp-nav-accent);
}

/* ── Unread badge ────────────────────────────────────────────────────────────── */

.fp-nav-badge {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	min-width:        18px;
	height:           18px;
	padding:          0 5px;
	margin-left:      5px;
	font-size:        11px;
	font-weight:      700;
	line-height:      1;
	color:            #ffffff;
	background:       #EF4444;
	border-radius:    9px;
	vertical-align:   middle;
}

/* ── Log In button style ─────────────────────────────────────────────────────── */

.fp-nav-btn a {
	background:  var(--fp-nav-accent) !important;
	color:       #ffffff !important;
	font-weight: 600 !important;
}

.fp-nav-btn a:hover,
.fp-nav-btn a:focus {
	background: #ea6c0a !important;
}

/* ── Log Out link ────────────────────────────────────────────────────────────── */

.fp-nav-logout a {
	color:   rgba(255, 255, 255, 0.60) !important;
	padding: 6px 8px;
}

.fp-nav-logout a:hover,
.fp-nav-logout a:focus {
	color:      rgba(255, 255, 255, 0.88) !important;
	background: transparent !important;
}

/* ── Hamburger toggle (hidden on desktop) ────────────────────────────────────── */

.fp-nav-toggle {
	display:    none;
	flex-shrink: 0;
	background: none;
	border:     none;
	cursor:     pointer;
	padding:    8px;
	gap:        5px;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
}

.fp-nav-bar {
	display:       block;
	width:         22px;
	height:        2px;
	border-radius: 2px;
	background:    #ffffff;
	transition:    transform 0.2s, opacity 0.2s;
}

/* ── Mobile breakpoint ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {

	body.fp-page {
		padding-top: var(--fp-nav-h) !important;
	}

	.fp-nav-toggle {
		display: flex;
	}

	/* Animated X when open */
	.fp-nav-toggle[aria-expanded="true"] .fp-nav-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.fp-nav-toggle[aria-expanded="true"] .fp-nav-bar:nth-child(2) {
		opacity: 0;
	}
	.fp-nav-toggle[aria-expanded="true"] .fp-nav-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.fp-nav-menu {
		display:        none;
		position:       fixed;
		top:            var(--fp-nav-h);
		left:           0;
		right:          0;
		flex-direction: column;
		align-items:    stretch;
		gap:            0;
		background:     #1246b3;
		box-shadow:     var(--fp-nav-shadow);
		padding:        8px 16px 16px;
		max-height:     calc(100vh - var(--fp-nav-h));
		overflow-y:     auto;
	}

	.fp-nav-menu.fp-nav-open {
		display: flex;
	}

	.fp-nav-item a {
		padding:       12px 16px;
		border-radius: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.fp-nav-current a::after {
		display: none;
	}

	.fp-nav-current a {
		border-left: 3px solid var(--fp-nav-accent);
		padding-left: 13px;
	}

	.fp-nav-btn a {
		margin-top:    8px;
		border-radius: var(--fp-nav-radius) !important;
		text-align:    center;
	}

	.fp-nav-logout a {
		border-bottom: none !important;
	}
}