/**
 * Arcana Moon — frontend styles.
 *
 * The moon is an inline SVG, and inline SVGs are a magnet for third-party
 * blanket rules: jeg-elementor-kit, for one, ships
 * `.elementor-element svg { width: 1em }`. An SVG's own width/height
 * attributes lose to any stylesheet rule, so without this file the moon
 * takes whatever size the last theme or builder rule felt like giving it.
 *
 * The shape of the fix: the size lives in a custom property that is trivial
 * to override, and the rule that reads it is deliberately hard to outrank.
 */

/*
 * Defaults at zero specificity. `:where()` means a plain
 * `.arcana-moon { --arcana-moon-size: 120px }` anywhere — theme stylesheet,
 * Elementor custom CSS, the site-wide setting below — wins outright, without
 * depending on which stylesheet the browser happens to read last.
 */
:where(.arcana-moon) {
	--arcana-moon-size: 90px;
	--arcana-moon-caption-size: 0.85em;
	--arcana-moon-caption-opacity: 0.85;
	--arcana-moon-caption-gap: 4px;
}

/*
 * Where this block sits is the container's business, not the plugin's, so
 * there is deliberately no margin or alignment on the wrapper itself — a
 * theme's `text-align` or an Elementor container's `align-items` positions
 * it, the way it positions everything else in there.
 *
 * The two declarations are what make that possible in both kinds of parent.
 * `inline-block` is inline-level in ordinary flow, so a `text-align` reaches
 * it. As a flex item it is blockified, and `width: fit-content` is what stops
 * `align-items: stretch` filling the row — a stretched item ignores the
 * container's alignment, which is the whole complaint.
 */
.arcana-moon {
	display: inline-block;
	width: fit-content;
	max-width: 100%;
	line-height: 1.4;
}

/*
 * Alignment *inside* the block: where the moon sits over its own caption. The
 * caption is usually the wider of the two, so this is a real choice and it is
 * the shortcode's to make — it has nothing to do with where the block ends up
 * on the page.
 *
 * The caption follows `text-align`; the moon needs a margin instead, because
 * the SVG is a block — it has to be, or the line box leaves a gap under it —
 * and `text-align` does not move a block. That was the 1.2.0 bug.
 */
.arcana-moon--align-center { text-align: center; }
.arcana-moon--align-left   { text-align: left; }
.arcana-moon--align-right  { text-align: right; }

.arcana-moon--align-center .arcana-moon__svg.arcana-moon__svg { margin-inline: auto; }
.arcana-moon--align-left   .arcana-moon__svg.arcana-moon__svg { margin-inline: 0 auto; }
.arcana-moon--align-right  .arcana-moon__svg.arcana-moon__svg { margin-inline: auto 0; }

/*
 * `!important` on the three declarations that decide the geometry, which
 * needs justifying because it is usually a smell.
 *
 * The rules the moon competes with are shared: one blanket `… svg { }` in a
 * theme or footer template, styling several widgets' icons at once. It cannot
 * be edited to exclude the moon without disturbing the others, and it cannot
 * be out-specified for certain — a page builder compiles selectors like
 * `.elementor-10105 .elementor-element .e-con svg` (0,3,1), and any rule can
 * carry `!important` of its own. Losing that race puts the moon back in a
 * squashed box.
 *
 * The class is repeated for the same reason: `!important` settles every
 * contest against an ordinary rule, whatever its specificity, but against
 * another `!important` it is specificity that decides, and the doubled class
 * (0,3,0) clears the compiled builder selectors.
 *
 * It costs the site owner nothing here, because these declarations are not
 * the thing anyone overrides. The size is `--arcana-moon-size` above, an
 * ordinary custom property that `!important` has no bearing on. So the moon
 * opts out of the blanket rules while staying as easy to resize as before.
 * Anything added later that sizes the moon — an Elementor widget's controls,
 * a block — must set that property too, not a width. And in the last case
 * this does not cover, a shared rule carrying both `!important` and a heavier
 * selector, the fix is to exclude the moon from it rather than to delete it:
 * `… svg:not(.arcana-moon__svg) { … }`.
 *
 * `height: auto` with `aspect-ratio` rather than a second `var()`: when a
 * narrow footer column clamps the width via `max-width`, the height follows
 * it and the moon stays round instead of letterboxing inside a tall box.
 */
.arcana-moon .arcana-moon__svg.arcana-moon__svg {
	display: block;
	width: var(--arcana-moon-size) !important;
	height: auto !important;
	max-width: 100%;
	aspect-ratio: 1 / 1 !important;
}

.arcana-moon .arcana-moon__label {
	font-size: var(--arcana-moon-caption-size);
	opacity: var(--arcana-moon-caption-opacity);
	margin-top: var(--arcana-moon-caption-gap);
}