/* Surf mobile nav variant.
   Styled to match Karano mobile menu feel while keeping Sportyfied fonts. */

@media (max-width: 767px) {
	body.mobile_nav_variant_surf_enabled {
		--mns-bg: #f3f3f3;
		--mns-text: #121212;
		--mns-border: rgba(18, 18, 18, 0.14);
	}

	body.mobile_nav_variant_surf_enabled.mobile_nav_surf_open {
		overflow: hidden;
	}

	body.mobile_nav_variant_surf_enabled .mobilenav-holder {
		z-index: 1005;
	}

	body.mobile_nav_variant_surf_enabled .mobile-nav-surf-backdrop {
		position: fixed;
		inset: 0;
		z-index: 1003;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		background: transparent;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	body.mobile_nav_variant_surf_enabled .mobile-nav-surf-backdrop.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	body.mobile_nav_variant_surf_enabled .mobilenav-content {
		position: fixed !important;
		left: 0;
		top: 0;
		width: calc(100vw - 22px);
		max-width: 760px;
		height: 100dvh;
		padding: 0;
		border-right: 1px solid var(--mns-border);
		background: var(--mns-bg);
		display: block !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-40px);
		transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.17, 0.67, 0.17, 1), visibility 0.2s ease;
		z-index: 1004;
		overflow: hidden;
	}

	body.mobile_nav_variant_surf_enabled .mobilenav-content.mobilemenu--built {
		width: 100%;
		max-width: none;
		z-index: 10001;
	}

	body.mobile_nav_variant_surf_enabled .mobilenav-content.open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	body.mobile_nav_variant_surf_enabled .mobilenav-content > .container.padded.mobilemenu-source {
		display: none !important;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		color: var(--mns-text);
		font-family: var(--font-body);
		padding:0;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding:18px 20px 0 20px;
		border-bottom: 0;
		color: var(--mns-text);
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__back,
	body.mobile_nav_variant_surf_enabled .mobilemenu__close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		min-width: 32px;
		min-height: 32px;
		border: 0;
		padding: 4px;
		background: transparent;
		color: var(--mns-text);
		font-size: 24px;
		opacity: 0.78;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__back::before,
	body.mobile_nav_variant_surf_enabled .mobilemenu__close::before {
		content: "";
		position: absolute;
		top: -10px;
		bottom: -10px;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__back::before {
		left: -16px;
		right: -6px;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__close::before {
		left: -6px;
		right: -16px;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__back {
		opacity: 0;
		pointer-events: none;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu.has-back .mobilemenu__back {
		opacity: 0.78;
		pointer-events: auto;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__title {
		flex: 1;
		text-align: left;
		font-size: 140%;
		letter-spacing: 0;
		text-transform: none;
		position: relative;
		top: -1px;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__panels {
		position: relative;
		flex: 1;
		overflow: hidden;
		margin-top: 0px;
		padding: 0 0px 0 0;
		width:100%;
		height:100%;
		overflow-x:hidden;
		overflow-y:auto;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__panel {
		position: absolute;
		/*inset: 0 20px 0 30px;*/
		width:calc(100% - 20px);
		overflow-y: auto;
		padding:20px 30px 40px 30px;
		transform: translateX(100%);
		opacity: 0;
		pointer-events: none;
		transition: transform 0.35s cubic-bezier(0.17, 0.67, 0.17, 1), opacity 0.35s cubic-bezier(0.17, 0.67, 0.17, 1);
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__panel:not(.is-active) {
		height:100%;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__panel.is-prep {
		transition: none;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__panel.is-active {
		transform: translateX(0);
		opacity: 1;
		pointer-events: auto;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__panel.is-enter-left {
		transform: translateX(-50%);
		opacity:0;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__panel.is-enter-right {
		transform: translateX(50%);
		opacity:0;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__panel.is-exiting-left {
		transform: translateX(-20%);
		opacity: 0;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__panel.is-exiting-right {
		transform: translateX(50%);
		opacity: 0;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__list--primary {
		margin-bottom:20px;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__list--secondary {
		margin-top: 0px;
		padding-top: 0;
		border-top: 0;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__list--secondary:not(:first-child) {
		
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__link {
		display: flex;
		align-items: baseline;
		justify-content: flex-start;
		width: 100%;
		border: 0;
		padding: 9px 0;
		gap: 6px;
		background: transparent;
		box-shadow: none;
		color: var(--mns-text);
		text-decoration: none;
		line-height: 1.2;
		font-family: var(--font-body);
		letter-spacing: 0;
		text-transform: none;
		text-align: left;
	}
	body.mobile_nav_variant_surf_enabled .mobilemenu__link:hover {
		text-decoration:underline;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__link.has-icon,
	body.mobile_nav_variant_surf_enabled .mobilemenu__link.has-placeholder-icon {
		align-items: center;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__link:not(.mobilemenu__link--parent) .mobilemenu__icon {
		flex: 0 0 1.35em;
		width: 1.35em;
		font-size: 0.85em;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__list--secondary .mobilemenu__link .mobilemenu__icon {
		font-size: 0.82em;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__list--secondary .mobilemenu__link .mobilemenu__icon--placeholder {
		opacity: 0.48;
		font-size: 1.05em;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__list--primary .mobilemenu__link.has-icon-after-label .mobilemenu__icon {
		flex: 0 0 auto;
		width: auto;
		font-size: 0.72em;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__link:hover,
	body.mobile_nav_variant_surf_enabled .mobilemenu__link:focus {
		color: var(--mns-text);
		text-decoration: none;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__link--parent {
		cursor: pointer;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__list--primary .mobilemenu__link {
		font-size: 170%;
		font-weight: 400;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__list--secondary .mobilemenu__link {
		font-size: 140%;
		font-weight: 400;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__link.is-active {
		font-weight: 700;
		color: var(--mns-text);
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__caret {
		font-size: 0.5em;
		opacity: 0.75;
		position:relative;
		top:-1.5px;
	}

	body.mobile_nav_variant_surf_enabled .mobilemenu__text {
		flex: 0 1 auto;
		text-align: left;
	}
}