/**
 * ==================================================
 * Lyrics71 Hub Description
 * ==================================================
 *
 * Introductory description for Lyrics71 Hub pages.
 *
 * Uses the same visual language as the locked
 * Artist Description component, while inheriting
 * the Hub-specific accent color.
 */


/* ==================================================
   Description Section
   ================================================== */

.hub-description-section {
	margin: 5px 0 30px;
	padding: 15px 20px 15px 35px;

	/*
	 * Hub-specific light background.
	 * The actual accent is supplied by the Hub context.
	 */
	background-color: color-mix(
		in srgb,
		var(--page-accent, var(--lyrics71-color-primary)) 6%,
		var(--lyrics71-color-white)
	);

	/*
	 * Hub-specific border.
	 */
	border: 1px solid color-mix(
		in srgb,
		var(--page-accent, var(--lyrics71-color-primary)) 35%,
		var(--lyrics71-color-white)
	);

	border-radius: 6px;

	box-shadow:
		-2px 0 0 var(
			--page-accent,
			var(--lyrics71-color-primary)
		);
}


/* ==================================================
   Content
   ================================================== */

.hub-description-content {
	margin: 0;

	color: var(--lyrics71-color-text);

	font-size: 15px;
	line-height: 1.75;
}


/* ==================================================
   Paragraphs
   ================================================== */

.hub-description-content p {
	margin-top: 0;
	margin-bottom: 15px;

	line-height: 28px;
}

.hub-description-content p:last-child {
	margin-bottom: 0;
}


/* ==================================================
   Links
   ================================================== */

.hub-description-content a {
	color: var(
		--page-accent,
		var(--lyrics71-color-primary)
	);

	text-decoration: underline;
}

.hub-description-content a:hover {
	color: var(
		--page-accent,
		var(--lyrics71-color-primary)
	);
}


/* ==================================================
   Lists
   ================================================== */

.hub-description-content ul,
.hub-description-content ol {
	margin-top: 0;
	margin-bottom: 15px;

	padding-left: 20px;
}

.hub-description-content li {
	margin-bottom: 6px;
}

.hub-description-content li:last-child {
	margin-bottom: 0;
}


/* ==================================================
   Headings inside editor content
   ================================================== */

.hub-description-content h2,
.hub-description-content h3,
.hub-description-content h4,
.hub-description-content h5,
.hub-description-content h6 {
	margin-top: 20px;
	margin-bottom: 10px;

	font-weight: 600;
	line-height: 1.4;
}

.hub-description-content h2:first-child,
.hub-description-content h3:first-child,
.hub-description-content h4:first-child,
.hub-description-content h5:first-child,
.hub-description-content h6:first-child {
	margin-top: 0;
}


/* ==================================================
   Responsive
   ================================================== */

@media (max-width: 767.98px) {

	.hub-description-section {
		padding: 14px 15px 14px 20px;
	}

	.hub-description-content {
		font-size: 15px;
		line-height: 1.75;
	}

	.hub-description-content p {
		line-height: 26px;
	}

}