/*
 * Regular WordPress blocks in posts and pages (paragraphs, headings, lists, quotes, tables...), on the
 * site and in the block editor. Colors, font sizes and widths set in the editor come from theme.json.
 *
 * Tailwind resets these elements for the design. Every rule here skips design sections (blocks with a
 * "shuffle-design-" class and everything inside them) and counts as a single element selector, so the
 * styles and classes of blocks always win.
 */

:where(.st-entry-content, .is-root-container) > :not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	font-size: 1.0625rem;
	line-height: 1.75;
}

:where(.st-entry-content, .is-root-container) :is(h1, h2, h3, h4, h5, h6):not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	font-family: var(--font-heading, inherit);
	font-weight: 600;
	line-height: 1.25;
}

:where(.st-entry-content, .is-root-container) h1:not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	font-size: 2.25rem;
}

:where(.st-entry-content, .is-root-container) h2:not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	font-size: 1.75rem;
}

:where(.st-entry-content, .is-root-container) h3:not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	font-size: 1.375rem;
}

:where(.st-entry-content, .is-root-container) h4:not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	font-size: 1.125rem;
}

:where(.st-entry-content, .is-root-container) a:not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

:where(.st-entry-content, .is-root-container) :is(ul, ol):not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	padding-left: 1.5em;
}

:where(.st-entry-content, .is-root-container) ul:not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	list-style: disc;
}

:where(.st-entry-content, .is-root-container) ol:not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	list-style: decimal;
}

:where(.st-entry-content, .is-root-container) blockquote:not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	border-left: 3px solid currentColor;
	padding-left: 1.25em;
	font-style: italic;
}

:where(.st-entry-content, .is-root-container) :is(img, video, iframe):not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	max-width: 100%;
	height: auto;
}

:where(.st-entry-content, .is-root-container) pre:not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	overflow-x: auto;
	padding: 1em;
	border-radius: 0.375rem;
	background: rgb(0 0 0 / 0.05);
}

:where(.st-entry-content, .is-root-container) table:not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	width: 100%;
	border-collapse: collapse;
}

:where(.st-entry-content, .is-root-container) :is(th, td):not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	border: 1px solid rgb(0 0 0 / 0.1);
	padding: 0.5em 0.75em;
	text-align: left;
}

:where(.st-entry-content, .is-root-container) figcaption:not(:where([class*="shuffle-design-"], [class*="shuffle-design-"] *, [data-type^="shuffle/"], [data-type^="shuffle/"] *)) {
	font-size: 0.875rem;
	opacity: 0.7;
	margin-top: 0.5rem;
}