/**
 * Tap N Roll — Site-wide header/nav styles.
 *
 * Extracted verbatim from the original page-landing.php inline <style>
 * block (the homepage's standalone header markup/CSS) so every page on
 * the site can share the exact same look — dark header, gold accent
 * active-state, Contact Us dropdown, mobile hamburger nav.
 *
 * Only the CSS variables actually used by the header/nav are duplicated
 * here (a subset of page-landing.php's full :root block) — this file is
 * meant to be enqueued site-wide, independent of page-landing.php, so it
 * must be self-contained and not rely on page-landing.php's own <style>
 * tag being present.
 *
 * NOTE ON --text2: the original page-landing.php nav CSS references
 * var(--text2) for link color, but --text2 is never defined in that
 * file's :root block either. On the homepage this "invalid custom
 * property" quirk happened to look fine, because page-landing.php also
 * force-sets `html, body { color: #e6e7ea !important; }`, so the nav
 * links' invalid var(--text2) fell back to that inherited near-white
 * color. On every OTHER page (which never had that override), the same
 * invalid var(--text2) instead inherited Astra's own default body text
 * color — a dark blue-grey — making the nav nearly unreadable on the
 * black header. Fixed here by defining --text2 explicitly so nav link
 * color is correct everywhere regardless of the page's body color.
 */

:root {
	--ink: #0b0b0e;
	--ink2: #141418;
	--ink3: #1e1e24;
	--line: rgba(255, 255, 255, 0.06);
	--line2: rgba(255, 255, 255, 0.12);
	--line3: rgba(255, 255, 255, 0.28);
	--text: #eae8e2;
	--text2: #eae8e2; /* matches --text for pixel parity with the homepage's existing (accidental) fallback behavior */
	--muted: #78766f;
	--dim: #3e3c38;
	--gold: #e8a020;
	--gold2: #f5c352;
	--gold-dim: rgba(232, 160, 32, 0.12);
	--blue: #3a78c9;
	--green: #3e8c52;
}

/* ── Sticky nav (shared header — matches homepage) ── */
.tnr-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(11, 11, 14, 0.96);
	border-bottom: 1px solid var(--line2);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.tnr-header__inner {
	max-width: 1340px;
	margin: 0 auto;
	padding: 0 24px;
	height: 64px;
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.tnr-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	flex-shrink: 0;
}
.tnr-logo img {
	height: 52px;
	width: auto;
	filter: drop-shadow(0 0 10px rgba(232, 160, 32, 0.2));
}
.tnr-logo__name {
	font-family: "Bebas Neue", sans-serif;
	font-size: 22px;
	letter-spacing: 0.04em;
	color: var(--text);
	line-height: 1;
}
.tnr-logo__sub {
	font-family: "DM Mono", monospace;
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
	display: block;
	margin-top: 2px;
}
.tnr-nav {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: auto;
}
.tnr-nav a {
	font-family: "DM Sans", sans-serif;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text2);
	text-decoration: none;
	padding: 6px 12px;
	border-radius: 6px;
	transition: color 0.15s, background 0.15s;
	white-space: nowrap;
}
.tnr-nav a:hover {
	color: var(--text);
	background: rgba(255, 255, 255, 0.05);
}
.tnr-nav a.active {
	color: var(--gold);
	border-bottom: 2px solid var(--gold);
}
.tnr-nav .nav-home-btn {
	background: rgba(232, 160, 32, 0.1);
	border: 1px solid rgba(232, 160, 32, 0.25);
	color: var(--gold);
	border-radius: 6px;
}
.tnr-nav .nav-home-btn:hover {
	background: rgba(232, 160, 32, 0.2);
	border-color: rgba(232, 160, 32, 0.5);
	color: var(--gold);
}
.tnr-hamburger {
	display: none;
	background: none;
	border: none;
	color: var(--text);
	cursor: pointer;
	padding: 6px;
	margin-left: auto;
}

/* ── Dropdown sub-menu (Contact Us → Sell / Product Request) ── */
.tnr-nav-item {
	position: relative;
}
.tnr-nav-trigger {
	font-family: "DM Sans", sans-serif;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text2);
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px 12px;
	border-radius: 6px;
	transition: color 0.15s, background 0.15s;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.tnr-nav-trigger:hover,
.tnr-nav-item.is-open > .tnr-nav-trigger {
	color: var(--text);
	background: rgba(255, 255, 255, 0.05);
}
.tnr-nav-trigger .tnr-caret {
	width: 10px;
	height: 10px;
	transition: transform 0.15s ease;
}
.tnr-nav-item.is-open > .tnr-nav-trigger .tnr-caret {
	transform: rotate(180deg);
}
.tnr-submenu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 200px;
	background: rgba(11, 11, 14, 0.98);
	border: 1px solid var(--line2);
	border-radius: 8px;
	padding: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	z-index: 1100;
	flex-direction: column;
	gap: 2px;
}
/* Open on hover (desktop) or via JS class (touch/keyboard) */
.tnr-nav-item:hover > .tnr-submenu,
.tnr-nav-item.is-open > .tnr-submenu {
	display: flex;
}
/* Hover bridge so the submenu doesn't close in the 6px gap */
.tnr-nav-item::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 8px;
}
.tnr-submenu a {
	font-size: 13.5px;
	padding: 8px 12px;
	border-radius: 6px;
	color: var(--text2);
	display: block;
}
.tnr-submenu a:hover {
	background: rgba(232, 160, 32, 0.1);
	color: var(--gold);
}

@media (max-width: 680px) {
	/* The nav lives inside .tnr-header__inner which is a flex row with
	   align-items: center/flex-start. That parent forces the nav's height
	   to match its flex line (one row ≈ 44px). Even with position:fixed,
	   iOS Safari computes the layout height from the flex parent first.
	   Use !important + align-self: stretch + explicit height to defeat it. */
	.tnr-nav {
		display: none !important;
		flex-direction: column !important;
		align-items: stretch !important;
		align-self: stretch !important;
		position: fixed !important;
		top: 64px !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: auto !important;
		min-height: calc(100vh - 64px) !important;
		min-height: calc(100dvh - 64px) !important;
		max-height: none !important;
		margin: 0 !important;
		background: rgba(11, 11, 14, 0.98) !important;
		padding: 1.5rem !important;
		gap: 0.25rem !important;
		z-index: 2000 !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}
	.tnr-nav.open {
		display: flex !important;
	}
	.tnr-nav a {
		width: 100% !important;
		padding: 14px 16px !important;
		font-size: 16px !important;
		flex: 0 0 auto !important;
		display: block !important;
	}
	.tnr-hamburger {
		display: block;
	}

	/* Mobile: submenu becomes an inline expanded list (no floating panel) */
	.tnr-nav-item {
		width: 100% !important;
		position: static !important;
	}
	.tnr-nav-trigger {
		width: 100% !important;
		padding: 14px 16px !important;
		font-size: 16px !important;
		justify-content: space-between !important;
	}
	.tnr-submenu {
		position: static !important;
		display: none !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 0 0 1rem !important;
		min-width: 0 !important;
		border-left: 2px solid var(--line2) !important;
		margin-left: 8px !important;
	}
	.tnr-nav-item.is-open > .tnr-submenu {
		display: flex !important;
	}
	.tnr-submenu a {
		padding: 12px 14px !important;
		font-size: 15px !important;
	}
	.tnr-nav-item::after {
		content: none !important;
	}
}

/* Make sure the sticky header actually renders above Astra's own
   content wrapper and any admin bar. */
.tnr-header {
	position: -webkit-sticky;
}
body.admin-bar .tnr-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .tnr-header {
		top: 46px;
	}
}