/**
 * Cero7 Blog: article content and block styles.
 *
 * Loaded on the site AND inside the block editor (add_editor_style), so what
 * an author sees while writing is what readers get. Every rule is scoped to
 * the content root — .entry-content on the site, .is-root-container in the
 * editor — and uses theme.json's preset variables, which exist in both places.
 */

:where(.entry-content, .is-root-container) {
	color: var(--wp--preset--color--ink-soft);
	font-size: 1.125rem;
	line-height: 1.75;
	overflow-wrap: break-word;
}

/* Vertical rhythm. The editor applies blockGap itself; the site needs it here. */
.entry-content > * {
	margin-block: 0;
}

.entry-content > * + * {
	margin-block-start: 1.5rem;
}

:where(.entry-content, .is-root-container) :is(h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--ink);
}

.entry-content > h2,
.is-root-container > h2 {
	margin-block-start: 3.5rem;
}

.entry-content > :is(h3, h4),
.is-root-container > :is(h3, h4) {
	margin-block-start: 2.5rem;
}

.entry-content > :is(h2, h3, h4) + *,
.is-root-container > :is(h2, h3, h4) + * {
	margin-block-start: 1rem;
}

.entry-content > :first-child {
	margin-block-start: 0;
}

:where(.entry-content, .is-root-container) strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

:where(.entry-content, .is-root-container) a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--ember);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	transition: color 0.2s;
}

:where(.entry-content, .is-root-container) a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--ember-text);
}

:where(.entry-content, .is-root-container) mark:not(.has-inline-color) {
	background: var(--wp--preset--color--ember-wash);
	color: var(--wp--preset--color--ink);
}

/* ── Lists: ember dashes and display-face numbers ────────────────────────── */

:where(.entry-content, .is-root-container) :is(ul, ol):not([class*="is-style-"]):not(.blocks-gallery-grid):not(.wp-block-social-links):not(.wp-block-page-list) {
	padding-left: 1.5rem;
}

:where(.entry-content, .is-root-container) li + li {
	margin-top: 0.625rem;
}

:where(.entry-content, .is-root-container) ul:not([class*="is-style-"]):not(.blocks-gallery-grid):not(.wp-block-social-links):not(.wp-block-page-list) {
	list-style: none;
}

:where(.entry-content, .is-root-container) ul:not([class*="is-style-"]):not(.blocks-gallery-grid):not(.wp-block-social-links):not(.wp-block-page-list) > li {
	position: relative;
}

:where(.entry-content, .is-root-container) ul:not([class*="is-style-"]):not(.blocks-gallery-grid):not(.wp-block-social-links):not(.wp-block-page-list) > li::before {
	content: "";
	position: absolute;
	top: 0.85em;
	left: -1.5rem;
	width: 0.875rem;
	height: 2px;
	background: var(--wp--preset--color--ember);
}

:where(.entry-content, .is-root-container) ol > li::marker {
	color: var(--wp--preset--color--ember-text);
	font-family: var(--wp--preset--font-family--display);
}

/* ── Quotes, code, tables, media ──────────────────────────────────────────── */

:where(.entry-content, .is-root-container) blockquote {
	margin-inline: 0;
	color: var(--wp--preset--color--ink);
}

:where(.entry-content, .is-root-container) blockquote p {
	margin: 0;
}

:where(.entry-content, .is-root-container) blockquote p + p {
	margin-top: 1rem;
}

:where(.entry-content, .is-root-container) blockquote cite {
	display: block;
	margin-top: 1rem;
	color: var(--wp--preset--color--ink-mute);
}

:where(.entry-content, .is-root-container) .wp-block-pullquote {
	padding: 2.5rem 0;
	color: var(--wp--preset--color--ink);
	text-align: left;
}

:where(.entry-content, .is-root-container) .wp-block-pullquote blockquote {
	margin: 0;
}

:where(.entry-content, .is-root-container) :not(pre) > code {
	padding: 0.125rem 0.375rem;
	border-radius: 0.375rem;
	background: var(--wp--preset--color--bone-deep);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9em;
}

:where(.entry-content, .is-root-container) pre {
	overflow-x: auto;
	white-space: pre;
}

:where(.entry-content, .is-root-container) kbd {
	padding: 0.125rem 0.375rem;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 0.375rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85em;
}

:where(.entry-content, .is-root-container) .wp-block-table {
	overflow-x: auto;
}

:where(.entry-content, .is-root-container) table {
	width: 100%;
	border-collapse: collapse;
}

/* :is() rather than :where() here: core's table block draws a full grid with
   a class selector, and these rules must outrank it. */
:is(.entry-content, .is-root-container) table :is(th, td) {
	padding: 0.75rem 1rem 0.75rem 0;
	border: 0;
	border-bottom: 1px solid rgb(37 35 34 / 0.15);
	text-align: left;
	vertical-align: top;
}

:is(.entry-content, .is-root-container) table thead {
	border-bottom: 0;
}

:is(.entry-content, .is-root-container) table thead th {
	border-bottom: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

:where(.entry-content, .is-root-container) .wp-block-image img,
:where(.entry-content, .is-root-container) .wp-block-gallery img {
	border-radius: 1rem;
}

:where(.entry-content, .is-root-container) figcaption,
:where(.entry-content, .is-root-container) .wp-element-caption {
	margin-top: 0.75rem;
	color: var(--wp--preset--color--ink-mute);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	line-height: 1.5;
	text-align: left;
}

:where(.entry-content, .is-root-container) .wp-block-embed iframe {
	max-width: 100%;
	border-radius: 1rem;
}

:where(.entry-content, .is-root-container) hr,
:where(.entry-content, .is-root-container) .wp-block-separator {
	border: 0;
	border-top: 2px solid currentColor;
	opacity: 1;
}

:where(.entry-content, .is-root-container) .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	max-width: 6rem;
	margin-inline: 0;
}

:where(.entry-content, .is-root-container) .wp-block-separator.is-style-dots {
	border-top: 0;
}

/* Details (FAQ): one slab per question. */
:where(.entry-content, .is-root-container) .wp-block-details {
	padding: 0 1.5rem;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 1.5rem;
	background: var(--wp--preset--color--bone);
}

:where(.entry-content, .is-root-container) .wp-block-details + .wp-block-details {
	margin-top: 0.75rem;
}

:where(.entry-content, .is-root-container) .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.5rem;
	padding: 0.75rem 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

:where(.entry-content, .is-root-container) .wp-block-details summary::-webkit-details-marker {
	display: none;
}

:where(.entry-content, .is-root-container) .wp-block-details summary::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	line-height: 1;
}

:where(.entry-content, .is-root-container) .wp-block-details[open] summary::after {
	content: "–";
}

:where(.entry-content, .is-root-container) .wp-block-details > :not(summary) {
	margin: 0 0 1.25rem;
}

/* ── Alignment (site only; the editor handles its own) ────────────────────── */

.entry-content .alignleft {
	float: left;
	max-width: 50%;
	margin: 0.5rem 1.5rem 1rem 0;
}

.entry-content .alignright {
	float: right;
	max-width: 50%;
	margin: 0.5rem 0 1rem 1.5rem;
}

.entry-content .aligncenter {
	margin-inline: auto;
	text-align: center;
}

.entry-content > .alignwide {
	width: min(64rem, 100vw - 2 * var(--c7-gutter, 1.25rem));
	max-width: none;
	margin-inline: calc(50% - min(32rem, 50vw - var(--c7-gutter, 1.25rem)));
}

.entry-content > .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.entry-content > .alignfull.has-background,
.entry-content > .alignfull.c7-band {
	padding-inline: max(var(--c7-gutter, 1.25rem), calc(50vw - 21rem));
}

/* With a sidebar, the column is not centred on the viewport: keep wide and
   full blocks inside it rather than breaking out unevenly. */
@media (min-width: 1200px) {
	.has-aside .entry-content > :is(.alignwide, .alignfull) {
		width: auto;
		margin-inline: 0;
	}

	.has-aside .entry-content > .alignfull.has-background,
	.has-aside .entry-content > .alignfull.c7-band {
		padding-inline: 2.5rem;
		border-radius: 2rem;
	}
}

.entry-content--wide > .alignwide {
	width: auto;
	margin-inline: 0;
}

.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

/* ── Block styles (Cero7) ─────────────────────────────────────────────────── */

/* Group: slab card. */
:where(.entry-content, .is-root-container) .wp-block-group:is(.is-style-slab, .is-style-slab-wash) {
	padding: 1.75rem;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 2rem;
	box-shadow: var(--wp--preset--shadow--slab);
}

:where(.entry-content, .is-root-container) .wp-block-group.is-style-slab:not(.has-background) {
	background: var(--wp--preset--color--bone-deep);
}

:where(.entry-content, .is-root-container) .wp-block-group.is-style-slab-wash:not(.has-background) {
	background: var(--wp--preset--color--ember-wash);
}

@media (min-width: 640px) {
	:where(.entry-content, .is-root-container) .wp-block-group:is(.is-style-slab, .is-style-slab-wash) {
		padding: 2rem 2.25rem;
	}
}

:where(.entry-content, .is-root-container) .wp-block-group:is(.is-style-slab, .is-style-slab-wash) > * {
	margin-block: 0;
}

:where(.entry-content, .is-root-container) .wp-block-group:is(.is-style-slab, .is-style-slab-wash) > * + * {
	margin-block-start: 1rem;
}

/* Full-width colour band, used by the CTA and quote patterns. */
:where(.entry-content, .is-root-container) .c7-band {
	padding-block: 3.5rem;
}

:where(.entry-content, .is-root-container) .c7-band > * {
	margin-block: 0;
}

:where(.entry-content, .is-root-container) .c7-band > * + * {
	margin-block-start: 1.25rem;
}

:where(.entry-content, .is-root-container) .has-ember-background-color :is(.is-style-eyebrow, a:not(.wp-element-button)) {
	color: var(--wp--preset--color--ink);
}

:where(.entry-content, .is-root-container) .has-ink-background-color :is(h2, h3, blockquote, cite, a:not(.wp-element-button)) {
	color: var(--wp--preset--color--bone);
}

:where(.entry-content, .is-root-container) .has-ink-background-color .is-style-eyebrow {
	color: var(--wp--preset--color--ember);
}

/* Image: slab frame. */
:where(.entry-content, .is-root-container) .wp-block-image.is-style-slab img {
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 2rem;
	box-shadow: var(--wp--preset--shadow--slab);
}

/* Buttons: ink and outline variations. */
:where(.entry-content, .is-root-container) .wp-block-button.is-style-ink .wp-block-button__link {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
}

:where(.entry-content, .is-root-container) .wp-block-button.is-style-ink .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink-soft);
}

:where(.entry-content, .is-root-container) .wp-block-button.is-style-outline .wp-block-button__link {
	padding: calc(1rem - 2px) calc(1.75rem - 2px);
	border: 2px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--ink);
}

:where(.entry-content, .is-root-container) .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
}

:where(.entry-content, .is-root-container) .has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--bone);
}

/* Paragraph: eyebrow, lede, big figure. */
:where(.entry-content, .is-root-container) p.is-style-eyebrow {
	color: var(--wp--preset--color--ember-text);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

:where(.entry-content, .is-root-container) p.is-style-lede {
	color: var(--wp--preset--color--ink);
	font-size: 1.375rem;
	line-height: 1.55;
}

:where(.entry-content, .is-root-container) p.is-style-figure {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-lg);
	line-height: 1;
	text-transform: uppercase;
}

:where(.entry-content, .is-root-container) p.is-style-figure + p {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* List: checks in ember circles. */
:where(.entry-content, .is-root-container) ul.is-style-checks {
	padding-left: 2.25rem;
	list-style: none;
}

:where(.entry-content, .is-root-container) ul.is-style-checks > li {
	position: relative;
}

:where(.entry-content, .is-root-container) ul.is-style-checks > li::before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: -2.25rem;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 50%;
	background: var(--wp--preset--color--ember) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252322' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* Quote: display. */
:where(.entry-content, .is-root-container) .wp-block-quote.is-style-display {
	position: relative;
	padding: 2.5rem 0 0;
	border: 0;
	font-style: normal;
}

:where(.entry-content, .is-root-container) .wp-block-quote.is-style-display::before {
	content: "“";
	position: absolute;
	top: -0.5rem;
	left: 0;
	color: var(--wp--preset--color--ember);
	font-family: var(--wp--preset--font-family--display);
	font-size: 5rem;
	line-height: 1;
}

:where(.entry-content, .is-root-container) .wp-block-quote.is-style-display p {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-sm);
	line-height: 1.3;
	text-transform: uppercase;
}

/* Separator: short ember bar. */
:where(.entry-content, .is-root-container) .wp-block-separator.is-style-ember {
	width: 6rem;
	border-top: 4px solid var(--wp--preset--color--ember);
}

/* Columns of slab cards keep equal heights. */
:where(.entry-content, .is-root-container) .wp-block-column > .wp-block-group:only-child {
	height: 100%;
}

/* Classic-editor captions and galleries (content written before blocks). */
.wp-caption {
	max-width: 100%;
}

.wp-caption img {
	display: block;
	border-radius: 1rem;
}

.wp-caption-text,
.gallery-caption {
	margin-top: 0.75rem;
	color: var(--wp--preset--color--ink-mute);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

/* Sticky posts are marked by the "Featured" badge on their card. */
.sticky .card__badge {
	display: inline-flex;
}

/* Details block without a summary: shown as ordinary content (inc/blocks.php). */
.entry-content .wp-block-details.is-summaryless {
	padding: 0;
	border: 0;
	background: none;
}

.entry-content .wp-block-details.is-summaryless > summary {
	display: none;
}

.entry-content .wp-block-details.is-summaryless > * + * {
	margin-top: 1.5rem;
}