/**
 * Shared responsive navigation.
 *
 * This file is intentionally loaded last on every page. It replaces the
 * historical mobile navigation rules that still exist in legacy page CSS.
 */

:root {
	--ab-admin-offset: 0px;
	--ab-mobile-header-height: 64px;
}

body.admin-bar {
	--ab-admin-offset: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--ab-admin-offset: 46px;
	}
}

@media (min-width: 901px) {
	body #header .sp_nav,
	body #header .site_mobile_nav,
	body #header .site_mobile_menu {
		display: none !important;
	}

	body.is-mobile-menu-open {
		overflow: auto !important;
	}
}

@media (max-width: 900px) {
	html body #header.site_header {
		position: fixed !important;
		top: var(--ab-admin-offset) !important;
		right: 0 !important;
		left: 0 !important;
		z-index: 10000 !important;
		width: 100% !important;
		height: var(--ab-mobile-header-height) !important;
		min-height: var(--ab-mobile-header-height) !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		border: 0 !important;
		border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
		box-shadow: none !important;
		transform: none !important;
	}

	html body #header .site_header_inner,
	html body #header .header_inner_scroll {
		position: static !important;
		display: flex !important;
		align-items: center !important;
		gap: 16px !important;
		width: min(100% - 36px, 1180px) !important;
		height: 100% !important;
		min-height: 0 !important;
		margin: 0 auto !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	html body #header .site_brand {
		display: flex !important;
		align-items: center !important;
		flex: 0 0 auto !important;
		width: 126px !important;
		max-width: 42vw !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	html body #header .site_brand_logo {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		max-height: 38px !important;
		object-fit: contain !important;
	}

	html body #header .site_nav,
	html body #header .site_header_cta {
		display: none !important;
	}

	html body #header .sp_nav,
	html body #header .site_mobile_nav {
		position: static !important;
		display: block !important;
		width: 44px !important;
		height: 44px !important;
		margin: 0 0 0 auto !important;
		padding: 0 !important;
	}

	html body #header .hamburger,
	html body #header .site_menu_toggle {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		z-index: 10002 !important;
		display: block !important;
		width: 44px !important;
		height: 44px !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 50% !important;
		box-shadow: none !important;
		cursor: pointer !important;
		appearance: none !important;
	}

	html body #header .site_menu_toggle span {
		position: absolute !important;
		right: auto !important;
		left: 12px !important;
		display: block !important;
		width: 20px !important;
		height: 2px !important;
		margin: 0 !important;
		background: #0b0b10 !important;
		border: 0 !important;
		border-radius: 999px !important;
		transform-origin: center !important;
		transition: top 180ms ease, transform 180ms ease, opacity 140ms ease !important;
	}

	html body #header .site_menu_toggle span:nth-child(1) {
		top: 14px !important;
	}

	html body #header .site_menu_toggle span:nth-child(2) {
		top: 21px !important;
	}

	html body #header .site_menu_toggle span:nth-child(3) {
		top: 28px !important;
	}

	html body #header .site_menu_toggle.active span:nth-child(1) {
		top: 21px !important;
		transform: rotate(45deg) !important;
	}

	html body #header .site_menu_toggle.active span:nth-child(2) {
		opacity: 0 !important;
	}

	html body #header .site_menu_toggle.active span:nth-child(3) {
		top: 21px !important;
		transform: rotate(-45deg) !important;
	}

	html body #header .globalMenuSp,
	html body #header .site_mobile_menu {
		position: fixed !important;
		top: calc(var(--ab-admin-offset) + var(--ab-mobile-header-height)) !important;
		right: 0 !important;
		bottom: auto !important;
		left: 0 !important;
		z-index: 10001 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		width: 100% !important;
		max-width: none !important;
		height: calc(100dvh - var(--ab-admin-offset) - var(--ab-mobile-header-height)) !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: clamp(26px, 5vh, 50px) max(22px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)) !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		background: #fff !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08) !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transform: translateY(-10px) !important;
		transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
	}

	html body #header .globalMenuSp.active,
	html body #header .site_mobile_menu.active {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: translateY(0) !important;
	}

	html body #header .site_mobile_menu ul,
	html body #header .globalMenuSp ul {
		display: block !important;
		width: min(100%, 560px) !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		list-style: none !important;
	}

	html body #header .site_mobile_menu li,
	html body #header .globalMenuSp li {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-bottom: 1px solid #e8eaf0 !important;
		list-style: none !important;
	}

	html body #header .site_mobile_menu li::before,
	html body #header .site_mobile_menu li::after,
	html body #header .globalMenuSp li::before,
	html body #header .globalMenuSp li::after {
		display: none !important;
		content: none !important;
	}

	html body #header .site_mobile_menu li a,
	html body #header .globalMenuSp li a {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		min-height: 58px !important;
		margin: 0 !important;
		padding: 15px 2px !important;
		color: #0b0b10 !important;
		font-family: inherit !important;
		font-size: clamp(17px, 4.8vw, 20px) !important;
		font-weight: 600 !important;
		line-height: 1.35 !important;
		letter-spacing: 0 !important;
		text-align: left !important;
		text-decoration: none !important;
		text-transform: none !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	html body #header .site_mobile_menu li a::after,
	html body #header .globalMenuSp li a::after {
		display: inline-block !important;
		content: "\2197" !important;
		margin-left: 16px !important;
		color: #315fe8 !important;
		font-size: 15px !important;
		font-weight: 500 !important;
	}

	html body #header .site_mobile_menu_cta {
		display: block !important;
		width: min(100%, 560px) !important;
		margin: 28px 0 0 !important;
		padding: 22px !important;
		background: #f3f6ff !important;
		border: 0 !important;
		border-radius: 18px !important;
		box-shadow: none !important;
		text-align: left !important;
	}

	html body #header .site_mobile_menu_cta p {
		margin: 0 0 14px !important;
		padding: 0 !important;
		color: #3f4654 !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		line-height: 1.7 !important;
		letter-spacing: 0 !important;
	}

	html body #header .site_mobile_menu_cta a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		min-height: 50px !important;
		margin: 0 !important;
		padding: 13px 20px !important;
		color: #fff !important;
		font-size: 15px !important;
		font-weight: 700 !important;
		line-height: 1.4 !important;
		text-align: center !important;
		text-decoration: none !important;
		background: #315fe8 !important;
		border: 0 !important;
		border-radius: 999px !important;
		box-shadow: none !important;
	}

	body.is-mobile-menu-open {
		overflow: hidden !important;
		touch-action: none;
	}
}

@media (max-width: 480px) {
	html body #header .globalMenuSp,
	html body #header .site_mobile_menu {
		padding-top: 22px !important;
	}

	html body #header .site_mobile_menu li a,
	html body #header .globalMenuSp li a {
		min-height: 54px !important;
		font-size: 17px !important;
	}

	html body #header .site_mobile_menu_cta {
		margin-top: 22px !important;
		padding: 18px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body #header .site_menu_toggle span,
	html body #header .globalMenuSp,
	html body #header .site_mobile_menu {
		transition: none !important;
	}
}