/**
 * TechRoyal Adaptive Desktop Header — Version 3.0 (Final Stable Release)
 * Desktop-only header layer (≥1025px), matching the same black/gold
 * premium design language as the mobile nav bar (mobile-navbar.css —
 * untouched). Order: Menu → Logo → Search → Dark Mode → Cart. No
 * Account, no Wishlist, no second logo.
 *
 * UPDATE 3.0 (Final Stable Release):
 * - Fixes the white bar that appeared above the homepage banner: the
 *   theme's own header (.site-header / .ast-primary-header-bar) is
 *   now force-hidden on desktop — this plugin's header fully
 *   replaces it, so no leftover/collapsed header box remains to push
 *   the banner down. Stray top offsets left behind by the theme,
 *   Elementor, or the Owl Carousel wrapper on the banner containers
 *   are reset to 0. `transform` on `.owl-stage`/`.owl-item` is
 *   deliberately left untouched — Owl Carousel uses it to position
 *   slides, and clearing it would break the slider.
 * - The reserved space above the page content (body padding-top) is
 *   no longer a fixed guess: assets/js/desktop-header.js now measures
 *   the header's real rendered height after load and keeps it in
 *   sync, so the Customizer preview and the live site always match,
 *   and the banner repositions automatically if the header's real
 *   height ever changes.
 * - When logged in with the WordPress admin bar visible
 *   (body.admin-bar), the header now sits at top:32px instead of
 *   top:0 so it never covers the admin toolbar.
 * - No visual/behavioral change to the scroll-shrink animation, the
 *   glass/blur background, icons, search, menu, cart, or dark mode.
 *
 * UPDATE 2.0: the header is no longer a floating rounded box. It is
 * now a full-width (100%) bar flush with the top of the page — no
 * border-radius, no side margins, no gap above or below it — so it
 * reads as part of the site rather than an overlay. Height is 78px
 * on load and shrinks to 58px on scroll, with a single soft
 * `all .30s ease` transition. Background is rgba(12,12,12,.94) with
 * a 14px backdrop blur, and the only border is a hairline gold
 * bottom border (1px solid rgba(212,175,55,.18)) — no border on the
 * other three sides and no drop shadow.
 *
 * This is an additive layer only: it never replaces the theme
 * header, and it is hidden below 1025px so the existing mobile bar
 * (≤768px) is completely unaffected.
 */

:root {
	--trsc-dnav-height: 78px;
	--trsc-dnav-height-scrolled: 58px;
	--trsc-dnav-logo-size: 52px;
	--trsc-dnav-search-width: 520px;
	--trsc-dnav-btn-size: 48px;
}

.trsc-dnav {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: var(--trsc-dnav-height);
	z-index: 999990;
	box-sizing: border-box;
	margin: 0;
	padding: 0 32px;
	border-radius: 0;
	background: rgba(12, 12, 12, 0.94);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: none;
	border-bottom: 1px solid rgba(212, 175, 55, 0.18);
	direction: rtl;
	transition: all 0.30s ease;
	will-change: height, background;
}

.trsc-dnav * {
	box-sizing: border-box;
}

@media (min-width: 1025px) {
	.trsc-dnav {
		display: block;
	}

	/* Initial fallback only (prevents a flash before JS runs) — the
	   real value is measured from the header's actual rendered
	   height and kept in sync by assets/js/desktop-header.js, so it
	   never drifts from what's really on screen (Customizer vs. live
	   site, or if the header's height ever changes). */
	body.trsc-dnav-active {
		margin-top: 0;
		padding-top: var(--trsc-dnav-height);
	}

	/* Logged-in admin bar (32px on desktop widths) — the header
	   drops below it instead of covering it. */
	body.admin-bar .trsc-dnav {
		top: 32px;
	}
}

/* ---------- Fix: white gap above the homepage banner ----------
   This plugin's header fully replaces the theme's own header on
   desktop, so the theme header must not remain in the layout (even
   collapsed/invisible, it can leave behind margin/padding that shows
   as a white bar). Only margin/padding/position offsets are reset
   here — `transform` on the Owl Carousel elements is deliberately
   left alone since the slider depends on it to position slides. */
@media (min-width: 1025px) {
	.site-header,
	.ast-primary-header-bar {
		display: none !important;
	}

	.ast-container,
	.elementor-section:first-of-type,
	.sina-banner-slider,
	.owl-stage-outer {
		margin-top: 0 !important;
		padding-top: 0 !important;
		top: auto !important;
	}

	/* Owl Carousel internals: reset only spacing, never transform. */
	.owl-stage,
	.owl-item {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
}

.trsc-dnav-inner {
	height: 100%;
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* ---------- LEFT: menu + logo (logo appears once, only here) ---------- */
.trsc-dnav-left {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 18px;
}

.trsc-dnav-menu {
	background: none;
	border: none;
	padding: 0;
	color: #d4af37;
	font-size: 24px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.30s ease;
}

.trsc-dnav-menu:hover {
	transform: scale(1.03);
	filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.55));
}

.trsc-dnav-logo {
	flex: 0 0 auto;
	width: var(--trsc-dnav-logo-size);
	height: var(--trsc-dnav-logo-size);
	border-radius: 50%;
	background: #000000;
	border: 2px solid #d4af37;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: all 0.30s ease;
}

.trsc-dnav-logo:hover {
	transform: scale(1.03);
	box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.trsc-dnav-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.trsc-dnav-logo-fallback {
	color: #d4af37;
	font-weight: 700;
	font-size: 18px;
}

/* ---------- CENTER: search ---------- */
.trsc-dnav-center {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.trsc-dnav-search {
	width: 100%;
	max-width: var(--trsc-dnav-search-width);
	height: 44px;
	display: flex;
	align-items: center;
	background: #1b1b1b;
	border: 1px solid rgba(255, 215, 0, 0.15);
	border-radius: 999px;
	padding: 0 18px;
	transition: all 0.30s ease;
}

.trsc-dnav-search:focus-within {
	border-color: rgba(212, 175, 55, 0.6);
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12), 0 0 14px rgba(212, 175, 55, 0.25);
	background: #202020;
}

.trsc-dnav-search-icon {
	color: #d4af37;
	flex: 0 0 auto;
	margin-inline-start: 10px;
	font-size: 16px;
}

.trsc-dnav-search input {
	background: transparent;
	border: none;
	outline: none;
	color: #f2f2f2;
	font-size: 14px;
	width: 100%;
	min-width: 0;
	padding: 0;
}

.trsc-dnav-search input::placeholder {
	color: #9a9a9a;
}

/* ---------- RIGHT: Dark Mode + Cart only ---------- */
.trsc-dnav-right {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
}

.trsc-dnav-dark,
.trsc-dnav-cart {
	width: var(--trsc-dnav-btn-size);
	height: var(--trsc-dnav-btn-size);
	border-radius: 50%;
	background: rgba(212, 175, 55, 0.08);
	border: 1px solid rgba(212, 175, 55, 0.16);
	color: #d4af37;
	font-size: 19px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.30s ease;
}

.trsc-dnav-dark:hover,
.trsc-dnav-cart:hover {
	transform: scale(1.03);
	background: rgba(212, 175, 55, 0.16);
	box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

.trsc-dnav-cart-count {
	position: absolute;
	top: -4px;
	inset-inline-end: -4px;
	background: #d4af37;
	color: #000;
	font-size: 10px;
	font-weight: 700;
	min-width: 17px;
	height: 17px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
	border: 2px solid rgba(12, 12, 12, 0.94);
}

.trsc-dnav-cart-count[data-count="0"] {
	display: none;
}

/* ---------- Sticky / scrolled state: 78px -> 58px ---------- */
.trsc-dnav.trsc-dnav-scrolled {
	height: var(--trsc-dnav-height-scrolled);
	background: rgba(10, 10, 10, 0.97);
}

.trsc-dnav.trsc-dnav-scrolled .trsc-dnav-logo {
	width: calc(var(--trsc-dnav-logo-size) - 10px);
	height: calc(var(--trsc-dnav-logo-size) - 10px);
}

.trsc-dnav.trsc-dnav-scrolled .trsc-dnav-search {
	height: 38px;
}

.trsc-dnav.trsc-dnav-scrolled .trsc-dnav-dark,
.trsc-dnav.trsc-dnav-scrolled .trsc-dnav-cart {
	width: calc(var(--trsc-dnav-btn-size) - 6px);
	height: calc(var(--trsc-dnav-btn-size) - 6px);
	font-size: 17px;
}

/* ---------- Adaptive tiers within the ≥1025px desktop range ---------- */

/* Large Desktop — everything at full size, one line, no wrapping */
@media (min-width: 1400px) {
	.trsc-dnav {
		--trsc-dnav-logo-size: 52px;
		--trsc-dnav-search-width: 520px;
		--trsc-dnav-btn-size: 48px;
	}
}

/* Laptop — search bar and icons shrink slightly */
@media (min-width: 1200px) and (max-width: 1399px) {
	.trsc-dnav {
		--trsc-dnav-logo-size: 46px;
		--trsc-dnav-search-width: 420px;
		--trsc-dnav-btn-size: 44px;
	}

	.trsc-dnav-right {
		gap: 12px;
	}
}

/* Tablet Landscape — logo scales down, search compact, buttons 40px, no overflow */
@media (min-width: 1025px) and (max-width: 1199px) {
	.trsc-dnav {
		--trsc-dnav-logo-size: 40px;
		--trsc-dnav-search-width: 300px;
		--trsc-dnav-btn-size: 40px;
		padding-inline: 20px;
	}

	.trsc-dnav-left {
		gap: 12px;
	}

	.trsc-dnav-right {
		gap: 10px;
	}

	.trsc-dnav-dark,
	.trsc-dnav-cart {
		font-size: 17px;
	}
}

/* Reduced motion preference — keep transitions minimal */
@media (prefers-reduced-motion: reduce) {
	.trsc-dnav,
	.trsc-dnav-logo,
	.trsc-dnav-search,
	.trsc-dnav-dark,
	.trsc-dnav-cart,
	.trsc-dnav-menu {
		transition: none;
	}
}