/* IJ header navigation — values taken from Header.tsx:
   top item  px-2.5 xl:px-4 py-2 rounded-lg text-sm font-medium, gap-0.5 xl:gap-1
   chevron   w-4 h-4, rotate-180 when open
   panel     w-72 (288px) mt-1 rounded-xl border border/50 shadow-elevated, inner p-2
   row       flex items-start gap-3 px-4 py-3 rounded-lg
   tile      w-8 h-8 rounded-lg bg-primary/10, icon w-4 h-4 text-primary
   name      text-sm font-medium   subtitle text-xs text-muted-foreground      */

.ij-nav {
	--ij-nav-accent: #a9955b;
	--ij-nav-text: #575757;
	--ij-nav-muted: #737373;
	--ij-nav-line: rgba(224, 224, 224, 0.5);
	--ij-nav-panel: 288px;

	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: nowrap;
	white-space: nowrap;
	font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
}

.ij-nav *,
.ij-nav *::before,
.ij-nav *::after {
	box-sizing: border-box;
}

/* Desktop only. Below 1280 Elementor's nav-menu widget shows the burger.
   Each wrapper is hidden at the element level, not just its inner list, so the
   header's flex row never keeps an empty flex item (and its 16px gap) around.

   The hand-off sits at 1280 rather than the design's 1024 because between those
   widths logo + six nav items + the phone button need ~1110px of a ~1010px row,
   which pushed the phone button off the right edge. */
@media (max-width: 1279px) {
	.ij-nav,
	#primary-nav-desktop {
		display: none !important;
	}
}

@media (min-width: 1280px) {
	#primary-nav,
	#primary-nav .elementor-nav-menu--main {
		display: none !important;
	}
}

/* ------------------------------------------------------------- top level */

.ij-nav .ij-nav__item {
	position: relative;
}

.ij-nav a.ij-nav__link,
.ij-nav button.ij-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 8px 10px;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: rgba(87, 87, 87, 0.8);
	cursor: pointer;
	box-shadow: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* Design uses xl:px-4 from 1280 up; at 1280-1365 that overflows the row by a
   few px against this logo width, so the wider padding starts at 1366. */
@media (min-width: 1366px) {
	.ij-nav {
		gap: 4px;
	}

	.ij-nav a.ij-nav__link,
	.ij-nav button.ij-nav__link {
		padding: 8px 16px;
	}
}

.ij-nav a.ij-nav__link:hover,
.ij-nav button.ij-nav__link:hover {
	color: var(--ij-nav-accent);
	background-color: rgba(169, 149, 91, 0.05);
}

.ij-nav a.ij-nav__link.is-active,
.ij-nav button.ij-nav__link.is-active {
	color: var(--ij-nav-accent);
	background-color: rgba(169, 149, 91, 0.1);
}

.ij-nav .ij-nav__link:focus-visible {
	outline: 2px solid var(--ij-nav-accent);
	outline-offset: 2px;
}

.ij-nav__chev {
	display: inline-flex;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	transition: transform 0.2s ease;
}

.ij-nav__chev svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.ij-nav__item.is-open .ij-nav__chev {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------- panel */

.ij-nav__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	margin-top: 4px;
	width: var(--ij-nav-panel);
	background-color: #fff;
	border: 1px solid var(--ij-nav-line);
	border-radius: 12px;
	box-shadow: 0 8px 30px -8px rgba(59, 51, 43, 0.12);
	overflow: hidden;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ij-nav__panel[hidden] {
	display: block; /* animate instead of hard-hiding; JS manages the attribute */
}

.ij-nav__item.is-open .ij-nav__panel {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.ij-nav__panelinner {
	padding: 8px;
}

/* overview link */
.ij-nav a.ij-nav__overview {
	display: block;
	padding: 12px 16px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--ij-nav-line);
	border-radius: 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	text-decoration: none;
	color: var(--ij-nav-text);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.ij-nav a.ij-nav__overview:hover {
	color: var(--ij-nav-accent);
	background-color: rgba(169, 149, 91, 0.05);
}

.ij-nav a.ij-nav__overview.is-active {
	color: var(--ij-nav-accent);
	background-color: rgba(169, 149, 91, 0.1);
}

/* icon rows */
.ij-nav a.ij-nav__row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--ij-nav-text);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ij-nav a.ij-nav__row:hover {
	background-color: rgba(169, 149, 91, 0.05);
}

.ij-nav a.ij-nav__row.is-active {
	background-color: rgba(169, 149, 91, 0.1);
	color: var(--ij-nav-accent);
}

.ij-nav__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	margin-top: 2px;
	border-radius: 8px;
	background-color: rgba(169, 149, 91, 0.1);
}

.ij-nav__tile svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: var(--ij-nav-accent);
}

.ij-nav__rowtext {
	min-width: 0;
}

.ij-nav__rowname {
	display: block;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: inherit;
	white-space: normal;
}

.ij-nav__rowsub {
	display: block;
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: var(--ij-nav-muted);
	white-space: normal;
}

.ij-nav--empty {
	font-size: 13px;
	color: #999;
}