/*
 * Brand styling for the core blocks allowed on posts (inc/editor.php allowlist). Loaded by
 * inc/blocks.php only on singular views whose content has block markup, so classic posts and pages
 * are untouched. Perfmatters unloads wp-block-library for logged-out visitors (and keeps it for
 * logged-in users), so everything a visitor needs is here, under .ba-prose, at a specificity that
 * also wins over core's per-block CSS. Mirrored in editor.css for the editor canvas.
 */

/* Figures (image, table, embed) sit in the text column without the browser's 40px side margins. */
.ba-prose figure.wp-block-image,
.ba-prose figure.wp-block-table,
.ba-prose figure.wp-block-embed { margin: 28px 0; max-width: 100%; }
.ba-prose .wp-block-image img { display: block; height: auto; max-width: 100%; border-radius: var(--ba-radius-sm); }
.ba-prose .wp-block-image.aligncenter,
.ba-prose .wp-block-image .aligncenter { display: table; margin-left: auto; margin-right: auto; }
.ba-prose .wp-block-image.aligncenter > figcaption { display: table-caption; caption-side: bottom; }
.ba-prose .wp-element-caption { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ba-muted); text-align: center; }

/* Table: header row on cloud, the wrapper never widens the page (the table scrolls inside itself on phones, base.css). */
.ba-prose .wp-block-table { overflow-x: auto; }
.ba-prose .wp-block-table table { width: 100%; margin: 0; border-collapse: collapse; }
.ba-prose .wp-block-table thead { border-bottom: 0; }
.ba-prose .wp-block-table th,
.ba-prose .wp-block-table td { border: 1px solid var(--ba-line); padding: 10px 12px; text-align: left; vertical-align: top; word-break: normal; overflow-wrap: break-word; }
.ba-prose .wp-block-table th,
.ba-prose .wp-block-table thead td { background: var(--ba-cloud); font-weight: 600; color: var(--ba-ink); }
.ba-prose .wp-block-table .has-fixed-layout { table-layout: fixed; }
.ba-prose .wp-block-table figcaption { text-align: left; }
/* Phones: base.css turns .ba-prose tables into scrolling blocks, which leaves rows narrower than the
   table box. A block table has its own scrolling wrapper (the figure), so it stays a real table,
   sized to its content (fixed layout split "Selections" mid-word at 375). */
@media (max-width: 599px) {
	.ba-prose .wp-block-table table,
	.ba-prose .wp-block-table .has-fixed-layout { display: table; table-layout: auto; min-width: 100%; width: auto; }
	.ba-prose .wp-block-table th,
	.ba-prose .wp-block-table td { padding: 7px 8px; hyphens: manual; }
}

/* Quote: teal rule, no italics. */
.ba-prose .wp-block-quote { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--ba-teal); color: var(--ba-ink-2); }
.ba-prose .wp-block-quote p:last-of-type { margin-bottom: 0; }
.ba-prose .wp-block-quote cite { display: block; margin-top: 8px; font-size: 14px; font-style: normal; color: var(--ba-muted); }

/* Separator. */
.ba-prose .wp-block-separator { margin: 36px auto; border: 0; border-top: 1px solid var(--ba-line); opacity: 1; }

/* Embeds (YouTube etc.): 16:9 box. */
.ba-prose .wp-block-embed__wrapper { position: relative; }
.ba-prose .wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: ""; display: block; padding-top: 56.25%; }
.ba-prose .wp-embed-aspect-4-3 .wp-block-embed__wrapper::before { padding-top: 75%; }
.ba-prose .wp-has-aspect-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--ba-radius-sm); }

/* Text alignment from the paragraph/heading toolbar. */
.ba-prose .has-text-align-center { text-align: center; }
.ba-prose .has-text-align-right { text-align: right; }
.ba-prose .has-text-align-left { text-align: left; }