/* Colors/ratios verified against amazon-design-refs/sections/header-nav.png via pixel sampling, not guessed. */

.rds-nav {
	position: relative;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: clamp(24px, 6vw, 74px) clamp(20px, 5vw, 64px);
	background: #111419;
}

.rds-nav__logo {
	display: block;
	line-height: 0;
}

.rds-nav__logo img {
	display: block;
	width: clamp(140px, 24vw, 309px);
	height: auto;
}

.rds-nav__toggle {
	position: relative;
	z-index: 1001;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.rds-nav__toggle-icon {
	display: block;
	width: clamp(32px, 6vw, 61px);
	height: auto;
}

/* No `clip-path` curtain-wipe reveal (2026-08-16, "ensure this overlap dont
   happen for when nav menu is open") — the previous version animated
   `clip-path: inset(0 0 100% 0)` -> `inset(0 0 0% 0)` over 0.5s to wipe the
   panel open top-to-bottom. `clip-path` clips the panel's own rendering
   (background included), so during that 0.5s, whatever portion of the
   viewport the wipe hadn't reached yet had NOTHING painted there at all —
   the real page content behind the nav (confirmed via Playwright: captured
   220ms into the open animation, the Hero heading "Welcome, DSPs to Ignite
   2027" was directly visible in the still-unrevealed lower portion of the
   screen, at the same time the already-revealed links were showing at the
   top). `autoAlpha` (opacity+visibility) toggles the panel as a single flat
   fade instead — the panel is either fully covering the viewport or not
   there at all, with no partial-coverage state where anything underneath
   can show through. */
.rds-nav__panel {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #111419;
	visibility: hidden;
	opacity: 0;
}

/* 2-column link grid (2026-08-16, "split evenly into 2 columns") —
   `grid-auto-flow: column` with an explicit row count fills column-major
   (first half of links down the left column, second half down the right),
   which is what "split evenly into 2 columns" means for a list, as opposed
   to `grid-auto-flow: row`'s left-right pairing. Row count comes from
   `--rds-nav-links-rows`, set inline by `render.php` as
   `ceil(link count / 2)`, not hardcoded here, so this still splits evenly
   if `navLinks` ever gains or loses an entry in the editor. Splitting into
   2 columns also roughly halves the list's total rendered height versus the
   single-column stack, which independently helps keep it within the
   viewport instead of overflowing top/bottom. */
.rds-nav__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-rows: repeat(var(--rds-nav-links-rows, 6), auto);
	grid-auto-flow: column;
	column-gap: clamp(2.5rem, 6vw, 6rem);
	row-gap: 1.5rem;
	justify-items: center;
	align-items: center;
}

.rds-nav__links a {
	visibility: hidden;
	opacity: 0;
}

.rds-nav__links a {
	color: #ffffff;
	text-decoration: none;
	font-family: "Ember Modern Display", sans-serif;
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	font-weight: 700;
}

.rds-nav__links a:focus-visible,
.rds-nav__toggle:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 4px;
}

/* Section pagination dots (2026-08-06, "add fix pagination dot, that
   scrolls to specific section") — a separate fixed element from `.rds-nav`
   itself, not a re-fix of the nav bar (that was deliberately un-fixed
   earlier the same day, "un-fixed position for header nav"; this is a
   distinct scroll indicator, not the logo/hamburger bar). Right edge
   (2026-08-06, "move to right side") — labels flip to the LEFT of each dot
   to match (see `.rds-nav__dot-label` below), otherwise they'd render off
   the edge of the viewport.

   z-index 9999 (2026-08-06, "need to have highest z index") — comfortably
   above every other z-index anywhere in this plugin (1300 is the highest
   found elsewhere, journey-cards' own pin-transition layer), so nothing on
   any page this plugin builds can ever cover the dots regardless of which
   block's own transition is mid-animation. */
.rds-nav__dots {
	position: fixed;
	top: 50%;
	right: clamp(0.75rem, 2.5vw, 2rem);
	transform: translateY(-50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.rds-nav__dot {
	position: relative;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	border: 0;
	padding: 0;
	cursor: pointer;
	/* Dual-tone ring, not a plain border (2026-08-06, "add border/box shdow
	   so dots can work on all bg colors") — this page has both dark and
	   white/light full-bleed sections (Case Studies, What's Next Intro,
	   Big Insight's closing frame...), and the inactive dot's own
	   `rgba(255,255,255,0.35)` fill is nearly invisible against a white
	   background specifically. A dark ring plus a slightly-offset light
	   ring gives contrast against EITHER background at once, instead of
	   needing to know which section is currently behind the dots.
	   `box-shadow`, not `border` — a border would grow the dot's rendered
	   size beyond `width`/`height` unless paired with `box-sizing:
	   border-box`; box-shadow doesn't affect layout at all. */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.5);
	transition: background 200ms ease, transform 200ms ease;
}

.rds-nav__dot:hover,
.rds-nav__dot:focus-visible {
	background: rgba(255, 255, 255, 0.7);
}

.rds-nav__dot.is-active {
	background: #0578ff;
	transform: scale(1.35);
}

.rds-nav__dot:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

.rds-nav__dot-label {
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	background: rgba(17, 20, 25, 0.9);
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	/* 1.0125rem (2026-08-14, "keep all labels same size like active
	   state") — the label is a child of `.rds-nav__dot`, so the dot's own
	   `transform: scale(1.35)` when active visually enlarged its label too
	   (transforms scale the whole rendered subtree, not just the box they're
	   set on), making the active section's label noticeably bigger than
	   every other dot's. `0.75rem * 1.35 = 1.0125rem` is that same physical
	   size, applied as the base font-size so every label matches it
	   uniformly; the active dot below then counter-scales its own label by
	   the inverse (1 / 1.35) so its inherited parent scale doesn't compound
	   on top and make it bigger again. */
	font-size: 1.0125rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.375rem 0.625rem;
	border-radius: 0.375rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms ease;
}

/* Reverted to hover-only (2026-08-14, "revert dot functionalty to where you
   see label on hover dot") — labels were briefly made permanently visible
   ("for the nav dots, show all labels at all times"), now back to the
   original reveal-on-interaction behavior. `.is-visible` (2026-08-14, "for
   each section like before, on active fade in label, hold for a sec and
   fade out") is `nav.js`'s own timed flash on an active-section change —
   independent of hover/focus, both can reveal the label. */
.rds-nav__dot-label.is-visible,
.rds-nav__dot:hover .rds-nav__dot-label,
.rds-nav__dot:focus-visible .rds-nav__dot-label {
	opacity: 1;
}

.rds-nav__dot.is-active .rds-nav__dot-label {
	transform: translateY(-50%) scale(calc(1 / 1.35));
}

@media (max-width: 600px) {
	.rds-nav__dot-label {
		display: none;
	}

	/* 2-column grid reverts to a single column on narrow viewports — link
	   labels are full section names ("Tier 2: Ignite Connect"), too long to
	   sit two-across without wrapping/crowding on a phone-width screen. */
	.rds-nav__links {
		grid-template-rows: none;
		grid-auto-flow: row;
		row-gap: 1.25rem;
	}
}