/*
 * What this site adds to the header the mockup drew.
 *
 * ⚠️ NOT IN `assets/mockups/site-header-mock4.css`, WHICH IS GENERATED.
 *
 * `mockup-decompose.php` writes that file from the mockup every time the header
 * is decomposed, so a rule added there survives until the next import and then
 * disappears with no error. Anything this site decides about the header belongs
 * in a file this site owns, which is this one.
 *
 * ⚠️ IT LOADS BEFORE THE PROMOTED FILE, which is deliberate and is also the
 * limit of what belongs here. The mockup's own rules win on a property both
 * set, so this file is for what the design did not express rather than for
 * arguing with it. `box-shadow` is unset over there, so it lands.
 */

/*
 * ⚠️ A HAIRLINE ALONE DOES NOT SEPARATE A STICKY HEADER FROM WHAT SCROLLS UNDER
 * IT. The mockup drew a 1px border, which reads as a drawn line on a page that
 * is not moving and as nothing at all once content slides beneath it. The old
 * header carried `0 1px 3px rgb(30 33 50 / 6%)` for exactly this reason.
 *
 * Two layers rather than one: a tight one that thickens the line itself, and a
 * wide, mostly transparent one that lifts the bar off the page. One layer at an
 * opacity high enough to be seen at a distance reads as a grey band under the
 * border rather than as depth.
 *
 * The border stays. The shadow is not a replacement for it: at this opacity it
 * disappears in high-contrast and forced-colours modes, where the border is the
 * only thing still separating the header from the page.
 */
.ov-header {
	box-shadow:
		0 1px 2px rgb(30 33 50 / 4%),
		0 6px 16px -6px rgb(30 33 50 / 8%);
}

/*
 * ⚠️ THE HEADER IS A `section`, AND BRICKS PADS EVERY SECTION.
 *
 * Bricks writes `.brxe-section { padding-top: var(--space-l); padding-bottom:
 * var(--space-xl) }

` as a theme style, inline in the head. The design says
 * `.ov-header { padding: 0 }

` and loses: same specificity, and an inline style
 * block comes after every enqueued sheet. The bar rendered 106px tall against
 * the 70px it was drawn at, with the extra 35px sitting outside the row so it
 * read as a header that had simply been made fatter.
 *
 * Two classes rather than one, so this wins on specificity and stops depending
 * on what the cascade happens to read last.
 */
.brxe-section.ov-header {
	padding: 0;
}

/*
 * ⚠️ THE DESIGN'S NAV GOES AWAY WHERE THE DRAWER APPEARS.
 *
 * `header.css` in the platform already hides `.oview-header__nav` below 1279px
 * and shows `.oview-header__burger` there, which is the whole mobile behaviour
 * and is why the drawer needed no new CSS. The mock4 header calls its nav
 * `.ov-nav`, so the platform's rule does not reach it: without this the bar
 * shows six links AND a hamburger, wrapping onto three lines.
 *
 * The breakpoint is the platform's, deliberately. Two numbers that must agree
 * and live in two files is a header that has a burger and a nav at some widths
 * and neither at others.
 */
@media (max-width: 1279px) {
	/*
	 * Three classes, because the promoted frame says `.ov-header .ov-nav`
	 * at two and loads after every site file. Matched at two this loses on
	 * order, and the bar shows six links AND a hamburger.
	 */
	.brxe-section.ov-header .ov-nav {
		display: none;
	}
}

/*
 * ⚠️ THE CURRENT PAGE IS THE ONE THE BROWSER SAYS IT IS.
 *
 * The drawing painted `ov-nav__link--current` onto Fragrances, because that is
 * the page the designer drew. It shipped that way: every page in the site,
 * whatever you were looking at, showed Fragrances as current - and `/notes/`
 * showed Notes as current at the same time, because WordPress had already put
 * `aria-current="page"` in the right place all along.
 *
 * So the state moves to the attribute that is already true. A drawn state is a
 * picture of one moment; the design has to key off the real one.
 *
 * ⚠️ AND IT IS AN ATTRIBUTE SELECTOR ON PURPOSE. This file loads before the
 * stylesheets promoted out of the mockup, so a plain class here would lose to
 * the drawn rule. `[aria-current]` outranks it without an `!important`.
 */
.ov-nav__link[aria-current="page"] {
	font-weight: 600;
	background: var(--color-surface-sunk-2);
}

/*
 * ⚠️ ONE HOVER GREY IN THE BAR, AND IT IS THE DECLARED ONE.
 *
 * The nav links lit up `--color-surface-hover` and the account control beside
 * them `--color-surface-sunk`: two greys, one bar. `check-class-drift.js` could
 * not see it, because it signs a class by its RESTING state and nothing in CI
 * hovers anything. It reads declared `:hover` backgrounds now, and says there
 * are ten of them across the site.
 *
 * ⚠️ AND `--color-surface-hover` IS NOT A TOKEN THIS SITE DECLARES. It comes
 * from the drawing's own scale and lives only inside the promoted part files,
 * exactly like `--text-m-2`. So the nav moves to the declared one rather than
 * the platform moving to the undeclared one - which is the direction that was
 * tempting, and wrong.
 *
 * Scoped to `.ov-header` because this file loads before the promoted parts, and
 * a bare `.ov-nav__link:hover` here would lose to the drawn rule.
 */
.ov-header .ov-nav__link:hover {
	background: var(--color-surface-sunk);
}

/*
 * ⚠️ AND THE ACCOUNT CONTROL IS A NAV ITEM, so it lights up like one.
 *
 * The colour was made to agree above; the SHAPE was not. `oview-bricks` draws
 * the trigger as a small pill - `--radius-full` and a tighter inset - while
 * every link beside it is a rounded rectangle at `--radius-m` with the bar's
 * own padding. Hovering the last item in the bar lit a differently shaped box
 * than hovering any other, which is the one place a reader compares them.
 *
 * The floor stays a pill, because a site with no header design still wants a
 * round avatar chip. This is the site saying otherwise.
 */
.ov-header .oview-account__trigger {
	gap: var(--space-s);
	min-height: var(--tap-min);
	padding: var(--space-s) var(--space-m);
	border-radius: var(--radius-m);
	font-size: var(--text-l);
	font-weight: 500;
}

/*
 * ⚠️ AND THE CTA STANDS DOWN ON THE PAGE IT POINTS AT. "Join the discussion"
 * links to `/forum/`, so on the forum it is a button offering to take a reader
 * where they already are. `body.asgaros-forum` is the plugin's own class and
 * covers every page it renders, including the topic and profile views.
 */
body.asgaros-forum .ov-header [data-ov-name="add-review-btn"] {
	display: none;
}

/*
 * ⚠️ TWO `<h1>`s SAYING "FORUM", AND ONLY ON THE OVERVIEW.
 *
 * WordPress renders the page title, and Asgaros renders its own heading inside
 * `#af-wrapper`. On `/forum/` both say the same word; on a topic or a board
 * Asgaros's says the topic or the board, which is the useful one - and its
 * class changes with the view, so `--overview` names exactly the duplicate.
 *
 * ⚠️ THE PAGE TITLE IS THE ONE THAT STAYS. It is the h1 the site frames,
 * sizes and spaces like every other page; Asgaros's is styled by Asgaros and
 * sits under a breadcrumb. Blanking `forum_title` does NOT remove it - it
 * falls back to the page title - which is why this is a rule rather than a
 * setting.
 */
/*
 * ⚠️ THE ID IS IN THE SELECTOR BECAUSE ASGAROS'S IS. Its own
 * `#af-wrapper .main-title { display: block }` scores an id, so
 * `body.asgaros-forum h1.main-title-overview` matched and lost - present,
 * correct and inert, with two headings still on the page and nothing saying
 * why. Matching the id and adding a class is the smallest thing that wins.
 */
#af-wrapper h1.main-title-overview {
	display: none;
}

/*
 * ⚠️ AND THE OTHER WAY ROUND EVERYWHERE ELSE. Off the overview, Asgaros's
 * title says the thing you are looking at - "First Forum", a topic name,
 * "Members" - and WordPress's still says "Forum". So on those views the page
 * title stands down and Asgaros's is the h1. One heading per page, and always
 * the one naming what is on it.
 */
body.asgaros-forum:not(.asgaros-forum-overview) #brx-content > h1 {
	display: none;
}

/*
 * ⚠️ AND IT IS SIZED LIKE A PAGE TITLE, because on those views it IS the page
 * title. Asgaros's stylesheet shrinks it to its own scale, which left a topic
 * name rendering smaller than the body text around it.
 */
#af-wrapper .main-title {
	font-family: var(--font-serif);
	font-size: var(--h1);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.12rem;
	margin-block-end: var(--space-l);
}

/* ==========================================================================
 * The site chrome, adopted.
 *
 * ⚠️ MERGED, THEN SPLIT. These 27 rules were part of 101,894 bytes adopted
 * out of 26 promoted stylesheets, appended in the order those files used to
 * load. That preserved every collision exactly, which was the right thing to do
 * during the move and the wrong thing to leave behind: 64 selectors were
 * declared more than once and .ov-card was declared by NINE different drawings,
 * so what the site looked like depended on a filename sort.
 *
 * One selector, one home, one value. Merged property by property with the last
 * declaration winning, which is what the browser was already computing - so the
 * pages render identically and the file now says what it means.
 *
 * ⚠️ Classified on the LEFTMOST class. `.ov-col-side .ov-card` is a card seen
 * inside a sidebar, so it belongs with the sidebar rather than with the card.
 * ========================================================================== */

.ov-brand {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-m);
	flex-shrink: 0;
}

.ov-brand__mark {
	/* ⚠️ A SIZE, NOT A SPACE. The old importer tokenised every length it met
	 * into the spacing scale, so this borrowed a spacing step and would have
	 * turned fluid with it. A mark's dimension has no scale to follow. */
	width: 2.4rem;
	height: 2.4rem;
	/* ⚠️ NO BACKGROUND AND NO RADIUS ANY MORE. Those drew the coloured square a
	 * drawing puts where a logo will go, and the logo is here: the element is
	 * the pyramid now, so painting a block behind it would show as a tile with
	 * a shape stamped out of it. The colour moves to `color`, because every
	 * path in the file is `currentColor`. */
	display: block;
	/* ⚠️ A FLEX CHILD SHRINKS UNLESS TOLD NOT TO, and an svg shrinks out of
	 * square rather than getting smaller: measured 14x24 in a 24x24 box, so the
	 * pyramid arrived squashed sideways while both CSS dimensions said 2.4rem. */
	flex-shrink: 0;
	color: var(--color-accent);
}

.ov-brand__name {
	font-family: var(--font-serif);
	/* ⚠️ THE WORDMARK'S OWN SIZE, FOR THE REASON `.ov-brand__mark` HAS ONE.
	 * It sat on `--text-2xl`, which made the site's name a step on the body
	 * text scale, and it read a little small beside the mark. This is that
	 * clamp moved up 0.2rem at both ends, so it keeps the same fluid slope and
	 * the same relationship to the viewport and is simply two pixels larger:
	 * 20 to 23 where it was 18 to 21.
	 * A brand's own dimension has no scale to follow, which is what the note
	 * above the mark says about its 2.4rem. */
	font-size: clamp(2rem, calc(0.2982107356vw + 1.8926441352rem), 2.3rem);
	letter-spacing: 0.02rem;
}

.ov-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	flex: 1 1 auto;
	min-width: max-content;
}

.ov-nav__link {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-s);
	min-height: var(--tap-min);
	padding: var(--space-s) var(--space-m);
	border-radius: var(--radius-m);
	font-size: var(--text-l);
	font-weight: 500;
	white-space: nowrap;
	box-sizing: border-box;
}

.ov-nav__link:hover {
	background: var(--color-surface-hover);
	color: var(--color-text);
}

.ov-header {
	display: block;
	align-items: stretch;
	padding: 0;
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--color-page-veil);
	backdrop-filter: blur(1rem);
	border-bottom: var(--border-hair) solid var(--color-border);
}

.ov-header__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	row-gap: var(--space-m);
	gap: var(--space-2xl);
	padding: var(--space-l) var(--space-3xl);
	max-width: var(--width-page);
	margin: 0 auto;
	box-sizing: border-box;
	container-type: inline-size;
}

.ov-header .ov-nav__link {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-s);
	min-height: var(--tap-min);
	padding: var(--space-s) var(--space-m);
	border-radius: var(--radius-m);
	font-size: var(--text-l);
	font-weight: 500;
	white-space: nowrap;
	box-sizing: border-box;
}

.ov-header__tools {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-l);
	flex-shrink: 0;
}

.ov-header .ov-btn {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-family: var(--font-sans);
	font-weight: 600;
	white-space: nowrap;
	min-height: var(--tap-min);
	color: var(--color-on-accent);
	background: var(--color-accent-ink);
	border-radius: var(--radius-m);
	cursor: pointer;
	box-sizing: border-box;
}

/*
 * ⚠️ THE HEADER CTA'S OWN HOVER IS GONE, for the same reason as the eight in
 * modules.css: it restated `.ov-btn:hover` and reached for
 * `--color-accent-hover`, which is the colour the button already rests at. The
 * base rule darkens correctly now and this only got in its way.
 */

.ov-header .ov-btn--header {
	font-size: var(--text-l);
	padding: var(--space-s) var(--control-px);
}

.ov-header .ov-divider-v {
	width: var(--border-hair);
	height: var(--control-h-s);
	background: var(--color-border);
}

.ov-header .ov-count {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color-on-accent);
	background: var(--color-on-error-soft);
	border-radius: var(--radius-xl);
	padding: var(--space-3xs) var(--space-xs);
}

.ov-header .ov-btn {
	background: var(--color-accent-ink);
}

@media (max-width: 47.9rem) {
	.ov-nav {
		min-width: 0;
	}

	.ov-header__inner {
		padding: var(--space-m) var(--space-l);
		gap: var(--space-l);
	}

	.ov-header .ov-nav {
		min-width: 0;
	}

	/*
	 * ⚠️ NO WRAPPING, AND IT IS THE INNER THAT WAS WRAPPING.
	 *
	 * `flex-wrap: wrap` put "Join the discussion" and the account control on a
	 * row of their own, which doubled the header's height on a phone: a burger
	 * and a wordmark on one line with most of the width empty, and two buttons
	 * underneath. It only showed on a real phone, which is why it survived
	 * until the lab could be opened on one.
	 *
	 * ⚠️ THE FIRST FIX NAMED THE WRONG ELEMENT. `.ov-header__tools`
	 * was already `nowrap`; the wrap is declared on `.ov-header__inner`, which
	 * is the row holding the burger, the wordmark, the nav and the tools. The
	 * measured widths at 390px say why it had to break somewhere: 44 + 112 +
	 * 206 plus three gaps is 398 in 354 of usable width.
	 */
	.ov-header__inner {
		flex-wrap: nowrap;
	}

	.ov-header__tools {
		flex-wrap: nowrap;
	}

	/*
	 * ⚠️ AND THE CTA IS WHAT COMES OUT, because it is the one thing in
	 * the bar that is already somewhere else. The drawer behind the burger
	 * lists Forum, so "Join the discussion" is one tap away rather than gone,
	 * and 149px of a 354px bar goes back to the wordmark.
	 *
	 * The divider goes with it: it separates the CTA from the account control,
	 * and with one of the two absent it is a line beside nothing.
	 *
	 * What is left is what a phone header is everywhere else: a way into the
	 * menu, the name of the site, and who you are.
	 */
	.ov-header [data-ov-name="add-review-btn"],
	.ov-header [data-ov-name="header-divider"] {
		display: none;
	}

	/* With the CTA gone the tools would sit against the wordmark. */
	.ov-header__tools {
		margin-inline-start: auto;
	}
}

/* ==========================================================================
 * What ACSS does to a header, and why this file answers it here.
 * ========================================================================== */

/*
 * ⚠️ ONE GUTTER, AND IT IS ACSS'S - BUT ACSS NEVER REACHED THE HEADER.
 *
 * ACSS gives `:where(body > header)` and every top-level section the same
 * `padding-inline: var(--gutter)`. This header ALSO carried 40px of its own on
 * `.ov-header__inner`, so the bar's content sat at 120px while every section
 * below it sat at 80px, and the header read as indented.
 *
 * The first attempt zeroed ACSS's gutter on the wrapper instead. That put the
 * header at 40px against sections at 80px - still misaligned, just the other
 * way, and it took a working default off one element rather than removing the
 * duplicate. Deleting the site's copy is the smaller change and leaves the
 * gutter somewhere it can be set once, for every site.
 *
 * ⚠️ ACSS'S OWN HEADER RULE IS `:where(body > header)`, AND #brx-header IS NOT
 * A DIRECT CHILD OF BODY, so it never matched. The gutter is applied here
 * instead, with the same token, so the bar and the page inset together.
 *
 * ⚠️ ON THE BAR, NOT ON #brx-header. The first version padded the wrapper, and
 * `.ov-header` - which carries the background, the border-bottom and the
 * sticky - sits INSIDE that padding, so the whole bar was inset and the page
 * had a white strip down each side of it. Padding on the bar is drawn inside
 * its own background, so the background still spans the full width and only
 * the content moves. Same reason a section can be full-bleed and its text
 * still land on the measure.
 *
 * ⚠️ AND THIS ONLY SHOWS ON NARROW SCREENS, WHICH IS WHY IT SURVIVED REVIEW.
 * Above about 1440 the inner is capped at --width-page and centred, and
 * centring a fixed width inside a padded box lands in the same place as
 * centring it inside an unpadded one - the gutter cancels. Below that cap the
 * inner fills the width and the padding is the only thing holding it off the
 * edge, so the header sat flush at 0 against page content at 18.
 */
.brxe-section.ov-header {
	padding-block: 0;
	padding-inline: var(--gutter);
}

.ov-header__inner {
	padding-inline: 0;
}

/*
 * ⚠️ ACSS COLOURS EVERY LINK, INCLUDING THE ONES THAT ARE NOT PROSE.
 *
 * `body a:where(:not([class*="btn--"]))` sets `color: var(--link-color,
 * var(--primary))`. At 0-0-2 that beats this site's `a { color:
 * var(--color-text) }` at 0-0-1, so the whole nav bar turned accent blue while
 * the hamburger stayed dark - because the hamburger is a `button` and the rule
 * only reaches `a`. Same bar, two colours, decided by element name.
 *
 * A nav link is UI, not a link in a sentence. It takes the text colour and
 * reveals the accent on hover, which is also what the drawn design did: the
 * rule below at `.ov-nav__link:hover` already set `color: var(--color-text)`
 * for exactly this reason, back when the resting state inherited it for free.
 */
.ov-header .ov-nav__link,
.ov-header .oview-drawer__link,
.oview-drawer .oview-drawer__link {
	color: var(--color-text);
}

.ov-header .ov-nav__link:hover,
.ov-header .oview-drawer__link:hover,
.oview-drawer .oview-drawer__link:hover {
	color: var(--color-accent);
}

/*
 * ⚠️ SIGNED OUT GETS THE CIRCLE SIGNED IN ALREADY HAS.
 *
 * The header showed a round avatar chip to a member and a wide "Sign in" button
 * to everybody else, so the control moved and changed size depending on who was
 * looking. It is now the SAME circle in both states: `3.2rem`, `--radius-full`
 * and `--color-surface-sunk`, which is `.oview-account__avatar` in
 * `oview-bricks` - a person where a member has their initial.
 *
 * ⚠️ THE SIZE AND THE FILL ARE COPIED, NOT SHARED, because the two
 * controls are different elements in different plugins: the platform draws the
 * member's chip and the site draws this one. Nothing holds them together, so
 * moving one means moving both.
 *
 * ⚠️ AND `check-class-drift.js` IS MEANT TO SEE THEM AS ALIKE. It
 * fails the build on twins - two class names, one appearance - and these two
 * are deliberately close. They are not twins: this one carries the hidden
 * label, and only one of them is ever on a page, because a reader is either
 * signed in or is not.
 *
 * ⚠️ THE TEXT STAYS IN THE ACCESSIBILITY TREE. The label is not
 * deleted, it is pushed out of view, so the link is still announced as "Sign
 * in" and still found by a keyboard. An icon button whose only name is a
 * picture is a button nobody can name.
 *
 * ⚠️ A MASK, NOT A BACKGROUND IMAGE, so the glyph takes
 * `currentColor` and follows the button through hover and focus rather than
 * being a fixed colour baked into a data URI.
 */
.ov-header .oview-btn--primary[href*="/signin"] {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	inline-size: 3.2rem;
	min-inline-size: 3.2rem;
	block-size: 3.2rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	background: var(--color-surface-sunk);
	color: var(--color-text);
	overflow: hidden;
	text-indent: -100vw;
	white-space: nowrap;
}

/* The same hover the nav and the account trigger use. */
.ov-header .oview-btn--primary[href*="/signin"]:hover {
	background: var(--color-surface-sunk-2);
}

.ov-header .oview-btn--primary[href*="/signin"]:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.ov-header .oview-btn--primary[href*="/signin"]::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 1.8rem;
	block-size: 1.8rem;
	background: currentColor;
	-webkit-mask: var(--oview-icon-user) center / contain no-repeat;
	mask: var(--oview-icon-user) center / contain no-repeat;
}

/*
 * The glyph itself, declared once so the button above stays about layout.
 *
 * ⚠️ SOLID, NOT LINE ART. At 18px inside a filled circle a two-pixel
 * outline reads as a smudge; a silhouette reads as a person. It is the shape
 * every account menu on the web draws, which is the whole reason it works with
 * no label.
 */
:root {
	--oview-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12.2a4.6 4.6 0 1 0 0-9.2 4.6 4.6 0 0 0 0 9.2Z'/%3E%3Cpath fill='black' d='M12 14.1c-4.3 0-7.8 2.4-7.8 5.4 0 .8.7 1.5 1.6 1.5h12.4c.9 0 1.6-.7 1.6-1.5 0-3-3.5-5.4-7.8-5.4Z'/%3E%3C/svg%3E");
}