$topNavBgColour: #000;
$topNavFgColour: #fff;
$topNavHighlightColour: #00D0A0;
$topNavSearchBorderColour: #999;

// Must match desktopMediaQuery in the JS. In rem so larger browser text keeps the mobile menu
// until the screen is wide enough.
$topNavDesktopBreakpoint: 80rem;
// From here up the logo stays visible while search is open. In rem, like the desktop one.
$topNavTabletBreakpoint: 48rem;

// Top row.
$topNavCrestWidth: 2.718125rem;
$topNavCrestHeight: 2.67125rem;
// From the left edge of the screen to the logo, on mobile and desktop. On desktop it's the
// smallest inset, so wide screens keep the centred column.
$topNavLogoInset: 2.375rem; // 38px
$topNavBarHeight: 7.75rem; // 124px
// Tops up the bar's padding so the logo sits in the middle of the bar.
$topNavLogoPaddingBlock: ($topNavBarHeight - $topNavCrestHeight) * 0.5 - $spacing-5;

// Icon buttons stay px so they don't crowd the bar with larger text. They have no text to grow.
$topNavIconButtonSize: 40px;
$topNavMenuButtonSize: 48px;
$topNavSearchIconSize: 20px;
$topNavCloseIconSize: 26px;

// Menu rows.
$topNavLinkFontSize: 1rem;
$topNavRowHeight: 3.75rem;
$topNavLinkPaddingInline: 2.25rem;

$topNavChildRowHeight: 3.5rem;
$topNavBackHeight: 3.75rem;
// Must match SLIDE in ref/mobile-menu-checks.js.
$topNavSlideDuration: 0.6s;

// Caps that stop the search box and menu stretching on tablet.
$topNavSearchMaxWidth: 30rem;
$topNavListMaxWidth: 30rem;

// Search open and close animation. Must match searchSlideDuration in the JS.
$topNavSearchSlideDuration: 0.4s;
// Everything else in the row with the open box: padding, close arrow, margins and burger.
$topNavSearchRowOthers: "#{$spacing-5} * 2 + #{$topNavIconButtonSize} + #{$spacing-3} * 2 + #{$topNavMenuButtonSize}";
// The widest the open box gets below desktop.
$topNavSearchMaxWidthOpen: 33.125rem;
$topNavSearchSlideEndWidth: unquote("min(#{$topNavSearchMaxWidthOpen}, calc(100vw - (#{$topNavSearchRowOthers})))");
// From tablet up the logo stays in the row, so the open box leaves room for it too.
// The logo's padding is the inset less the bar's, plus $spacing-5 on its right.
$topNavLogoWidth: "#{$topNavCrestWidth} + #{$topNavLogoInset}";
$topNavTabletSearchSlideEndWidth: unquote("min(#{$topNavSearchMaxWidthOpen}, calc(100vw - (#{$topNavSearchRowOthers} + #{$topNavLogoWidth})))");

// Arrows stay px: the stroke is a border, and Sass sums these for the arrowhead.
$topNavArrowStroke: 2px;
$topNavArrowHeadSize: 8px;

// Desktop. The bar is the same height as on mobile.
$topNavDesktopBarHeight: $topNavBarHeight;
$topNavDesktopMaxWidth: 87.5rem;
// Narrows towards 1280px so the links still fit with larger text spacing.
// In px because it follows the screen width, not the text.
$topNavDesktopLinkPaddingFluid: unquote("clamp(10px, calc(2.5vw - 20px), #{$spacing-4})");
// The open box fills the space the links leave, up to this width.
$topNavDesktopSearchMaxWidth: 50rem;

// Outlines stay px so they stay crisp.
$topNavFocusOutlineWidth: 2px;
$topNavFocusOutlineOffset: 2px;
$topNavMenuZIndex: 100;
// A hairline, so it stays px and mustn't grow.
$topNavSeamOverlap: 1px;