/*
 * Utility bar above the global header — accounts wave, ticket 10.
 *
 * The prototype has no such bar. It is the first deliberate deviation from
 * design/DESIGN-SYSTEM.md, so it obeys the design's rules harder than usual:
 * radius 0, Barlow italic uppercase, every colour and size a token from
 * tokens.css, no value written twice.
 *
 * ---------------------------------------------------------------------------
 * THE MOBILE SWITCH, WITHOUT A @MEDIA QUERY
 * ---------------------------------------------------------------------------
 *
 * DESIGN-SYSTEM §1 and §3.5: there are no breakpoints, only clamp(). The theme
 * spends its ONE documented exception on the hamburger drawer in
 * components/header.css, and this file does not get a second one.
 *
 * So the switch is a clamp() whose slope is steep enough to be a step:
 *
 *     --sp-topbar-wide:   calc((100vw - 900px)    * 1000000)   ≫0 above 900px, ≪0 at or below
 *     --sp-topbar-narrow: calc((900.01px - 100vw) * 1000000)   ≫0 at 900px and below
 *
 * Neither is ever used as a length. Each is only ever the MIDDLE argument of a
 * clamp(), where it saturates to one end or the other:
 *
 *     clamp(0px, var(--sp-topbar-wide), 8px)   →  0px on phones, 8px on desktop
 *     clamp(0px, var(--sp-topbar-narrow), 8px) →  8px on phones, 0px on desktop
 *
 * 900px is not a new number: it is the width components/header.css already uses
 * to swap the inline nav for the hamburger, and the two must agree at the
 * boundary — `max-width: 900px` MATCHES at exactly 900px, so the drawer entry
 * has to be the visible half there. A line through zero cannot be positive on
 * both sides of its own root, so `--sp-topbar-narrow` crosses 0.01px later
 * instead. The overlap that buys is a 1/100th-of-a-pixel band of viewport width
 * in which both halves show; the alternative, crossing at exactly 900px, is a
 * viewport width at which NEITHER shows and the account is unreachable.
 *
 * Every property that gives the bar its height is gated this way (max-height,
 * padding, border), so below 900px the bar occupies exactly zero pixels and the
 * header is flush with the top of the page, as if the bar were not in the
 * document. The account link then appears in the hamburger drawer instead —
 * `.sp-topbar-drawer`, gated by the same clamp the other way round.
 *
 * This works with JavaScript off, which a media query would too and a class
 * toggled by matchMedia would not. What CSS alone cannot do is take collapsed
 * markup out of the tab order, so assets/js/nav.js marks whichever half is
 * collapsed `inert`. That is polish on top of a bar that is already correct
 * without it.
 */

.sp-topbar {
	--sp-topbar-wide: calc((100vw - 900px) * 1000000);

	/*
	 * Hidden below 900px: max-height 0 clips the content, and the padding and
	 * border are gated too, because neither is capped by max-height.
	 * The 120px ceiling is only a ceiling -- the bar's real height is its
	 * content, which is one line of --sp-fs-micro plus the gated padding.
	 */
	overflow: hidden;
	max-height: clamp(0px, var(--sp-topbar-wide), 120px);
	background: var(--sp-bg-deep);
	border-bottom-style: solid;
	border-bottom-color: var(--sp-line-faint);
	border-bottom-width: clamp(0px, var(--sp-topbar-wide), 1px);
	color: var(--sp-text-60);
}

.sp-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(12px, 2vw, 36px);
	max-width: var(--sp-container);
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
	padding-block: clamp(0px, var(--sp-topbar-wide), var(--sp-2));
}

/* ------------------------------------------------------------------ venue */

.sp-topbar__venue {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	min-width: 0;
	margin: 0;
}

.sp-topbar__phone,
.sp-topbar__hours,
.sp-topbar__sep,
.sp-topbar__account {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 600;
	font-size: var(--sp-fs-micro);
	letter-spacing: var(--sp-ls-pill);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.sp-topbar__phone {
	padding: 0;
	border: 0;
	background: none;
	color: var(--sp-text);
	transition: color var(--sp-dur-fast) var(--sp-ease);
}

a.sp-topbar__phone:hover,
a.sp-topbar__phone:focus {
	color: var(--sp-red);
}

.sp-topbar__sep {
	color: var(--sp-text-35);
}

.sp-topbar__hours {
	min-width: 0;
	overflow: hidden;
	color: var(--sp-text-60);
	text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- account */

.sp-topbar__account {
	flex: 0 0 auto;
	display: inline-block;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sp-text-82);
	transition: color var(--sp-dur-fast) var(--sp-ease);
}

.sp-topbar__account:hover,
.sp-topbar__account:focus {
	color: var(--sp-red);
}

/*
 * Signed in the entry is a name, not an instruction, so it reads as the
 * brand's own voice rather than as another link to click.
 */
.sp-topbar--signed-in .sp-topbar__account {
	color: var(--sp-red);
	font-weight: 700;
}

.sp-topbar--signed-in .sp-topbar__account:hover,
.sp-topbar--signed-in .sp-topbar__account:focus {
	color: var(--sp-red-hover);
}

/* --------------------------------------------------- the hamburger entry */

/*
 * The same link inside `.sp-header__nav`, which below 900px IS the drawer. It
 * is styled to match `.sp-nav__link` in drawer mode so it reads as one more row
 * of the menu, and collapsed to nothing above 900px.
 *
 * `margin-inline-start` is the reason the desktop header is untouched: a
 * zero-width flex item still costs one `gap` of the row it sits in, so the
 * collapsed state pays that gap back with a negative margin of exactly the
 * same clamp() `.sp-header__nav` uses. Net contribution above 900px: 0px.
 */
.sp-topbar-drawer {
	--sp-topbar-narrow: calc((900.01px - 100vw) * 1000000);

	/*
	 * Quoted from `.sp-header__nav` in components/header.css. It is the one value
	 * this file borrows rather than owns: change the gap there and change it here,
	 * or the collapsed entry stops paying its gap back.
	 */
	--sp-topbar-nav-gap: clamp(10px, 1.5vw, 26px);

	display: block;
	overflow: hidden;
	max-width: clamp(0px, var(--sp-topbar-narrow), 2000px);
	max-height: clamp(0px, var(--sp-topbar-narrow), 400px);
	margin-inline-start: clamp(calc(-1 * var(--sp-topbar-nav-gap)), var(--sp-topbar-narrow), 0px);
	padding-block: clamp(0px, var(--sp-topbar-narrow), var(--sp-5));
	border-bottom-style: solid;
	border-bottom-color: var(--sp-line-card);
	border-bottom-width: clamp(0px, var(--sp-topbar-narrow), 1px);
	background: none;
	color: var(--sp-text);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: var(--sp-fs-2xl);
	letter-spacing: var(--sp-ls-nav);
	line-height: 1;
	text-transform: uppercase;
	transition: color var(--sp-dur-fast) var(--sp-ease);
}

.sp-topbar-drawer:hover,
.sp-topbar-drawer:focus {
	color: var(--sp-red);
}

.sp-topbar-drawer--signed-in {
	color: var(--sp-red);
}

.sp-topbar-drawer--signed-in:hover,
.sp-topbar-drawer--signed-in:focus {
	color: var(--sp-red-hover);
}