/*
 * Footer policy links.
 *
 * Six short words and a separator. docs/design-direction.md is explicit that the nav and
 * footer stay deliberately small and that this is not the place to invent sections for a
 * universe that does not exist yet, so this is a single line of muted text above the
 * identity sentence, not a column layout with headings.
 *
 * It reads from the tokens like everything else and declares no colour of its own, which
 * is what lets it sit correctly on a collection page where the accent has been re-pointed.
 *
 * The separator is a pseudo-element rather than a character in the markup, so a screen
 * reader gets six link texts and nothing else, and so the last item can drop its own
 * without any PHP knowing which item is last.
 */

.aethyrdancer-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ad-space-1) 0;
	justify-content: center;
	list-style: none;
	margin: 0 0 var(--ad-space-3);
	padding: 0;
}

.aethyrdancer-footer-links__item {
	margin: 0;
}

.aethyrdancer-footer-links__item::after {
	color: var(--ad-ground-400);
	content: "·";
	padding: 0 var(--ad-space-3);
}

.aethyrdancer-footer-links__item:last-child::after {
	content: none;
}

.aethyrdancer-footer-links a {
	color: var(--ad-text-muted);
	font-size: var(--ad-text-sm);
	text-decoration: none;
}

.aethyrdancer-footer-links a:hover,
.aethyrdancer-footer-links a:focus-visible {
	color: var(--ad-link-hover);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/*
 * A visible focus ring, because the tokens' --ad-focus is the only thing here that is
 * allowed to be accent-coloured and keyboard users need it on a dark ground.
 */
.aethyrdancer-footer-links a:focus-visible {
	outline: 2px solid var(--ad-focus);
	outline-offset: 3px;
}

.aethyrdancer-footer-identity {
	color: var(--ad-text-muted);
	display: block;
	font-size: var(--ad-text-xs);
}

/*
 * Narrow screens. The separators stop earning their keep once the line wraps to three or
 * four rows, so below 30rem the links become a centred stack with tap targets big enough
 * to hit, and the dots go.
 */
@media (max-width: 30rem) {
	.aethyrdancer-footer-links {
		flex-direction: column;
		gap: 0;
	}

	.aethyrdancer-footer-links__item::after {
		content: none;
	}

	.aethyrdancer-footer-links a {
		display: block;
		padding: var(--ad-space-2) 0;
	}
}