.mega-menu { display: none; }

@media (min-width: 768px) {
	.nav-primary .has-mega-menu { position: static; }

	.mega-menu {
		display: block;
		position: absolute;
		top: calc(50% + var(--line-height-main-level) / 2);
		left: 0;
		right: 0;
		padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
		background-color: var(--wp--preset--color--black);
		background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url("../../img/ice-texture.avif");
		background-size: cover;
		line-height: normal;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s, visibility 0.2s;
		z-index: var(--z-menu);
	}
	.nav-primary .has-mega-menu:hover > .mega-menu,
	.nav-primary .has-mega-menu:focus-within > .mega-menu,
	.nav-primary .has-mega-menu.hover-intent > .mega-menu {
		opacity: 1;
		visibility: visible;
	}
	.nav-primary .has-mega-menu.is-closed > .mega-menu {
		opacity: 0;
		visibility: hidden;
	}

	.mega-menu-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--grid);
		max-width: var(--wp--style--global--content-size);
		margin-inline: auto;
		padding-block: 80px;
	}

	.mega-menu-title {
		margin: 0;
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--redzone);
		font-size: var(--wp--preset--font-size--heading-menu);
		font-weight: 700;
		line-height: 1.4;
		text-transform: uppercase;
	}
	.mega-menu-title::after {
		content: "";
		display: block;
		width: 50px;
		height: 4px;
		margin-block: 15px;
		background-color: var(--wp--preset--color--yellow);
	}

	.mega-menu-links {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.nav-primary .mega-menu-links .menu-item > a {
		display: inline;
		padding: 0;
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--inter);
		font-size: var(--wp--preset--font-size--body);
		font-weight: 400;
		line-height: 1.7;
		text-decoration: none;
		text-transform: uppercase;
		white-space: normal;
	}
	.nav-primary .mega-menu-links .menu-item > a:is(:hover, :focus-visible) { color: var(--wp--preset--color--yellow); }
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.mega-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}