/* ==========================================================================
   LAYOUT — announcement bar, header, nav, mobile drawer, footer
   ========================================================================== */

/* ---- Announcement bar ---------------------------------------------------
   Infinite marquee. The track holds N identical copies of the message laid
   out in a row; the animation slides it left by exactly 1/N of its own width,
   which lands the second copy precisely where the first started. Because the
   copies are identical the reset is invisible, so the scroll reads as endless
   with no JS and no measuring.                                            */

.nx-announce {
	position: relative;
	z-index: var(--nx-z-header);
	background: var(--nx-navy-900);
	color: var(--nx-white);
	font-size: var(--nx-text-xs);
	letter-spacing: var(--nx-tracking-wide);

	/* Marquee tuning. Duration is per full cycle of one copy. */
	--nx-marquee-duration: 34s;
	--nx-marquee-copies: 4;
}

.nx-announce__viewport {
	overflow: hidden;
	min-height: 38px;
	display: flex;
	align-items: center;

	/* Fade the message in and out at the edges rather than clipping it hard. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
}

.nx-announce__track {
	display: flex;
	flex: none;
	align-items: center;
	width: max-content;
	will-change: transform;
	animation: nx-marquee var(--nx-marquee-duration) linear infinite;
}

/* Pause on hover so the notice can actually be read. */
.nx-announce:hover .nx-announce__track,
.nx-announce:focus-within .nx-announce__track { animation-play-state: paused; }

.nx-announce__item {
	flex: none;
	padding-inline: var(--nx-space-6);
	white-space: nowrap;
}

/* Separator dot between repeats. */
.nx-announce__item::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 4px;
	height: 4px;
	margin-left: calc(var(--nx-space-6) * 2);
	border-radius: 50%;
	background: var(--nx-cyan);
}

.nx-announce__item strong { color: var(--nx-white); font-weight: var(--nx-weight-bold); }
.nx-announce p { margin: 0; display: inline; }
.nx-announce a { color: var(--nx-cyan); }

@keyframes nx-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-100% / var(--nx-marquee-copies)), 0, 0); }
}

/* Respect a reduced-motion preference: hold the message still and centre it. */
@media (prefers-reduced-motion: reduce) {
	.nx-announce__track {
		animation: none;
		width: 100%;
		justify-content: center;
	}
	.nx-announce__item { white-space: normal; text-align: center; }
	.nx-announce__item:not(:first-child) { display: none; }
	.nx-announce__item::after { display: none; }
	.nx-announce__viewport { -webkit-mask-image: none; mask-image: none; padding-block: var(--nx-space-2); }
}

/* ---- Header -------------------------------------------------------------- */

.nx-header {
	position: sticky;
	top: 0;
	z-index: var(--nx-z-header);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid transparent;
	transition:
		border-color var(--nx-dur) var(--nx-ease),
		box-shadow var(--nx-dur) var(--nx-ease);
}

/* JS toggles this once the page scrolls past ~20px */
.nx-header.is-stuck {
	border-bottom-color: var(--nx-border);
	box-shadow: var(--nx-shadow-sm);
}

.nx-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nx-space-5);
	min-height: 72px;
}

/* ---- Brand --------------------------------------------------------------- */

.nx-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--nx-space-3);
	flex-shrink: 0;
	text-decoration: none;
}

.nx-brand__text {
	font-size: var(--nx-text-xl);
	font-weight: var(--nx-weight-bold);
	letter-spacing: 0.06em;
	color: var(--nx-primary);
	text-transform: uppercase;
	line-height: 1;
}

.nx-brand__tagline {
	display: block;
	margin-top: 3px;
	font-size: 0.6875rem;
	font-weight: var(--nx-weight-normal);
	letter-spacing: var(--nx-tracking-wide);
	text-transform: none;
	color: var(--nx-text-subtle);
}

.nx-brand img { max-height: 44px; width: auto; }

/* ---- Desktop nav --------------------------------------------------------- */

.nx-nav { display: none; }

@media (min-width: 1024px) {
	.nx-nav { display: block; margin-left: auto; }
}

.nx-nav__list {
	display: flex;
	align-items: center;
	gap: var(--nx-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nx-nav__list li { margin: 0; }

.nx-nav__list a {
	position: relative;
	display: inline-block;
	padding: var(--nx-space-2) 0;
	color: var(--nx-text-muted);
	font-size: var(--nx-text-sm);
	font-weight: var(--nx-weight-medium);
	text-decoration: none;
	transition: color var(--nx-dur-fast) var(--nx-ease);
}

.nx-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--nx-action);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--nx-dur) var(--nx-ease);
}

.nx-nav__list a:hover,
.nx-nav__list .current-menu-item > a {
	color: var(--nx-primary);
}

.nx-nav__list a:hover::after,
.nx-nav__list .current-menu-item > a::after { transform: scaleX(1); }

/* Submenus */
.nx-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: var(--nx-space-2);
	background: var(--nx-surface);
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius);
	box-shadow: var(--nx-shadow);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity var(--nx-dur) var(--nx-ease),
		transform var(--nx-dur) var(--nx-ease),
		visibility var(--nx-dur);
}

.nx-nav__list li { position: relative; }

.nx-nav__list li:hover > .sub-menu,
.nx-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.nx-nav__list .sub-menu a {
	display: block;
	padding: var(--nx-space-3);
	border-radius: var(--nx-radius-sm);
}

.nx-nav__list .sub-menu a::after { display: none; }
.nx-nav__list .sub-menu a:hover { background: var(--nx-surface-alt); }

/* ---- Header actions ------------------------------------------------------ */

.nx-header__actions {
	display: flex;
	align-items: center;
	gap: var(--nx-space-3);
}

.nx-header__cta { display: none; }

@media (min-width: 1024px) {
	.nx-header__cta { display: inline-flex; }
}

/* Cart link */
.nx-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--nx-radius);
	color: var(--nx-primary);
	text-decoration: none;
	transition: background-color var(--nx-dur-fast) var(--nx-ease);
}

.nx-cart-link:hover { background: var(--nx-surface-alt); }
.nx-cart-link svg { width: 22px; height: 22px; }

.nx-cart-link__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--nx-radius-full);
	background: var(--nx-action);
	color: var(--nx-white);
	font-size: 0.625rem;
	font-weight: var(--nx-weight-bold);
	line-height: 18px;
	text-align: center;
}

/* ---- Burger -------------------------------------------------------------- */

.nx-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--nx-radius);
	color: var(--nx-primary);
	cursor: pointer;
}

@media (min-width: 1024px) {
	.nx-burger { display: none; }
}

.nx-burger__box {
	position: relative;
	width: 22px;
	height: 16px;
}

.nx-burger__bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--nx-dur) var(--nx-ease), opacity var(--nx-dur-fast) var(--nx-ease);
}

.nx-burger__bar:nth-child(1) { top: 0; }
.nx-burger__bar:nth-child(2) { top: 7px; }
.nx-burger__bar:nth-child(3) { top: 14px; }

.nx-burger[aria-expanded="true"] .nx-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nx-burger[aria-expanded="true"] .nx-burger__bar:nth-child(2) { opacity: 0; }
.nx-burger[aria-expanded="true"] .nx-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile drawer ------------------------------------------------------- */

.nx-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: var(--nx-z-drawer);
	width: min(400px, 88vw);
	padding: var(--nx-space-6) var(--nx-space-5) var(--nx-space-8);
	background: var(--nx-surface);
	box-shadow: var(--nx-shadow-lg);
	transform: translateX(100%);
	visibility: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	transition:
		transform var(--nx-dur) var(--nx-ease-out),
		visibility var(--nx-dur);
}

.nx-drawer.is-open { transform: none; visibility: visible; }

@media (min-width: 1024px) {
	.nx-drawer, .nx-drawer-overlay { display: none; }
}

.nx-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--nx-space-6);
	padding-bottom: var(--nx-space-4);
	border-bottom: 1px solid var(--nx-border);
}

.nx-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	border-radius: var(--nx-radius);
	color: var(--nx-primary);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.nx-drawer__close:hover { background: var(--nx-surface-alt); }

.nx-drawer__list {
	margin: 0 0 var(--nx-space-6);
	padding: 0;
	list-style: none;
}

.nx-drawer__list li { margin: 0; }

.nx-drawer__list a {
	display: block;
	padding: var(--nx-space-4) 0;
	border-bottom: 1px solid var(--nx-border);
	color: var(--nx-primary);
	font-size: var(--nx-text-lg);
	font-weight: var(--nx-weight-medium);
	text-decoration: none;
	transition: color var(--nx-dur-fast) var(--nx-ease), padding-left var(--nx-dur-fast) var(--nx-ease);
}

.nx-drawer__list a:hover {
	color: var(--nx-action);
	padding-left: var(--nx-space-2);
}

.nx-drawer__list .sub-menu {
	margin: 0;
	padding: 0 0 0 var(--nx-space-4);
	list-style: none;
}

.nx-drawer__list .sub-menu a {
	font-size: var(--nx-text-base);
	color: var(--nx-text-muted);
}

.nx-drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--nx-z-overlay);
	background: rgba(6, 24, 47, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--nx-dur) var(--nx-ease), visibility var(--nx-dur);
}

.nx-drawer-overlay.is-open { opacity: 1; visibility: visible; }

body.nx-drawer-open { overflow: hidden; }

/* ---- Footer -------------------------------------------------------------- */

.nx-footer {
	background: var(--nx-navy-900);
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--nx-text-sm);
}

.nx-footer__main {
	display: grid;
	gap: var(--nx-space-8);
	padding-block: var(--nx-space-9);
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.nx-footer__main { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.nx-footer__main { grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--nx-space-7); }
}

.nx-footer__brand .nx-brand__text { color: var(--nx-white); }

.nx-footer__blurb {
	margin-top: var(--nx-space-4);
	max-width: 42ch;
	color: rgba(255, 255, 255, 0.66);
	line-height: var(--nx-leading-loose);
}

.nx-footer__col-title {
	margin-bottom: var(--nx-space-4);
	color: var(--nx-white);
	font-size: var(--nx-text-xs);
	font-weight: var(--nx-weight-semibold);
	letter-spacing: var(--nx-tracking-caps);
	text-transform: uppercase;
}

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

.nx-footer li { margin: 0 0 var(--nx-space-3); }

.nx-footer a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color var(--nx-dur-fast) var(--nx-ease);
}

.nx-footer a:hover { color: var(--nx-cyan); }

.nx-footer__notice {
	padding: var(--nx-space-5) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--nx-text-xs);
	line-height: var(--nx-leading-loose);
}

.nx-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--nx-space-4);
	padding: var(--nx-space-5) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--nx-text-xs);
	color: rgba(255, 255, 255, 0.55);
}

.nx-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--nx-space-5); }
.nx-footer__bottom li { margin: 0; }

/* ---- Back to top --------------------------------------------------------- */

.nx-totop {
	position: fixed;
	right: var(--nx-space-5);
	bottom: var(--nx-space-5);
	z-index: var(--nx-z-sticky);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: var(--nx-primary);
	border: 0;
	border-radius: var(--nx-radius-full);
	color: var(--nx-white);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	box-shadow: var(--nx-shadow);
	transition:
		opacity var(--nx-dur) var(--nx-ease),
		transform var(--nx-dur) var(--nx-ease),
		visibility var(--nx-dur),
		background-color var(--nx-dur-fast) var(--nx-ease);
}

.nx-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.nx-totop:hover { background: var(--nx-action); }