/*
Navigation Panel

A modal <dialog> opened with showModal(), so the browser owns the focus trap, the
background inert state, Escape handling and the ::backdrop dim. Full-screen overlay at
480px and below, fixed 480px panel anchored right above that.

Enter/exit animation needs transition-behavior: allow-discrete and @starting-style. Where
those are unsupported the panel simply appears and disappears without the slide.

 */

.Navigation {
	--Navigation-BlockEndPadding:  40px;
	--Navigation-InlinePadding:    var(--Viewport-InlinePadding);
	--Navigation-Width:            480px;

	--NavigationLink-BlockPadding: 6px;
	--NavigationLink-Color:        #ffffff;
	--NavigationLink-FontSize:     28px;
	--NavigationLink-InlinePadding: 8px;
	--NavigationLink-LineHeight:   28px;

	/* Rhythm between link text boxes, not between their padded tap areas. */
	--NavigationList-Gap:          48px;

	--NavigationFooter-Color:      #e3e3e3;
	--NavigationFooter-FontSize:   14px;

	--NavigationBackdrop-Color:    rgb(0 0 0 / 0.5);

	/*
	The gradient's radii and origin are absolute, so it renders at one fixed size no
	matter how large the panel is — like a centred background image rather than something
	stretched to fit. Decoded from Sketch's SVG export of the Menu (Logged Out) Background
	instance (r 2.498678, aspectRatio 1.8942, 375px frame): ry = r * 375, rx = aspectRatio
	* ry. Past the final stop the gradient continues in its end colour, so no seam can
	appear. See ai-docs/sketch-gotchas/gradients-to-css.md — do not translate as a circle.
	 */
	--NavigationBackground-EndColor: #0D2B1F;
	--NavigationBackground-OriginY: -238px;
	--NavigationBackground-RadiusX: 1775px;
	--NavigationBackground-RadiusY: 937px;

	background-attachment:         local;
	background-color:              var(--NavigationBackground-EndColor);
	background-image:              radial-gradient(ellipse var(--NavigationBackground-RadiusX) var(--NavigationBackground-RadiusY) at 50% var(--NavigationBackground-OriginY), var(--Colors-Secondary-Accent01) 0%, var(--Colors-Secondary-Accent02) 47.08%, var(--NavigationBackground-EndColor) 100%);
	border:                        none;
	color:                         #ffffff;
	flex-direction:                column;
	height:                        auto;
	inset:                         0 0 0 auto;
	margin:                        0;
	max-height:                    none;
	max-width:                     none;
	opacity:                       0;
	overflow-y:                    auto;
	padding:                       0 0 env(safe-area-inset-bottom);
	position:                      fixed;
	transform:                     translateX(100%);
	transition:                    opacity var(--InteractiveTransitionDuration),
	                               transform var(--InteractiveTransitionDuration),
	                               display var(--InteractiveTransitionDuration) allow-discrete,
	                               overlay var(--InteractiveTransitionDuration) allow-discrete;
	width:                         min(var(--Navigation-Width), 100%);
}

.Navigation[open] {
	display:                       flex;
	opacity:                       1;
	transform:                     none;
}

@starting-style {
	.Navigation[open] {
		opacity:                       0;
		transform:                     translateX(100%);
	}
}

.Navigation::backdrop {
	background-color:              var(--NavigationBackdrop-Color, rgb(0 0 0 / 0.5));
	opacity:                       0;
	transition:                    opacity var(--InteractiveTransitionDuration),
	                               display var(--InteractiveTransitionDuration) allow-discrete,
	                               overlay var(--InteractiveTransitionDuration) allow-discrete;
}

.Navigation[open]::backdrop {
	opacity:                       1;
}

@starting-style {
	.Navigation[open]::backdrop {
		opacity:                       0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.Navigation,
	.Navigation::backdrop {
		transition-duration:           0s;
	}
}

/* showModal() makes the background inert but does not reliably stop it scrolling. */
html:has(.Navigation[open]),
html:has(.Navigation[open]) body {
	overflow:                      hidden;
}

/*
Panel Header — mirrors HeaderInner so the logo and button do not shift on open.
 */
.NavigationHeader {
	align-items:                   center;
	display:                       flex;
	flex:                          0 0 auto;
	gap:                           16px;
	height:                        var(--Header-Height);
	justify-content:               space-between;
	padding-inline:                var(--Navigation-InlinePadding) 10px;
}

.NavigationLogoArea {
	margin-top:                    -9px;
}

.NavigationLogoArea a {
	border-radius:                 12px;
	display:                       block;
	height:                        100%;
	/* Padding gives the focus glow room; the negative margin keeps layout unchanged. */
	margin:                        -4px;
	padding:                       4px;
}

.NavigationLogoLink:focus-visible {
	box-shadow:                    var(--InteractiveFocusVisible-BoxShadow);
	outline:                       none;
}

.NavigationLogoArea img {
	display:                       block;
	height:                        100%;
	max-width:                     100%;
}

/*
Action Buttons — the open button lives in the site header, the close button in the panel.
Both take .FEIconButton (Base.css); only the icon-swap logic is specific to Navigation.
 */

/*
Panel Body
 */
.NavigationInner {
	display:                       flex;
	flex:                          1 1 auto;
	flex-direction:                column;
	padding:                       24px var(--Navigation-InlinePadding) var(--Navigation-BlockEndPadding);
}

/* Registered state only — DegularDisplay-Black 48/40, read off the exported SVG
   (fontSize/fontWeight are null on the shared style via the JS API). Sits above
   NavigationLinksRegistered.tpl's own <ul>, not part of it. */
.NavigationWelcome {
	color:                         var(--Colors-Secondary-Accent01);
	font-family:                   var(--Typeface02-FontFamily);
	font-size:                     48px;
	font-variation-settings:       var(--Typeface02-FontVariationSettings);
	line-height:                   40px;
	margin:                        0 0 40px;
}

.NavigationList {
	display:                       flex;
	flex-direction:                column;
	gap:                           calc(var(--NavigationList-Gap) - (var(--NavigationLink-BlockPadding) * 2));
	list-style:                    none;
	margin-block:                  calc(var(--NavigationLink-BlockPadding) * -1) 0;
	margin-inline:                 calc(var(--NavigationLink-InlinePadding) * -1);
	padding:                       0;
}

.NavigationLink {
	--Typeface-FontWght:           700;

	align-items:                   center;
	border-radius:                 12px;
	color:                         var(--NavigationLink-Color);
	display:                       flex;
	font-family:                   var(--Typeface02-FontFamily);
	font-size:                     var(--NavigationLink-FontSize);
	font-variation-settings:       var(--Typeface02-FontVariationSettings);
	line-height:                   var(--NavigationLink-LineHeight);
	padding:                       var(--NavigationLink-BlockPadding) var(--NavigationLink-InlinePadding);
	text-decoration:               none;
	transition:                    color var(--InteractiveTransitionDuration);
}

.NavigationLink:focus-visible {
	box-shadow:                    var(--InteractiveFocusVisible-BoxShadow);
	outline:                       none;
}

.NavigationLink:hover,
.NavigationLink:focus-visible {
	color:                         var(--Colors-Secondary-Accent01);
}

/* Base.css appends an external-link marker to _blank anchors; the design pushes it to
   the far edge and draws it at the full 24px of the link text. */
.NavigationLink[target="_blank"]::after {
	--AnchorTargetBlankIcon-Size:  1em;

	margin-left:                   auto;
}

.NavigationButtons {
	display:                       flex;
	flex-direction:                column;
	gap:                           16px;
	padding-block-start:           calc(var(--NavigationList-Gap) - var(--NavigationLink-BlockPadding));
}

.NavigationButton {
	text-decoration:               none;
	width:                         100%;
}

.NavigationFooter {
	margin-block-start:            auto;
	padding-block-start:           40px;
	text-align:                    center;
}

.NavigationFooterText {
	color:                         var(--NavigationFooter-Color);
	font-size:                     var(--NavigationFooter-FontSize);
	line-height:                   16px;
	margin-block:                  0;
}

.NavigationFooterText strong {
	color:                         #ffffff;
}

.NavigationFooterLink {
	color:                         inherit;
	text-decoration:               none;
}

.NavigationFooterLink:hover,
.NavigationFooterLink:focus-visible {
	text-decoration:               underline;
}