/* ============================================================
   OE Sitewide Footer Internal Links (oe/bs-sitewide-footer-internal-links)
   Loaded in the editor and on the front end.
   oe-section + oe-section-muted give the full-width muted band;
   this file lays out the label and links.
   ============================================================ */

.oe-block-also-of-interest {
	container: oe-also-of-interest / inline-size;
}

.oe-block-also-of-interest .oe-block-also-of-interest__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--oe-spacing-xsmall) var(--oe-spacing-medium);
	padding-block: var(--oe-spacing-base);
}

/* Two classes: the theme's paragraph margins beat a single class. */
.oe-block-also-of-interest .oe-block-also-of-interest__label {
	margin: 0;
	flex: 0 0 auto;
	color: var(--oe-color-base);
	font-size: var(--oe-font-size-base);
	line-height: var(--oe-line-height-large);
}

.oe-block-also-of-interest .oe-block-also-of-interest__list {
	margin: 0;
	padding: 0;
	list-style: none;
	gap: var(--oe-spacing-xsmall) var(--oe-spacing-medium);
}

.oe-block-also-of-interest .oe-block-also-of-interest__item {
	margin: 0;
}

/* Navy, not sky blue, on hover: sky blue fails 4.5:1 for small text on the muted band. */
.oe-block-also-of-interest .oe-block-also-of-interest__link {
	color: var(--oe-color-neutral);
	line-height: var(--oe-line-height-large);
}

.oe-block-also-of-interest .oe-block-also-of-interest__link:hover,
.oe-block-also-of-interest .oe-block-also-of-interest__link:focus-visible {
	color: var(--oe-color-secondary);
	text-decoration: underline;
}

.oe-block-also-of-interest .oe-block-also-of-interest__link:focus-visible {
	outline: var(--oe-spacing-3xsmall) solid var(--oe-color-secondary);
	outline-offset: var(--oe-spacing-3xsmall);
}

/* Narrow: label on top, one link per line. */
@container oe-also-of-interest (max-width: 600px) {
	.oe-block-also-of-interest .oe-block-also-of-interest__nav,
	.oe-block-also-of-interest .oe-block-also-of-interest__list {
		flex-direction: column;
		align-items: flex-start;
	}
}