/**
 * 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);
	color: var(--bn-ink-2, #475569);
	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 {
	background: var(--bn-sunken, #f1f5f9);
	color: var(--bn-ink, #0f172a);
}

.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 count: a corner badge over the bell's top-right (like every
   social app), not an inline pill beside it. The surface-coloured ring cuts the
   badge out from the icon. */
.bn-block-notification-bell .bn-notification-badge {
	position: absolute;
	top: 1px;
	right: 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-left: 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));
	right: 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);
}

/* Open on hover (pointer) and on focus-within (keyboard / touch). Rotate the
   caret to signal the open state. No JavaScript. */
.bn-header-user:hover .bn-header-user__dropdown,
.bn-header-user:focus-within .bn-header-user__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bn-header-user:hover .bn-header-user__caret,
.bn-header-user:focus-within .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 {
		right: 0;
		min-width: min(260px, calc(100vw - 1.5rem));
	}
}