/*
 * WBS Mega Menu
 *
 * Reads the same markup/ACF data at every width — only the CSS (this file)
 * and the accordion behaviour in megamenu.js change per breakpoint:
 *  - >=768px (tablet + desktop): hover dropdowns, driven purely by CSS
 *    (:hover / :focus-within); hover:none devices get a tap-driven
 *    aria-expanded toggle instead (see megamenu.js).
 *  - <768px (mobile): a single-column accordion. Top-level items and each
 *    mega-columns group expand/collapse via the same aria-expanded pattern,
 *    always JS-driven there since there's no hover to fall back on.
 *
 * Breakpoint used throughout this file: 768px. (CSS custom properties can't
 * be referenced inside @media conditions without a build step, so if this
 * value changes, update every "768px"/"767.98px" occurrence below.)
 */

.wbs-megamenu {
	--wbs-mm-accent: #6054e8;
	--wbs-mm-text: #181d27;
	--wbs-mm-muted: #717680;
	--wbs-mm-border: #ebebf2;
	--wbs-mm-panel-bg: #ffffff;
	--wbs-mm-header-bg: #6054e8;
	--wbs-mm-footer-bg: #f9f7f7;
	--wbs-mm-cta-bg: #292929;
	--wbs-mm-radius: 16px;
	--wbs-mm-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	--wbs-mm-font: 'Inter', sans-serif;

	font-family: var(--wbs-mm-font);
}

@media (min-width: 768px) {
	.wbs-megamenu {
		display: block;
	}

	.wbs-megamenu__top {
		display: flex;
		/*
		 * stretch, not center: lets each trigger <li> below fill whatever
		 * height this <ul> ends up with (e.g. the full 75px header bar when
		 * wrapped — see .wbs-header .wbs-megamenu in header.css). Centering
		 * here would leave a dead strip below each trigger, inside the bar
		 * but outside every trigger's own hoverable box, that breaks a slow
		 * hover from the trigger down into its dropdown panel. In standalone
		 * usage this is a no-op — nothing makes the <ul> taller than its
		 * content, so stretch and center render identically.
		 */
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wbs-megamenu__top-item {
		position: relative;
		display: flex;
		align-items: center;
	}

	/*
	 * !important throughout: plain <button>/<a> elements on this site pick
	 * up a global/theme button style (observed as a black pill with
	 * near-invisible text) with higher specificity than a bare class
	 * selector. These overrides keep this component's look independent of
	 * whatever else styles button/a on the page.
	 */
	.wbs-megamenu__trigger {
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px !important;
		height: 30px;
		background: none !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: 8px !important;
		text-transform: none !important;
		text-decoration: none !important;
		letter-spacing: normal !important;
		min-width: 0 !important;
		line-height: normal !important;
		cursor: pointer;
		font: inherit;
		font-family: var(--wbs-mm-font) !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		color: var(--wbs-mm-text) !important;
		padding: 6px 12px !important;
		box-sizing: border-box;
	}

	.wbs-megamenu__trigger::after {
		content: "";
		display: inline-block;
		flex-shrink: 0;
		width: 10px;
		height: 6px;
		background-color: currentColor;
		-webkit-mask-image: url(../img/icons/chevron-down.svg);
		mask-image: url(../img/icons/chevron-down.svg);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center;
		mask-position: center;
		transition: transform 0.15s ease;
	}

	.wbs-megamenu__trigger--link::after {
		display: none;
	}

	.wbs-megamenu__top-item:hover > .wbs-megamenu__trigger,
	.wbs-megamenu__top-item:focus-within > .wbs-megamenu__trigger {
		color: var(--wbs-mm-accent) !important;
	}

	.wbs-megamenu__top-item:hover > .wbs-megamenu__trigger::after,
	.wbs-megamenu__top-item:focus-within > .wbs-megamenu__trigger::after {
		transform: rotate(180deg);
	}

	/*
	 * Button-styled nav item (e.g. "Apply now"). Pushed to the far right of
	 * the nav's own flex row so it self-aligns whether this nav is used
	 * standalone or wrapped by the header component (which gives the nav
	 * group flex:1 to grow into — see header.css).
	 */
	.wbs-megamenu__top-item--button {
		margin-left: auto;
	}

	/*
	 * Matches the Figma frame's own auto-layout box: 108x34 "Hug" (no
	 * border) for the "Apply now" label — height is set explicitly since
	 * that's fixed in the design, width stays auto/hug via padding so
	 * longer labels (e.g. other languages) still self-size correctly
	 * instead of clipping or stretching to a hardcoded 108px.
	 */
	.wbs-megamenu__trigger--button {
		background: var(--wbs-mm-cta-bg) !important;
		color: #fff !important;
		border: none !important;
		border-radius: 999px !important;
		padding: 0 18px !important;
		height: 34px !important;
		margin-left: 8px !important;
	}

	/*
	 * transition lives only on the :hover/:focus-within rule, not the base
	 * one above — a transition always runs off the *incoming* state's own
	 * transition property, so going black -> purple picks this up and
	 * eases in, while purple -> black falls back to the base rule (which
	 * has none) and snaps instantly, matching prod.
	 */
	.wbs-megamenu__top-item:hover > .wbs-megamenu__trigger--button,
	.wbs-megamenu__top-item:focus-within > .wbs-megamenu__trigger--button {
		background: var(--wbs-mm-header-bg) !important;
		color: #fff !important;
		transition: background-color 0.3s ease;
	}

	/*
	 * The panel's own box starts immediately at the trigger row's bottom
	 * edge (top: 100%, no gap) and stays fully transparent — padding-top
	 * is the visual 8px gap instead of a `top` offset. That keeps the
	 * gap area part of this hoverable box (and thus part of the
	 * :hover/:focus-within chain below), so moving the pointer from the
	 * trigger down into the panel never crosses non-descendant page
	 * content and drops the hover state mid-transition. The actual
	 * visible white panel (bg/radius/shadow/border) lives on the nested
	 * .wbs-megamenu__panel-inner, offset down by that padding.
	 */
	.wbs-megamenu__panel {
		position: absolute;
		top: 100%;
		/*
		 * Centered under the trigger by default (matches the reference
		 * design for the simple/cards dropdowns) — the mega-columns panel
		 * overrides this back to left-anchored below, since a full-width
		 * panel centering under a narrow trigger doesn't make sense there.
		 */
		left: 50%;
		transform: translateX(-50%);
		z-index: 100;
		padding-top: 8px;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.15s ease, visibility 0.15s;
	}

	.wbs-megamenu__panel-inner {
		background: var(--wbs-mm-panel-bg);
		border-radius: var(--wbs-mm-radius);
		box-shadow: var(--wbs-mm-shadow);
		border: 1px solid var(--wbs-mm-border);
		transform: translateY(4px);
		transition: transform 0.15s ease;
	}

	.wbs-megamenu__top-item:hover > .wbs-megamenu__panel .wbs-megamenu__panel-inner,
	.wbs-megamenu__top-item:focus-within > .wbs-megamenu__panel .wbs-megamenu__panel-inner {
		transform: translateY(0);
	}

	.wbs-megamenu__top-item:hover > .wbs-megamenu__panel,
	.wbs-megamenu__top-item:focus-within > .wbs-megamenu__panel {
		opacity: 1;
		visibility: visible;
	}

	/*
	 * Touch/tablet fallback: `(hover: none)` devices can't rely on the
	 * :hover rules above at all (there's no pointer to hover with), so
	 * megamenu.js adds a tap-driven aria-expanded toggle there instead —
	 * scoped in JS to hover:none so it never fires (or fights the :hover
	 * rules above) on ordinary mouse/trackpad devices. Same three
	 * hover/focus-within pairs as above, replayed against aria-expanded.
	 */
	@media (hover: none) {
		.wbs-megamenu__trigger[aria-expanded="true"] {
			color: var(--wbs-mm-accent) !important;
		}

		.wbs-megamenu__trigger[aria-expanded="true"]::after {
			transform: rotate(180deg);
		}

		.wbs-megamenu__top-item > .wbs-megamenu__trigger[aria-expanded="true"] + .wbs-megamenu__panel {
			opacity: 1;
			visibility: visible;
		}

		.wbs-megamenu__top-item > .wbs-megamenu__trigger[aria-expanded="true"] + .wbs-megamenu__panel .wbs-megamenu__panel-inner {
			transform: translateY(0);
		}
	}

	/* Mega menu (columns) panel — e.g. "Courses" */

	.wbs-megamenu__panel--columns {
		left: 0;
		transform: none;
		width: min(92vw, 1256px);
		box-sizing: border-box;
	}

	/*
	 * Mobile-only wrapper (see render_mega_columns_panel() in
	 * class-wbs-megamenu.php) that lets .wbs-megamenu__columns and the
	 * bottom bar share one border there. display: contents removes it
	 * from the layout tree entirely here, so .wbs-megamenu__columns and
	 * .wbs-megamenu__bottom-bar behave exactly as if they were still
	 * direct children of .wbs-megamenu__panel-inner — this desktop layout
	 * (gap, positioning) is unrelated and untouched by the mobile wrapper.
	 */
	.wbs-megamenu__columns-wrap {
		display: contents;
	}

	.wbs-megamenu__panel--columns .wbs-megamenu__panel-inner {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 12px;
		overflow: hidden;
	}

	.wbs-megamenu__columns {
		display: flex;
		align-items: flex-start;
		gap: 20px;
	}

	.wbs-megamenu__column {
		display: flex;
		flex-direction: column;
		flex: 1 0 0;
		min-width: 0;
	}

	/*
	 * The heading is a <button> (see render_column() in class-wbs-megamenu.php)
	 * so the mobile accordion can reuse the same markup — desktop keeps it
	 * looking exactly like the static heading this used to be: full-width,
	 * inert (no pointer/cursor affordance, chevron hidden), same purple
	 * label style. !important throughout for the same reason as
	 * .wbs-megamenu__trigger above — the theme's global button/heading
	 * reset otherwise wins on cascade priority.
	 */
	.wbs-megamenu__column-toggle {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 4px 12px !important;
		background: var(--wbs-mm-header-bg) !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: 2px !important;
		text-align: left;
		cursor: default;
		pointer-events: none;
		font-family: var(--wbs-mm-font) !important;
		font-size: 16px !important;
		font-weight: 700 !important;
		line-height: normal !important;
		color: #f9f7f7 !important;
	}

	.wbs-megamenu__column-chevron {
		display: none;
	}

	.wbs-megamenu__column ul {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wbs-megamenu__item a,
	.wbs-megamenu__item.wbs-megamenu__item--unlinked {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 8px;
		padding: 8px 12px;
		border-radius: 6px;
		text-decoration: none;
		font-family: var(--wbs-mm-font) !important;
		color: var(--wbs-mm-text);
		box-sizing: border-box;
	}

	.wbs-megamenu__item a:hover {
		background: var(--wbs-mm-footer-bg);
	}

	.wbs-megamenu__item-content {
		display: flex;
		flex-direction: column;
		gap: 0;
		min-width: 0;
	}

	.wbs-megamenu__item-title {
		display: block;
		font-weight: 600;
		font-size: 14px;
	}

	.wbs-megamenu__meta {
		display: block;
		font-size: 12px;
		font-weight: 500;
		color: var(--wbs-mm-muted);
	}

	.wbs-megamenu__flame {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 29px;
		height: 29px;
		border-radius: 0.745px 8.935px 0.745px 8.935px;
		background: linear-gradient(135deg, #f8485e, #6054e8);
	}

	@keyframes wbs-megamenu-flame-shake {
		0%, 100% {
			transform: rotate(0deg);
		}
		20% {
			transform: rotate(-12deg);
		}
		40% {
			transform: rotate(10deg);
		}
		60% {
			transform: rotate(-8deg);
		}
		80% {
			transform: rotate(6deg);
		}
	}

	.wbs-megamenu__item a:hover .wbs-megamenu__flame {
		animation: wbs-megamenu-flame-shake 0.5s ease-in-out;
	}

	/*
	 * !important + explicit width/height: same site-wide SVG icon reset
	 * (observed forcing icons to a small fixed em-square) that required the
	 * logo/chevron overrides elsewhere in this file and header.css.
	 */
	.wbs-megamenu__flame svg {
		display: block !important;
		width: 20.3px !important;
		height: 23.2px !important;
		max-width: none !important;
		max-height: none !important;
		flex-shrink: 0;
	}

	.wbs-megamenu__bottom-bar {
		background: var(--wbs-mm-footer-bg);
		border-radius: 2px;
	}

	.wbs-megamenu__bottom-bar ul {
		display: flex;
		/*
		 * Wraps instead of forcing all 4 links into one row — at tablet
		 * widths, where the panel itself is narrower, that squeezed them
		 * into overlapping each other (each link is white-space: nowrap so
		 * the row had nowhere to give). The 1100px breakpoint below forces
		 * an even 2-per-row split there rather than relying on flex-wrap's
		 * default left-to-right flow, which — given 4 items of differing
		 * text length — settles into an uneven 3+1 instead of 2+2.
		 */
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 12px 16px;
		margin: 0;
		padding: 12px 32px;
		box-sizing: border-box;
		list-style: none;
	}

	.wbs-megamenu__bottom-bar li {
		min-width: 0;
	}

	/*
	 * !important on color/font-family: same site-wide link reset (forced
	 * black Helvetica text on bare <a> elements) that required !important
	 * throughout the rest of this file — see the header note at the top.
	 */
	.wbs-megamenu__bottom-bar a {
		display: inline-block;
		position: relative;
		/*
		 * Reserves room for the absolutely-positioned arrow below (14px
		 * icon + 6px gap) directly in the text's own box, rather than via
		 * flex gap — see the arrow's own comment for why.
		 */
		padding-right: 20px;
		font-family: var(--wbs-mm-font) !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		color: var(--wbs-mm-accent) !important;
		text-decoration: none;
		white-space: nowrap;
		transition: color 0.15s ease;
	}

	.wbs-megamenu__bottom-bar a:hover {
		color: #2d21bb !important;
		text-decoration: underline;
	}

	/*
	 * Positioned absolutely (out of flow) rather than laid out via flex
	 * gap, so animating it on hover only moves the arrow's own box — no
	 * flex recalculation of the row that could also nudge the text.
	 */
	.wbs-megamenu__bottom-bar a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		transition: right 0.15s ease;
		/*
		 * The source SVG's own glyph is 13.33x13.33 — sizing the mask box
		 * to match that (rather than a rounder 20px) keeps the arrow at
		 * its actual designed proportions instead of stretching it to fill
		 * a bigger box than the glyph was drawn for.
		 */
		width: 14px;
		height: 14px;
		background-color: currentColor;
		-webkit-mask-image: url(../img/icons/arrow-right.svg);
		mask-image: url(../img/icons/arrow-right.svg);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center;
		mask-position: center;
	}

	.wbs-megamenu__bottom-bar a:hover::after {
		right: -2px;
	}

	/* Simple dropdown (two-line cards) panel — "For companies" / "Why us" / "Resources" */

	.wbs-megamenu__panel--simple {
		width: min(90vw, 320px);
	}

	.wbs-megamenu__panel--simple .wbs-megamenu__panel-inner {
		padding: 12px;
	}

	.wbs-megamenu__simple-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wbs-megamenu__simple-list a {
		display: block;
		padding: 10px 12px;
		border-radius: 8px;
		font-family: var(--wbs-mm-font) !important;
		text-decoration: none;
	}

	.wbs-megamenu__simple-list a:hover {
		background: var(--wbs-mm-footer-bg);
	}

	.wbs-megamenu__simple-list strong {
		display: block;
		font-size: 14px;
		font-weight: 600;
		color: var(--wbs-mm-text);
	}

	.wbs-megamenu__simple-list span {
		display: block;
		font-size: 12px;
		font-weight: 500;
		color: var(--wbs-mm-muted);
		margin-top: 2px;
	}

	.wbs-megamenu__simple-list li + li {
		border-top: 1px solid var(--wbs-mm-border);
	}
}

/*
 * Tablet-range override for the mega-columns bottom bar: forces an even
 * 2-per-row split for its 4 links instead of the single-row layout used at
 * wider desktop widths, where they comfortably fit on one line. 1100px is
 * roughly where 4 links + gaps + panel padding stop fitting comfortably;
 * min-width 768px matches this component's own visibility threshold, so
 * this is scoped to exactly the same range flex-wrap: wrap above is only
 * otherwise useful in.
 */
@media (min-width: 768px) and (max-width: 1100px) {
	.wbs-megamenu__bottom-bar li {
		flex: 1 1 calc(50% - 8px);
	}
}

/*
 * Mobile accordion (<768px). Same markup as desktop, entirely different
 * layout: a single-column stack instead of hover dropdowns, driven by
 * aria-expanded toggles from megamenu.js (see the click handlers at the
 * bottom of that file — always active here, since real phones also match
 * `(hover: none)`).
 *
 * Standalone [wbs_mega_menu] usage renders this in-flow, always expanded
 * open (no hamburger to hide it behind). When wrapped by [wbs_header],
 * header.css hides/reveals the whole thing as a full-screen overlay below
 * the sticky bar instead — see `.wbs-header .wbs-megamenu` there.
 */
@media (max-width: 767.98px) {
	.wbs-megamenu__top {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		/*
		 * min-height: 100% (not flex-grow) — stretches this to fill
		 * .wbs-header .wbs-megamenu's full height (header.css) when the
		 * collapsed accordion alone is shorter than the screen, which is
		 * what lets margin-top: auto on the trailing CTA item below reach
		 * the real bottom edge instead of trailing off wherever the short
		 * content happens to end. Deliberately not flex-grow: 1 — that
		 * requires the browser to compute this element's own "preferred"
		 * auto-basis height by sizing all its children first, and that
		 * appeared to size the last item's collapsed accordion panel
		 * differently than the final render did, leaving a sliver of it
		 * visible. min-height is a plain size constraint, not a
		 * content-measurement pass, so it doesn't go through that.
		 * No-op for standalone [wbs_mega_menu] usage, which has no
		 * height-constrained ancestor for the percentage to resolve
		 * against.
		 */
		min-height: 100%;
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
		width: 100%;
		background: var(--wbs-mm-panel-bg);
	}

	/*
	 * overflow: hidden — the real backstop for the collapsed-panel-content
	 * sliver bug (see the .wbs-megamenu__panel comment below for the
	 * accordion-collapse mechanics this is guarding, and AGENTS.md/commit
	 * history for why this line exists at all): none of the grid-collapse
	 * fixes on the panel itself have proven to reach a true 0px in every
	 * case, so this li's own box — which IS sized correctly, every item
	 * sits at the right vertical position — clips anything that escapes
	 * outside it regardless of the internal cause. Previously masked only
	 * by luck: each <li> happened to sit in front of whatever sliver the
	 * previous one leaked, via its own opaque background below, until the
	 * last item's neighbour (the CTA button) got pulled away by
	 * position: sticky + margin-top: auto and stopped covering for it.
	 */
	.wbs-megamenu__top-item {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		background: var(--wbs-mm-panel-bg);
		overflow: hidden;
		/*
		 * flex-shrink: 0 — required alongside overflow: hidden above, not
		 * just belt-and-braces. Per the flexbox spec, giving a flex item
		 * any overflow other than visible drops its *automatic* minimum
		 * size from min-content down to 0, i.e. it now has no floor
		 * flexbox won't shrink it past. Combined with .wbs-megamenu__top's
		 * min-height: 100% below, that meant an expanded tall panel (e.g.
		 * "Courses") got silently compressed to fit exactly within the
		 * screen instead of genuinely overflowing it — clipped by the very
		 * overflow: hidden meant to fix the sliver bug, and with nothing
		 * left overflowing, .wbs-header .wbs-megamenu's own overflow-y:
		 * auto had nothing to scroll. flex-shrink: 0 keeps every item at
		 * its real content height regardless, so a genuinely tall list
		 * still grows past 100% and scrolls normally.
		 */
		flex-shrink: 0;
	}

	.wbs-megamenu__trigger {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 12px !important;
		width: 100%;
		background: none !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		text-align: left;
		text-transform: none !important;
		text-decoration: none !important;
		letter-spacing: normal !important;
		cursor: pointer;
		font: inherit;
		font-family: var(--wbs-mm-font) !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		line-height: 24px !important;
		color: var(--wbs-mm-text) !important;
		padding: 12px 16px !important;
		box-sizing: border-box;
	}

	.wbs-megamenu__trigger::after {
		content: "";
		display: inline-block;
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		background-color: currentColor;
		-webkit-mask-image: url(../img/icons/chevron-down.svg);
		mask-image: url(../img/icons/chevron-down.svg);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 12px;
		mask-size: 12px;
		-webkit-mask-position: center;
		mask-position: center;
		transform: rotate(0deg);
		transition: transform 0.15s ease;
	}

	.wbs-megamenu__trigger[aria-expanded="true"]::after {
		transform: rotate(180deg);
	}

	.wbs-megamenu__trigger--link::after {
		display: none;
	}

	/* "Apply now" — the is_button item — becomes a full-width CTA bar
	   instead of an accordion row. is_button is just an ACF checkbox on any
	   nav_item though, with no constraint on where it sits in the repeater
	   — a differently-configured header could put one earlier in the list,
	   so this class alone can't assume "last". */
	.wbs-megamenu__top-item--button {
		margin-left: 0;
	}

	/*
	 * Pinned to the true bottom of the screen — but only when it's
	 * genuinely the last item (:last-child), the "Apply now" case this was
	 * designed for. If some other header configuration puts a
	 * button-styled item earlier in the list instead, it renders as a
	 * plain inline row like any other item — pinning a *non-trailing* item
	 * to the bottom would float it over/under later items as they scroll,
	 * which only makes sense for a genuine trailing CTA.
	 *
	 * Two mechanisms working together, for the two ways this needs to
	 * behave:
	 *  - margin-top: auto consumes all the leftover space in
	 *    .wbs-megamenu__top (which itself is stretched to fill the full
	 *    overlay height via flex: 1 0 auto above), pushing this item to
	 *    that box's bottom edge — covers the collapsed-accordion case,
	 *    where there isn't enough content to scroll at all.
	 *  - position: sticky + bottom: 0 resolves against the overlay's own
	 *    overflow-y: auto (header.css) instead — covers the opposite case,
	 *    where an expanded panel like "Courses" makes the list taller than
	 *    the screen and it actually scrolls.
	 */
	.wbs-megamenu__top-item--button:last-child {
		margin-top: auto;
		position: sticky;
		bottom: 0;
		z-index: 1;
	}

	.wbs-megamenu__trigger--button {
		justify-content: center !important;
		background: var(--wbs-mm-cta-bg) !important;
		color: #fff !important;
		border-radius: 0 !important;
		padding: 24px 16px !important;
		height: auto !important;
		margin-left: 0 !important;
	}

	/*
	 * Accordion open/close animates via a CSS grid-template-rows trick
	 * (0fr -> 1fr): .wbs-megamenu__panel becomes the single-track grid,
	 * .wbs-megamenu__panel-inner is its one row. Three things are required
	 * for the 0fr state to actually reach 0px instead of leaving a sliver
	 * of content visible — miss any one and a small fixed chunk (roughly
	 * the content's min-content size) stays visible regardless of the
	 * others:
	 *  - min-height: 0 on .wbs-megamenu__panel itself — it's also a flex
	 *    item of its own parent (.wbs-megamenu__top-item is display:flex),
	 *    and every flex item gets an implicit min-height: auto that blocks
	 *    shrinking below its content's min-content size. That's a
	 *    completely separate mechanism from the grid track's own sizing
	 *    below and silently overrides it if left unset here.
	 *  - min-height: 0 on panel-inner (below) — the grid row itself has
	 *    the same kind of automatic minimum, this time from the *grid*
	 *    item rather than a flex item (minmax(0, _fr) handles the
	 *    equivalent floor on the track).
	 *  - box-sizing: border-box on panel-inner (below) — the type-specific
	 *    variants further down put padding directly on panel-inner. In
	 *    the default content-box model that padding sits outside the
	 *    height the grid row computes, so a 0-height row would still
	 *    render e.g. 20px of padding-bottom. border-box folds padding
	 *    into that same height.
	 * Degrades to an instant snap (not broken, just not eased) on browsers
	 * that don't animate grid-template-rows.
	 */
	.wbs-megamenu__panel {
		position: static;
		width: 100%;
		max-width: none;
		left: auto;
		transform: none;
		z-index: auto;
		padding-top: 0;
		opacity: 1;
		visibility: visible;
		display: grid;
		grid-template-rows: minmax(0, 0fr);
		min-height: 0;
		transition: grid-template-rows 0.25s ease;
	}

	.wbs-megamenu__trigger[aria-expanded="true"] + .wbs-megamenu__panel {
		grid-template-rows: minmax(0, 1fr);
	}

	.wbs-megamenu__panel-inner {
		box-shadow: none;
		border: none;
		border-radius: 0;
		transform: none;
		transition: none;
		box-sizing: border-box;
		overflow: hidden;
		min-height: 0;
	}

	/* Mega menu (columns) panel — e.g. "Courses" */

	.wbs-megamenu__panel--columns {
		width: 100%;
	}

	.wbs-megamenu__panel--columns .wbs-megamenu__panel-inner {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 0 16px 20px;
	}

	/*
	 * The border/shadow live on .wbs-megamenu__columns-wrap (below) so
	 * "Compare courses" shares the same box as the course list, matching
	 * the Figma reference — this is just the padded inner list now.
	 */
	.wbs-megamenu__columns-wrap {
		display: flex;
		flex-direction: column;
		background: var(--wbs-mm-footer-bg);
		border: 1px solid var(--wbs-mm-border);
		border-radius: 12px;
		box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
		overflow: hidden;
	}

	/*
	 * Its own white fill + border, matching the Figma "Content" node —
	 * .wbs-megamenu__bottom-bar (the "Footer" node) deliberately has no
	 * background of its own, so .wbs-megamenu__columns-wrap's gray shows
	 * through behind it instead.
	 */
	.wbs-megamenu__columns {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		background: var(--wbs-mm-panel-bg);
		border: 1px solid var(--wbs-mm-border);
		border-radius: 12px;
		padding: 8px 12px;
	}

	.wbs-megamenu__column {
		flex: none;
		width: 100%;
		min-width: 0;
	}

	.wbs-megamenu__column-toggle {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 12px !important;
		width: 100% !important;
		margin: 0 !important;
		background: var(--wbs-mm-header-bg) !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: 4px !important;
		text-transform: none !important;
		text-decoration: none !important;
		cursor: pointer;
		font: inherit;
		font-family: var(--wbs-mm-font) !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		line-height: 24px !important;
		color: #fff !important;
		padding: 4px 16px !important;
		box-sizing: border-box;
	}

	.wbs-megamenu__column-chevron {
		display: inline-block;
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		background-color: currentColor;
		-webkit-mask-image: url(../img/icons/chevron-down.svg);
		mask-image: url(../img/icons/chevron-down.svg);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 12px;
		mask-size: 12px;
		-webkit-mask-position: center;
		mask-position: center;
		transform: rotate(0deg);
		transition: transform 0.15s ease;
	}

	.wbs-megamenu__column-toggle[aria-expanded="true"] .wbs-megamenu__column-chevron {
		transform: rotate(180deg);
	}

	/* Same grid-template-rows collapse trick as .wbs-megamenu__panel above
	   (including the minmax(0, _fr) floor — see its comment), one level
	   down for the nested per-group accordion. */
	.wbs-megamenu__column-content {
		display: grid;
		grid-template-rows: minmax(0, 0fr);
		transition: grid-template-rows 0.25s ease;
		margin-top: 2px;
	}

	.wbs-megamenu__column-toggle[aria-expanded="true"] + .wbs-megamenu__column-content {
		grid-template-rows: minmax(0, 1fr);
	}

	.wbs-megamenu__column ul {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
		overflow: hidden;
		min-height: 0;
	}

	.wbs-megamenu__item a,
	.wbs-megamenu__item.wbs-megamenu__item--unlinked {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 4px;
		padding: 12px 16px;
		border-radius: 6px;
		text-decoration: none;
		font-family: var(--wbs-mm-font) !important;
		color: var(--wbs-mm-text);
		box-sizing: border-box;
	}

	.wbs-megamenu__item-title {
		display: block;
		font-weight: 600;
		font-size: 16px;
	}

	.wbs-megamenu__meta {
		display: block;
		font-size: 12px;
		font-weight: 500;
		color: var(--wbs-mm-muted);
	}

	.wbs-megamenu__flame {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 29px;
		height: 29px;
		border-radius: 0.745px 8.935px 0.745px 8.935px;
		background: linear-gradient(135deg, #f8485e, #6054e8);
	}

	.wbs-megamenu__flame svg {
		display: block !important;
		width: 20.3px !important;
		height: 23.2px !important;
		max-width: none !important;
		max-height: none !important;
		flex-shrink: 0;
	}

	.wbs-megamenu__bottom-bar ul {
		display: flex;
		justify-content: center;
		margin: 0;
		padding: 20px 16px;
		box-sizing: border-box;
		list-style: none;
	}

	/* Reference design shows a single centered link, not the full row
	   desktop uses — only the first bottom_bar_link row renders here. */
	.wbs-megamenu__bottom-bar li:not(:first-child) {
		display: none;
	}

	.wbs-megamenu__bottom-bar a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-family: var(--wbs-mm-font) !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		color: var(--wbs-mm-accent) !important;
		text-decoration: none;
		white-space: nowrap;
	}

	.wbs-megamenu__bottom-bar a::after {
		content: "";
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		background-color: currentColor;
		-webkit-mask-image: url(../img/icons/arrow-right.svg);
		mask-image: url(../img/icons/arrow-right.svg);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center;
		mask-position: center;
	}

	/* Simple dropdown (two-line cards) panel — "For companies" / "Why us" / "Resources" */

	.wbs-megamenu__panel--simple {
		width: 100%;
	}

	.wbs-megamenu__panel--simple .wbs-megamenu__panel-inner {
		padding: 0 16px 20px;
	}

	.wbs-megamenu__simple-list {
		margin: 0;
		padding: 8px 12px;
		list-style: none;
		border: 1px solid var(--wbs-mm-border);
		border-radius: 12px;
		box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
		box-sizing: border-box;
	}

	.wbs-megamenu__simple-list a {
		display: block;
		padding: 8px 12px;
		border-radius: 6px;
		font-family: var(--wbs-mm-font) !important;
		text-decoration: none;
	}

	.wbs-megamenu__simple-list strong {
		display: block;
		font-size: 14px;
		font-weight: 600;
		color: var(--wbs-mm-text);
	}

	.wbs-megamenu__simple-list span {
		display: block;
		font-size: 12px;
		font-weight: 500;
		color: var(--wbs-mm-muted);
		margin-top: 2px;
	}

	.wbs-megamenu__simple-list li + li {
		margin-top: 2px;
	}

	@media (prefers-reduced-motion: reduce) {
		.wbs-megamenu__panel,
		.wbs-megamenu__column-content,
		.wbs-megamenu__trigger::after,
		.wbs-megamenu__column-chevron {
			transition: none !important;
		}
	}
}