/*
 * Close button injected into the mobile menu drawer by mobile-nav.js.
 *
 * Pinned to the drawer's inline-start corner — the side away from the edge the
 * drawer slides in from — so the thumb reaches it naturally and it never sits
 * under the menu items.
 */

.rb-nav-close {
	position: absolute;
	z-index: 10;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 44px is the minimum comfortable touch target. */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(42, 28, 15, 0.06);
	color: #2a1c0f;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 200ms ease, transform 200ms ease;
}

.rb-nav-close:hover,
.rb-nav-close:focus-visible {
	background: rgba(42, 28, 15, 0.12);
	transform: rotate(90deg);
}

.rb-nav-close:focus-visible {
	outline: 3px solid #d2ac67;
	outline-offset: 2px;
}

/* Keep the first menu item clear of the button. */
.mobile-nav.wd-side-hidden .wd-nav-mobile {
	padding-block-start: 52px;
}

@media (prefers-reduced-motion: reduce) {
	.rb-nav-close {
		transition: none;
	}

	.rb-nav-close:hover,
	.rb-nav-close:focus-visible {
		transform: none;
	}
}