/* ==========================================================================
   RJL DESIGN SYSTEM — 04 NAVIGATION

   THE INFORMATION-ARCHITECTURE FIX

   Before: the five RJL destinations (Book & Record Store, Listening Lounge,
   Merchant, Restaurant, Events) were nested under a parent item, so every one
   of them cost two clicks and the hover-menu made them unreachable in one
   gesture on touch.

   After: all five are top-level links, one click each, on every breakpoint.

   The risk in flattening is that five sibling links read as five unrelated
   businesses. The fix is presentational, not structural: they are rendered as
   a single numbered set (01–05) under one "The Space" banner, grouped inside
   a shared bordered container on desktop and a shared panel in the drawer.
   The numbering is doing real work — it is the device that says "these are
   five rooms in one building", the same way a tracklist says one record. It
   also carries the catalogue idea already running through the type system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER SHELL
   ----------------------------------------------------------------------- */
.rjl-header {
	position: sticky;
	top: 0;
	z-index: var(--rjl-z-header);
	background: var(--rjl-ink-950);
	color: var(--rjl-paper);
	border-bottom: var(--rjl-border) solid var(--rjl-ink-800);
}

/* Compresses slightly once the page scrolls, so the header takes less of a
   phone screen while reading. */
.rjl-header.is-scrolled { box-shadow: var(--rjl-shadow-md); }

.rjl-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rjl-space-sm);
	height: var(--rjl-header-h);
}

/* --------------------------------------------------------------------------
   BRAND
   ----------------------------------------------------------------------- */
.rjl-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--rjl-space-2xs);
	text-decoration: none;
	color: var(--rjl-paper);
	/* Shrinkable, with a floor. Previously flex-shrink:0, which combined with
	   four 44px utility buttons pushed the burger clean off a 375px screen —
	   the menu could not be opened on a phone at all. */
	flex: 0 1 auto;
	min-width: 0;
}

.rjl-brand__mark {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	color: currentColor;
}
.rjl-brand__mark svg {
	width: 100%;
	height: 100%;
	display: block;
}

.rjl-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.rjl-brand__name {
	/* The wordmark: one joined word, Helvetica Neue Bold, tracked out per the
	   brand book ("Kerning: 50%", i.e. ~0.05em). Never spaced as three words. */
	font-family: var(--rjl-font-display);
	font-size: 0.95rem;
	font-weight: var(--rjl-weight-bold);
	letter-spacing: var(--rjl-track-wordmark);
	text-transform: uppercase;
}


@media (min-width: 60em) {
	.rjl-brand__mark { width: 40px; height: 40px; }
	.rjl-brand__name { font-size: 1.05rem; }
}

/* --------------------------------------------------------------------------
   UTILITIES (search / account / cart)
   ----------------------------------------------------------------------- */
.rjl-utils {
	display: flex;
	align-items: center;
	gap: var(--rjl-space-3xs);
}

.rjl-util {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px is the minimum comfortable touch target. */
	width: 44px;
	height: 44px;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--rjl-paper);
	cursor: pointer;
	border-radius: var(--rjl-radius-sm);
	text-decoration: none;
	transition: background-color var(--rjl-dur-fast) var(--rjl-ease-out),
	            transform var(--rjl-dur-fast) var(--rjl-ease-out);
}
.rjl-util:hover  { background: var(--rjl-ink-800); color: var(--rjl-paper); }
.rjl-util:active { transform: scale(0.94); }
.rjl-util svg    { width: 21px; height: 21px; }

/* Cart count. Square rather than a pill — pills on every badge is a tell. */
.rjl-util__count {
	position: absolute;
	top: 5px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: grid;
	place-items: center;
	background: var(--rjl-accent);
	color: var(--rjl-on-accent);
	font-family: var(--rjl-font-mono);
	font-size: 0.625rem;
	font-weight: var(--rjl-weight-bold);
	font-variant-numeric: tabular-nums;
	border-radius: var(--rjl-radius-xs);
	line-height: 1;
}
.rjl-util__count:empty,
.rjl-util__count[data-count="0"] { display: none; }


/* --------------------------------------------------------------------------
   SMALL-SCREEN HEADER BUDGET

   Found by measuring the real header at 375px: the bar was overflowing its
   container by 57px and the burger's right edge sat at 415px — 40px past the
   viewport. The hamburger was literally off-screen, so the navigation could
   not be opened at all on a phone.

   The arithmetic: brand 194px + four 44px utility buttons (188px with gaps)
   = 382px, against 341px of usable width inside the gutters at 375px.

   Two changes bring it back inside budget:

   1. Search and Account are hidden below 30em. Neither is lost — both are in
      the drawer, which is where a phone user goes for navigation anyway. Cart
      and the burger stay, because cart is the commerce path and the burger is
      the only way into the menu.
   2. The wordmark truncates rather than pushing. Below 22em (352px, which
      covers the 320px iPhone SE) the tagline is dropped too.

   After: brand ~194 + cart 44 + burger 44 + gaps ~8 = 290px, inside 341px.
   ----------------------------------------------------------------------- */
.rjl-brand__text {
	min-width: 0;
}

.rjl-brand__name {
	/* Truncates instead of forcing the row wider. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 29.999em) {
	.rjl-util--search,
	.rjl-util--account {
		display: none;
	}
}

@media (max-width: 22em) {
	.rjl-brand__name { font-size: 0.85rem; }
	.rjl-brand__mark { width: 30px; height: 30px; }
}

/* Utility buttons must never shrink below the 44px touch target. */
.rjl-util,
.rjl-burger {
	flex: 0 0 auto;
}

/* The utility cluster is the fixed side of the header budget. */
.rjl-utils {
	flex: 0 0 auto;
}
/* --------------------------------------------------------------------------
   DRAWER TOGGLE — mobile only
   ----------------------------------------------------------------------- */
.rjl-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: var(--rjl-radius-sm);
}
.rjl-burger:hover { background: var(--rjl-ink-800); }

.rjl-burger__line {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--rjl-paper);
	border-radius: 2px;
	transition: transform var(--rjl-dur-base) var(--rjl-ease-out),
	            opacity var(--rjl-dur-fast) var(--rjl-ease-out);
}

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

@media (min-width: 60em) {
	.rjl-burger { display: none; }
}

/* ==========================================================================
   MOBILE DRAWER — the primary navigation on small screens
   Built first, per the mobile-first requirement. The desktop bar further down
   is the adaptation, not the other way round.
   ========================================================================== */
.rjl-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(88vw, 24rem);
	z-index: var(--rjl-z-drawer);
	background: var(--rjl-ink-950);
	color: var(--rjl-paper);
	transform: translate3d(100%, 0, 0);
	transition: transform var(--rjl-dur-slow) var(--rjl-ease-out);
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	/* Clears the iOS home indicator. */
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.rjl-drawer.is-open { transform: translate3d(0, 0, 0); }

.rjl-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--rjl-header-h);
	padding-inline: var(--rjl-gutter);
	border-bottom: var(--rjl-border) solid var(--rjl-ink-800);
	flex-shrink: 0;
}

.rjl-drawer__body { padding: var(--rjl-space-md) var(--rjl-gutter) var(--rjl-space-xl); }

.rjl-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--rjl-z-overlay);
	background: rgba(6, 6, 7, 0.66);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--rjl-dur-base) var(--rjl-ease-out),
	            visibility var(--rjl-dur-base);
}
.rjl-overlay.is-open { opacity: 1; visibility: visible; }

@media (min-width: 60em) {
	.rjl-drawer, .rjl-overlay { display: none; }
}

/* --------------------------------------------------------------------------
   THE SPACE — the grouped five, drawer presentation
   ----------------------------------------------------------------------- */
.rjl-space-group {
	border: var(--rjl-border) solid var(--rjl-ink-700);
	border-radius: var(--rjl-radius-lg);
	padding: var(--rjl-space-sm);
	margin-bottom: var(--rjl-space-lg);
	background: linear-gradient(160deg, var(--rjl-ink-900) 0%, var(--rjl-ink-950) 70%);
}

.rjl-space-group__label {
	display: flex;
	align-items: center;
	gap: var(--rjl-space-2xs);
	padding: 0 var(--rjl-space-2xs) var(--rjl-space-xs);
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-2xs);
	font-weight: var(--rjl-weight-bold);
	letter-spacing: var(--rjl-track-label);
	text-transform: uppercase;
	color: var(--rjl-ink-300);
}
.rjl-space-group__label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rjl-ink-700);
}

/* Each of the five. Numbered, one click, full-width touch target. */
.rjl-space-link {
	display: grid;
	grid-template-columns: 2.25rem 1fr auto;
	align-items: center;
	gap: var(--rjl-space-2xs);
	padding: var(--rjl-space-xs) var(--rjl-space-2xs);
	border-radius: var(--rjl-radius-sm);
	text-decoration: none;
	color: var(--rjl-paper);
	min-height: 48px;
	transition: background-color var(--rjl-dur-fast) var(--rjl-ease-out);
}
.rjl-space-link:hover { background: var(--rjl-ink-800); color: var(--rjl-paper); }

.rjl-space-link__num {
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-xs);
	font-weight: var(--rjl-weight-bold);
	color: var(--rjl-accent);
	font-variant-numeric: tabular-nums;
}

.rjl-space-link__name {
	font-family: var(--rjl-font-display);
	font-size: var(--rjl-text-lg);
	font-weight: var(--rjl-weight-bold);
	letter-spacing: var(--rjl-track-head);
	line-height: 1.15;
}

.rjl-space-link__note {
	display: block;
	font-family: var(--rjl-font-body);
	font-size: var(--rjl-text-xs);
	font-weight: var(--rjl-weight-regular);
	letter-spacing: 0;
	color: var(--rjl-ink-300);
	margin-top: 2px;
}

.rjl-space-link__arrow {
	color: var(--rjl-ink-300);
	transition: transform var(--rjl-dur-fast) var(--rjl-ease-out);
}
.rjl-space-link:hover .rjl-space-link__arrow {
	transform: translateX(3px);
	color: var(--rjl-accent);
}

/* Current page. */
.rjl-space-link[aria-current="page"] {
	background: var(--rjl-ink-800);
	box-shadow: inset 3px 0 0 var(--rjl-accent);
}

/* --------------------------------------------------------------------------
   DRAWER — remaining links
   ----------------------------------------------------------------------- */
.rjl-drawer-menu { list-style: none; margin: 0; padding: 0; }

.rjl-drawer-menu > li { margin: 0; border-bottom: var(--rjl-border) solid var(--rjl-ink-800); }
.rjl-drawer-menu > li:last-child { border-bottom: 0; }

.rjl-drawer-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	padding: var(--rjl-space-xs) var(--rjl-space-2xs);
	font-family: var(--rjl-font-display);
	font-size: var(--rjl-text-xl);
	font-weight: var(--rjl-weight-bold);
	letter-spacing: var(--rjl-track-head);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--rjl-paper);
}
.rjl-drawer-menu a:hover { color: var(--rjl-accent); }
.rjl-drawer-menu a[aria-current="page"] { color: var(--rjl-accent); }

/* Any second level that a hand-built WordPress menu still carries. */
.rjl-drawer-menu .sub-menu {
	list-style: none;
	margin: 0 0 var(--rjl-space-xs);
	padding-left: var(--rjl-space-sm);
	border-left: var(--rjl-border) solid var(--rjl-ink-700);
}
.rjl-drawer-menu .sub-menu a {
	min-height: 42px;
	font-family: var(--rjl-font-body);
	font-size: var(--rjl-text-base);
	font-weight: var(--rjl-weight-medium);
	text-transform: none;
	letter-spacing: 0;
	color: var(--rjl-ink-300);
}

.rjl-drawer__cta { margin-top: var(--rjl-space-lg); }

.rjl-drawer__meta {
	margin-top: var(--rjl-space-xl);
	padding-top: var(--rjl-space-md);
	border-top: var(--rjl-border) solid var(--rjl-ink-800);
	font-size: var(--rjl-text-sm);
	color: var(--rjl-ink-300);
}

/* ==========================================================================
   DESKTOP BAR — from 64em (1024px)

   WHY THE BREAKPOINT COULD COME BACK DOWN

   The old bar rendered all five Space links inline inside a bordered group,
   alongside the logo, seven more top-level links and three utility icons.
   That is thirteen hit targets in one row, and it overflowed. Pushing the
   breakpoint 60em -> 90em -> 100em only changed the width at which it
   overflowed; the row was still wider than the space available, so a link was
   still clipped at 1536px.

   The fix is fewer slots, not a later breakpoint:
     - the five Space links collapse into ONE "The Space" trigger
     - Book Club and Guidelines move into a Members panel

   That takes the bar from thirteen items to seven, which fits at 1024px, so
   the breakpoint moves back DOWN to 64em and tablets get the real navigation
   instead of a hamburger.
   ========================================================================== */
.rjl-nav { display: none; }

/* Panels are inert below the desktop breakpoint — the drawer owns navigation
   there, and a stray hover must not be able to reveal one. */
.rjl-panel { display: none; }

@media (min-width: 64em) {

	.rjl-nav {
		display: flex;
		align-items: center;
		flex: 1 1 auto;
		justify-content: center;
		/* Lets the nav shrink inside the header flex row rather than forcing
		   the bar wider than the viewport. */
		min-width: 0;
	}

	.rjl-nav__list {
		display: flex;
		align-items: center;
		gap: 2px;
		list-style: none;
		margin: 0;
		padding: 0;
		/* nowrap is deliberate: a nav that wraps to two lines changes the
		   header height and shoves the page down. If it ever cannot fit, the
		   answer is removing an item, not silently wrapping. */
		flex-wrap: nowrap;
	}

	.rjl-nav__item {
		margin: 0;
		position: relative;   /* panel anchor */
	}

	.rjl-nav__link {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		/* 44px, not 40: touch laptops exist and the desktop header is 76px tall,
		   so the full touch target costs nothing here. */
		height: 44px;
		padding-inline: var(--rjl-space-2xs);
		border: 0;
		background: transparent;
		font-family: var(--rjl-font-display);
		font-size: 0.8125rem;
		font-weight: var(--rjl-weight-bold);
		letter-spacing: 0.045em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--rjl-ink-200);
		white-space: nowrap;
		position: relative;
		cursor: pointer;
		transition: color var(--rjl-dur-fast) var(--rjl-ease-out);
	}

	.rjl-nav__link:hover { color: var(--rjl-paper); }

	/* Active-page marker, drawn with transform so it animates on the
	   compositor rather than by repainting a border. */
	.rjl-nav__link::after {
		content: "";
		position: absolute;
		left: var(--rjl-space-2xs);
		right: var(--rjl-space-2xs);
		bottom: 6px;
		height: 2px;
		background: var(--rjl-accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--rjl-dur-base) var(--rjl-ease-out);
	}
	.rjl-nav__link:hover::after { transform: scaleX(1); }
	.rjl-nav__link[aria-current="page"],
	.rjl-nav__link[aria-current="true"] { color: var(--rjl-paper); }
	.rjl-nav__link[aria-current="page"]::after,
	.rjl-nav__link[aria-current="true"]::after { transform: scaleX(1); }

	/* ----------------------------------------------------------------------
	   PANEL TRIGGER
	   -------------------------------------------------------------------- */
	.rjl-nav__caret {
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform var(--rjl-dur-base) var(--rjl-ease-out);
		opacity: 0.7;
	}

	.rjl-nav__item--panel:hover .rjl-nav__caret,
	.rjl-nav__item--panel:focus-within .rjl-nav__caret,
	.rjl-nav__item--panel.is-open .rjl-nav__caret {
		transform: translateY(1px) rotate(-135deg);
		opacity: 1;
	}

	/* ----------------------------------------------------------------------
	   PANEL

	   Opens three ways, so every input type is covered:
	     :hover        pointer
	     :focus-within keyboard — works with no JavaScript at all
	     .is-open      applied by script on click/tap, for touch, where there
	                   is no hover and the first tap must not follow a link

	   The hover and focus-within rules mean the panel stays fully usable if
	   the JavaScript fails to load; the class only adds tap support.
	   -------------------------------------------------------------------- */
	.rjl-panel {
		display: block;
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: var(--rjl-z-header);
		padding-top: var(--rjl-space-2xs);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, -6px);
		transition: opacity var(--rjl-dur-fast) var(--rjl-ease-out),
		            transform var(--rjl-dur-fast) var(--rjl-ease-out),
		            visibility var(--rjl-dur-fast);
		pointer-events: none;
	}

	.rjl-nav__item--panel:hover > .rjl-panel,
	.rjl-nav__item--panel:focus-within > .rjl-panel,
	.rjl-nav__item--panel.is-open > .rjl-panel {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		pointer-events: auto;
	}

	.rjl-panel__inner {
		background: var(--rjl-ink-900);
		border: var(--rjl-border) solid var(--rjl-ink-700);
		border-radius: var(--rjl-radius-lg);
		box-shadow: 0 18px 44px rgba(6, 6, 7, 0.55);
		padding: var(--rjl-space-sm);
	}

	.rjl-panel .rjl-space-group__label {
		display: flex;
		align-items: center;
		gap: var(--rjl-space-2xs);
		padding: 0 var(--rjl-space-2xs) var(--rjl-space-xs);
		margin: 0;
		font-family: var(--rjl-font-mono);
		font-size: var(--rjl-text-2xs);
		font-weight: var(--rjl-weight-bold);
		letter-spacing: var(--rjl-track-label);
		text-transform: uppercase;
		color: var(--rjl-ink-300);
	}
	.rjl-panel .rjl-space-group__label::after {
		content: "";
		flex: 1;
		height: 1px;
		background: var(--rjl-ink-700);
	}

	/* Two columns for the five rooms, so the panel is wide and shallow rather
	   than a long thin column running down the page. */
	.rjl-panel__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(15rem, 1fr));
		gap: 2px var(--rjl-space-2xs);
	}

	.rjl-panel__grid--single {
		grid-template-columns: minmax(16rem, 1fr);
	}

	/* Five items in a two-column grid leaves a hole; the last spans both. */
	.rjl-panel--space .rjl-panel__grid > .rjl-space-link:nth-child(5) {
		grid-column: 1 / -1;
	}

	/* .rjl-space-link itself is defined once, further up, for the drawer.
	   Only desktop-specific sizing is adjusted here — the numbered treatment,
	   hover arrow and current-page marker are all inherited. */
	.rjl-panel .rjl-space-link {
		min-height: 52px;
		padding: var(--rjl-space-2xs);
	}
	.rjl-panel .rjl-space-link__name { font-size: var(--rjl-text-base); }
	.rjl-panel .rjl-space-link__note {
		font-size: var(--rjl-text-xs);
		max-width: 26ch;
	}

	/* The Members panel carries no numbers, so it drops the number column. */
	.rjl-panel__grid--single .rjl-space-link {
		grid-template-columns: 1fr auto;
	}

	/* ----------------------------------------------------------------------
	   TIGHT DESKTOP — 64em to 78em
	   Between 1024px and 1248px the bar is real but close. Trim horizontal
	   padding rather than dropping items or allowing a wrap.
	   -------------------------------------------------------------------- */
	@media (max-width: 78em) {
		.rjl-nav__link { padding-inline: 6px; font-size: 0.75rem; letter-spacing: 0.03em; }
		.rjl-nav__link::after { left: 6px; right: 6px; }
		.rjl-panel__grid { grid-template-columns: repeat(2, minmax(13rem, 1fr)); }
	}

	/* A panel on the first or last item would hang off the viewport edge when
	   centred. Anchoring those two to their own edge keeps them on screen. */
	.rjl-nav__list > .rjl-nav__item--panel:first-child > .rjl-panel {
		left: 0;
		transform: translate(0, -6px);
	}
	.rjl-nav__list > .rjl-nav__item--panel:first-child:hover > .rjl-panel,
	.rjl-nav__list > .rjl-nav__item--panel:first-child:focus-within > .rjl-panel,
	.rjl-nav__list > .rjl-nav__item--panel:first-child.is-open > .rjl-panel {
		transform: translate(0, 0);
	}

	.rjl-nav__list > .rjl-nav__item--panel:last-child > .rjl-panel {
		left: auto;
		right: 0;
		transform: translate(0, -6px);
	}
	.rjl-nav__list > .rjl-nav__item--panel:last-child:hover > .rjl-panel,
	.rjl-nav__list > .rjl-nav__item--panel:last-child:focus-within > .rjl-panel,
	.rjl-nav__list > .rjl-nav__item--panel:last-child.is-open > .rjl-panel {
		transform: translate(0, 0);
	}
}