/**
 * Category description on the front end.
 *
 * The description can now hold blog content (headings, images, tables, lists,
 * quotes), so it needs the same basic rules as a post body. Blocksy prints it
 * in the page title / hero (.page-description) or, with the Customizer option
 * of /inc/woocommerce/category-description.php, above or below the products
 * (.term-description).
 *
 * Everything stays scoped to those three containers and leans on Blocksy's own
 * CSS variables, so it follows the active color palette.
 */

.term-description,
.bc-term-description,
.page-description {
	--bc-term-description-border: var(--theme-border-color, rgba(224, 229, 235, 0.8));
}

.term-description > *:first-child,
.bc-term-description > *:first-child,
.page-description > *:first-child {
	margin-top: 0;
}

.term-description > *:last-child,
.bc-term-description > *:last-child,
.page-description > *:last-child {
	margin-bottom: 0;
}

/* Headings ---------------------------------------------------------------- */

.term-description :is(h1, h2, h3, h4, h5, h6),
.bc-term-description :is(h1, h2, h3, h4, h5, h6),
.page-description :is(h1, h2, h3, h4, h5, h6) {
	margin: 1.5em 0 0.6em;
	color: var(--theme-heading-color, var(--theme-text-color));
	line-height: 1.3;
}

/* Media ------------------------------------------------------------------- */

.term-description :is(img, video, iframe),
.bc-term-description :is(img, video, iframe),
.page-description :is(img, video, iframe) {
	max-width: 100%;
	height: auto;
}

.term-description figure,
.bc-term-description figure,
.page-description figure {
	margin: 1.5em 0;
}

.term-description figcaption,
.bc-term-description figcaption,
.page-description figcaption {
	margin-top: 0.5em;
	font-size: 0.9em;
	opacity: 0.8;
}

.term-description .alignleft,
.bc-term-description .alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}

.term-description .alignright,
.bc-term-description .alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}

.term-description .aligncenter,
.bc-term-description .aligncenter {
	display: block;
	margin-inline: auto;
}

/* Lists and quotes -------------------------------------------------------- */

.term-description :is(ul, ol),
.bc-term-description :is(ul, ol) {
	margin: 0 0 1.5em;
	padding-left: 1.5em;
	list-style: revert;
}

.term-description li,
.bc-term-description li {
	margin-bottom: 0.4em;
}

.term-description blockquote,
.bc-term-description blockquote {
	margin: 1.5em 0;
	padding-left: 1.2em;
	border-left: 3px solid var(--theme-palette-color-1, currentColor);
	font-style: italic;
}

/* Tables ------------------------------------------------------------------ */

.term-description table,
.bc-term-description table,
.page-description table {
	width: 100%;
	margin: 0 0 1.5em;
	border-collapse: collapse;
	border-spacing: 0;
	/* Keeps a wide table scrollable instead of breaking the layout. */
	display: block;
	overflow-x: auto;
}

@media (min-width: 690px) {
	.term-description table,
	.bc-term-description table,
	.page-description table {
		display: table;
	}
}

.term-description :is(th, td),
.bc-term-description :is(th, td),
.page-description :is(th, td) {
	padding: 10px 15px;
	border: 1px solid var(--bc-term-description-border);
	text-align: start;
	vertical-align: top;
}

.term-description th,
.bc-term-description th,
.page-description th {
	background: var(--theme-palette-color-7, rgba(0, 0, 0, 0.03));
	font-weight: 600;
}

.term-description tbody tr:nth-child(even),
.bc-term-description tbody tr:nth-child(even) {
	background: var(--theme-palette-color-8, rgba(0, 0, 0, 0.015));
}

.term-description caption,
.bc-term-description caption {
	caption-side: bottom;
	padding-top: 0.6em;
	font-size: 0.9em;
	opacity: 0.8;
}

/* The hero is centered and narrow by default — blog content reads better
   aligned to the start and using the full width available. */
.page-description:has(:is(table, img, h2, h3, ul, ol)) {
	max-width: none;
	text-align: start;
}