/*
 * Arenex Blocks: styles every block shares (Block Theme Rules 02 §5).
 *
 * Class rules sit inside :where(), so a theme adjusts them without !important.
 * WordPress prints block CSS before the theme's stylesheets, so the paragraph
 * styles keep their class outside :where(). That beats a parent theme's
 * "p { margin }" reset, and a child theme still overrides them with a class.
 */

/* Eyebrow: the small label above a heading. A core Paragraph with the "Eyebrow" style. */
:where(p).is-style-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 1em;
	margin-block: 0 1em;
	font-family: var(--font-eyebrow);
	font-size: var(--label-size);
	font-weight: 400;
	line-height: var(--body-line-height);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary-color);
}
:where(.is-style-eyebrow)::before {
	content: "";
	flex: none;
	width: 2.667em;
	height: 2px;
	background: currentColor;
}

/* Lead: a larger intro paragraph. A core Paragraph with the "Lead" style. */
:where(p).is-style-lead {
	max-width: 60ch;
	font-size: var(--lead-size);
	line-height: 1.5;
}

/* Accent word: select a word in a heading and press Cmd/Ctrl+I. Each site decides how it looks. */
:where([class*="arenex-"]) :where(h1, h2, h3, h4) em {
	font-style: var(--accent-word-style);
	color: var(--accent-word-color);
}

/* ACF wraps InnerBlocks in this element; without this, grid and flex layouts break around it. */
:where(.acf-innerblocks-container) { display: contents; }

/*
 * A section placed inside a Group band. The Group already gives the band its padding and
 * its container, so the block drops its own: no band padding, and its container element
 * (class arenex-container) takes the Group's width. One class stays outside :where() so
 * this beats the block's own zero-specificity rules, whatever order the files load in.
 */
.wp-block-group__inner-container > :where([class*="arenex-"]) { padding-block: 0; }
.wp-block-group__inner-container > :where([class*="arenex-"]) :where(.arenex-container) { max-width: none; padding-inline: 0; }
/* In the editor, ACF sits a wrapper between the Group and the block. */
.wp-block-group [data-type^="arenex/"] :where(.acf-block-preview) > :where([class*="arenex-"]) { padding-block: 0; }
.wp-block-group [data-type^="arenex/"] :where(.arenex-container) { max-width: none; padding-inline: 0; }

/*
 * An uploaded icon ("Or upload an icon" on Cards, Split and Ticker items). Each block sizes it
 * exactly as it sizes its built-in icons. An SVG is a mask filled with currentColor, so it
 * takes the icon colour and hover colour like the built-in icons; a PNG or WebP shows as it is.
 */
:where(.arenex-icon-upload) { display: block; flex: none; width: 1.25em; height: 1.25em; }
:where(img.arenex-icon-upload) { object-fit: contain; }
.arenex-icon-upload--svg {
	background-color: currentColor;
	-webkit-mask: var(--arenex-icon) center / contain no-repeat;
	mask: var(--arenex-icon) center / contain no-repeat;
}