/*
 * Section heading of the new design: "<b>Bold</b> rest" title with a short
 * brand bar under it and an optional link on the right
 * (.nd-sec-h > .nd-sec-h__title + .nd-sec-h__link).
 */

.nd-sec-h {
	display: flex;
	position: relative;
	align-items: baseline;
	gap: var(--nd-sp-14);
	margin: 0 0 var(--nd-sp-22);
}

.nd-sec-h::after {
	content: "";
	position: absolute;
	bottom: calc(var(--nd-sp-9) * -1);
	left: 0;
	width: var(--nd-sec-h-bar-w);
	height: var(--nd-sec-h-bar-h);
	border-radius: var(--nd-radius-track);
	background: var(--nd-c-brand);
}

.nd-sec-h__title {
	margin: 0;
	font-family: var(--nd-font);
	font-size: var(--nd-fs-sec-h-sm);
	font-weight: var(--nd-fw-regular);
	line-height: var(--nd-lh-head);
	color: var(--nd-c-head);
}

.nd-sec-h__title b {
	font-weight: var(--nd-fw-bold);
}

.nd-sec-h__link {
	margin-left: auto;
	font-size: var(--nd-fs-14);
	color: var(--nd-c-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.nd-sec-h__link:hover {
	color: var(--nd-c-brand-hover);
}

/* Tap-sized hit area around the text link (layout unchanged). */
.nd-sec-h__link {
	position: relative;
}

.nd-sec-h__link::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, var(--nd-tap));
	height: max(100%, var(--nd-tap));
	transform: translate(-50%, -50%);
}

@media (min-width: 721px) {
	.nd-sec-h__title {
		font-size: var(--nd-fs-sec-h);
	}
}