/**
 * Component: titled list under a primary-dark bar (Attorney Profile: practice
 * areas and credential groups). Bold items with disc bullets; detail lines
 * are a nested list. Practice areas are links, underlined like content
 * links. The bar reads the credential.* hooks (theme.json
 * settings.custom.credential.*) with today's values as fallbacks.
 */

.credential-list {
	margin: 0;
}

.credential-list__bar {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--custom--credential--bar, var(--wp--preset--color--primary-dark));
}

.credential-list__title {
	color: var(--wp--custom--credential--bar-text, var(--wp--preset--color--base));
	overflow-wrap: break-word;
}

.credential-list__items {
	margin: 0;
	padding:
		var(--wp--preset--spacing--40)
		var(--wp--preset--spacing--40)
		var(--wp--preset--spacing--20)
		calc(var(--wp--preset--spacing--40) + var(--wp--preset--spacing--50));
	list-style: disc;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--body);
	overflow-wrap: break-word;
}

.credential-list__items ul {
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--50);
	list-style: disc;
}

.credential-list__link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--border-width--thin);
	text-underline-offset: 0.15em;
}

.credential-list__link:hover {
	color: var(--wp--preset--color--primary);
}

/* tablet: Figma's 26px side padding (nearest step). */
@media (min-width: 48em) {
	.credential-list__bar {
		padding-inline: var(--wp--preset--spacing--50);
	}

	.credential-list__items {
		padding-inline:
			calc(var(--wp--preset--spacing--50) + var(--wp--preset--spacing--50))
			var(--wp--preset--spacing--50);
		padding-block-end: 0;
	}
}