/*
 * Utility row above the site nav (template-parts/site-nav.php).
 * Links back to goodwillcentraltexas.org, styled to recede: sentence
 * case, small Poppins, softened ink on white like the nav, no border of its
 * own (the nav's 2px top rule is the divider). The right padding lines
 * the links up with the Find your Goodwill label below.
 */
.gw-utility {
	background: #fff;
	font-family: Poppins, system-ui, sans-serif;
}

.gw-utility__list {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1rem;
	min-height: 2.25rem;
	margin: 0;
	padding: 0 1rem;
	list-style: none;
}

.gw-utility__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.375rem 0;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: #645d58; /* softened ink: 6.5:1 on white */
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	transition: color 200ms ease, text-decoration-color 200ms ease;
}

.gw-utility__link:hover,
.gw-utility__link:focus-visible {
	color: #2a2522;
	text-decoration-color: currentColor;
}

.gw-utility__link:focus-visible {
	outline: 2px solid #2a2522;
	outline-offset: 2px;
}

.gw-utility__icon {
	width: 0.625rem;
	height: 0.625rem;
	flex-shrink: 0;
	opacity: 0.7;
}

@media (min-width: 640px) {
	.gw-utility__list {
		gap: 1.75rem;
		min-height: 2.5rem;
		padding: 0 1.75rem;
	}

	.gw-utility__link {
		font-size: 0.875rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gw-utility__link { transition: none; }
}