/* ==========================================================================
 * Grand Tour #16 - "You are here on every hub" (20 Jul 2026)
 * --------------------------------------------------------------------------
 * A calm transit-map "YOU ARE HERE" marker for HUB / INDEX pages only - the
 * pages that list a family's children as a grid of cards. On this site those
 * are the shared hub template <section class="hub-hero"> ... <div class="hubgrid">
 * (Methods, Industries, Analysis, Guides). Rail Instrument voice: monochrome
 * soft-ink label + a single burnt-orange node, IBM Plex Mono.
 *
 * CSS-ONLY, no markup change. The marker is a ::after pseudo-element on the
 * hub hero's eyebrow. It renders ONLY where a real <section class="hub-hero">
 * element exists in the DOM, i.e. on hub/index pages. Leaf/profile pages use
 * pf-hero and /about/, /, /glossary/, /br/ have NO hub-hero element, so they
 * receive nothing - the .hub-hero rule below simply never matches there.
 *
 * Not a duplicate of GT#2 (PLATFORM N, inside the .kicker) nor GT#17 (the
 * breadcrumb "you are here" node on nav.cnp-bc, which only exists on leaf /
 * profile heroes). This marks the reader's standing position at a hub title.
 *
 * Palette: soft-ink #6E6253, hairline #DED3BF, burnt-orange #C75B22.
 * Body-prefixed for specificity over the theme's late inline <style>; no
 * !important. No animation (prefers-reduced-motion respected by design; a
 * defensive guard is included below). No overflow.
 *
 * Deploy: gt16_youarehere.css + gt16_youarehere-enqueue.php in mu-plugins/.
 * Reversible: delete both files.
 * ========================================================================== */

/* The eyebrow row is display'd so the ::after can sit on its own line below the
   hub kicker (and below GT#2's PLATFORM token, which lives inside the kicker). */
body .hub-hero .eyebrow {
	position: relative;
}

/* The marker: burnt-orange ringed node + mono "YOU ARE HERE" label, one line,
   dropped just under the eyebrow, above the hub <h1>. Dot is drawn with a
   radial-gradient background (single pseudo-element, two-tone: orange core +
   hairline ring) so no extra markup is needed. */
body .hub-hero .eyebrow::after {
	content: "You are here";
	display: block;
	margin-top: .6rem;
	max-width: 100%;
	box-sizing: border-box;
	padding-left: 20px;

	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #6E6253;                 /* soft-ink label */

	/* transit node: solid burnt-orange core (r=3px) wrapped in a hairline ring,
	   vertically centered on the label, positioned near the left edge. */
	background-image: radial-gradient(
		circle at 6px 50%,
		#C75B22 0 3px,              /* orange core */
		transparent 3px 4.5px,     /* gap */
		#DED3BF 4.5px 5.5px,       /* hairline ring */
		transparent 5.5px          /* clear */
	);
	background-repeat: no-repeat;

	/* no transition / animation is defined; nothing to reduce. */
}

/* Defensive: if any inherited transition ever applies, null it under RM. */
@media (prefers-reduced-motion: reduce) {
	body .hub-hero .eyebrow::after {
		transition: none;
		animation: none;
	}
}