/**
 * inc/mishnah-footer-menu.php - six seder columns, one masechta list each.
 *
 * The heading (<h4>) is left unclassed on purpose: it inherits the site's
 * own h1-h6 styling (Bricks' "Mishnah Display" typeface, teal ink) exactly
 * as the original Bricks code block did. Only the link list below it is
 * this component's own - previously ACSS's flex--/gap--/list--none
 * utilities, rebuilt here instead so it doesn't depend on that framework.
 */

.m-ftr-menu {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 32px 24px;
}

.m-ftr-menu__title {
	margin: 0 0 16px;
}

.m-ftr-menu__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.m-ftr-menu__link {
	color: var(--mishnah-ink-muted);
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	transition: color .15s ease;
}

.m-ftr-menu__link:hover {
	color: var(--mishnah-ink);
	text-decoration: underline;
}

/* Tablet: matches the breakpoint the rest of the plugin's CSS already uses
   for this cutoff (e.g. css/manage-chart.css, css/mishnah-chart-ui.css). */
@media (max-width: 991px) {
	.m-ftr-menu {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile: the plugin's common mobile breakpoint (css/mishnah-global.css and
   most other plugin stylesheets use 767/768px). */
@media (max-width: 767px) {
	.m-ftr-menu {
		grid-template-columns: repeat(2, 1fr);
	}
}