/**
 * Masthead top links (desktop) — audience nav to the RIGHT of the logo.
 *
 * masthead-top-links.js moves .lp-masthead-top into `#masthead .main-header`,
 * which the theme's Header block sets `position: relative`, so we anchor to it
 * absolutely. RTL site → "right of the logo" = the inline start; we pin to the
 * physical right at the content gutter.
 *
 * VERTICAL ALIGN: the masthead row is asymmetric — the theme gives .main-header
 * `padding-top: 20px; padding-bottom: 0`, and its content (logo, cart) sits on a
 * 50px line-height band flush to the bottom. So we DON'T centre against the
 * padded box (that lands ~10px high); instead we pin to the bottom and match the
 * 50px band, centring within it — identical to how the logo/cart line up.
 *
 * Hidden below the desktop breakpoint (992px is the theme's mobile boundary).
 */

/* Row content band height (the theme's masthead line-height). Kept as a named
 * value so the vertical alignment reads intentionally, not as a magic literal. */
:root {
	--lp-masthead-row: 50px;
}

/* Hidden by default; the desktop block below reveals it. Also guards the brief
 * moment before the mover runs, and keeps it out of the mobile masthead. */
.lp-masthead-top {
	display: none;
}

@media (min-width: 993px) {
	.lp-masthead-top {
		display: flex;
		align-items: center; /* centre the links within the 50px band */
		position: absolute;
		bottom: 0;                      /* row content is bottom-flush (pad-bottom:0) */
		right: var(--lp-gutter);        /* align to the content gutter (RTL start edge) */
		height: var(--lp-masthead-row); /* match the logo/cart band → same baseline */
		z-index: 2;                     /* above the absolutely-centred .site-branding logo */
	}

	.lp-masthead-top__menu {
		display: flex;
		align-items: center;
		gap: 20px;
		margin: 0; /* cancel the theme-wide `ul { margin: 0 20px 0 0 }` */
		padding: 0;
		list-style: none;
	}

	.lp-masthead-top__menu li {
		margin: 0;
	}

	/* Unselected audiences are secondary grey (global token); the selected one —
	 * and any link on hover — goes full black. */
	.lp-masthead-top__menu a {
		position: relative; /* anchor for the underline pseudo-element */
		display: block;
		color: var(--faint-gray); /* unselected audience — secondary grey */
		font-size: 13px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.4px;
		text-decoration: none;
		transition: color 0.15s ease;
	}

	/* "Selected" = the page you're on. WordPress adds these classes to the active
	 * item automatically: current-menu-item / current_page_item for an exact page
	 * match, and the -ancestor variants when you're on a child PAGE of that item
	 * (Page Attributes → Parent). A future nav_menu_css_class filter can add the
	 * same current-menu-item class for Woo category/product pages → same styling. */
	.lp-masthead-top__menu a:hover,
	.lp-masthead-top__menu .current-menu-item > a,
	.lp-masthead-top__menu .current_page_item > a,
	.lp-masthead-top__menu .current-menu-ancestor > a,
	.lp-masthead-top__menu .current-page-ancestor > a {
		color: #000; /* selected audience (or hover) — full black */
	}

	/* Animated underline — a 1px bar that grows from the start edge (RTL: the
	 * right), like the main menu. currentColor keeps it in step with the text. */
	.lp-masthead-top__menu a::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: -4px;
		width: 0;
		height: 1px;
		background: currentColor;
		transition: width 0.2s ease;
	}

	/* Shown on hover, and pinned open on the selected audience (+ child pages). */
	.lp-masthead-top__menu a:hover::after,
	.lp-masthead-top__menu .current-menu-item > a::after,
	.lp-masthead-top__menu .current_page_item > a::after,
	.lp-masthead-top__menu .current-menu-ancestor > a::after,
	.lp-masthead-top__menu .current-page-ancestor > a::after {
		width: 100%;
	}
}