/**
 * Mega menu panel for the Tools item in the primary navigation.
 *
 * This is the only stylesheet the plugin loads on every page, because the
 * navigation is on every page. It is kept deliberately small for that reason,
 * and every rule is scoped to .wth-mega so the rest of the menu keeps
 * GeneratePress's own dropdown behaviour untouched.
 */

/* ---------- sticky footer ----------
   On a short page the footer stops partway down the screen with blank space
   under it. Making the body a flex column and letting #page take the slack
   pushes the footer to the bottom without changing anything on long pages.
   Document order is preserved, so nothing moves. */

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body > #page {
	flex: 1 0 auto;
}

/* Ad scripts and the theme append empty divs after the footer. As flex items
   those would otherwise be stretched into the space we just reclaimed. */
body > .site-footer,
body > .site-footer ~ * {
	flex: 0 0 auto;
}

/* ---------- mega menu ---------- */

/* The panel spans the full navigation width, which needs the parent to stop
   being the positioning context. */
.main-navigation .main-nav ul li.wth-mega {
	position: static;
}

.main-navigation .main-nav ul li.wth-mega > ul.sub-menu {
	display: grid;
	gap: 0.25rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	left: 0;
	padding: 0.75rem;
	right: 0;
	width: 100%;
}

.main-navigation .main-nav ul li.wth-mega > ul.sub-menu > li {
	float: none;
	width: auto;
}

.main-navigation .main-nav ul li.wth-mega > ul.sub-menu > li > a {
	align-items: flex-start;
	border-radius: 6px;
	display: flex;
	gap: 0.625rem;
	line-height: 1.4;
	padding: 0.625rem 0.75rem;
	white-space: normal;
}

/* Same icon markup as the hub page cards, sized down for the menu. */
.main-navigation .main-nav ul li.wth-mega .wth-card-icon {
	background: rgba(116, 90, 204, 0.1);
	border-radius: 6px;
	color: #745acc;
	flex: none;
	height: 1.875rem;
	padding: 0.375rem;
	width: 1.875rem;
}

.wth-mega-text {
	display: block;
	min-width: 0;
}

.wth-mega-desc {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.45;
	margin-top: 0.1875rem;
	opacity: 0.72;
}

/* On a phone the navigation is a stacked list, so a grid spanning the nav makes
   no sense. Fall back to the theme's normal dropdown and drop the taglines,
   which would otherwise double the height of the menu. */
@media (max-width: 768px) {
	.main-navigation .main-nav ul li.wth-mega {
		position: relative;
	}

	.main-navigation .main-nav ul li.wth-mega > ul.sub-menu {
		display: block;
		padding: 0;
		width: auto;
	}

	.main-navigation .main-nav ul li.wth-mega > ul.sub-menu > li > a {
		align-items: center;
		border-radius: 0;
	}

	.main-navigation .main-nav ul li.wth-mega .wth-card-icon {
		height: 1.375rem;
		padding: 0.25rem;
		width: 1.375rem;
	}

	.wth-mega-desc {
		display: none;
	}
}