/* ============================================================
   TJ Mega Menu
   Layout switches via JS classes on .tjmm:
     .is-mobile  -> drawer
     .is-desktop -> horizontal bar + hover mega dropdown
   ============================================================ */

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

.tjmm {
	--tjmm-speed: 400ms;
	--tjmm-active: #000;
	position: relative;
	width: 100%;
}

.tjmm ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tjmm a {
	text-decoration: none;
	color: inherit;
}

/* Hide everything until JS decides the mode (prevents flash) */
.tjmm:not(.is-mobile):not(.is-desktop) .tjmm-drawer,
.tjmm:not(.is-mobile):not(.is-desktop) .tjmm-overlay {
	display: none;
}

/* ---------------- Toggler bar (mobile) ---------------- */
.tjmm-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0.75rem 1rem;
}

.tjmm-toggler {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 12px;
	background: #111;
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.25s ease, filter 0.25s ease;
}
.tjmm-toggler:hover { filter: brightness(1.2); transform: translateY(-1px); }
.tjmm-toggler:active { transform: translateY(0); }
.tjmm-toggler:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------------- Overlay ---------------- */
.tjmm-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--tjmm-speed) ease, visibility var(--tjmm-speed) ease;
	z-index: 99998;
}
.tjmm-overlay.is-open { opacity: 1; visibility: visible; }

/* ---------------- Drawer (mobile) ---------------- */
.tjmm-drawer {
	position: fixed;
	background: #fff;
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.22);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 99999;
	transition: transform var(--tjmm-speed) cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.tjmm-drawer.is-glass {
	background: rgba(255, 255, 255, 0.88);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

/* Full-height side drawers — use dvh so mobile browser chrome
   never leaves a gap at the bottom. Fallback to vh/100%.
   Width is a px value; if it exceeds the screen it caps at 100%. */
.tjmm-drawer.dir-right,
.tjmm-drawer.dir-left {
	top: 0;
	height: 100vh;
	height: 100dvh;
	width: 360px;
	max-width: 100%;
}
.tjmm-drawer.dir-right { right: 0; transform: translateX(105%); }
.tjmm-drawer.dir-left  { left: 0;  transform: translateX(-105%); }

.tjmm-drawer.dir-top {
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-height: 90vh;
	max-height: 90dvh;
	transform: translateY(-105%);
}

.tjmm-drawer.dir-fullscreen {
	inset: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	transform: translateY(-105%);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* When closed, fully hide so it can never cause overflow / be tabbed into.
   Visibility toggles after the slide-out finishes. */
.tjmm.is-mobile .tjmm-drawer {
	visibility: hidden;
	transition: transform var(--tjmm-speed) cubic-bezier(0.22, 1, 0.36, 1),
	            visibility 0s linear var(--tjmm-speed);
}
.tjmm.is-mobile .tjmm-drawer.is-open {
	visibility: visible;
	transform: none;
	transition: transform var(--tjmm-speed) cubic-bezier(0.22, 1, 0.36, 1),
	            visibility 0s linear 0s;
}

/* ---------------- Close button ---------------- */
.tjmm-close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	background: #f2f2f2;
	color: #111;
	font-size: 1.9rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: filter 0.25s ease, transform 0.35s ease;
	z-index: 2;
}
.tjmm-close:hover { filter: brightness(0.94); transform: rotate(90deg); }
.tjmm-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---------------- Nav links (mobile default) ---------------- */
.tjmm-nav > li {
	border-bottom: 1px solid #ececec;
}
.tjmm-drawer.dir-fullscreen .tjmm-nav {
	max-width: 480px;
	width: 100%;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.tjmm-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 1rem 0.25rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: #1a1a1a;
	cursor: pointer;
	transition: color 0.2s ease, padding-left 0.2s ease;
}
.tjmm-link:hover { padding-left: 6px; }

.tjmm-caret {
	font-size: 0.75rem;
	color: #999;
	transition: transform 0.3s ease;
	flex: 0 0 auto;
}
.tjmm-link.is-open .tjmm-caret { transform: rotate(180deg); }

/* Mega content inside drawer = simple accordion panel */
.tjmm-mega {
	display: none;
	padding: 0.25rem 0 1rem;
}

/* ============================================================
   DESKTOP MODE
   ============================================================ */
.tjmm.is-desktop .tjmm-bar,
.tjmm.is-desktop .tjmm-overlay,
.tjmm.is-desktop .tjmm-close {
	display: none !important;
}

.tjmm.is-desktop {
	background: #fff;
	border-bottom: 1px solid #ececec;
}

.tjmm.is-desktop .tjmm-drawer {
	position: static !important;
	transform: none !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	inset: auto !important;
	overflow: visible !important;
	box-shadow: none !important;
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	padding: 0 !important;
}

.tjmm.is-desktop .tjmm-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.tjmm.is-desktop .tjmm-nav > li {
	border-bottom: none;
	position: relative;
}

/* Desktop links: color change on hover + active only. No motion. */
.tjmm.is-desktop .tjmm-link {
	justify-content: center;
	padding: 1.5rem 1.5rem;
	font-size: 0.82rem;
	color: #1a1a1a;
	transition: color 0.2s ease;
}
.tjmm.is-desktop .tjmm-link:hover,
.tjmm.is-desktop .tjmm-nav > li.is-active > .tjmm-link {
	color: var(--tjmm-active, #000);
}
.tjmm.is-desktop .tjmm-caret {
	margin-left: 6px;
	transform: none !important;
}

/* Desktop mega dropdown.
   Default = full width (spans the viewport, centered).
   When .mega-fixed is set on .tjmm, dropdowns use a fixed px width,
   anchored under their parent item. */
.tjmm.is-desktop .tjmm-mega {
	display: block;
	position: absolute;
	top: 100%;
	background: #fff;
	box-shadow: 0 22px 45px rgba(0, 0, 0, 0.13);
	border-top: 1px solid #eee;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
	z-index: 500;
}

/* Full-width dropdown: pinned to viewport edges, full screen width */
.tjmm.is-desktop:not(.mega-fixed) .tjmm-mega {
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
}

/* Fixed-width dropdown: sits under its menu item */
.tjmm.is-desktop.mega-fixed .tjmm-mega {
	left: 0;
	width: var(--tjmm-mega-width, 350px);
	max-width: 90vw;
}

.tjmm.is-desktop .has-mega:hover > .tjmm-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.tjmm-drawer,
	.tjmm-overlay,
	.tjmm-mega,
	.tjmm-link,
	.tjmm-close,
	.tjmm-toggler {
		transition: none !important;
	}
}