/**
 * SailScanner mega menu.
 *
 * Tokens track the Kadence palette set in the child theme's
 * sailscanner_change_palette_defaults() so the panels stay in step if the
 * palette is edited in the customiser.
 */

:root {
	--ss-mega-navy: #12305c;
	--ss-mega-blue: #2b6cb0;
	--ss-mega-blue-dark: #215387;
	--ss-mega-ink: #2d3748;
	--ss-mega-ink-soft: #4a5568;
	--ss-mega-muted: #718096;
	--ss-mega-line: #e2e8f0;
	--ss-mega-tint: #f7fafc;
	--ss-mega-tint-strong: #edf2f7;
	--ss-mega-surface: #ffffff;

	--ss-mega-radius: 14px;
	--ss-mega-radius-sm: 8px;
	--ss-mega-shadow: 0 1px 2px rgba(18, 48, 92, 0.06), 0 24px 48px -12px rgba(18, 48, 92, 0.28);
	--ss-mega-gutter: 40px;
	--ss-mega-duration: 180ms;
	--ss-mega-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Written by the script on open; the fallbacks keep the panel usable if it never runs. */
	--ss-mega-top: 100%;
	--ss-mega-left: 0px;
	--ss-mega-width: 100vw;
	--ss-mega-max-height: 78vh;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ss-mega-duration: 1ms;
	}
}

/* -------------------------------------------------------------------------
 * Top-level item and disclosure toggle
 * ---------------------------------------------------------------------- */

/* Flex here rather than relying on the theme: Kadence leaves the item as a
   list-item containing a full-width block link, which drops the toggle onto a
   second line and stretches the header row.
   
   No wrapping in the header. The item sizes to its content, so allowing it to
   wrap makes the link's own width the width of the line and the toggle has
   nowhere to sit but underneath. Only the drawer wraps, where the accordion does
   need a full-width line of its own. */
.ss-mega-item {
	position: relative;
	display: flex;
	align-items: center;
}

.ss-mega-item > a {
	flex: 0 0 auto;
}

/* Kadence stretches the nav link across its whole menu item. As a flex item that
   leaves nothing for the toggle, which overflows the item and renders hard against
   the next label, making the chevron look like it belongs to the wrong link.
   
   Scoped to .ss-mega-ready so nothing changes unless a chevron is actually there,
   which also gives this the specificity to beat the theme's own nav link rules.
   
   Note that the link's padding is deliberately left alone. Kadence draws the hover
   underline as calc(100% - 34px), sized to span the label between those two 17px
   paddings, so trimming the padding to make room for the chevron silently trims
   the underline by the same amount. The chevron tucks into the padding instead. */
.ss-mega-ready .header-navigation li.ss-mega-item > a,
.ss-mega-ready .main-navigation .primary-menu-container > ul > li.ss-mega-item > a,
.ss-mega-ready .secondary-navigation .secondary-menu-container > ul > li.ss-mega-item > a {
	width: auto;
}

.ss-mega-item--drawer {
	flex-wrap: wrap;
}

/* Revealed only once the script has bound its handlers, so a toggle is never
   present in a state where pressing it does nothing. */
.ss-mega__toggle {
	display: none;
}

.ss-mega-ready .ss-mega__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25em;
	height: 1.25em;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: currentColor;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Sits the chevron inside the trailing padding of its own link rather than after
   it. Nothing is added to the item's width, so the header row does not reflow, and
   the link keeps the full padding its hover underline is measured from. The offset
   assumes the theme's nav padding stays comfortably wider than the chevron; at the
   default 17px the chevron lands about 3px past the label with 2px to spare. */
.ss-mega-ready .header-navigation .ss-mega-item > .ss-mega__toggle {
	margin-inline-start: -14px;
}

/* Kadence colours nav links on the anchor itself rather than on the menu item, so
   the toggle has no coloured ancestor to inherit from and would otherwise fall
   back to the body text colour: a dark chevron beside a white label over the hero.
   These mirror the theme's own selectors and reuse its palette variables, so the
   chevron follows the label through every header state and any palette change. */
.header-navigation .ss-mega-item > .ss-mega__toggle {
	color: var(--global-palette4);
}

.main-navigation .primary-menu-container > ul > .ss-mega-item > .ss-mega__toggle,
.secondary-navigation .secondary-menu-container > ul > .ss-mega-item > .ss-mega__toggle {
	color: var(--global-palette5);
}

.transparent-header .header-navigation .header-menu-container > ul > .ss-mega-item > .ss-mega__toggle {
	color: var(--global-palette9);
}

.ss-mega__toggle:hover,
.ss-mega__toggle:focus-visible {
	background: rgba(255, 255, 255, 0.16);
}

.ss-mega__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Kadence defines .screen-reader-text, but an accessible name must not depend on
   another stylesheet loading first: if this rule went missing the words Most searched
   would appear as body text beside seven destinations. */
.ss-mega__toggle .screen-reader-text,
.ss-mega__group-toggle .screen-reader-text,
.ss-mega__trend .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ss-mega__chevron {
	transition: transform var(--ss-mega-duration) var(--ss-mega-ease);
}

.ss-mega__toggle[aria-expanded="true"] .ss-mega__chevron,
.ss-mega__group-toggle[aria-expanded="true"] .ss-mega__chevron {
	transform: rotate(180deg);
}

/* Kadence renders its own arrow for items with children. Ours replaces it. */
.ss-mega-item > a .dropdown-nav-toggle,
.ss-mega-item > .drawer-nav-drop-wrap > .drawer-sub-toggle {
	display: none;
}

/* Mount point for the panel. Costs nothing until the script moves a panel in. */
.ss-mega__host:empty {
	display: none;
}

.ss-mega-item--drawer .ss-mega__host {
	flex-basis: 100%;
	width: 100%;
}

/* Kadence gives every drawer link width: 100%, which is the same problem the
   header had: as a flex item the link claims the whole line and the toggle wraps
   underneath, so the chevron reads as a stray control on a row of its own.
   
   The link still spans the full row, rather than being sized to its text like the
   header's. Kadence hangs the row's divider on the link, so a link that stops where
   its label stops leaves a rule that stops there too, and the panel's own first
   rule then lands a few pixels below it as a visible double line. The trailing
   padding is the chevron's, which overlaps back into it. */
.ss-mega-ready .ss-mega-item--drawer > a {
	flex: 1 1 auto;
	width: auto;
	padding-inline-end: 44px;
}

/* A full 44px, and not the header's 1.25em: this one is a touch target. Pulled back
   over the padding reserved for it above, so it costs the row no width, and lifted
   so taps in that square reach the button and not the link underneath.
   
   Given the full row height and a divider so it reads as its own control rather than
   as decoration on the label. This is the one place in the drawer where tapping the
   obvious thing does the wrong thing: the label navigates to the hub and closes the
   menu, so the split has to be visible. Kadence draws the same divider on its own
   parent-item toggles, which is where the treatment comes from.
   
   Square, not rounded: the fill on hover should read as a region of the row, the way
   the theme's does, rather than as a floating chip sitting on top of it. */
.ss-mega-ready .ss-mega-item--drawer > .ss-mega__toggle {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	align-self: stretch;
	width: 44px;
	height: auto;
	margin-inline-start: -44px;
	margin-inline-end: 0;
	border-radius: 0;
	/* Matches the rules this file draws between groups. The theme's own divider
	   colour is a customiser value that CSS cannot read off a sibling. */
	border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}

/* -------------------------------------------------------------------------
 * Panel shell
 * ---------------------------------------------------------------------- */

.ss-mega__panel {
	position: fixed;
	z-index: 1000;
	top: var(--ss-mega-top);
	left: var(--ss-mega-left);
	width: var(--ss-mega-width);
	max-height: var(--ss-mega-max-height);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--ss-mega-surface);
	border-radius: var(--ss-mega-radius);
	box-shadow: var(--ss-mega-shadow);
	color: var(--ss-mega-ink);
	text-align: start;

	/* Closed. visibility:hidden is what takes the hundred-odd links out of the
	   tab order and the accessibility tree.
	   
	   visibility is deliberately absent from the transition list. Transitioning
	   it with a zero duration and a delay, the usual trick for fading a panel
	   out before hiding it, leaves the property stuck on visible after the first
	   close in Chrome, which silently puts every link back in the tab order. The
	   panel therefore closes instantly and only fades in. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition:
		opacity var(--ss-mega-duration) var(--ss-mega-ease),
		transform var(--ss-mega-duration) var(--ss-mega-ease);
}

.ss-mega__panel.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* The vertical rhythm below is tuned so the tallest panel clears a 900px
   window without scrolling. Loosening any of it puts Itineraries and
   Destinations back into overflow on a 13-inch laptop. */
.ss-mega__inner {
	padding: 22px var(--ss-mega-gutter) 4px;
}

.ss-mega__intro {
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ss-mega-line);
	/* --ss-mega-muted would only reach 4.0:1 against white at this size. */
	color: var(--ss-mega-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.ss-mega__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: var(--ss-mega-gutter);
	align-items: start;
}

.ss-mega__body--no-rail {
	grid-template-columns: minmax(0, 1fr);
}

/* -------------------------------------------------------------------------
 * Link columns
 * ---------------------------------------------------------------------- */

/* Multi-column rather than grid, because the groups are wildly uneven: the
   Mediterranean carries thirteen charter pages against five or six elsewhere.
   In a grid the tallest group in a row sets that row's height and leaves voids
   beside it. Multi-column balances the columns instead, which is what makes the
   panels short enough to fit a laptop screen without scrolling. */
/* column-width, not column-count, so the number of columns follows the width the
   panel actually has rather than the width of the window. The two differ: the
   panel tracks the site container, and the rail drops below the columns on
   narrower screens, which hands the grid more room rather than less. */
.ss-mega__grid {
	column-width: 200px;
	column-gap: 28px;
}

.ss-mega__group {
	/* Keeping a group whole is the point: a heading stranded at the foot of one
	   column with its links at the head of the next is unreadable. */
	break-inside: avoid;
	padding-bottom: 18px;
}

/* Route names need roughly 270px to sit on one line where place names need 200. */
[data-ss-mega-style="route"] .ss-mega__grid {
	column-width: 270px;
}

.ss-mega__group-title {
	margin: 0 0 8px;
	font-family: "mixta-pro", Georgia, serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.35;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--ss-mega-navy);
}

.ss-mega__group-link {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

.ss-mega__group-link:hover,
.ss-mega__group-link:focus-visible {
	color: var(--ss-mega-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ss-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The drawer collapses a group by hiding its list. Stated rather than left to the
   user agent default, because a display value from the theme would beat it. */
.ss-mega__list[hidden] {
	display: none;
}

.ss-mega__item {
	margin: 0;
	break-inside: avoid;
}

.ss-mega__link {
	display: block;
	position: relative;
	padding: 5px 8px 5px 10px;
	margin-inline-start: -10px;
	border-radius: var(--ss-mega-radius-sm);
	color: var(--ss-mega-ink-soft);
	font-size: 0.9375rem;
	font-weight: 300;
	line-height: 1.35;
	text-decoration: none;
	box-shadow: none;
	transition:
		color var(--ss-mega-duration) var(--ss-mega-ease),
		background-color var(--ss-mega-duration) var(--ss-mega-ease);
}

.ss-mega__link::before {
	content: "";
	position: absolute;
	inset-block: 5px;
	inset-inline-start: 0;
	width: 2px;
	border-radius: 2px;
	background: var(--ss-mega-blue);
	opacity: 0;
	transition: opacity var(--ss-mega-duration) var(--ss-mega-ease);
}

.ss-mega__link:hover,
.ss-mega__link:focus-visible {
	background: var(--ss-mega-tint);
	color: var(--ss-mega-navy);
}

.ss-mega__link:hover::before,
.ss-mega__link:focus-visible::before {
	opacity: 1;
}

.ss-mega__link:focus-visible {
	outline: 2px solid var(--ss-mega-blue);
	outline-offset: 1px;
}

.ss-mega__link[aria-current="page"] {
	color: var(--ss-mega-navy);
	font-weight: 500;
}

.ss-mega__link[aria-current="page"]::before {
	opacity: 1;
}

/* A marked link must not wrap the ticker under the place name. French Polynesia
   is the one that overflows a 200px column; nowrap lets the row spill a few pixels
   into the column gap rather than stacking the marker underneath. */
.ss-mega__link:has(.ss-mega__trend) {
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Trending marker
 *
 * Sits immediately after the label rather than aligned to the right of the column.
 * The columns are set by column-width, so a right edge is wherever the widest label
 * in that column happens to land, and markers pinned to it would form a ragged line
 * that reads as a mistake. Kept next to the word it qualifies instead.
 *
 * The "Most searched" ticker sits in a fixed clip window so seven copies of the
 * phrase do not push neighbouring links around. Two copies of the text ride the
 * same track so the loop can reset without a jump.
 * ---------------------------------------------------------------------- */

.ss-mega__trend {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-inline-start: 6px;
	vertical-align: -0.14em;
	color: var(--ss-mega-blue);
}

.ss-mega__trend-icon {
	flex: none;
	transition: transform var(--ss-mega-duration) var(--ss-mega-ease);
}

.ss-mega__trend-scroll {
	display: inline-block;
	overflow: hidden;
	width: 4.6em;
	max-width: 4.6em;
	vertical-align: middle;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ss-mega__trend-scroll-track {
	display: inline-flex;
	align-items: center;
	width: max-content;
	will-change: transform;
}

.ss-mega__trend-scroll-text {
	flex: none;
	padding-inline-end: 1.1em;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Scoped to the open panel so seven idle animations are not left running behind a
   closed menu. The icon ticks up once, settles, then waits. The ticker is slow and
   continuous so the phrase can be read without racing the eye. */
.ss-mega__panel.is-open .ss-mega__trend-icon {
	animation: ss-mega-trend 2.6s var(--ss-mega-ease) infinite;
}

.ss-mega__panel.is-open .ss-mega__trend-scroll-track {
	animation: ss-mega-trend-scroll 7.5s linear infinite;
}

@keyframes ss-mega-trend {
	0%,
	58%,
	100% {
		transform: none;
	}

	70% {
		transform: translate(1px, -2px);
	}

	82% {
		transform: translate(0.5px, -0.75px);
	}
}

@keyframes ss-mega-trend-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* Hovering the row hands the movement over to the pointer: the idle loops stop
   where they are and the marker holds its lift while the row is under the cursor. */
.ss-mega__link:hover .ss-mega__trend-icon,
.ss-mega__link:focus-visible .ss-mega__trend-icon {
	animation: none;
	transform: translate(1px, -2px);
}

.ss-mega__link:hover .ss-mega__trend-scroll-track,
.ss-mega__link:focus-visible .ss-mega__trend-scroll-track {
	animation-play-state: paused;
}

.ss-mega__link:hover .ss-mega__trend,
.ss-mega__link:focus-visible .ss-mega__trend {
	color: var(--ss-mega-blue-dark);
}

@media (prefers-reduced-motion: reduce) {
	.ss-mega__panel.is-open .ss-mega__trend-icon,
	.ss-mega__link:hover .ss-mega__trend-icon {
		animation: none;
		transform: none;
	}

	.ss-mega__panel.is-open .ss-mega__trend-scroll-track {
		animation: none;
		transform: none;
	}

	.ss-mega__trend-scroll {
		width: auto;
		max-width: none;
		mask-image: none;
		-webkit-mask-image: none;
	}

	/* One static copy is enough when nothing is scrolling. */
	.ss-mega__trend-scroll-text + .ss-mega__trend-scroll-text {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Rail
 * ---------------------------------------------------------------------- */

.ss-mega__rail {
	padding: 20px;
	border-radius: var(--ss-mega-radius);
	background: var(--ss-mega-tint);
}

.ss-mega__rail-title {
	margin: 0 0 10px;
	font-family: "mixta-pro", Georgia, serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ss-mega-navy);
}

.ss-mega__link--rail:hover,
.ss-mega__link--rail:focus-visible {
	background: var(--ss-mega-surface);
}

.ss-mega__cta {
	margin-top: 20px;
	padding: 18px;
	border-radius: var(--ss-mega-radius-sm);
	background: var(--ss-mega-navy);
	color: #fff;
}

.ss-mega__rail > .ss-mega__cta:first-child {
	margin-top: 0;
}

.ss-mega__cta-heading {
	margin: 0 0 6px;
	font-family: "mixta-pro", Georgia, serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.ss-mega__cta-body {
	margin: 0 0 14px;
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.ss-mega__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	background: #fff;
	color: var(--ss-mega-navy);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	box-shadow: none;
	transition: background-color var(--ss-mega-duration) var(--ss-mega-ease);
}

.ss-mega__cta-link:hover,
.ss-mega__cta-link:focus-visible {
	background: var(--ss-mega-tint-strong);
	color: var(--ss-mega-navy);
}

.ss-mega__cta-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ss-mega__arrow {
	flex: none;
	transition: transform var(--ss-mega-duration) var(--ss-mega-ease);
}

/* Slightly dimmed so the label stays the loudest thing in the button. */
.ss-mega__cta-icon {
	flex: none;
	margin-inline-end: -1px;
	opacity: 0.72;
}

.ss-mega__cta-link:hover .ss-mega__cta-icon,
.ss-mega__cta-link:focus-visible .ss-mega__cta-icon {
	opacity: 1;
}

.ss-mega__cta-link:hover .ss-mega__arrow,
.ss-mega__footer-link:hover .ss-mega__arrow {
	transform: translateX(3px);
}

/* -------------------------------------------------------------------------
 * Panel footer
 * ---------------------------------------------------------------------- */

.ss-mega__footer {
	margin-top: 18px;
	padding: 12px 0;
	border-top: 1px solid var(--ss-mega-line);
}

.ss-mega__footer-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ss-mega-blue);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	box-shadow: none;
}

.ss-mega__footer-link:hover,
.ss-mega__footer-link:focus-visible {
	color: var(--ss-mega-blue-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Narrower desktop
 * ---------------------------------------------------------------------- */

@media (max-width: 1280px) {
	:root {
		--ss-mega-gutter: 28px;
	}

	.ss-mega__body {
		grid-template-columns: minmax(0, 1fr) 230px;
	}
}

@media (max-width: 1024px) {
	.ss-mega__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.ss-mega__rail {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
		gap: 24px;
		align-items: start;
	}

	.ss-mega__rail-title {
		grid-column: 1 / -1;
	}

	.ss-mega__cta {
		margin-top: 0;
	}
}

@media (max-width: 760px) {
	.ss-mega__rail {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Inside the Kadence mobile drawer
 *
 * The same markup, laid out as an accordion. Position and shadow are dropped so
 * the panel flows in the drawer rather than floating over it.
 * ---------------------------------------------------------------------- */

/* clip, not hidden. An overflow: hidden box whose content is taller than its height
   is still a scroll container, so a touch drag over it gets aimed at a box that
   refuses to scroll and the drawer behind it never moves. That happens whenever the
   measured height goes stale, which a rotation or a late web font is enough to do.
   clip does the same visual job without ever becoming a scroll target. */
.ss-mega-item--drawer .ss-mega__panel {
	position: static;
	width: auto;
	max-height: 0;
	overflow: clip;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: max-height var(--ss-mega-duration) var(--ss-mega-ease);
}

.ss-mega-item--drawer .ss-mega__panel:not(.is-open) {
	/* Keeps the links out of the tab order while the accordion is shut. */
	visibility: hidden;
}

.ss-mega-item--drawer .ss-mega__panel.is-open {
	max-height: var(--ss-mega-drawer-height, none);
	visibility: visible;
}

/* Indented as a whole rather than row by row, so everything the panel contains
   reads as sitting under the menu item that opened it. Without it the sea area
   rows start on the same left edge as Trips and Articles and the drawer looks like
   one flat list of unrelated things. */
.ss-mega-item--drawer .ss-mega__inner {
	padding: 4px 0 12px 12px;
}

.ss-mega-item--drawer .ss-mega__intro {
	display: none;
}

.ss-mega-item--drawer .ss-mega__body,
.ss-mega-item--drawer .ss-mega__rail {
	display: block;
}

.ss-mega-item--drawer .ss-mega__grid,
.ss-mega-item--drawer [data-ss-mega-style="route"] .ss-mega__grid {
	columns: 1 auto;
}

/* Kadence styles anything that is an <a> inside a <ul> inside .mobile-navigation
   as a top-level drawer row: display: block, full width, its own padding, and a
   divider beneath it. Every link in a panel is exactly that, so all 45 destinations
   were rendering as 51px rows each with a rule under it.
   
   That selector is .mobile-navigation ul li a, which outranks every component style
   in this file, so anything a panel link needs has to be restated here rather than
   where it is defined. Three classes is enough to win it back without !important. */
.ss-mega-ready .ss-mega-item--drawer .ss-mega__panel a {
	width: auto;
	border-bottom: 0;
	/* A drag that starts on a link picks the link up, because links are draggable
	   by default, so the drawer only scrolled from drags that began on the gaps
	   between rows. Most of a panel is link, which made it feel stuck. */
	-webkit-user-drag: none;
}

/* Around a 40px row. Deliberately short of the 44px a top-level control gets: a
   sea area can hold sixteen of these, and the extra 4px each buys less than the
   scrolling it costs. Still well clear of the 24px minimum target size. */
.ss-mega-ready .ss-mega-item--drawer .ss-mega__link {
	padding: 10px;
}

/* Left as the theme's block, these read as full width bars with the arrow jammed
   against the last word, because display: block drops the flex gap that spaces the
   two. Back to a pill sized to its label, and a text link that lines up with the
   left edge of the panel rather than sitting 7px inside it. */
.ss-mega-ready .ss-mega-item--drawer .ss-mega__cta-link,
.ss-mega-ready .ss-mega-item--drawer .ss-mega__footer-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ss-mega-ready .ss-mega-item--drawer .ss-mega__cta-link {
	padding: 12px 18px;
}

.ss-mega-ready .ss-mega-item--drawer .ss-mega__footer-link {
	padding: 10px 0;
}

/* Vertical padding kept so the hub stays a 44px target, horizontal dropped so the
   area name starts on the same edge as everything else in the panel. */
.ss-mega-ready .ss-mega-item--drawer .ss-mega__group-link {
	padding: 12px 0;
}

.ss-mega-item--drawer .ss-mega__group {
	padding-block: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* The row that opened the panel already ends in the theme's own divider, so the
   first group drawing one too puts two rules a few pixels apart. */
.ss-mega-item--drawer .ss-mega__group:first-child {
	border-top: 0;
}

/* The row that carries the group name and its toggle. The trailing padding keeps
   a long name off the chevron; the toggle is absolute so it cannot add to it. */
.ss-mega-item--drawer .ss-mega__group-head {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-inline-end: 44px;
}

.ss-mega-item--drawer .ss-mega__group-title {
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
}

.ss-mega-item--drawer .ss-mega__rail-title {
	color: rgba(255, 255, 255, 0.66);
}

/* The toggle covers the whole head row, so tapping anywhere on it opens the group
   and there is no small target to aim at. The chevron is drawn at the trailing
   edge by the button's own alignment rather than being positioned separately. */
.ss-mega-item--drawer .ss-mega__group-toggle {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	padding: 0 10px;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Deliberately the whole row and not a square around the chevron. One level up the
   chevron is fenced off because the label beside it goes somewhere else; here the row
   itself is the control, so the feedback should show that rather than point at a
   44px target the user does not have to hit. */
.ss-mega-item--drawer .ss-mega__group-toggle:hover,
.ss-mega-item--drawer .ss-mega__group-toggle:focus-visible {
	background: rgba(255, 255, 255, 0.06);
}

.ss-mega-item--drawer .ss-mega__group-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* Sits the hub link above the row toggle, so the name still reaches the region hub
   while the rest of the row expands the group. Without this the toggle would cover
   the link and the hub would be unreachable from the drawer. */
.ss-mega-item--drawer .ss-mega__group-link {
	position: relative;
	z-index: 1;
}

/* Indented under the group name so the two levels read apart, and given its own
   breathing room at the foot rather than the group carrying padding at all times. */
.ss-mega-item--drawer .ss-mega__group.is-open .ss-mega__list {
	padding: 2px 0 12px 12px;
}

/* Not .ss-mega__group-link: a group heading that happens to link to a region hub
   must not read brighter than one that does not, or the difference looks like a
   rendering fault rather than a link. It inherits the heading colour instead. */
.ss-mega-item--drawer .ss-mega__link {
	color: #fff;
}

.ss-mega-item--drawer .ss-mega__link:hover,
.ss-mega-item--drawer .ss-mega__link:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.ss-mega-item--drawer .ss-mega__rail {
	padding: 8px 0 0;
	background: transparent;
}

.ss-mega-item--drawer .ss-mega__cta {
	margin-top: 12px;
	background: rgba(255, 255, 255, 0.08);
}

.ss-mega-item--drawer .ss-mega__footer {
	border-top-color: rgba(255, 255, 255, 0.14);
}

/* Underlined here but not on the desktop panel. In the drawer it is the last thing
   in a column of navy rows that are all links, so nothing about its position marks it
   out as one; on desktop it sits alone under a rule with the arrow to carry it. */
.ss-mega-item--drawer .ss-mega__footer-link {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* The desktop blue is far too dark to read on navy. Light enough to register as an
   accent against white labels without competing with them. */
.ss-mega-item--drawer .ss-mega__trend {
	color: #8ab4e8;
}

.ss-mega-item--drawer .ss-mega__link:hover .ss-mega__trend {
	color: #a9caf0;
}