/**
 * The footer's policy links.
 *
 * Its own stylesheet, like the sign-up form's, because a footer block appears
 * on every page of a site and most of those are not store routes (§7.11).
 * A few hundred bytes rather than fifty kilobytes of shop CSS.
 *
 * Almost everything here is inherited on purpose. The block sits in somebody
 * else's footer, so it takes that footer's colour, size and font unless the
 * shop has said otherwise in the editor - a policy link that insists on its own
 * appearance is a policy link that looks pasted in.
 */

.ws-legal__list {
	display: flex;
	flex-wrap: wrap;

	/*
	 * The gap is the whole spacing story, and it is deliberately not a margin
	 * on the item. A wrapped row of links spaced by margin loses its rhythm on
	 * the second line; `gap` applies between rows as well.
	 */
	gap: var(--webstore-space-2, 0.5rem) var(--webstore-space-3, 0.75rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ws-legal__item {
	align-items: center;
	display: flex;

	/*
	 * The separator is generated, not typed. Written into the markup it would
	 * be read out as a word by a screen reader between every pair of links, and
	 * it would be there to be selected and copied along with them.
	 */
	gap: var(--webstore-space-3, 0.75rem);
}

.ws-legal__item + .ws-legal__item::before {
	content: var(--ws-legal-separator, '\00b7');
	opacity: 0.55;

	/* Never announced, and never part of a selection. */
	speak: never;
}

.ws-legal__link {
	color: inherit;

	/*
	 * Underlined, not just coloured. These sit in a footer where the colour
	 * contrast against the surrounding text is often small, and a link
	 * distinguished only by colour fails WCAG 1.4.1 - which is a poor look on
	 * the page describing how the shop treats people.
	 */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.ws-legal__link:hover,
.ws-legal__link:focus-visible {
	text-decoration-thickness: 2px;
}

/*
 * Only ever seen by somebody editing a template. A shop that has written
 * neither policy shows visitors nothing at all.
 */
.ws-legal__off {
	border: 1px dashed var(--webstore-color-border, #dcdcde);
	border-radius: var(--webstore-radius-md, 6px);
	color: var(--webstore-color-ink-muted, #50575e);
	font-size: var(--webstore-scale-sm, 0.875rem);
	margin: 0;
	padding: var(--webstore-space-4, 1rem);
}