/* ==========================================================================
   MENU MOBILE - All mobile menu overrides (max-width: 1025px)
   ========================================================================== */

/* Hide mobile arrow on desktop */
.mobile-menu-arrow {
	display: none;
}

/* Animations */
@keyframes fadeIn {
	from {
		opacity: 0;
		visibility: hidden;
	}
	to {
		opacity: 1;
		visibility: visible;
	}
}

/* ==========================================================================
   Mobile styles (max-width: 1025px)
   ========================================================================== */

@media screen and (max-width: 1025px) {
	/* ======================================================================
	   Nav wrapper - Fullscreen overlay
	   ====================================================================== */

	header .nav-wrapper.nav-wrapper {
		position: fixed !important;
		top: 0;
		left: 0;
		width: 100%;
		min-height: 100dvh;
		max-height: 100dvh !important;
		background: white;
		display: flex !important;
		flex-direction: column;
		z-index: -1 !important;
		padding-left: var(--gutter);
		padding-right: var(--gutter);
		overflow-x: hidden;
		overflow-y: hidden !important;
		opacity: 0;
		pointer-events: none;
	}

	body header .nav-wrapper.nav-wrapper {
		display: flex !important;
		flex-direction: column;
		height: 100dvh !important;
	}

	body.show-menu .nav-wrapper {
		animation: fadeIn 0.4s ease-in-out forwards;
		pointer-events: auto !important;
	}

	/* Nav upper wrapper */
	.nav__upper-wrapper {
		transition: box-shadow 0.3s ease-out;
	}

	body.show-menu .nav__upper-wrapper {
		box-shadow: none;
	}

	/* ======================================================================
	   Primary navigation
	   ====================================================================== */

	header ul.primary-navigation.primary-navigation.primary-navigation.primary-navigation.primary-navigation {
		display: flex;
		flex-direction: column;
		padding-top: 14rem;
		align-items: flex-start;
		gap: 0rem !important;
	}

	header ul.primary-navigation.primary-navigation.primary-navigation.primary-navigation li {
		justify-content: space-between;
		width: 100%;
		padding: 0;
		flex-wrap: wrap;
	}

	header ul.primary-navigation.primary-navigation.primary-navigation.primary-navigation > li {
		border-bottom: 1px solid var(--primary-ultra-light);
		padding: 1.2rem 0;
	}

	header ul.primary-navigation.primary-navigation.primary-navigation.primary-navigation > li,
	header ul.primary-navigation .mobile-menu-arrow {
		display: flex;
	}

	header ul.primary-navigation > li > a,
	header ul.primary-navigation > li > .menu-label {
		font-size: var(--text-l) !important;
	}

	header ul.primary-navigation > a,
	header ul.primary-navigation .menu-label {
		color: var(--base) !important;
	}

	/* ======================================================================
	   Mobile mega menu header (back button + title)
	   ====================================================================== */

	.mobile-mega-header {
		display: flex;
		flex-direction: column;
		gap: 3rem;
		padding-bottom: 1rem;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding-top: 70px;
		padding-inline: var(--gutter);
		z-index: 99999;
		background: white;
		border-bottom: 1px solid var(--primary-ultra-light);
	}

	.mobile-mega-back {
		display: flex;
		align-items: center;
		gap: var(--gap-xs5);
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		color: var(--base);
		font-size: var(--text-s);
	}

	.mobile-mega-title {
		font-size: var(--text-xl);
		font-weight: 400;
		margin: 0;
		color: var(--base);
	}

	/* ======================================================================
	   Mobile mega menu panel (fullscreen)
	   ====================================================================== */

	header .mega-menu-panel {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100dvh;
		background: white;
		padding: var(--gutter);
		padding-top: 6rem;
		z-index: 10;
		opacity: 0;
		visibility: hidden;
		transform: none;
		transition:
			opacity 0.2s ease-out,
			visibility 0s linear 0.5s;
	}

	header .mega-menu-panel.is-open {
		opacity: 1;
		visibility: visible;
		overflow: scroll;
		transition:
			opacity 0s ease-out,
			visibility 0s linear 0s;
	}

	header .mega-menu-content {
		box-shadow: none;
		padding: 0;
		padding-top: 11rem;
		padding-bottom: 3rem;
		width: 100%;
	}

	/* ======================================================================
	   Mobile mega menu content adjustments
	   ====================================================================== */

	/* Branscher - hide description on mobile */
	.mega-menu-item__bransch p {
		display: none;
	}

	.mega-menu-item__bransch {
		align-items: center;
	}

	/* Insight list */
	header ul.primary-navigation.primary-navigation.primary-navigation.primary-navigation .mega-menu-insight__list {
		gap: 16px !important;
	}

	/* Reusable container */
	header .reusable-container {
		display: flex !important;
		justify-content: flex-start;
		gap: 35px;
		padding-bottom: var(--space-m);
		flex-wrap: wrap;
	}

	/* ======================================================================
	   Language picker - Keep as dropdown (not fullscreen)
	   ====================================================================== */

	.menu-support__language-picker {
		position: relative;
	}

	header .menu-support__language-picker .mega-menu-panel,
	.nav-wrapper .menu-support__language-picker .mega-menu-panel {
		position: absolute;
		top: 100%;
		left: 0;
		width: auto;
		height: auto;
		min-height: 0;
		max-height: none;
		padding: 10px 0;
		z-index: 100;
		background: white;
		border-radius: var(--radius-l);
		box-shadow: var(--box-shadow-m);
		overflow: hidden;
		transform: translateY(15px);
	}

	.nav-wrapper .menu-support__language-picker .mega-menu-content {
		padding: 0;
		transform: unset;
	}

	/* ======================================================================
	   Breadcrumb - Hide when mega menu is open
	   ====================================================================== */

	header:has(.primary-navigation .mega-menu-panel.is-open) .breadcrumb {
		opacity: 0;
		pointer-events: none;
		transition: none;
	}
}