/*
 * Softliro — mega menu.
 *
 * Loaded only when at least one primary menu item has a panel enabled.
 * The panel is a full-width band under the header, not a floating card: it
 * reads as part of the navigation system rather than a dropdown.
 */

.sl-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 65;
	background: var(--sl-surface);
	border-top: var(--sl-border-w) solid var(--sl-hairline);
	border-bottom: var(--sl-border-w) solid var(--sl-hairline);
	animation: sl-mega-in 180ms var(--sl-ease);
}

.sl-mega[hidden] {
	display: none;
}

@keyframes sl-mega-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

/*
 * The panel is positioned against the header, not against its list item, so a
 * container-width panel still spans the page.
 */
.sl-nav--primary .sl-nav__item--mega {
	position: static;
}

.sl-mega__inner {
	width: 100%;
	max-width: var(--sl-container);
	margin-inline: auto;
	padding: 40px var(--sl-gutter) 44px;
}

.sl-mega--full .sl-mega__inner {
	max-width: none;
	padding-inline: calc(var(--sl-gutter) * 1.5);
}

.sl-mega__grid {
	display: grid;
	grid-template-columns: repeat(var(--sl-mega-columns, 3), minmax(0, 1fr));
	gap: 48px;
}

/*
 * The intro track is capped at the intro's own measure rather than given a
 * proportional share. As 1.6fr the track outgrew the 34ch cap once the panel
 * passed about 1400px, so the intro stopped filling it and the first gap
 * opened to 92px against the 48px between every other column. Below 1280px
 * the intro is hidden and none of this applies.
 */
.sl-mega__grid--with-intro {
	--sl-mega-intro: 34ch;
	/*
	 * The link columns are sized to what they hold rather than splitting the
	 * row evenly, the same way the footer columns are. Services carries icons
	 * and the longest names, Platforms carries nine short ones and was sitting
	 * on ~180px of slack. `auto` tracks take their content width first and
	 * then share out what is left, so the columns still finish flush to the
	 * container and the 48px gutters stay equal.
	 *
	 * Unlike the footer this needs no width floor: the intro track is a fixed
	 * cap rather than a fraction, and below 1280px the intro steps out and the
	 * link columns share the row on their own.
	 */
	grid-template-columns: minmax(0, var(--sl-mega-intro)) repeat(var(--sl-mega-columns, 3), auto);
}

.sl-mega__intro {
	max-width: var(--sl-mega-intro, 34ch);
}

.sl-mega__headline {
	font-family: var(--sl-font-display);
	font-weight: 300;
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: -0.03em;
	margin: 0;
}

.sl-mega__lead {
	margin: 12px 0 0;
	font-size: 16px;
	color: var(--sl-text-soft);
}

.sl-mega__intro .sl-link-arrow {
	margin-top: 22px;
}

.sl-mega__column-title {
	display: block;
	padding-bottom: 12px;
	margin-bottom: 6px;
	border-bottom: var(--sl-border-w) solid var(--sl-hairline);
}

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

.sl-mega__link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-bottom: var(--sl-border-w) solid rgba(var(--sl-text-rgb), 0.06);
	color: var(--sl-text);
	/*
	 * Larger than the site's UI size. These are the panel's real destinations,
	 * and at 15px they read as small print beside the intro's headline. The
	 * chip columns override this below — a chip is a label, not a destination.
	 */
	font-size: 17px;
	line-height: 1.4;
}

.sl-mega__link:hover,
.sl-mega__link:focus-visible {
	color: var(--sl-link);
}

.sl-mega__link .sl-icon {
	color: var(--sl-muted);
	margin-top: 1px;
	transition: color var(--sl-duration) var(--sl-ease);
}

.sl-mega__link:hover .sl-icon {
	color: var(--sl-link);
}

.sl-mega__link-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sl-mega__link-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
}

/* A column marked strong (the Services list, via its menu item's CSS class)
   sets its names a size up; the other columns stay at the regular size. */
.sl-mega__column--strong .sl-mega__link-title {
	font-size: 19px;
}

.sl-mega__link-desc {
	font-size: 13px;
	line-height: 1.4;
	color: var(--sl-muted);
}

/* A column with no children renders as a card instead of a list. */
.sl-mega__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 24px;
	border: var(--sl-border-w) solid var(--sl-hairline);
	border-radius: var(--sl-radius);
	background: var(--sl-bg);
	color: var(--sl-text);
	transition: border-color var(--sl-duration) var(--sl-ease);
}

.sl-mega__card:hover {
	border-color: var(--sl-hairline-strong);
	color: var(--sl-text);
}

.sl-mega__card-title {
	font-family: var(--sl-font-display);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.02em;
}

.sl-mega__column--featured .sl-mega__card {
	background: var(--sl-primary-wash);
	border-color: rgba(var(--sl-primary-rgb), 0.3);
}

/* No-JS and pointer fallbacks. */
@media (hover: hover) {
	.sl-nav--primary .sl-nav__item--mega:hover > .sl-mega[hidden],
	.sl-nav--primary .sl-nav__item--mega:focus-within > .sl-mega[hidden] {
		display: block;
	}
}

.sl-nav--primary .sl-nav__item--mega:focus-within > .sl-mega[hidden] {
	display: block;
}

/*
 * Between the drawer breakpoint (1024px) and 1280px the four-track row has no
 * room: the intro kept its 34ch and Platforms was crushed to ~109px at 1200px,
 * and the old two-column fallback made the panel taller than the screen. Here
 * the intro steps out - the Services heading links to the same page - and the
 * three link columns take their natural widths in one row.
 */
@media (max-width: 1280px) {
	.sl-nav--primary .sl-mega__grid--with-intro {
		grid-template-columns: repeat(var(--sl-mega-columns, 3), auto);
		gap: 40px;
	}

	.sl-nav--primary .sl-mega__intro {
		display: none;
	}
}

/*
 * Inside the mobile drawer the panel is not a floating layer: it expands
 * inline, one column, with the header's own type scale.
 */
.sl-nav--mobile .sl-mega {
	position: static;
	background: none;
	border: 0;
	animation: none;
	padding-bottom: 12px;
}

.sl-nav--mobile .sl-mega__inner {
	padding: 0;
	max-width: none;
}

.sl-nav--mobile .sl-mega__grid,
.sl-nav--mobile .sl-mega__grid--with-intro {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.sl-nav--mobile .sl-mega__intro {
	display: none;
}

.sl-nav--mobile .sl-mega__link {
	padding: 11px 0 11px 16px;
}

@media (hover: hover) {
	.sl-nav--mobile .sl-nav__item--mega:hover > .sl-mega[hidden] {
		display: none;
	}
}

/*
 * A column of short, single-word entries — platforms, industries — reads as a
 * set of tags rather than a list of destinations. Stacked, twenty platform
 * names became a wall of rows that pushed the panel taller than the viewport;
 * inline they take four lines and the eye can scan them.
 *
 * Set "sl-mega__column--tags" in the menu item's CSS Classes field.
 */
/*
 * Forty per cent to the intro, thirty to each column. The intro carries the
 * panel's one piece of writing and earns the extra room; the two columns stay
 * equal to each other, which is the part that was wrong before.
 */
.sl-mega__grid--with-intro.sl-mega__grid--tags {
	grid-template-columns: 4fr repeat(var(--sl-mega-columns, 2), 3fr);
}

/*
 * Let the intro use the track it has been given, and sit its link on the
 * column's baseline rather than trailing the paragraph — the panel then closes
 * on one line across all three columns instead of a ragged edge.
 */
.sl-mega__grid--tags .sl-mega__intro {
	max-width: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.sl-mega__grid--tags .sl-mega__intro .sl-link-arrow {
	margin-top: auto;
	padding-top: 24px;
}

.sl-mega__column--tags .sl-mega__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.sl-mega__column--tags .sl-mega__list-item {
	margin: 0;
}

/* The row rules and the flex body belong to a stacked link, not to a chip. */
.sl-mega__column--tags .sl-mega__link {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	border: var(--sl-border-w) solid var(--sl-hairline-strong);
	border-bottom: var(--sl-border-w) solid var(--sl-hairline-strong);
	border-radius: var(--sl-radius);
	font-family: var(--sl-font-mono);
	font-size: 11px;
	letter-spacing: var(--sl-label-tracking);
	text-transform: uppercase;
	color: var(--sl-text-soft);
	transition: color var(--sl-duration) var(--sl-ease),
		border-color var(--sl-duration) var(--sl-ease);
}

.sl-mega__column--tags .sl-mega__link:hover,
.sl-mega__column--tags .sl-mega__link:focus-visible {
	color: var(--sl-text);
	border-color: var(--sl-signal);
}

/* A chip is the name only — descriptions and icons would defeat the point. */
.sl-mega__column--tags .sl-mega__link-desc,
.sl-mega__column--tags .sl-mega__icon {
	display: none;
}

@media (max-width: 1024px) {
	.sl-mega__column--tags {
		grid-column: 1 / -1;
	}
}

/*
 * A column holding a long list can span two grid tracks and flow its links into
 * two sub-columns, so ten items read under one heading rather than being split
 * into two headings that mean the same thing.
 *
 * Set "sl-mega__column--split" in the menu item's CSS Classes field.
 */
.sl-mega__column--split {
	grid-column: span 2;
}

.sl-mega__column--split .sl-mega__list {
	columns: 2;
	column-gap: 40px;
}

.sl-mega__column--split .sl-mega__list-item {
	break-inside: avoid;
}

@media (max-width: 1024px) {
	.sl-mega__column--split {
		grid-column: 1 / -1;
	}
}

@media (max-width: 700px) {
	.sl-mega__column--split .sl-mega__list {
		columns: 1;
	}
}

/*
 * The panel search, under the intro's lead (assets/js/mega.js): a pill with
 * the magnifier in its own violet disc, a lime go button that arrives once
 * there is something to search for, a soft violet glow while typing, example
 * searches typing themselves into the empty field, and live suggestions
 * dropping from the field.
 */
.sl-mega__search {
	margin-top: 22px;
}

.sl-mega__search-field {
	position: relative;
}

.sl-mega__search-icon {
	position: absolute;
	top: 50%;
	left: 7px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(var(--sl-primary-rgb), 0.22);
	color: var(--sl-text);
	transform: translateY(-50%);
	pointer-events: none;
	transition: background-color var(--sl-duration) var(--sl-ease), transform var(--sl-duration) var(--sl-ease);
}

.sl-mega__search-icon svg {
	display: block;
}

.sl-mega__search .sl-mega__search-input {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 50px 0 50px;
	border: var(--sl-border-w) solid var(--sl-hairline-strong);
	border-radius: 999px;
	background: rgba(242, 239, 233, 0.04);
	color: var(--sl-text);
	font: inherit;
	font-size: 14px;
	box-shadow: none;
	transition:
		border-color var(--sl-duration) var(--sl-ease),
		background-color var(--sl-duration) var(--sl-ease),
		box-shadow var(--sl-duration) var(--sl-ease);
}

.sl-mega__search .sl-mega__search-input::placeholder {
	color: var(--sl-muted);
	transition: opacity 0.3s ease;
}

.sl-mega__search .sl-mega__search-input:hover {
	border-color: rgba(242, 239, 233, 0.3);
}

.sl-mega__search .sl-mega__search-input:focus {
	outline: none;
	border-color: var(--sl-primary);
	background: rgba(242, 239, 233, 0.07);
	box-shadow: 0 0 0 4px rgba(var(--sl-primary-rgb), 0.18), 0 10px 30px rgba(var(--sl-primary-rgb), 0.15);
}

.sl-mega__search-field:focus-within .sl-mega__search-icon {
	background: var(--sl-primary);
	transform: translateY(-50%) scale(1.05);
}

.sl-mega__search .sl-mega__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.sl-mega__search-go {
	position: absolute;
	top: 50%;
	right: 7px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sl-signal);
	color: #0b0e0f;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-50%) scale(0.6);
	pointer-events: none;
	transition: opacity var(--sl-duration) var(--sl-ease), transform var(--sl-duration) var(--sl-ease);
}

.sl-mega__search.has-value .sl-mega__search-go {
	opacity: 1;
	transform: translateY(-50%) scale(1);
	pointer-events: auto;
}

.sl-mega__search-go:hover {
	transform: translateY(-50%) scale(1.08);
}

/* Suggestions: a card dropping from the field, sliding in. */
.sl-mega__results {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	left: 0;
	z-index: 5;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: var(--sl-border-w) solid var(--sl-hairline-strong);
	border-radius: 16px;
	background: var(--sl-surface-2);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
	animation: sl-mega-results-in 0.2s var(--sl-ease);
}

@keyframes sl-mega-results-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

.sl-mega__result {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--sl-text);
	text-decoration: none;
	transition: background-color 0.15s ease, padding-left 0.15s ease;
}

.sl-mega__result:hover,
.sl-mega__result:focus-visible {
	outline: none;
	padding-left: 16px;
	background: rgba(var(--sl-primary-rgb), 0.16);
}

.sl-mega__result-title {
	font-size: 14px;
	line-height: 1.35;
}

.sl-mega__result-title mark {
	background: none;
	color: var(--sl-signal);
}

.sl-mega__result-kind {
	flex: none;
	font-family: var(--sl-font-mono);
	font-size: 10px;
	letter-spacing: var(--sl-label-tracking);
	text-transform: uppercase;
	color: var(--sl-muted);
}

.sl-mega__result-note {
	padding: 10px 12px;
	font-size: 13px;
	color: var(--sl-muted);
}

@media (prefers-reduced-motion: reduce) {
	.sl-mega__results {
		animation: none;
	}
}

/*
 * The intro column runs the full height of the panel: headline, lead and
 * search at the top, and the way out at the foot, lined up with the bottom
 * of the link columns.
 */
.sl-mega__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.sl-mega__intro .sl-mega__search {
	align-self: stretch;
}

.sl-mega__help {
	margin-top: auto;
	padding-top: 32px;
}

.sl-mega__help-title {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sl-text);
}

.sl-mega__help-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.sl-mega__intro .sl-mega__help .sl-link-arrow {
	margin-top: 0;
	padding-top: 0;
}

/* An optional label above the headline (menu item setting "Panel label"). */
.sl-mega__intro .sl-label + .sl-mega__headline {
	margin-top: 18px;
}

/* The headline leads the column: a little room above it and a larger size. */
.sl-nav--primary .sl-mega__intro {
	padding-top: 6px;
}

.sl-nav--primary .sl-mega__headline {
	font-size: 36px;
	line-height: 1.15;
}

/* The gaps below the larger headline grow with it. */
.sl-nav--primary .sl-mega__intro .sl-mega__lead {
	margin-top: 16px;
}

.sl-nav--primary .sl-mega__intro .sl-mega__search {
	margin-top: 28px;
}

/*
 * The intro column sizes to the first link column rather than to the
 * tallest one, so its closing links end on the line of that column's last
 * item (the height is set in assets/js/mega.js). If its own content needs
 * more room it simply grows.
 */
.sl-nav--primary .sl-mega__grid--with-intro .sl-mega__intro {
	align-self: start;
}

.sl-nav--primary .sl-mega__help {
	padding-top: 24px;
}

/* With the label above it, the column starts flush with the other labels. */
.sl-nav--primary .sl-mega__intro:has(> .sl-label) {
	padding-top: 0;
}

/* A little room above and to the left of the intro column, label included. */
.sl-nav--primary .sl-mega__intro:has(> .sl-label) {
	padding-top: 10px;
	padding-left: 12px;
}

/* Without the lead, the search sits a touch closer to the headline. */
.sl-nav--primary .sl-mega__intro .sl-mega__headline + .sl-mega__search {
	margin-top: 22px;
}