/**
 * Desktop mega menu (≥1200px) — panel under the sticky header, opened by the
 * burger (main.js toggles .is-menu-open on .site-header). Covers the first
 * screen; the rest of the page is dimmed by body.is-mobile-menu-open::before.
 */

.site-mega {
	display: none;
}

@media (min-width: 1200px) {
	.site-mega {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - var(--header-height, 75px));
		overflow-y: auto;
		background: var(--color-white);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition:
			opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 0.32s;
	}

	.site-header.is-menu-open .site-mega {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition:
			opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s;
	}

	.site-mega__inner {
		--container-width: 1200px;
		padding-top: 10px;
		padding-bottom: 50px;
	}

	/* Service pages + agency button */
	.site-mega__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 30px;
		padding: 0 0 10px 20px;
		border-bottom: 1px solid var(--color-black);
	}

	.site-mega__links {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 50px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-mega__links a,
	.site-mega__menu a {
		justify-content: flex-start;
		text-align: left;
		font-size: 18px;
		line-height: 1.2;
	}

	.site-mega__links .nav-link__text {
		font-weight: var(--font-weight-regular);
	}

	.site-mega__agency {
		flex-shrink: 0;
	}

	/* Categories + cards */
	.site-mega__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 445px;
		gap: 40px;
		padding: 27px 0 0 20px;
	}

	.site-mega__menu {
		columns: 2;
		column-gap: 40px;
		max-width: 700px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-mega__menu > li {
		break-inside: avoid;
		padding-bottom: 18px;
	}

	.site-mega__menu > li > a {
		font-size: 20px;
	}

	.site-mega__menu > li > a .nav-link__text {
		font-weight: var(--font-weight-medium);
	}

	.site-mega__menu .sub-menu {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 9px;
		margin: 10px 0 0;
		padding: 0 0 0 9px;
		list-style: none;
	}

	.site-mega__menu .sub-menu .nav-link__text {
		font-weight: var(--font-weight-regular);
	}

	.site-mega__menu > li > a:hover .nav-link__text,
	.site-mega__menu > li > a:focus-visible .nav-link__text,
	.site-mega__menu > .current-menu-item > a .nav-link__text {
		font-weight: var(--font-weight-bold);
	}

	.site-mega__links a:hover .nav-link__text,
	.site-mega__links a:focus-visible .nav-link__text,
	.site-mega__menu .sub-menu a:hover .nav-link__text,
	.site-mega__menu .sub-menu a:focus-visible .nav-link__text,
	.site-mega__menu .sub-menu .current-menu-item > a .nav-link__text {
		font-weight: var(--font-weight-medium);
	}

	.site-mega__aside {
		display: flex;
		flex-direction: column;
		gap: 40px;
	}

	.mega-card {
		position: relative;
		overflow: hidden;
		padding: 25px 20px;
		border-radius: 10px;
	}

	.mega-card__title {
		position: relative;
		z-index: 1;
		font-family: var(--font-family-display);
		font-size: 22px;
		font-weight: var(--font-weight-medium);
		line-height: 1.2;
	}

	.mega-card--telegram {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 198px;
		background-color: #0c0c0c;
		background-image: url(../../images/telegram-bg.png);
		background-repeat: no-repeat;
		background-position: right center;
		background-size: cover;
		color: var(--color-white);
	}

	.mega-card__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: var(--btn-height-compact);
		margin-top: 30px;
		padding: 4px 20px;
		border-radius: var(--radius-pill);
		background: var(--color-white);
		color: var(--color-black);
		font-size: 18px;
		line-height: 1.2;
	}

	.mega-card--socials {
		min-height: 147px;
		border: 2px solid var(--color-hub);
		color: var(--color-hub);
	}

	.mega-card--socials .mega-card__title {
		max-width: 330px;
	}

	.mega-card__socials {
		position: relative;
		z-index: 1;
		gap: 31px;
		margin-top: 16px;
	}

	.mega-card__art {
		position: absolute;
		top: -12px;
		right: -150px;
		width: 260px;
		height: auto;
		transform: rotate(-62deg);
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-mega {
		transition: none !important;
	}
}