/*
 * RXFloor — Header component
 *
 * Sleek glass header sitting on top of every page. Uses the new token system.
 * Class names match the existing header.php pattern; not "legacy" — written
 * fresh against the same DOM structure.
 *
 * States (driven by header-collapse.js):
 *   body.has-scrolled-header   — compact pill header on home after scroll
 *   body.is-header-drawer-open — mobile drawer open
 *   header.is-mobile-menu-only — viewport <= 1024px
 */

.rxfloor-header-shell {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--rx-z-header);
	display: flex;
	align-items: stretch;
	min-height: var(--rx-header-height);
	padding: var(--rx-space-3) var(--rx-section-pad-inline);
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom: 1px solid transparent;
	transition:
		background var(--rx-dur-medium) var(--rx-ease-out-expo),
		backdrop-filter var(--rx-dur-medium) var(--rx-ease-out-expo),
		border-color var(--rx-dur-medium) var(--rx-ease-out-expo),
		padding var(--rx-dur-medium) var(--rx-ease-out-expo);
}

body.has-scrolled-header .rxfloor-header-shell,
.rxfloor-header-shell.is-scrolled {
	background: rgba(0, 0, 0, 0.72);
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	border-bottom-color: rgba(255, 255, 255, 0.06);
}

.rxfloor-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rx-space-6);
	width: 100%;
	max-width: var(--rx-content-max);
	margin-inline: auto;
}

.rxfloor-brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

.rxfloor-brand-row {
	display: inline-flex;
	align-items: center;
	gap: var(--rx-space-4);
}

.rxfloor-brand-logo {
	display: block;
	height: auto;
	width: auto;
	max-height: 2rem;
	max-width: 8.5rem;
	object-fit: contain;
}

.rxfloor-brand-logo.is-interpose { max-height: 2.1rem; }
.rxfloor-brand-logo.is-rxfloor   { max-height: 1.8rem; opacity: 0.9; }

.rxfloor-brand-meta {
	margin-left: var(--rx-space-3);
	font-size: var(--rx-text-xs);
	font-weight: var(--rx-weight-semibold);
	letter-spacing: var(--rx-tracking-widest);
	text-transform: uppercase;
	color: var(--rx-text-inverse-muted);
}

/* ── Nav ── */
.rxfloor-header-nav {
	display: inline-flex;
	align-items: center;
	gap: var(--rx-space-6);
}

.rxfloor-header-nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-block: var(--rx-space-2);
	color: var(--rx-text-inverse);
	font-size: var(--rx-text-xs);
	font-weight: var(--rx-weight-semibold);
	letter-spacing: var(--rx-tracking-widest);
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--rx-dur-fast) var(--rx-ease-out-expo);
}

.rxfloor-header-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--rx-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--rx-dur-fast) var(--rx-ease-out-expo);
}

.rxfloor-header-nav a:hover,
.rxfloor-header-nav a.is-active {
	color: var(--rx-accent);
}

.rxfloor-header-nav a:hover::after,
.rxfloor-header-nav a.is-active::after {
	transform: scaleX(1);
}

/* ── Actions ── */
.rxfloor-header-actions {
	display: inline-flex;
	align-items: center;
	gap: var(--rx-space-3);
	flex-shrink: 0;
}

/* ── Button (shared with footer) ── */
.rxfloor-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rx-space-2);
	min-height: 2.6rem;
	padding: 0 var(--rx-space-5);
	border: 1px solid transparent;
	border-radius: var(--rx-radius-pill);
	background: transparent;
	color: var(--rx-text);
	font-family: inherit;
	font-size: var(--rx-text-xs);
	font-weight: var(--rx-weight-bold);
	letter-spacing: var(--rx-tracking-widest);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background var(--rx-dur-fast) var(--rx-ease-out-expo),
		color var(--rx-dur-fast) var(--rx-ease-out-expo),
		border-color var(--rx-dur-fast) var(--rx-ease-out-expo),
		transform var(--rx-dur-fast) var(--rx-ease-out-expo);
}

.rxfloor-btn:hover { transform: translateY(-1px); }

.rxfloor-btn.is-primary {
	background: var(--rx-accent);
	color: var(--rx-ink);
	border-color: var(--rx-accent);
}
.rxfloor-btn.is-primary:hover {
	background: var(--rx-accent-deep);
	border-color: var(--rx-accent-deep);
	color: var(--rx-paper);
}

.rxfloor-btn.is-ghost {
	border-color: rgba(255, 255, 255, 0.24);
	color: var(--rx-paper);
}
.rxfloor-btn.is-ghost:hover {
	background: var(--rx-paper);
	color: var(--rx-ink);
	border-color: var(--rx-paper);
}

.rxfloor-btn.is-dark {
	background: var(--rx-ink);
	color: var(--rx-paper);
	border-color: var(--rx-ink);
}
.rxfloor-btn.is-dark:hover { background: var(--rx-charcoal); border-color: var(--rx-charcoal); }

/* ── Mobile toggle ── */
.rxfloor-header-toggle {
	position: relative;
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.8rem;
	height: 2.8rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--rx-radius-md);
	background: rgba(0, 0, 0, 0.36);
	color: var(--rx-paper);
	cursor: pointer;
	transition:
		background var(--rx-dur-fast) var(--rx-ease-out-expo),
		border-color var(--rx-dur-fast) var(--rx-ease-out-expo);
}

.rxfloor-header-toggle:hover { background: rgba(0, 0, 0, 0.5); }

.rxfloor-header-toggle-lines {
	display: grid;
	gap: 0.32rem;
	width: 1.2rem;
}

.rxfloor-header-toggle-lines span {
	display: block;
	height: 2px;
	background: var(--rx-paper);
	border-radius: 1px;
	transition: transform var(--rx-dur-fast) var(--rx-ease-out-expo),
				opacity var(--rx-dur-fast) var(--rx-ease-out-expo);
	transform-origin: center;
}

body.is-header-drawer-open .rxfloor-header-toggle-lines span:nth-child(1) {
	transform: translateY(0.42rem) rotate(45deg);
}
body.is-header-drawer-open .rxfloor-header-toggle-lines span:nth-child(2) {
	opacity: 0;
}
body.is-header-drawer-open .rxfloor-header-toggle-lines span:nth-child(3) {
	transform: translateY(-0.42rem) rotate(-45deg);
}

/* ── Backdrop ── */
.rxfloor-header-backdrop {
	position: fixed;
	inset: 0;
	z-index: calc(var(--rx-z-header) - 1);
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--rx-dur-medium) var(--rx-ease-out-expo);
}

body.is-header-drawer-open .rxfloor-header-backdrop {
	opacity: 1;
	pointer-events: auto;
}

/* ── Drawer ── */
.rxfloor-header-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: var(--rx-z-header);
	width: min(22rem, 88vw);
	padding: var(--rx-space-8) var(--rx-space-6);
	background: var(--rx-ink);
	color: var(--rx-paper);
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	transform: translateX(100%);
	transition: transform var(--rx-dur-medium) var(--rx-ease-out-expo);
	overflow-y: auto;
}

body.is-header-drawer-open .rxfloor-header-drawer {
	transform: translateX(0);
}

.rxfloor-header-drawer-inner {
	display: grid;
	gap: var(--rx-space-8);
	padding-top: var(--rx-space-12);
}

.rxfloor-header-drawer-brand {
	display: inline-flex;
}

.rxfloor-header-drawer-nav {
	display: grid;
	gap: var(--rx-space-2);
}

.rxfloor-header-drawer-nav a {
	display: block;
	padding: var(--rx-space-3) 0;
	color: var(--rx-paper);
	font-size: var(--rx-text-lg);
	font-weight: var(--rx-weight-semibold);
	letter-spacing: var(--rx-tracking-widest);
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: color var(--rx-dur-fast) var(--rx-ease-out-expo);
}

.rxfloor-header-drawer-nav a:hover,
.rxfloor-header-drawer-nav a.is-active {
	color: var(--rx-accent);
}

.rxfloor-header-drawer-actions {
	display: grid;
	gap: var(--rx-space-3);
}

/* ── Mobile / collapsed states ── */
.rxfloor-header-shell.is-mobile-menu-only {
	justify-content: flex-end;
	padding-block: var(--rx-space-2);
	align-items: center;
}

.rxfloor-header-shell.is-mobile-menu-only .rxfloor-header-toggle {
	display: inline-flex;
}

@media (max-width: 1024px) {
	.rxfloor-header-toggle {
		display: inline-flex;
	}
}

/* When body has the drawer open, prevent body scroll */
body.is-header-drawer-open {
	overflow: hidden;
}