/**
 * VOSKA — Menu Widget
 *
 * @version 1.4.0
 */


/* ================================================================== */
/*  Custom Properties                                                  */
/* ================================================================== */

.vsk-menu {
	--_menu-color:           var(--vsk-color-text, currentColor);
	--_menu-color-muted:     var(--vsk-color-text-muted, hsla(from var(--_menu-color) h s l / .6));
	--_menu-color-border:    var(--vsk-color-border, hsla(from var(--_menu-color) h s l / .15));
	--_menu-ease:            var(--vsk-trns--ease, cubic-bezier(0.22, 1, 0.36, 1));
	--_menu-stagger:         75ms;
	--_menu-item-duration:   .8s;
	--_menu-screen-duration: .5s;
	--_menu-padding-x:       var(--vsk-section-padding-side, 2rem);
}


/* ================================================================== */
/*  Layout                                                             */
/* ================================================================== */

.vsk-menu {
	position: relative;
	width: 100%;
}


/* ================================================================== */
/*  Shared header — grid wrapper for smooth height animation           */
/* ================================================================== */

/* Outer: grid container that animates row height 0fr ↔ 1fr. */
.vsk-menu__header-wrap {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .4s var(--_menu-ease);
}

.vsk-menu__header-wrap--hidden {
	grid-template-rows: 0fr;
}

/* Inner: actual header content. overflow: hidden + min-height: 0
   lets the grid row collapse to zero without content overflow. */
.vsk-menu__header {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 0 var(--_menu-padding-x) 1rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--_menu-color-border);
	overflow: hidden;
	min-height: 0;

	opacity: 1;
	transition: opacity .3s var(--_menu-ease);
}

/* Fade content when wrapper is collapsing. */
.vsk-menu__header-wrap--hidden .vsk-menu__header {
	opacity: 0;
}


/* ================================================================== */
/*  Breadcrumbs                                                        */
/* ================================================================== */

.vsk-menu__breadcrumbs {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: .5em;
	font-size: var(--vsk-font-size-small, .875rem);
}

.vsk-menu__bc-node {
	display: inline-flex;
	align-items: center;
	gap: .5em;

	clip-path: inset(0);
	opacity: 1;
	transform: translateX(0);

	transition:
		clip-path .4s var(--_menu-ease),
		opacity .4s var(--_menu-ease),
		transform .4s var(--_menu-ease);
}

/* Entrance: clip from right, slide from left. */
.vsk-menu__bc-node.vsk-menu__bc-enter {
	clip-path: inset(0 100% 0 0);
	opacity: 0;
	transform: translateX(-.5em);
}

/* Exit: clip from right, slide to right. */
.vsk-menu__bc-node.vsk-menu__bc-exit {
	clip-path: inset(0 100% 0 0);
	opacity: 0;
	transform: translateX(.5em);
}

.vsk-menu__breadcrumbs a {
	color: var(--_menu-color-muted);
	text-decoration: none;
	transition: color .3s var(--_menu-ease);
}

.vsk-menu__breadcrumbs a:hover {
	color: var(--_menu-color);
}

.vsk-menu__breadcrumbs span[aria-current="page"] {
	color: var(--_menu-color);
}

.vsk-menu__breadcrumbs-sep {
	color: var(--_menu-color-muted);
	user-select: none;
}


/* ================================================================== */
/*  Back button                                                        */
/* ================================================================== */

.vsk-menu__back {
	display: inline-block;
	cursor: pointer;
	padding: 0;
	border: none;
	background: none;
	color: var(--_menu-color-muted);
	font: inherit;
	font-size: var(--vsk-font-size-small, .875rem);
	white-space: nowrap;
	transition:
		color .3s var(--_menu-ease),
		opacity .2s var(--_menu-ease);
}

.vsk-menu__back.vsk-menu__back--swapping {
	opacity: 0;
}

.vsk-menu__back:hover {
	color: var(--_menu-color);
}


/* ================================================================== */
/*  Screens wrapper                                                    */
/* ================================================================== */

.vsk-menu__screens {
	position: relative;
	min-height: var(--_menu-height, auto);
	transition: min-height .4s var(--_menu-ease);
}


/* ================================================================== */
/*  Screens                                                            */
/* ================================================================== */

.vsk-menu__screen {
	position: absolute;
	inset: 0;
	width: 100%;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	z-index: 10;
	transition:
		opacity var(--_menu-screen-duration) var(--_menu-ease),
		visibility 0s var(--_menu-screen-duration);
}

.vsk-menu__screen.vsk-menu--screen-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	z-index: 50;
	transition:
		opacity var(--_menu-screen-duration) var(--_menu-ease),
		visibility 0s 0s;
}

.vsk-menu__screen.vsk-menu--screen-prev {
	opacity: 0;
	visibility: hidden;
	z-index: 10;
}


/* ================================================================== */
/*  Item list                                                          */
/* ================================================================== */

.vsk-menu__screen ul {
	list-style: none;
	margin: 0;
	padding: 0 var(--_menu-padding-x);
	display: flex;
	flex-flow: column nowrap;
}

.vsk-menu__screen li {
	padding: 0;
	border-bottom: 1px solid var(--_menu-color-border);

	clip-path: inset(100% 0 0 0);
	opacity: 0;
	transform: translateY(1.5em);

	transition:
		clip-path var(--_menu-item-duration) var(--_menu-ease) calc(var(--_i, 0) * var(--_menu-stagger)),
		opacity var(--_menu-item-duration) var(--_menu-ease) calc(var(--_i, 0) * var(--_menu-stagger)),
		transform var(--_menu-item-duration) var(--_menu-ease) calc(var(--_i, 0) * var(--_menu-stagger)),
		border-color .3s var(--_menu-ease);
}

.vsk-menu__screen li:last-child {
	border-bottom: none;
}

.vsk-menu--visible .vsk-menu--screen-active li {
	clip-path: inset(0);
	opacity: 1;
	transform: translateY(0);
}


/* ================================================================== */
/*  Links                                                              */
/* ================================================================== */

.vsk-menu__link {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
	color: var(--_menu-color);
	padding: .5em 0;
	text-decoration: none;
	transition:
		color .3s var(--_menu-ease),
		opacity .3s var(--_menu-ease);
}

.vsk-menu__arrow {
	flex-shrink: 0;
	transition: transform .3s var(--_menu-ease);
}

.vsk-menu__link:hover .vsk-menu__arrow {
	transform: translateX(4px);
}


/* ---------- Hover / active dimming ---------- */

.vsk-menu__screen ul:has(.vsk-menu__link:hover) li,
.vsk-menu__screen ul:has(.vsk-menu__link[aria-current="page"]) li {
	border-color: var(--_menu-color-muted);
}

.vsk-menu__screen ul li:has(.vsk-menu__link:hover),
.vsk-menu__screen ul li:has(.vsk-menu__link[aria-current="page"]) {
	border-color: var(--_menu-color);
}

.vsk-menu__screen ul:has(.vsk-menu__link:hover) .vsk-menu__link:not(:hover),
.vsk-menu__screen ul:has(.vsk-menu__link[aria-current="page"]) .vsk-menu__link:not([aria-current="page"]) {
	color: var(--_menu-color-muted);
}

.vsk-menu__link:hover,
.vsk-menu__link[aria-current="page"] {
	color: var(--_menu-color);
}


/* ================================================================== */
/*  Description                                                        */
/* ================================================================== */

.vsk-menu__description {
	display: block;
	width: 100%;
	font-size: var(--vsk-font-size-small, .875rem);
	color: var(--_menu-color-muted);
	margin-top: .25em;
}


/* ================================================================== */
/*  Mega Menu content                                                  */
/* ================================================================== */

.vsk-menu__mega-content {
	padding: 0 var(--_menu-padding-x);

	clip-path: inset(100% 0 0 0);
	opacity: 0;
	transform: translateY(1.5em);

	transition:
		clip-path var(--_menu-item-duration) var(--_menu-ease),
		opacity var(--_menu-item-duration) var(--_menu-ease),
		transform var(--_menu-item-duration) var(--_menu-ease);
}

.vsk-menu--visible .vsk-menu--screen-active .vsk-menu__mega-content {
	clip-path: inset(0);
	opacity: 1;
	transform: translateY(0);
}

/* Spacing between mega content and child list. */
.vsk-menu__mega-content + ul {
	margin-top: 2rem;
}

ul + .vsk-menu__mega-content {
	margin-top: 2rem;
}


/* ================================================================== */
/*  Toggle (hamburger)                                                 */
/* ================================================================== */

.vsk-menu-toggle {
	--_toggle-size:      48px;
	--_toggle-thickness: 1px;
	--_toggle-gap:       12px;

	display: block;
	position: relative;
	width: var(--_toggle-size);
	height: var(--_toggle-size);
	cursor: pointer;
}

.vsk-menu-toggle__line {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--_toggle-thickness);
	background: var(--_menu-color);
	border-radius: 2px;
	transform-origin: center;

	transition:
		top .3s var(--_menu-ease) .3s,
		transform .3s var(--_menu-ease) 0s;

	top: calc(var(--_toggle-size) / 2 + var(--_line-offset));
}

.vsk-menu-toggle__line--top {
	--_line-offset: calc(var(--_toggle-gap) / 2);
}

.vsk-menu-toggle__line--bottom {
	--_line-offset: calc(var(--_toggle-gap) / -2);
}

.vsk-menu-toggle--open .vsk-menu-toggle__line {
	transition:
		top .3s var(--_menu-ease) 0s,
		transform .3s var(--_menu-ease) .3s;
}

.vsk-menu-toggle--open .vsk-menu-toggle__line--top {
	top: calc(var(--_toggle-size) / 2);
	transform: rotate(45deg);
}

.vsk-menu-toggle--open .vsk-menu-toggle__line--bottom {
	top: calc(var(--_toggle-size) / 2);
	transform: rotate(-45deg);
}