/**
 * Header corrections that sit on top of the compiled Tailwind build.
 *
 * The compiled stylesheet styles every anchor inside the off-canvas panel as a
 * menu row - `[data-nav-panel] a { display:block; padding:.6rem .5rem;
 * border-radius:.6rem }`. That is right for the navigation, but the selector
 * also reaches the panel's footer, where it outranks the utility classes on the
 * CTA and the social icons (one class each) and flattens both: the button lost
 * its centring and its pill, and the icon circles became rounded squares with
 * the glyph pushed into the corner.
 *
 * The compiled build cannot be regenerated, so the footer is re-stated here
 * instead. Nothing about the button's own design is changed - its colours,
 * border, height and radius still come from the Customizer rule on
 * `.idmtech-header-cta`, exactly as on the desktop header.
 */

/* Undo the menu-row treatment for everything in the panel footer. */
.idmtech-offcanvas__foot a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-weight: inherit;
}

/* The CTA keeps its own horizontal padding; the Customizer owns the rest. */
.idmtech-offcanvas__foot .idmtech-header-cta {
	width: 100%;
	padding-inline: 1.25rem;
	text-align: center;
	gap: 0.5rem;
}

/* Social icons: circles again, with the glyph centred. */
.idmtech-offcanvas__socials a {
	width: 2.5rem;
	height: 2.5rem;
	flex: 0 0 auto;
	border-radius: 9999px;
}

.idmtech-offcanvas__socials a > svg {
	display: block;
	width: 1rem;
	height: 1rem;
}

/* The panel footer row keeps its own hover colour rather than the menu tint. */
.idmtech-offcanvas__socials a:hover {
	background-color: var(--color-brand-500);
	color: #FFFFFF;
}

/* ------------------------------------------------------------ third-level menu
 * The compiled build styles a submenu, but every rule assumes it hangs under a
 * top-level item: a submenu's own submenu inherits `top: calc(100% + .4rem)`
 * and `left: 0`, which drops it on top of its parent instead of beside it.
 * These rules only ever match a .sub-menu inside a .sub-menu, so the existing
 * two levels are untouched.
 */
@media (min-width: 1024px) {
	/* The flyout is positioned against its own ROW, not against the dropdown.
	 * Setting this on the .sub-menu itself takes the first-level dropdown out
	 * of `position: absolute` and back into the flow, where it occupies space
	 * in the header bar and scatters the nav - which is exactly what it did. */
	[data-primary-nav] .sub-menu > li {
		position: relative;
	}

	[data-primary-nav] .sub-menu .sub-menu {
		position: absolute;
		top: -0.5rem;
		/* A gap so the panels read as separate cards rather than one block.
		 * The bridge below keeps the pointer's hover alive while it crosses. */
		left: calc(100% + 0.625rem);
		margin: 0;
		padding: 0.5rem;
		border-left: 0;
		transform: translateX(6px);
		/* The build sets `white-space: nowrap` on submenu links, which let a
		 * long label such as "Identity Governance & Administration (IGA)"
		 * stretch the flyout to 352px and push its right edge past the
		 * viewport. Capped and allowed to wrap, it always fits. */
		min-width: 13rem;
		max-width: 16rem;
	}

	[data-primary-nav] .sub-menu .sub-menu a {
		white-space: normal;
	}

	/* The bridge: an invisible strip filling the gap, so moving the pointer
	 * from a row onto its flyout never passes over dead space and closes it.
	 * The build does the same thing for the first level's vertical gap. */
	[data-primary-nav] .sub-menu .sub-menu::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: -0.75rem;
		width: 0.75rem;
	}

	/* Open on hover or keyboard focus, the same way the first level does. */
	[data-primary-nav] .sub-menu .menu-item-has-children:hover > .sub-menu,
	[data-primary-nav] .sub-menu .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
	}

	/* Only the last three top-level items sit far enough right to need the
	 * flyout on the other side. Solutions is not one of them: with the width
	 * capped above it clears the viewport comfortably, and flipping it made it
	 * open leftward over the page for no reason. */
	[data-primary-nav] > ul > li:nth-last-child(-n+3) .sub-menu .sub-menu {
		left: auto;
		right: calc(100% + 0.625rem);
		transform: translateX(-6px);
	}

	/* Flipped, the bridge moves to the other side too. */
	[data-primary-nav] > ul > li:nth-last-child(-n+3) .sub-menu .sub-menu::before {
		left: auto;
		right: -0.75rem;
	}

	[data-primary-nav] > ul > li:nth-last-child(-n+3) .sub-menu .menu-item-has-children:hover > .sub-menu,
	[data-primary-nav] > ul > li:nth-last-child(-n+3) .sub-menu .menu-item-has-children:focus-within > .sub-menu {
		transform: translateX(0);
	}

	/* A parent of a flyout gets a caret so it reads as having more behind it.
	 * The row is a flex line and the caret is an item on it: as a float it had
	 * nowhere to go on a `white-space: nowrap` line and dropped underneath the
	 * label instead of sitting beside it. */
	[data-primary-nav] .sub-menu .menu-item-has-children > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
	}

	[data-primary-nav] .sub-menu .menu-item-has-children > a::after {
		content: "";
		flex: 0 0 auto;
		width: 0.4rem;
		height: 0.4rem;
		/* All four sides are declared. The compiled build draws its own
		 * down-caret on this same pseudo-element with border-bottom and
		 * border-right; declaring only the two sides I want left its
		 * border-bottom in place, so the mark had three edges and came out as
		 * a bent shape rather than a chevron. */
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		border-bottom: 0;
		border-left: 0;
		margin: 0;
		transform: rotate(45deg);
		opacity: 0.5;
	}

	/* Flipped to the left, the caret points that way too. */
	[data-primary-nav] > ul > li:nth-last-child(-n+3) .sub-menu .menu-item-has-children > a::after {
		transform: rotate(-135deg);
	}
}

/* The off-canvas panel stacks instead: the theme's accordion script already
 * gives every parent its own toggle, nested ones included, so the third level
 * only needs to sit in from its parent and carry the same hairline. */
.idmtech-offcanvas .sub-menu .sub-menu {
	margin-left: 0.75rem;
	padding-left: 0.75rem;
}

/* ======================================================================
 * Off-canvas panel: scrolling with a submenu open
 * ----------------------------------------------------------------------
 * Two things stopped the panel scrolling once a submenu was expanded and the
 * list grew past the panel.
 *
 * 1. Lenis is told to stop when the menu opens, but a stopped Lenis still has
 *    its wheel and touch listeners attached and still cancels the gesture, so
 *    the swipe never reached the panel's own scroller. The scroller now carries
 *    `data-lenis-prevent`, which is the escape hatch Lenis provides for exactly
 *    this case.
 * 2. `position: fixed` with `inset-y-0` is measured against the large viewport
 *    on mobile Chrome, so while the address bar is showing the panel is taller
 *    than the screen and its last rows - and the footer - sit below the fold
 *    with nothing to scroll them into view. Pinning the panel to the dynamic
 *    viewport height keeps it exactly as tall as what can actually be seen,
 *    which puts the overflow back inside the scroller where it belongs.
 *
 * The scrollbar is also given a visible thumb, because on a touch device the
 * overlay scrollbar fades out and there was nothing to show more was there.
 */
@media (max-width: 1023.98px) {
	.idmtech-offcanvas {
		bottom: auto;
		height: 100vh;
		height: 100dvh;
	}

	.idmtech-offcanvas__scroll {
		min-height: 0; /* a flex child will not shrink below its content without this */
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
		scrollbar-width: thin;
		scrollbar-color: rgba(185, 0, 0, 0.35) transparent;
	}

	.idmtech-offcanvas__scroll::-webkit-scrollbar {
		width: 4px;
	}

	.idmtech-offcanvas__scroll::-webkit-scrollbar-track {
		background: transparent;
	}

	.idmtech-offcanvas__scroll::-webkit-scrollbar-thumb {
		background-color: rgba(185, 0, 0, 0.35);
		border-radius: 999px;
	}
}