/*
 * The site header.
 *
 * Values from the BuddyBoss theme options export: 76px tall, white on the page
 * tint, sticky, a shadow, links #1e2132. Every one is a token, so the next site
 * changes the token and not this file.
 *
 * The bar is a `nav` inside the `<header>` Bricks supplies. Two header
 * landmarks would be invalid and nothing in the build catches it.
 *
 * ⚠️ Layout lives here, never on the elements. A _display setting generates a
 * `#brxe-{id}

` rule, which is ID specificity and beats every class below: the
 * desktop nav stayed flex at 375px and pushed the bar to 428px wide.
 */

/* Full width so the white runs edge to edge... */
.oview-header {
	/* The Bricks section wrapping this is a flex container, so without an
	   explicit width the nav sizes to its content and floats centred: measured
	   1031px inside a 1440px section. */
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-surface);
	/* header_shadow: 1 */
	box-shadow: 0 1px 3px rgb(30 33 50 / 6%);
}

/* ...and an inner wrapper at page width, so the wordmark lines up with the
   content below it. Same 1280 and same gutter as the container theme style. */
.oview-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-l);
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	/* header_height: 76 */
	min-height: 7.6rem;
	padding-inline: var(--space-m);
}

.oview-header__left {
	display: flex;
	align-items: center;
	gap: var(--space-s);
}

/* The nav sits next to the wordmark; only the actions are pushed right. */
.oview-header__right {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-inline-start: auto;
}

.oview-header__logo {
	font-size: var(--text-l);
	font-weight: 700;
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
}

/* --- primary nav -------------------------------------------------------- */

.oview-header__nav {
	display: flex;
	align-items: stretch;
	align-self: stretch;
	gap: var(--space-2xs);
}

/*
 * The item is the full height of the bar, so the active underline can sit on
 * the bar's bottom edge while the hover pill stays inset. Two pseudo-elements
 * rather than one: hover and active are different shapes in this design and
 * sharing one would make them fight.
 */
.oview-header__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	padding-inline: var(--space-s);
	color: var(--color-text);
}

/* The hover pill, inset from the bar's edges. */
.oview-header__item::before {
	content: "";
	position: absolute;
	inset: var(--space-s) 0;
	border-radius: var(--radius-s);
	background: transparent;
	transition: background 120ms ease;
}

.oview-header__item:hover::before,
.oview-header__item:focus-within::before {
	background: var(--color-surface-sunk);
}

/* The active underline, on the bar's bottom edge and deliberately thin. */
.oview-header__item::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: transparent;
}

.oview-header__item:has(.oview-header__link[aria-current="page"])::after {
	background: var(--color-accent);
}

/* The svg element renders AS the <svg>, not wrapped in a div, so this sizes
   the tag itself. currentColor inside means it follows the link colour. */
.oview-header__icon {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	color: inherit;
}

.oview-header__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-size: var(--text-m);
	font-weight: 500;
	/* Hover moves the background, not the text. Only the active item is ever a
	   different colour, and here it is not one either. */
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

/* The whole item is the target, not just the words. */
.oview-header__link::after {
	content: "";
	position: absolute;
	inset: 0 calc(var(--space-s) * -1) 0 calc(var(--space-s) * -1 - 2.4rem);
}

/* --- actions: search, account ------------------------------------------- */

.oview-header__action {
	display: block;
	flex: 0 0 auto;
	box-sizing: content-box;
	width: 2.2rem;
	height: 2.2rem;
	/* Padding rather than width, so the tag stays 22px while the target is 44. */
	padding: 1.1rem;
	border-radius: var(--radius-full);
	color: var(--color-text-body);
}

.oview-header__action:hover,
.oview-header__action:focus-visible {
	background: var(--color-surface-sunk);
	color: var(--color-text);
}

/* BuddyBoss's hairline between search and the account cluster. */
.oview-header__sep {
	width: 1px;
	height: 2.4rem;
	margin-inline: var(--space-2xs);
	background: var(--color-border);
}

/* --- the hamburger, which becomes an X ---------------------------------- */

/*
 * Bricks renders the toggle as `<span class="brxa-wrap"><span class="brxa-inner">`
 * and ships no CSS for it on a header template, the same gap as the offcanvas.
 * So the three bars, and the X, are drawn here. aria-expanded is the state
 * Bricks already flips, so nothing extra has to track it.
 */
.oview-header__burger {
	display: none;
	align-items: center;
	justify-content: center;
	/* A primary control, so a comfortable target rather than the 24px floor. */
	min-width: 4.4rem;
	min-height: 4.4rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text);
	cursor: pointer;
}

.oview-header__burger .brxa-wrap {
	position: relative;
	display: block;
	width: 2.2rem;
	height: 1.6rem;
}

.oview-header__burger .brxa-inner,
.oview-header__burger .brxa-inner::before,
.oview-header__burger .brxa-inner::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 180ms ease, opacity 120ms ease;
}

.oview-header__burger .brxa-inner { top: 50%; transform: translateY(-50%); }
.oview-header__burger .brxa-inner::before { content: ""; top: -0.7rem; }
.oview-header__burger .brxa-inner::after  { content: ""; top: 0.7rem; }

/* Open: the middle bar goes, the outer two cross. */
.oview-header__burger[aria-expanded="true"] .brxa-inner {
	background: transparent;
}

.oview-header__burger[aria-expanded="true"] .brxa-inner::before {
	top: 0;
	transform: rotate(45deg);
}

.oview-header__burger[aria-expanded="true"] .brxa-inner::after {
	top: 0;
	transform: rotate(-45deg);
}

/* --- mobile ------------------------------------------------------------- */

/*
 * ⚠️ 1279px, AND IT WAS 767px, WHICH LEFT A 500px BAND WITH A SCROLLBAR IN IT.
 *
 * The bar switches to the burger below Bricks' own desktop breakpoint, because
 * that is where the desktop nav stops fitting. Measured on `/fragrances/`: the
 * nav alone is ~660px, and with the wordmark and the account controls the bar
 * needs ~1127px. At 767px the burger appeared - so from 768px to 1127px the
 * desktop nav was rendered in a bar too narrow to hold it and the whole
 * document overflowed. 326px of horizontal scrollbar at 768px, 207px at 900px,
 * 27px at 1100px, and nothing at 1280px.
 *
 * That is every iPad, every small laptop and every half-screen window, and it
 * had been there the whole time. `check-mobile.js` never saw it because it only
 * ever loaded 375px, where the burger is correct - a gate that tests one width
 * cannot find a bug that lives between two. It now tests a tablet width too.
 *
 * ⚠️ TWO BLOCKS, AND THEY MUST AGREE. This one lays out the bar; the one below
 * positions the drawer under it and hard-codes the same 6rem bar height. A
 * breakpoint changed in one and not the other opens the drawer in mid-air.
 */
@media (max-width: 1279px) {
	.oview-header__inner {
		/* Three columns, so the wordmark is centred by the grid rather than by
		   guessing at the widths either side of it. */
		display: grid;
		grid-template-columns: 4.4rem 1fr auto;
		align-items: center;
		gap: 0;
		min-height: 6rem;
		padding-inline: var(--space-xs);
	}

	.oview-header__burger { display: inline-flex; }

	/* The nav lives in the panel at this width, not in the bar.
	   ⚠️ UNDER #brx-header, because a drawn header's own class says
	   `display: flex` on the same element and loads later: at one class each,
	   the drawing won and a 375px page was 525px wide (D222). */
	#brx-header .oview-header__nav { display: none; }

	.oview-header__left { justify-self: start; }

	.oview-header__logo {
		grid-column: 2;
		justify-self: center;
		font-size: var(--text-m);
	}

	.oview-header__right { margin-inline-start: 0; justify-self: end; }
	.oview-header__sep { display: none; }
}

/* --- the menu panel ----------------------------------------------------- */

/*
 * A panel under the header, not a slide-out drawer, and no dimmed backdrop.
 * The first version was an overlay whose backdrop greyed the menu as well as
 * the page: a negative z-index child of a stacking context paints above that
 * element's own background, so the tint landed on top of the white.
 *
 * ⚠️ Bricks ships NO offcanvas CSS on a header template. Measured: zero rules
 * matching .brxe-offcanvas, the panel computed to position:static with no
 * transform, and its width setting never applied. All of the behaviour is here,
 * which also means a Bricks update cannot take it away.
 */
.oview-drawer {
	display: none;
}

/* ⚠️ Must match the bar's breakpoint above, and the 6rem is that bar's height. */
@media (max-width: 1279px) {
	.oview-drawer {
		position: fixed;
		/* Directly under the bar, wherever it ends. header.js measures it into
		   --oview-header-bottom; 6rem is site one's bar, the fallback before it
		   runs. A fixed 6rem put the panel over a shorter drawn header, burger
		   and all, so the menu could be opened and never closed (D222). */
		top: var(--oview-header-bottom, 6rem);
		left: 0;
		right: 0;
		z-index: 90;
		max-height: calc(100dvh - var(--oview-header-bottom, 6rem));
		overflow-y: auto;
		border-top: 1px solid var(--color-border);
		background: var(--color-surface);
		box-shadow: 0 12px 24px rgb(30 33 50 / 8%);
	}

	.oview-drawer.brx-open {
		display: block;
	}

	/* Full-width rows with hairlines. Simple, and it reads as a list rather
	   than as a floating card inside a card. */
	.oview-drawer__item {
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--space-s);
		min-height: 5.6rem;
		/* The page's own gutter, so a row's words start where the header's do. */
		padding-inline: var(--gutter, var(--space-m));
		border-bottom: 1px solid var(--color-border);
		color: var(--color-text);
	}

	.oview-drawer__item:last-child {
		border-bottom: 0;
	}

	.oview-drawer__item:hover,
	.oview-drawer__item:focus-within {
		background: var(--color-surface-sunk);
	}

	.oview-drawer__item:has(.oview-drawer__link[aria-current="page"]) {
		background: var(--color-accent-soft);
		color: var(--color-on-accent-soft);
	}

	.oview-drawer__icon {
		display: block;
		flex: 0 0 auto;
		width: 2rem;
		height: 2rem;
		color: inherit;
	}

	.oview-drawer__link {
		font-size: var(--text-m);
		font-weight: 500;
		color: inherit;
		text-decoration: none;
	}

	/* The whole row is the target. */
	.oview-drawer__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}
}

/*
 * The signed-in account icon.
 *
 * ⚠️ Marked, not just linked. Two people looking at the same header should be
 * able to tell whether they are signed in without clicking anything, and the
 * icon is the only thing in the header that differs. A filled circle is the
 * cheapest honest signal.
 */
.oview-header__action--mine {
	background: var(--color-surface-sunk);
	color: var(--color-accent-ink);
}

.oview-header__action--mine:hover {
	background: var(--color-accent);
	color: var(--color-surface);
}

/* --------------------------------------------------------------------------
 * The account menu.
 *
 * BuddyBoss's shape: avatar and name as the trigger, a card of links under it,
 * the way out at the bottom behind a rule. Every value is a token, and the
 * items borrow the same hover and focus language as the nav above them.
 * -------------------------------------------------------------------------- */

.oview-account {
	position: relative;
}

.oview-account__trigger {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: var(--space-2xs) var(--space-xs);
	background: none;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	font: inherit;
	color: var(--color-text);
	cursor: pointer;
}

/*
 * ⚠️ A HOVER LIGHTS THE LABEL, HERE TOO (D224). This took the sunk surface and
 * left its text alone, so the one control in the header that says who you are
 * was the one that did not answer a pointer the way every card and link on the
 * site does. And an open menu is a SELECTED state, a step further than a hover.
 */
.oview-account__trigger:hover {
	background: var(--hover-ground);
	color: var(--hover-ink);
}

.oview-account.is-open .oview-account__trigger {
	background: var(--color-surface-on);
}

.oview-account__trigger:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/*
 * ⚠️ THE `img` RULE STAYS FOR `/account/`, which still shows a real photo, and
 * because a site is free to put one here too. The header no longer draws one.
 */
.oview-account__trigger img {
	inline-size: 3.2rem;
	block-size: 3.2rem;
	border-radius: var(--radius-full);
	object-fit: cover;
}

/*
 * The circle the header actually draws now: an initial, not a Gravatar.
 *
 * ⚠️ SHAPE AND SIZE HERE, COLOUR NOWHERE. `{ovp_my_avatar}` emits an index from
 * 1 to 5 and the SITE says what each one is, the same way the review list works
 * - so a site with no avatar palette gets a plain circle rather than a broken
 * one, and the platform names no colour (D45).
 */
/*
 * ⚠️ `.oview-avatar` IS THE BARE TAG'S CLASS AND IT HAD NO RULE.
 * `{ovp_my_avatar}` with no parameter falls back to it, and
 * `check-authored-classes.js` caught that it renders as an unstyled span - which
 * looks exactly like a design decision. A default a caller can reach has to be
 * drawn, or the parameter is not optional.
 */
.oview-avatar,
.oview-account__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	inline-size: 3.2rem;
	block-size: 3.2rem;
	border-radius: var(--radius-full);
	color: var(--color-text, inherit);
	font-size: var(--text-xs, 12px);
	font-weight: 700;
	line-height: 1;
}

/* The neutral floor for this one lives in `engage.css` beside the review
   circle's, because they are the same default and one place should hold it. */

.oview-account__name {
	font-size: var(--text-xs);
	font-weight: 500;
}

/* The name is the first thing to go when the bar gets tight: the avatar alone
 * still says whose account it is. */
@media (max-width: 600px) {
	.oview-account__name {
		display: none;
	}
}

.oview-account__menu {
	position: absolute;
	inset-block-start: calc(100% + var(--space-2xs));
	inset-inline-end: 0;
	z-index: 20;
	display: none;
	flex-direction: column;
	min-inline-size: 22rem;
	/*
	 * ⚠️ `gap: 0`, BECAUSE THE ITEMS ALREADY SPACE THEMSELVES. This is a flex
	 * column that never said what its gap was, so it inherited one - 10.9px
	 * between rows that each carry their own padding and their own hover
	 * background, on top of the divider margins below. Three items read as a
	 * loose stack instead of a menu.
	 *
	 * Same call as the list view and the page frame: one owner for a spacing,
	 * and here it is the row.
	 */
	gap: 0;
	padding: var(--space-2xs);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-l-2);
	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.oview-account.is-open .oview-account__menu {
	display: flex;
}

.oview-account__who {
	display: flex;
	flex-direction: column;
	padding: var(--space-xs);
	border-block-end: 1px solid var(--color-border);
	margin-block-end: var(--space-2xs);
	line-height: 1.3;
}

.oview-account__who span {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.oview-account__item {
	padding: var(--space-xs);
	border-radius: var(--radius-s);
	font-size: var(--text-xs);
	color: var(--color-text);
	text-decoration: none;
}

.oview-account__item:hover,
.oview-account__item:focus-visible {
	background: var(--color-surface-sunk);
	color: var(--color-text);
}

.oview-account__item:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

/* ⚠️ The way out sits behind a rule so it is not next to anything you might hit
 * by accident, which is the one item in here nobody wants to press twice. */
.oview-account__item--out {
	margin-block-start: var(--space-2xs);
	padding-block-start: var(--space-xs);
	border-block-start: 1px solid var(--color-border);
	border-radius: 0;
	color: var(--color-text-muted);
}

/*
 * The light and dark switch (D222): Bricks' own "Toggle - Mode" element,
 * placed by `data-ov-part="engine:scheme-toggle"` in a drawing.
 *
 * Bricks draws one button holding a sun and a moon and hides whichever mode is
 * not current. Here both show, as a pill, and the current one sits on a raised
 * disc, so the control says what it does before anybody presses it.
 *
 * ⚠️ BRICKS HIDES THE OTHER ICON AT 0-5-0 (`:root[data-brx-theme=dark]
 * .brxe-toggle-mode .toggle.light`), so showing both takes 0-6-0. Nothing else
 * here needs the weight.
 */
.oview-scheme-toggle.brxe-toggle-mode {
	display: inline-flex;
	gap: 0.2rem;
	padding: 0.3rem;
	border-radius: var(--radius-full);
	background: var(--color-surface-sunk-2);
	box-shadow: inset 0 0 0 var(--border-hair) var(--color-border);
}
:root[data-brx-theme] .oview-scheme-toggle.brxe-toggle-mode .toggle.toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.2rem;
	block-size: 3.2rem;
	border-radius: var(--radius-full);
	font-size: 1.8rem;
	transition: background-color 0.2s, box-shadow 0.2s;
}
.oview-scheme-toggle .toggle.light {
	color: var(--accent-semi-dark, #b7791f);
}
.oview-scheme-toggle .toggle.dark {
	color: var(--tertiary-semi-dark, #7c3aed);
}
:root[data-brx-theme="light"] .oview-scheme-toggle .toggle.light,
:root[data-brx-theme="dark"] .oview-scheme-toggle .toggle.dark {
	background: var(--color-surface);
	box-shadow: 0 1px 3px oklch(0 0 0 / 0.18);
}
.oview-scheme-toggle.brxe-toggle-mode:focus-visible {
	outline: 2px solid var(--color-accent-ink);
	outline-offset: 2px;
}