/*
 * Back-to-top control, NESC.
 *
 * Structure ported from website-brcg (.to-top-btn / .show / #to-top); the
 * PALETTE and the hidden-state handling are this site's, not BRCG's.
 *
 * COLOUR. Navy #003C6E is this site's settled primary, confirmed from two
 * independent directions in docs/nesc-brand-and-design-standards-v0.1.md and
 * used for links, headings and primary actions. BRCG's #44434a charcoal with a
 * #c9a74a gold focus ring is BRCG's identity and would read as foreign here.
 * White arrow on navy measures 11.4:1.
 *
 * THE FOCUS RING IS OFFSET FOR A REASON, and it is the same reason the fleet
 * filter chips use the same trick: the button is navy-filled, so a navy ring
 * drawn ON it would be invisible. outline-offset puts the ring on the page
 * ground behind it. Do not remove the offset to "tighten" the ring.
 *
 * HIDDEN MEANS HIDDEN. The BRCG original toggles `opacity` alone, which leaves
 * the button clickable and in the tab order while invisible: a keyboard user
 * tabs to a control they cannot see, and a stray click in that corner jumps the
 * page. visibility and pointer-events are what actually remove it; the opacity
 * transition is only the fade. `visibility` is transitioned deliberately so it
 * flips at the END of the fade out and at the START of the fade in.
 */

.to-top-btn {
	position: fixed;
	z-index: 1030; /* above Bootstrap's sticky (1020), below its modal (1055) */
	right: 20px;
	bottom: 20px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;
	padding: 0;

	border: none;
	border-radius: 50%;
	background-color: #003C6E;
	color: #FFFFFF;

	cursor: pointer;

	/*
	 * THE WHITE RING IS LOAD-BEARING, NOT DECORATION.
	 *
	 * This control is position:fixed, so it passes over whatever the page
	 * happens to be scrolled to. MEASURED 2026-08-30: the site footer's
	 * background is rgb(0,60,110), which is #003C6E, THE EXACT SAME NAVY as this
	 * button. Contrast of the button against it is 1.00:1 and the control is
	 * invisible there, not merely hard to see. Over the page body it is 11.22:1.
	 *
	 * A ring solves it in both directions at once, which a colour change could
	 * not: white on the white page ground is itself invisible and costs nothing,
	 * because the navy body already carries the contrast there; white on the navy
	 * footer is 11.22:1 and is what delineates the control. The button's own
	 * colour never has to compromise between the two grounds.
	 *
	 * Drawn with box-shadow rather than `border` deliberately: a border is inside
	 * the box model and would shrink the 52px hit area or force a size
	 * recalculation, while a spread shadow sits outside it and follows the
	 * border-radius exactly.
	 */
	box-shadow:
		0 0 0 2px #FFFFFF,
		0 2px 8px rgba(31, 28, 27, 0.28);

	/* The hidden resting state. All three properties matter; see the header. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition: opacity 0.25s ease, visibility 0s linear 0.25s,
		background-color 0.18s ease, transform 0.18s ease;
}

.to-top-btn.show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.25s ease, visibility 0s linear 0s,
		background-color 0.18s ease, transform 0.18s ease;
}

.to-top-btn:hover {
	background-color: #002A4E; /* darker navy; 14.0:1 against the white arrow */
	transform: translateY(-2px);
}

.to-top-btn:active {
	transform: translateY(0);
}

/*
 * Mouse focus gets no ring, keyboard focus gets a prominent one. Splitting these
 * is what WCAG 2.4.7 needs without painting a ring on every click.
 */
.to-top-btn:focus {
	outline: none;
}

/*
 * FOCUS RING: THREE BANDS, WHITE / NAVY / WHITE.
 *
 * THE SUBTLE FAILURE THIS FIXES, because the obvious two-band version looks
 * right and is not. A first attempt kept the rest ring's white band and added a
 * navy band outside it. That makes the ring VISIBLE on both grounds, which is
 * what it was reasoned about, and it still fails: a focus indicator has to
 * CHANGE between states, and the white band is present at rest AND at focus, so
 * it carries no focus signal at all. The only thing that changed was the navy
 * band, and over the navy footer navy-on-navy is 1.00:1. Focused and unfocused
 * rendered PIXEL-IDENTICAL there.
 *
 * THE CRITERION IS SC 1.4.11 NON-TEXT CONTRAST (WCAG 2.1, AA), which requires a
 * focus indicator to reach 3:1 against what is adjacent to it. A static capture
 * of the old ring focused over the footer fails that on its own, with no state
 * comparison needed. SC 2.4.7 Focus Visible (AA) is failed too, since an
 * indicator identical in both states is not functioning as one. The state-delta
 * framing used throughout this comment is SC 2.4.13 Focus Appearance, which is
 * AAA, not AA.
 *
 * An earlier revision of this comment cited SC 2.4.11, which is WRONG and is
 * recorded rather than quietly corrected: 2.4.11 is "Focus Not Obscured", about
 * other content covering a focused element, and has nothing to do with contrast.
 * The wrong number was inherited from a review report and shipped unchecked. A
 * citation in a comment is a claim like any other.
 *
 * "The ring is visible" and "focus is distinguishable from rest" are different
 * questions, and only the second one is the success criterion.
 *
 * THE FIX ADDS A NEW, HIGH-CONTRAST BAND ON EITHER GROUND:
 *   over the WHITE page  the navy band at 2-6px is new and reads 11.22:1
 *   over the NAVY footer the outer white band at 6-9px is new and reads 11.22:1
 * Whichever ground the control is over, something that was not there a moment
 * ago appears at 11.22:1.
 *
 * A SINGLE MID-TONE BAND WAS THE REVIEWED ALTERNATIVE AND WAS NOT TAKEN. One
 * colour clearing 3:1 against BOTH white and #003C6E must sit in a narrow
 * luminance window, roughly 0.231 to 0.30; #8B8B8B qualifies at 3.41:1 and
 * 3.29:1. It works, and it was declined for two reasons: it introduces a grey
 * that appears nowhere else in this site's palette, and it clears the threshold
 * by a hair where the three-band form clears it by 3.7x. Neither black nor the
 * brand sand is usable, for the record: black is 1.87:1 against this navy and
 * sand #D5CCA3 is 1.62:1 against white.
 *
 * `outline: transparent` is kept rather than dropped. Forced-colours modes
 * discard box-shadow entirely and repaint a non-none outline in a system colour,
 * so this is what those users get instead of the ring. Do NOT replace it with a
 * hardcoded system colour keyword: leaving it transparent is what lets the
 * user's own contrast theme choose.
 *
 * KNOWN LIMIT, and the one thing to check before adding a new section colour.
 * Because white and this navy sit at opposite ends of the luminance range, there
 * is a narrow MID-GREY window where NEITHER band clears 3:1: relative luminance
 * roughly 0.231 to 0.30, which is about #848484 to #959595. A ground in that
 * band defeats both. None of the theme's ~15 background colours falls inside it
 * (checked 2026-08-30: the greys are 0.94 to 0.98 or 0.56 or 0.18, the sands
 * 0.55 to 0.62, the brown 0.074), so this is a real property of the design and
 * not a live defect. It is also exactly why the reviewed single-band #8B8B8B
 * alternative was declined: at L 0.258 it sits dead centre in that window.
 * The control is site-wide, so if a new section background is ever added, check
 * it against that range rather than assuming the ring copes.
 */
.to-top-btn:focus-visible {
	outline: 3px solid transparent;
	outline-offset: 3px;
	box-shadow:
		0 0 0 2px #FFFFFF,
		0 0 0 6px #003C6E,
		0 0 0 9px #FFFFFF,
		0 2px 8px rgba(31, 28, 27, 0.28);
}

/* The arrow. currentColor so the glyph follows the button's own colour. */
.to-top-btn svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none; /* clicks always land on the button, never the glyph */
}

/*
 * Reduced motion: keep the appear/disappear instant and drop the lift, but do
 * NOT remove the state change itself. The control must still show and hide.
 */
@media (prefers-reduced-motion: reduce) {
	.to-top-btn,
	.to-top-btn.show {
		transition: none;
	}

	.to-top-btn:hover {
		transform: none;
	}
}

/*
 * Small screens. The fleet page is long on a phone, which is where this control
 * earns its place, but the corner is also where a thumb rests, so it moves in
 * slightly and shrinks rather than sitting under the content.
 */
@media (max-width: 575.98px) {
	.to-top-btn {
		right: 14px;
		bottom: 14px;
		width: 46px;
		height: 46px;
	}

	.to-top-btn svg {
		width: 18px;
		height: 18px;
	}
}

/*
 * PRINT. A fixed control prints on every page of a long document, which on the
 * charter fleet page is several sheets of paper each carrying a navy circle.
 */
@media print {
	.to-top-btn {
		display: none !important;
	}
}