/* ForestFrame mobile menu hotfix 0.1.1
   Narrow scope: mobile menu only. */

@media (max-width: 800px) {
	#menu-dialog.menu-dialog {
		position: fixed !important;
		inset: 0 !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		height: 100dvh !important;
		max-width: none !important;
		max-height: 100dvh !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		transform: none !important;
		background: var(--paper, #f8f5eb) !important;
	}

	#menu-dialog.menu-dialog[open] {
		display: block !important;
	}

	#menu-dialog .dialog-shell {
		box-sizing: border-box;
		width: min(100%, 440px) !important;
		min-height: 100dvh;
		margin: 0 auto !important;
		padding-top: max(20px, env(safe-area-inset-top)) !important;
		padding-right: max(22px, env(safe-area-inset-right)) !important;
		padding-bottom: max(30px, calc(18px + env(safe-area-inset-bottom))) !important;
		padding-left: max(22px, env(safe-area-inset-left)) !important;
		text-align: center;
	}

	#menu-dialog .dialog-head {
		position: sticky !important;
		top: 0 !important;
		z-index: 30 !important;
		display: grid !important;
		grid-template-columns: 44px minmax(0, 1fr) 44px !important;
		align-items: start !important;
		gap: 8px !important;
		width: 100% !important;
		margin: 0 0 12px !important;
		padding: 0 0 16px !important;
		background: var(--paper, #f8f5eb) !important;
	}

	#menu-dialog .dialog-head > div {
		grid-column: 2;
		min-width: 0;
		text-align: center;
	}

	#menu-dialog .dialog-head .close {
		grid-column: 3;
		justify-self: end;
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
	}

	#menu-dialog .dialog-head .eyebrow {
		margin-bottom: 7px !important;
		font-size: 9px !important;
		letter-spacing: 1.4px !important;
	}

	#menu-dialog .dialog-head h2 {
		font-size: clamp(30px, 8vw, 38px) !important;
		line-height: 1.05 !important;
		letter-spacing: -.5px !important;
		text-align: center !important;
	}

	#menu-dialog .menu-nav {
		width: min(100%, 360px) !important;
		margin: 8px auto 20px !important;
		text-align: center !important;
	}

	#menu-dialog .menu-nav a,
	#menu-dialog .menu-nav .ff-mobile-menu a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		min-height: 54px !important;
		padding: 9px 8px !important;
		font-size: clamp(27px, 7vw, 34px) !important;
		line-height: 1.08 !important;
		text-align: center !important;
	}

	#menu-dialog > .dialog-shell > .button,
	#menu-dialog .dialog-shell > .button.ff-online-pending {
		display: flex !important;
		width: min(100%, 360px) !important;
		min-height: 64px !important;
		margin: 16px auto 0 !important;
		padding: 11px 18px !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
	}

	#menu-dialog .dialog-shell > .button .ff-button-label {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 2px !important;
		width: 100% !important;
	}

	#menu-dialog .ff-direct-links {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
		width: min(100%, 360px) !important;
		margin: 14px auto 0 !important;
	}

	#menu-dialog .ff-direct-links a {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 9px !important;
		width: 100% !important;
		min-width: 0 !important;
		min-height: 56px !important;
		padding: 10px 8px !important;
		border: 1px solid rgba(23,60,42,.34) !important;
		border-radius: 6px !important;
		font-size: 16px !important;
		line-height: 1.2 !important;
		text-align: center !important;
	}

	#menu-dialog .ff-direct-links svg {
		width: 20px !important;
		height: 20px !important;
		flex: 0 0 20px !important;
	}

	#menu-dialog .ff-dialog-smallprint {
		width: min(100%, 360px) !important;
		margin: 24px auto 14px !important;
		font-size: 13px !important;
		line-height: 1.65 !important;
		text-align: center !important;
	}

	#menu-dialog .dialog-shell > .text-link {
		display: inline-flex !important;
		width: auto !important;
		max-width: 360px !important;
		min-height: 44px !important;
		margin: 4px auto 0 !important;
		justify-content: center !important;
		gap: 10px !important;
		font-size: 14px !important;
		text-align: center !important;
	}

	html:has(#menu-dialog[open]),
	body:has(#menu-dialog[open]) {
		overflow: hidden !important;
	}
}

@media (max-width: 380px) {
	#menu-dialog .dialog-shell {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	#menu-dialog .ff-direct-links {
		gap: 9px !important;
	}

	#menu-dialog .ff-direct-links a {
		font-size: 14px !important;
		padding-left: 6px !important;
		padding-right: 6px !important;
	}
}