/**
 * Sources row -- a numbered list of citations between two hairlines, with a
 * +/- toggle. Built 2026-10-12 alongside the grid's Stats style, whose
 * footnote numbers link here (#source-N). Markup is
 * template-parts/flex/flex-sources.php; behaviour is assets/js/sources.js.
 *
 * The whole header row is the toggle: an <h2> holding one <button>, so the
 * accessible name is the title ("Sources") and the state is aria-expanded --
 * the APG disclosure pattern. The square on the right is decoration.
 *
 * Measured off the designer's screenshot against the 14px eyebrow it shares
 * with the section headers: list text ~14.5px on 1.4, items ~12px apart, a
 * ~30px square toggle. The eyebrow mirrors .row__header h6 in row-header.css
 * so the two read as one component.
 *
 * Hand-authored outside the gulp/SASS build -- see CLAUDE.md.
 */

.sources__wrap {
	--src-navy: #143250;      /* $color-dark-blue  */
	--src-gray: #6a747c;      /* $color-gray       */
	--src-rule: #e6e6e6;      /* $color-light-gray */
	--src-teal: #01a69f;      /* $color-dark-teal, the border on .btn--box */
	/* The +/- has to read as a graphic (3:1); #01a69f is about 2.9:1. */
	--src-teal-text: #00857e; /* $color-teal-text  */
}

.sources {
	border-top: 1px solid var(--src-rule);
	border-bottom: 1px solid var(--src-rule);
}

.sources__title {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
}

/* --- The toggle --------------------------------------------------------------- */

.sources__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 17px 0;
	border: 0;
	background: none;
	text-align: left;
	color: inherit;
}

.sources__toggle:focus-visible {
	outline-offset: 4px;
}

.sources__label {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--src-gray);
}

.sources__icon {
	position: relative;
	flex: none;
	width: 30px;
	height: 30px;
	border: 1px solid var(--src-teal);
	transition: background-color 0.2s ease;
}

.sources__icon::before,
.sources__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 1.5px;
	background-color: var(--src-teal-text);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

/* The vertical bar of the "+"; it lies flat to make the "-" when open. */
.sources__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.sources__toggle[aria-expanded="true"] .sources__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.sources__toggle:hover .sources__icon {
	background-color: var(--src-teal-text);
}

.sources__toggle:hover .sources__icon::before,
.sources__toggle:hover .sources__icon::after {
	background-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.sources__icon,
	.sources__icon::before,
	.sources__icon::after {
		transition: none;
	}
}

/* --- The list ----------------------------------------------------------------- */

.sources__list {
	margin: 8px 0 0;
	padding: 0 0 27px 27px;
	list-style: decimal outside;
	font-size: max(14px, 0.725rem);
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--src-gray);
}

.sources__item + .sources__item {
	margin-top: 12px;
}

.sources__item::marker {
	color: var(--src-gray);
}

/* The editor wraps each source in a <p>; the theme's p carries its own size,
   tracking and a 1em bottom margin. */
.sources__item p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

.sources__item a {
	color: var(--src-navy);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.sources__item a:hover {
	color: var(--src-teal-text);
}

/* Where a footnote lands: a tint so the reader can find the line among seven. */
.sources__item {
	scroll-margin-top: 2rem;
}

.sources__item:target {
	background-color: rgba(29, 194, 187, 0.12); /* $color-teal */
}