/*
 * The least CSS that makes core blocks inside the theme's sections read as
 * the template-rendered pages did. No new colors, fonts or sizes: those
 * come from site.css and components.css. Loaded on the front end once pages
 * render from block content, and in the editor.
 *
 * Block markup may only use classes defined in site.css, components.css or
 * this file (`wp boco check` reports any other class).
 */

/* Core wrappers add no box of their own. Zero specificity (:where), so
   the theme's own classes (.boco-grid, .boco-prose, …) keep their margins. */
:where(figure) { margin: 0; }
:where(.wp-block-group:empty) { display: contents; }
:where(.wp-block-image) img { height: auto; max-width: 100%; }

/* Tables: the theme's tables carry their own classes; a plain core table
   (static guides, the illustrative box) stays plain. */
:where(.wp-block-table) { overflow-x: auto; }
:where(.wp-block-table) > table { width: 100%; border-collapse: collapse; }
:where(.wp-block-table) td,
:where(.wp-block-table) th { border: 0; padding: 0; }

/* Inline facts in the editor: a chip around the server-rendered value. */
.editor-styles-wrapper .boco-inline {
	border-radius: 4px;
	background: var(--paper-alt);
	box-shadow: 0 0 0 1px var(--line);
	padding: 0 .2em;
}
.editor-styles-wrapper .boco-gate {
	outline: 1px dashed var(--amber);
	outline-offset: 1px;
}

/* Editor frames for the Boco container blocks. */
.editor-styles-wrapper .boco-editor-gate {
	outline: 1px dashed var(--amber);
	outline-offset: 4px;
}
.editor-styles-wrapper .boco-editor-label {
	display: inline-block;
	margin-bottom: .5rem;
	border-radius: 4px;
	background: var(--paper-alt);
	padding: 0 .4rem;
	font-size: 12px;
	color: var(--text-subtle);
}