/**
 * BuddyNext header user section — bell + messages + avatar dropdown.
 *
 * Self-contained header chrome for ANY theme (Reign, BuddyX, BuddyX-Pro) via the
 * `buddynext/header-user-menu` block, the `[buddynext_user_menu]` shortcode, or a
 * per-theme auto-place shim. Zero JavaScript: the dropdown opens on hover and on
 * keyboard/touch focus (`:focus-within`); unread counts are server-rendered.
 *
 * Uses the global BuddyNext OKLCH tokens (loaded site-wide via bn-base) and the
 * shared .bn-avatar / .bn-badge primitives. Loaded only for logged-in visitors.
 */

.bn-header-user-section {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s2, 0.5rem);
}

/* ── Logged-out: Log In / Register ──────────────────────────────────────── */
.bn-header-auth {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 var(--bn-s4, 1rem);
	border-radius: var(--bn-r-md, 0.5rem);
	font-size: var(--bn-text-sm, 0.875rem);
	font-weight: var(--bn-fw-semibold, 600);
	color: var(--bn-ink-2, #334155);
	text-decoration: none;
	transition: background var(--bn-dur-fast, 0.12s) var(--bn-ease, ease),
		color var(--bn-dur-fast, 0.12s) var(--bn-ease, ease);
}

.bn-header-auth:hover,
.bn-header-auth:focus-visible {
	background: var(--bn-sunken, #f1f5f9);
	color: var(--bn-ink, #0f172a);
}

.bn-header-auth--primary {
	background: var(--bn-accent, #2563eb);
	color: var(--bn-accent-fg, #fff);
}

.bn-header-auth--primary:hover,
.bn-header-auth--primary:focus-visible {
	background: var(--bn-accent-600, #1d4ed8);
	color: var(--bn-accent-fg, #fff);
}

/* ── Icon buttons (bell, messages) ──────────────────────────────────────────
   Targeted by component class (not via .bn-header-user-section) so they style
   identically whether rendered as the wrapped block/shortcode or dropped into a
   theme header one piece at a time (e.g. Reign's per-icon template parts). */
.bn-block-notification-bell,
.bn-header-msg {
	position: relative;
	display: inline-flex;
}

.bn-notification-bell-link,
.bn-header-msg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--bn-r-full, 999px);
	/* Inherit the host header's foreground, not BuddyNext's content ink: these
	   icons are dropped into the theme header (outside .bn-app), whose background
	   is independent of BuddyNext's light/dark mode. Using --bn-ink here made
	   them go invisible on a dark theme header while BuddyNext was in light mode.
	   Inheriting matches the theme's own header icons in any theme/mode. */
	color: inherit;
	background: transparent;
	transition: background var(--bn-dur-fast, 0.12s) var(--bn-ease, ease),
		color var(--bn-dur-fast, 0.12s) var(--bn-ease, ease);
}

.bn-notification-bell-link:hover,
.bn-notification-bell-link:focus-visible,
.bn-header-msg:hover,
.bn-header-msg:focus-visible {
	/* A tint of the inherited header colour, so the hover surface adapts to a
	   light OR dark header instead of a fixed light --bn-sunken. */
	background: color-mix( in oklab, currentColor 12%, transparent );
}

.bn-notification-bell-icon,
.bn-header-msg__icon {
	display: inline-flex;
}

.bn-notification-bell-icon svg,
.bn-header-msg__icon svg,
.bn-header-user__item-icon svg,
.bn-header-user__caret svg {
	width: 20px;
	height: 20px;
}

/* Notification / message count: a corner badge over the icon's top-right (like
   every social app), not an inline pill beside it. The surface-coloured ring
   cuts the badge out from the icon. Shared by the bell and the messages icon. */
.bn-block-notification-bell .bn-notification-badge,
.bn-header-msg .bn-header-msg__badge {
	position: absolute;
	top: 1px;
	inset-inline-end: 1px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: var(--bn-r-full, 999px);
	border: 2px solid var(--bn-surface, #fff);
	font-size: var(--bn-text-2xs, 0.6875rem);
	font-weight: var(--bn-fw-semibold, 600);
	line-height: 1;
	pointer-events: none;
}

/* ── User: avatar + caret + dropdown ────────────────────────────────────── */
.bn-header-user {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* Never let the host theme's header (e.g. Reign's narrow
	   .reign-user-toggler at mobile) squeeze the control — that clipped the
	   avatar to an 8px-wide teal sliver at 390px. */
	flex-shrink: 0;
}

.bn-header-user__avatar {
	display: inline-flex;
	flex-shrink: 0;
	border-radius: var(--bn-r-full, 999px);
	line-height: 0;
}

.bn-header-user__avatar:focus-visible {
	outline: 2px solid var(--bn-accent, #2563eb);
	outline-offset: 2px;
}

.bn-header-user__img {
	width: 36px;
	height: 36px;
	min-width: 36px;
	flex-shrink: 0;
	border-radius: var(--bn-r-full, 999px);
	object-fit: cover;
	display: block;
}

.bn-header-user__caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-inline-start: 2px;
	padding: 0;
	border: 0;
	border-radius: var(--bn-r-full, 999px);
	background: transparent;
	color: var(--bn-ink-3, #64748b);
	cursor: pointer;
	transition: color var(--bn-dur-fast, 0.12s) var(--bn-ease, ease),
		transform var(--bn-dur-fast, 0.12s) var(--bn-ease, ease);
}

.bn-header-user__caret:hover,
.bn-header-user__caret:focus-visible {
	color: var(--bn-ink, #0f172a);
}

/* ── The dropdown (CSS-only reveal) ─────────────────────────────────────── */
.bn-header-user__dropdown {
	position: absolute;
	top: calc(100% + var(--bn-s2, 0.5rem));
	inset-inline-end: 0;
	z-index: 1000;
	min-width: 224px;
	padding: var(--bn-s2, 0.5rem);
	background: var(--bn-surface, #fff);
	border: 1px solid var(--bn-line, #e2e8f0);
	border-radius: var(--bn-r-lg, 0.75rem);
	box-shadow: var(--bn-shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.16));
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--bn-dur-fast, 0.12s) var(--bn-ease, ease),
		transform var(--bn-dur-fast, 0.12s) var(--bn-ease, ease),
		visibility var(--bn-dur-fast, 0.12s) var(--bn-ease, ease);
}

/* The menu opens on CLICK only. One opener, one closer.
 *
 * It used to open on :hover AND :focus-within, with no script. Both had to go,
 * and for the same underlying reason: neither can be undone by the control that
 * caused it.
 *
 *  - :focus-within — clicking the caret focused it, focus stayed put, so a
 *    second click could not close the menu. Only clicking elsewhere released it.
 *  - :hover — closing on the second click then LOOKED broken anyway, because the
 *    pointer is still resting on the caret and hover immediately re-opened what
 *    the click had just closed. Verified: after a second click the menu stayed
 *    visible until the pointer moved away.
 *
 * A hover-opened menu and a click-toggled menu cannot coexist on one element.
 * Click-only is what Facebook, X and LinkedIn all do with the account menu, and
 * it is the standard menu-button pattern: the button owns the state, exposes it
 * as aria-expanded, and assets/js/header/user-menu.js closes on a second click,
 * Escape, an outside click, or focus leaving.
 */
.bn-header-user.is-open .bn-header-user__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bn-header-user.is-open .bn-header-user__caret {
	transform: rotate(180deg);
}

.bn-header-user__head {
	padding: var(--bn-s2, 0.5rem) var(--bn-s3, 0.75rem) var(--bn-s3, 0.75rem);
	margin-bottom: var(--bn-s1, 0.25rem);
	border-bottom: 1px solid var(--bn-line-faint, #eef2f6);
}

.bn-header-user__name {
	display: inline-block;
	font-weight: var(--bn-fw-semibold, 600);
	font-size: var(--bn-text-sm, 0.875rem);
	color: var(--bn-ink, #0f172a);
	text-decoration: none;
}

.bn-header-user__name:hover,
.bn-header-user__name:focus-visible {
	color: var(--bn-accent, #2563eb);
	text-decoration: underline;
}

.bn-header-user__item {
	display: flex;
	align-items: center;
	gap: var(--bn-s3, 0.75rem);
	padding: var(--bn-s2, 0.5rem) var(--bn-s3, 0.75rem);
	border-radius: var(--bn-r-md, 0.5rem);
	color: var(--bn-ink-2, #334155);
	font-size: var(--bn-text-sm, 0.875rem);
	text-decoration: none;
	transition: background var(--bn-dur-fast, 0.12s) var(--bn-ease, ease),
		color var(--bn-dur-fast, 0.12s) var(--bn-ease, ease);
}

.bn-header-user__item:hover,
.bn-header-user__item:focus-visible {
	background: var(--bn-sunken, #f1f5f9);
	color: var(--bn-ink, #0f172a);
}

.bn-header-user__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Reserve the icon column so injected menu items without an icon still
	   align their labels with the icon'd defaults. */
	width: 20px;
	flex-shrink: 0;
	color: var(--bn-ink-3, #64748b);
}

.bn-header-user__item.is-logout {
	margin-top: var(--bn-s1, 0.25rem);
	border-top: 1px solid var(--bn-line-faint, #eef2f6);
	border-radius: 0 0 var(--bn-r-md, 0.5rem) var(--bn-r-md, 0.5rem);
	color: var(--bn-danger, #dc2626);
}

.bn-header-user__item.is-logout .bn-header-user__item-icon {
	color: var(--bn-danger, #dc2626);
}

.bn-header-user__item.is-logout:hover,
.bn-header-user__item.is-logout:focus-visible {
	background: var(--bn-danger-bg, #fef2f2);
	color: var(--bn-danger, #dc2626);
}

/* ── Mobile (<= 640px) ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.bn-header-user-section {
		gap: var(--bn-s1, 0.25rem);
	}

	/* Hover-open is unreliable on touch; the dropdown opens via focus-within
	   (tapping the caret). Anchor it to the screen edge so it never overflows. */
	.bn-header-user__dropdown {
		inset-inline-end: 0;
		min-width: min(260px, calc(100vw - 1.5rem));
	}

	/* The host theme's mobile header gives this control an AVATAR-sized slot —
	   Reign's .reign-user-toggler is 40px. Laid out in flow the avatar plus its
	   caret is 60px, and flex-shrink:0 above (correctly) refuses to be squeezed,
	   so the control hung 20px past its slot and 5px past the viewport: every
	   page could be scrolled sideways at 390px.

	   Taking the caret out of flow makes our box the avatar, which fits any
	   slot. Because it is absolute, its 40px touch target costs no layout width
	   — the alternative, shrinking the caret to fit, would have traded a
	   sideways scroll for an untappable control. */
	.bn-header-user__caret {
		position: absolute;
		inset-block-end: -4px;
		inset-inline-end: -4px;
		width: 40px;
		height: 40px;
		margin-inline-start: 0;
		align-items: flex-end;
		justify-content: flex-end;
	}

	/* Sitting on the avatar, the bare glyph reads as a rendering accident. The
	   chip is what makes it read as a control — and it has to carry its own
	   surface, because the avatar behind it is whatever colour that member's
	   is. Drawn on the icon, not the button, so the 40px touch target stays
	   invisible and stays 40px. */
	.bn-header-user__caret svg {
		width: 18px;
		height: 18px;
		padding: 2px;
		background: var(--bn-surface, #fff);
		border: 1px solid var(--bn-line, #e2e8f0);
		border-radius: var(--bn-r-full, 999px);
		box-shadow: var(--bn-shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.08));
	}
}