/* Mobile menu (navigation.php, .mobile-menu): layout tweaks on top of style.css. */

/* Fit the open menu to the screen. style.css gives it height: 100vh, but it starts below the
   86px logo/MENU bar, so its last 86px (more on small phones) were off-screen and, the bar being
   position: fixed, could not be scrolled to. Size it to the space below the bar (dvh allows for
   mobile browser toolbars) and let it scroll on its own when the content is taller. */
.mobile-menu {
	--mobile-menu-top: 86px;

	height: calc(100vh - var(--mobile-menu-top));
	height: calc(100dvh - var(--mobile-menu-top));
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* The 9 main buttons (shop ... contact): rounded squares, icon above the label. */
.mobile-menu .main-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 0.5em;
	border-radius: 12px;
}

.mobile-menu .main-btn span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
	font-size: 15px;
	line-height: 1.2;
}

.mobile-menu .main-btn span i {
	font-size: 1.6em;
}

/* Equal-sized squares: the markup pads the columns unevenly (p-r-10 / p-r-5 p-l-5 / p-l-10 on top of
   Bootstrap's 15px), which made the middle column wider. Give each column 20px of padding in total,
   15px gaps between tiles, and keep the outer edges in line with the cart/checkout row.
   (!important because the p-* helpers in style.css use it.) */
.mobile-menu .row > .col-4:nth-child(3n + 1) {
	padding-left: 15px !important;
	padding-right: 5px !important;
}

.mobile-menu .row > .col-4:nth-child(3n + 2) {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

.mobile-menu .row > .col-4:nth-child(3n + 3) {
	padding-left: 5px !important;
	padding-right: 15px !important;
}

.mobile-menu .main-btn {
	margin-bottom: 15px;
}

/* Cart / checkout and sign waiver / book a lane: same rounded corners as the squares. */
.mobile-menu .top-menu-btn,
.mobile-menu .bot-menu-btn {
	border-radius: 12px;
}

/* Social icons: 25% smaller (4em -> 3em). */
.mobile-menu .social-btn i {
	font-size: 3em;
}