/*
 * Nenda Mark (`is-style-nenda-mark` on a `core/separator`).
 *
 * The design closes a section with a thick white bar running the full width of
 * the window, with the Nenda mark — a near-black disc carrying the outlined N —
 * centred on it and overhanging it top and bottom. Figma draws it as the
 * section's 7px bottom border with the disc floating over the seam; a separator
 * is what it is in the document: the boundary between two sections.
 *
 * ## What the block owns and what this file owns
 *
 * **The bar's colour stays the block's.** `core/separator` already has a
 * Background control, and its `save()` writes the colour as `background-color`
 * on the `<hr>` — so a pattern says `{"backgroundColor":"white"}` and an editor
 * can change it in the inspector. Nothing here paints the bar.
 *
 * What the block cannot express is the bar's *height* — core draws a separator
 * as a `border-top` on a zero-height rule, and there is no height control, so a
 * background colour on a stock separator is invisible. `border: 0` plus a real
 * `height` is what turns the block into a bar the colour can land on. The
 * `border` shorthand rather than `border-top-width`, because the theme's default
 * separator style sets the width to 1px (`core-separator.php`) and this style
 * has to beat it on both properties; being a class deeper does that.
 *
 * ## The disc
 *
 * `::after` rather than an inner block, because there is nothing to edit: the
 * mark is the brand's, not content. It is sized from
 * `--kg-nenda-mark-size` so a section that wants a smaller one has a single
 * value to set.
 *
 * The disc is 104px across in the design and the glyph inside it 44px tall,
 * which is `auto 42.31%` of the disc — stated as a percentage of the box rather
 * than a length so the two stay in proportion if the size is ever changed.
 * `auto` for the width, so the glyph keeps the export's own aspect ratio rather
 * than being stretched to a second guessed number.
 *
 * The ring is a real `border` with `box-sizing: border-box`, so the mark keeps
 * the design's 104px footprint on the bar rather than growing by the ring on
 * each side. That would shrink what a percentage `background-size` resolves
 * against — the positioning area defaults to the padding box — so
 * `background-origin: border-box` puts it back on the full disc and 42.31%
 * stays the design's 44px glyph. The ring is white against the bar it sits on,
 * which is what makes it read against the section below where the disc
 * overhangs; the width is tunable through `--kg-nenda-mark-ring-width`.
 *
 * The SVG is white and says so in its filename: an SVG referenced as a
 * `background-image` has no styling context, so `currentColor` inside it would
 * resolve to black. `nenda-mark-light.svg` is the two glyph paths out of
 * `nenma-badge.svg` with a viewBox tightened to their bounds — same coordinates,
 * no ring: the disc's ring is the CSS border above, not part of the artwork.
 *
 * A file rather than an `inline_style`, because the rule contains a relative
 * `url()`: core only rewrites those against the stylesheet's own location when
 * the CSS *is* a stylesheet. Inline CSS is appended to `wp-block-separator`'s
 * handle, whose src is core's own directory, and the mark would 404 there.
 *
 * ## Two things that have to hold around it
 *
 * The disc is fifteen times the bar's height, so **nothing between the
 * separator and the section's own box may clip it** — an `overflow: hidden` or
 * `clip` anywhere up the tree slices the mark in half. `overflow: visible` here
 * only undoes a reset on the `<hr>` itself; it cannot reach an ancestor.
 *
 * And the disc has to stay on top of whatever the next section opens with. A
 * positioned element with `z-index: auto` paints above its siblings'
 * *backgrounds* and below any later sibling's inline content — an image or a
 * heading in the section below would cover the half of the disc that overhangs
 * it, which is the same paint-order rule `patterns/hero-sector.php` explains for
 * its photograph. A positive `z-index` moves it into the layer painted after all
 * in-flow content, so it is `1` rather than `auto`, tunable through
 * `--kg-nenda-mark-z`. One is enough and deliberately small: the header bar is
 * `200` and the menu overlay `100`, and a section's decoration belongs under
 * both.
 *
 * It is not a substitute for putting the separator last in its section, which is
 * where the design has it anyway — a `z-index` only orders it against content in
 * the same stacking context, so a later section that creates one of its own
 * (a `transform`, an `opacity` below 1, an `isolation: isolate`) wins whatever
 * this says.
 */

.wp-block-separator.is-style-nenda-mark {
	--kg-nenda-mark-size: 6.5rem;

	position: relative;
	height: 0.4375rem;
	border: 0;
	overflow: visible;
}

.wp-block-separator.is-style-nenda-mark::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	z-index: var(--kg-nenda-mark-z, 1);
	inline-size: var(--kg-nenda-mark-size);
	block-size: var(--kg-nenda-mark-size);
	box-sizing: border-box;
	border: var(--kg-nenda-mark-ring-width, 0.1875rem) solid
		var(--wp--preset--color--white);
	border-radius: 50%;
	background-color: var(--wp--preset--color--woodsmoke);
	background-image: url(../../images/nenda-mark-light.svg);
	background-origin: border-box;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: auto 42.31%;
}