/* ==========================================================================
   THE NEXUS — Site-wide upcoming-event ticket
   Loads unconditionally (see nexus_home_assets() in nexus-homepage.php), so
   every rule here is self-contained and doesn't assume body.home/.nx-page —
   this has to render correctly over default-Astra pages (Shop, Checkout)
   just as much as the dark nx- pages. It's an opaque, self-shadowed card
   rather than something that blends into the page background, precisely
   so it reads the same way regardless of what's underneath it.
   ========================================================================== */

.nx-ticket-popup {
	position: fixed;
	z-index: var(--z-sticky);
	display: flex;
	align-items: stretch;
	text-decoration: none;
	color: var(--color-text-primary);
	font-family: var(--font-body);
	background: var(--color-surface-2);
	border: var(--stroke-default) solid var(--color-border-default);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-4);
	overflow: hidden;
	cursor: pointer;
	animation: nx-ticket-popup-in var(--duration-cinematic) var(--ease-out-expo) both;
	animation-delay: 350ms;
	transition: transform var(--duration-base) var(--ease-out-expo),
		box-shadow var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard),
		opacity var(--duration-base) var(--ease-standard);
}

/* Toggled by the IntersectionObserver in ticket-popup.php once the site
   footer starts entering the viewport. !important is load-bearing here:
   the entrance animation above holds opacity:1 via fill-mode:both, and CSS
   animations take precedence over normal (non-!important) author rules for
   the properties they animate -- a plain opacity:0 here was confirmed live
   to have zero visible effect despite the class applying correctly. */
.nx-ticket-popup.is-near-footer {
	opacity: 0 !important;
	pointer-events: none !important;
}

@keyframes nx-ticket-popup-in {
	from { opacity: 0; transform: translateY(16px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.nx-ticket-popup:hover,
.nx-ticket-popup:focus-visible {
	transform: translateY(-4px);
	border-color: var(--color-gold-500);
	box-shadow: var(--shadow-4), var(--glow-gold-sm);
}
.nx-ticket-popup:active { transform: translateY(-2px) scale(0.99); }

.nx-ticket-popup:focus-visible {
	outline: 2px solid var(--color-gold-500);
	outline-offset: 3px;
}

.nx-ticket-popup:hover .nx-ticket-popup__arrow,
.nx-ticket-popup:focus-visible .nx-ticket-popup__arrow {
	transform: translateX(3px);
}

/* ---------- main (event info) segment ---------- */
.nx-ticket-popup__main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-width: 0; /* required for the ellipsis truncation below to actually clip */
	padding: var(--space-4) var(--space-4);
}

.nx-ticket-popup__vertical {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gold-500);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nx-ticket-popup__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-body-s);
	line-height: 1.2;
	color: var(--color-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nx-ticket-popup__loc {
	font-size: var(--text-caption);
	color: var(--color-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- stub (date + CTA) segment ---------- */
.nx-ticket-popup__stub {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-shrink: 0;
	padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
	border-left: var(--stroke-default) dashed var(--color-border-strong);
}

/* Ticket "notch" — a punched-eyelet detail carved from the card's own
   surface at the perforation line. Deliberately NOT a transparent cutout:
   this card floats over arbitrary page content (dark hero, white Shop
   page, a product photo), and a true see-through hole would look broken on
   most of those, not "premium." var(--color-bg) is near-black on every
   page, so this reads as an intentional rivet regardless of what's under
   the popup. */
.nx-ticket-popup__stub::before,
.nx-ticket-popup__stub::after {
	content: '';
	position: absolute;
	left: -9px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-bg);
	border: var(--stroke-default) solid var(--color-border-default);
}
.nx-ticket-popup__stub::before { top: -9px; }
.nx-ticket-popup__stub::after { bottom: -9px; }

.nx-ticket-popup__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
}
.nx-ticket-popup__day {
	font-family: var(--font-display);
	font-size: 1.75rem;
	color: var(--color-text-primary);
}
.nx-ticket-popup__month {
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-top: 2px;
}

.nx-ticket-popup__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-caption);
	letter-spacing: 0.01em;
	color: var(--color-gold-300);
	white-space: nowrap;
}
.nx-ticket-popup__arrow {
	flex-shrink: 0;
	transition: transform var(--duration-base) var(--ease-out-expo);
}

/* ============================================================
   RESPONSIVE
   Mobile (<768px): a slim floating bar, left-anchored, kept clear of
   Astra's own scroll-to-top button (fixed, bottom:30px right:30px,
   z-index:99, shows on both desktop and mobile once the page scrolls —
   confirmed live, not assumed) via the `right` offset below rather than a
   fixed width, so it never depends on knowing that button's exact size.
   Tablet+ (>=768px): the compact ticket-card treatment, bottom-left,
   clear of that same button by construction (opposite corner).
   ============================================================ */
.nx-ticket-popup {
	left: 12px;
	right: 72px;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	max-width: 420px;
}
.nx-ticket-popup__title { max-width: 100%; }

@media (max-width: 479px) {
	.nx-ticket-popup__main { padding: var(--space-3) var(--space-3); gap: 1px; }
	.nx-ticket-popup__stub { padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); gap: var(--space-2); }
	.nx-ticket-popup__loc { display: none; } /* metadata trimmed before layout breaks, per spec — not shrunk to unreadable */
	.nx-ticket-popup__day { font-size: 1.375rem; }
	.nx-ticket-popup__cta-label { display: none; } /* "Get Tickets" label collapses to just the arrow at the tightest width; the persistent aria-label keeps the link's accessible name complete regardless */
}

@media (min-width: 768px) {
	.nx-ticket-popup {
		left: 24px;
		right: auto;
		bottom: 24px;
		max-width: 380px;
	}
	.nx-ticket-popup__main { padding: var(--space-5) var(--space-5); }
	.nx-ticket-popup__stub { padding: var(--space-5) var(--space-6) var(--space-5) var(--space-5); }
}

@media (min-width: 1024px) {
	.nx-ticket-popup__day { font-size: 2rem; }
}

/* Short viewports (phones in landscape, ~375-430px tall; also a squashed
   desktop browser window, split-screen tablet, etc.) — the hero and every
   other full-bleed section on this site is min-height:100vh with
   vertically centered content, so at this height there is no free band at
   the bottom for a fixed element to sit in without touching *something*.
   Rather than accept that, shrink the ticket's own footprint as far as it
   can go while staying legible/tappable, so whatever it does touch is
   minimal. Keyed on height only (not width, not orientation), and placed
   last so it wins the cascade over both the mobile-bar and tablet+-card
   rules above regardless of viewport width — a short-but-wide viewport
   needs this compaction just as much as a short phone does. */
@media (max-height: 480px) {
	.nx-ticket-popup { bottom: 8px; }
	.nx-ticket-popup__main { padding: var(--space-2) var(--space-3); gap: 0; }
	.nx-ticket-popup__stub { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
	.nx-ticket-popup__loc { display: none; }
	.nx-ticket-popup__date { flex-direction: row; gap: 4px; }
	.nx-ticket-popup__day { font-size: 1.125rem; }
	.nx-ticket-popup__month { margin-top: 0; }
	.nx-ticket-popup__cta-label { display: none; }
}

/* Ticket popup sits under the mobile nav overlay (z-index 100 vs 400) but
   without an explicit rule it still paints through the overlay's own
   scrollable footer content on short viewports. Hide it outright while the
   menu is open rather than relying on stacking order. */
body:has(.nx-header.is-open) .nx-ticket-popup { display: none; }