/**
 * Header navigation symbols and their tooltips.
 *
 * See inc/nav-symbols.php for what is replaced and why. The short version: five
 * destinations become line icons, everything else keeps its lettering, and the cost of
 * icon-only navigation is paid with an accessible name, a tooltip on hover *and* focus,
 * and the full label shown outright on mobile.
 */

.aethyrdancer-navsym {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--ad-space-2, 8px);
	line-height: 0;
}

.aethyrdancer-navsym__glyph {
	display: block;
	width: 1.55em;
	height: 1.55em;

	/*
	 * `currentColor` on the stroke and nothing else: the icon then inherits the nav's
	 * colour, its hover colour and its current-page colour without any of them being
	 * restated here. Astra owns those, and duplicating them is how they drift.
	 */
	color: inherit;
	overflow: visible;
}

/*
 * THE LABEL IS PRESENT, NOT ABSENT.
 *
 * This is the `.screen-reader-text` recipe rather than `display: none` — the text has to
 * stay in the accessibility tree, because it is the link's entire accessible name once the
 * word is gone. The same node is what the mobile breakpoint reveals, so there is one label
 * in the markup and no chance of the visible and spoken names disagreeing.
 */
.aethyrdancer-navsym__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * THE COUNT ON THE CART.
 *
 * A small disc on the glyph's shoulder, in the accent, hidden at zero. It is replaced
 * wholesale by the add-to-cart fragment (inc/nav-symbols.php), and `is-bump` is the one
 * beat of motion the header has: the disc swells and settles when the number changes.
 * Reduced motion is handled by the global rule in style.css, which zeroes the animation.
 */
.aethyrdancer-navsym__count {
	position: absolute;
	top: -0.45em;
	right: -0.6em;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 0.35em;
	border-radius: 999px;
	background: var(--ad-accent-soft, #8886de);
	color: var(--ad-ground-000, #030308);
	font-family: var(--ad-font-ui, inherit);
	font-size: 0.68em;
	font-weight: 600;
	line-height: 1.5em;
	letter-spacing: 0;
	text-align: center;
	pointer-events: none;
}

.aethyrdancer-navsym__count[data-count="0"] {
	display: none;
}

@keyframes aethyrdancer-count-bump {
	0% {
		scale: 1;
	}

	40% {
		scale: 1.35;
	}

	100% {
		scale: 1;
	}
}

.aethyrdancer-navsym__count.is-bump {
	animation: aethyrdancer-count-bump 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
 * The tooltip.
 *
 * Built from `data-label` on a pseudo-element rather than the `title` attribute: `title`
 * never appears on keyboard focus, cannot be styled, and waits on a browser delay nobody
 * can set. This one is instant, matches the site's own surface and type, and — the part
 * that matters — is triggered by `:focus-visible` as well as `:hover`, so tabbing through
 * the header names every destination.
 */
.aethyrdancer-navsym::after {
	content: attr(data-label);
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(-3px);
	z-index: 5;
	padding: 4px 9px;
	border: 1px solid var(--ad-ground-400, #3f3850);
	border-radius: var(--ad-radius, 3px);
	background: var(--ad-ground-000, #030308);
	color: var(--ad-text, #d5d0de);
	font-family: var(--ad-font-ui, inherit);
	font-size: var(--ad-text-xs, 0.8rem);
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 120ms ease, transform 120ms ease;
}

.menu-link:hover .aethyrdancer-navsym::after,
.menu-link:focus-visible .aethyrdancer-navsym::after,
a:hover > .aethyrdancer-navsym::after,
a:focus-visible > .aethyrdancer-navsym::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/*
 * ON A PHONE THE WORD IS THE LABEL, NOT A TOOLTIP.
 *
 * There is no hover on touch, so a tooltip is simply unreachable — an icon-only menu on a
 * phone is an icon-only menu with no way to find out what the icons mean. The drawer has
 * room for the words, so it gets them, and the tooltip is switched off rather than left
 * as a rule that can never fire.
 */
@media screen and (max-width: 921px) {
	.aethyrdancer-navsym__label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
		line-height: 1.2;
	}

	/* In the drawer the word is on the line, so the count sits after it rather than on
	   the glyph's shoulder, where it would collide with the label. */
	.aethyrdancer-navsym__count {
		position: static;
		margin-left: 0.5em;
	}

	.aethyrdancer-navsym::after {
		content: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aethyrdancer-navsym::after {
		transition: none;
		transform: translateX(-50%);
	}
}

/* -------------------------------------------------------------------------
 * THE DRAWER, WHICH WAS A LIST ON BARE WALL.
 *
 * Astra's mobile menu opens straight into the page: no surface of its own, no rule under
 * it, and the first line of the page's own content sitting a few pixels below the last
 * link. On a light theme that reads as a panel because the page is white and the menu is
 * white. Here the ground is a dark brick texture and the menu is transparent, so the two
 * are the same surface and the boundary between "menu" and "page" is whatever the words
 * happen to be doing — measured on /shop/, the sorting control sat immediately under
 * "Shop" with nothing between them.
 *
 * The desktop header answers this with the crest and the night sky behind it. The drawer
 * gets the same answer in the form it can have: a darker panel, a hairline between items,
 * and a lit edge at the foot where the page begins.
 *
 * Everything here is a token. Astra's own colours are not touched, so a Customizer change
 * still reaches this menu.
 * ---------------------------------------------------------------------- */

@media screen and (max-width: 921px) {
	.ast-mobile-header-content {
		background: linear-gradient(
			rgb(3 3 8 / 92%),
			rgb(3 3 8 / 92%)
		);

		/*
		 * The lit edge. Two stops rather than a border: a 1px line at --ad-ground-400 is the
		 * separator this needed, and the accent glow under it is the same "light at an edge"
		 * language the wall, the card frames and the collection tiles all use, so the drawer
		 * closing is a light going out rather than a box disappearing.
		 */
		box-shadow:
			0 1px 0 var(--ad-ground-400, #3f3850),
			0 6px 22px rgb(3 3 8 / 70%);
		padding-bottom: var(--ad-space-2, 8px);
	}

	.ast-mobile-header-content .main-header-menu > .menu-item + .menu-item,
	.ast-mobile-header-content .main-header-menu > .page_item + .page_item {
		border-top: 1px solid rgb(63 56 80 / 45%);
	}

	/*
	 * THE ICONS LINE UP AND THE WORDS START ON ONE COLUMN.
	 *
	 * The glyphs are 24x24 line drawings of different densities — a cart is wide, a person
	 * is narrow — so an inline-flex row with a gap starts each word wherever its own icon
	 * happens to end, and five ragged left edges is what made this read as a default list.
	 * A fixed column for the glyph fixes the words to one rule.
	 */
	.ast-mobile-header-content .aethyrdancer-navsym {
		gap: 0;
	}

	.ast-mobile-header-content .aethyrdancer-navsym__glyph {
		flex: 0 0 2.4em;
		width: 1.55em;
		margin-right: 0.15em;
	}

	/*
	 * The label is body-scale here, not small. It is the only text in the drawer and there
	 * is a whole screen width for it; Astra's inherited size left it smaller than the
	 * result count on the page behind it.
	 */
	.ast-mobile-header-content .aethyrdancer-navsym__label {
		font-size: var(--ad-text-base, 1rem);
		letter-spacing: 0.01em;
	}

	/*
	 * WHERE YOU ALREADY ARE.
	 *
	 * The desktop header says it by colouring the current link; the drawer said nothing,
	 * which on a five-item menu is the difference between navigation and a list of links.
	 * The accent bar is on the item rather than the text so it survives the label being an
	 * icon, lettering, or a plain word.
	 */
	.ast-mobile-header-content .main-header-menu > .current-menu-item,
	.ast-mobile-header-content .main-header-menu > .current_page_item {
		box-shadow: inset 3px 0 0 var(--ad-accent, #8886de);
	}

	.ast-mobile-header-content .main-header-menu > .current-menu-item > .menu-link,
	.ast-mobile-header-content .main-header-menu > .current_page_item > .menu-link {
		color: var(--ad-text-strong, #efecf4);
	}
}