/**
 * VNM — legacy `common_*` shortcode compatibility styles.
 * =============================================================================
 * WHY THIS SHEET EXISTS AT ALL
 *
 * Most of what `inc/shortcodes.php` renders is produced by arneiron's own
 * server-rendered blocks, which carry their own stylesheets. This file covers
 * only the cases where the theme ships markup with no front-end CSS behind it.
 * MEASURED on arneiron 0.6.5, 2026-08-11:
 *
 *   blocks/build/icon-box/style-index.css  = 1 byte    (11,570 B are editorStyle)
 *   blocks/build/testimonial/block.json    → "style": null
 *   blocks/build/button/style-index.css    = 810 B, shadow + icon-align helpers only
 *   `.arneiron-box` `.arneiron-ibox-top` `.arneiron-block-content`
 *   `.arneiron-item-title` `.arneiron-button` `.arneiron-link`
 *   `.arneiron-icon-*`  → 0 rules in ds.css, blocks.css or old-arnie.css.
 *
 * So `arneiron/icon-box` and `arneiron/button` paint in the block editor and
 * nowhere else. Emitting their markup without this sheet would have cleared
 * every raw shortcode from the page and left 26 unstyled icon boxes behind —
 * a passing count on a page that still looks broken.
 *
 * SCOPE. Every selector below starts at `.vnm-compat`, which only
 * `inc/shortcodes.php` emits. Nothing here can reach a page that contains no
 * legacy shortcode, even though the sheet loads whenever one is in the query.
 *
 * TOKENS. No palette, no type scale and no `@font-face` is declared here —
 * those belong to L2 (see L2/TOKEN-CONTRACT.md). Everything below consumes
 * L2's `--wp--preset--*` presets, each with a literal fallback so a preset that
 * fails to emit degrades to a readable value instead of to `unset`.
 *
 * ★ THE ONE EXCEPTION, and it is deliberate: the `--arneiron-title-*` and
 * `--arneiron-subtitle-*` custom properties consumed by
 * `blocks/build/title/style-index.css` are defined NOWHERE in arneiron 0.6.5 —
 * 39 of the 48 `--arneiron-*` properties the theme's CSS reads have no
 * definition, and eleven of those are read with NO inline fallback at any use
 * site. `font-size: var(--arneiron-title-size)` with nothing behind it makes
 * the H2 inherit body size, which is the "headings at near-body size" symptom
 * in epic #4277 item 3. That is an artifact defect, not a shim defect, and the
 * real fix belongs in the theme (or in L2's token layer).
 *
 * Until it lands, the backfill below is set ON `.vnm-compat .arneiron-section-title`
 * rather than on `:root`, so it cannot collide with L2 and cannot pre-empt the
 * theme's own values on any other block. Deleting this one rule block is a
 * clean revert once the theme defines the tokens.
 */

/* -------------------------------------------------------------------------
 * 0. Shared
 * ---------------------------------------------------------------------- */

.vnm-compat {
	margin-block: clamp(16px, 3vw, 32px);
}

.vnm-compat .vnm-compat-text,
.vnm-compat .vnm-compat-lede {
	color: var(--wp--preset--color--ink-soft, #444);
	font-size: var(--wp--preset--font-size--base, 18px);
	line-height: 1.6;
}

/* ★★★ DARK-ROW TONE. MEASURED on dev `/`, 1440x1200, 8 s after
 * domcontentloaded: the home lede "Master difficult texts with AI" computed to
 * `rgb(68, 68, 68)` on `rgb(0, 0, 0)` — a ~1.6:1 ratio, i.e. the site's value
 * proposition rendered invisible. The H2 above it was correct (`rgb(255,255,255)`),
 * because `arneiron/title`'s own sheet recolours ONLY `.arneiron-title-h2` under
 * `.white-heading`; the lede is this shim's element and the rule above was
 * asserting a dark ink over the top of a black `vc_row`.
 *
 * solutech coloured this text via the ROW (`vc_column ptextcolor="White"`),
 * a parameter that died with the theme. Where the stored data says the section
 * is a dark one — `common_title color="white-heading"`, which is exactly the
 * two live titles that sit on black rows — this follows the heading's tone.
 *
 * NOT FIXED HERE, and deliberately: a dark `vc_row` whose title does NOT carry
 * `white-heading` still inherits dark body text, because nothing replaces
 * `ptextcolor` at the row level. That is the chrome/token gap in A2's lane, not
 * something this shim can see from a shortcode's own attributes.
 */
.vnm-compat .white-heading .vnm-compat-lede,
.vnm-compat .white-heading + .vnm-compat-lede {
	color: var(--c-on-accent, #fff);
}

.vnm-compat .white-heading .arneiron-pre-title span {
	color: var(--c-on-accent, #fff);
}

.vnm-compat .vnm-compat-text > :first-child,
.vnm-compat .vnm-compat-lede > :first-child {
	margin-top: 0;
}

.vnm-compat .vnm-compat-text > :last-child,
.vnm-compat .vnm-compat-lede > :last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * 0b. ★ CONTAINER-SAFE GRIDS — the one place the arneiron blocks and WPBakery
 *     genuinely disagree, and it MEASURED as a real overflow, not a theory.
 *
 * `stat-strip`, `testimonials`, `gallery` and `how-it-works` size their grids
 * with `grid-template-columns: repeat(N, 1fr)` and relax N in `@media
 * (max-width: 860px)` — a VIEWPORT query. That is correct for the full-bleed
 * landing sections they were designed for. Here they sit inside a WPBakery
 * `vc_column`, so the viewport is 1280px while the container is 646px, the
 * media query never fires, and a 4-up stat strip runs off the page: measured
 * `ul.landing-stats-grid.grid-4` right edge = 1447px against a 1280px viewport
 * on /about-us/, with five overflowing elements.
 *
 * `auto-fit` + `minmax` is container-relative rather than viewport-relative,
 * so it cannot overflow whatever column it lands in. Selectors carry the block
 * class as well as `.vnm-compat` so they out-specify the block's own rule
 * (0,4,0 vs 0,3,0) without `!important` and without depending on stylesheet
 * order — the block styles and this sheet have no declared dependency between
 * them, so relying on source order would be relying on luck.
 * ---------------------------------------------------------------------- */

.vnm-compat .wp-block-arneiron-stat-strip .landing-stats-grid,
.vnm-compat .wp-block-arneiron-stat-strip .landing-stats-grid.grid-2,
.vnm-compat .wp-block-arneiron-stat-strip .landing-stats-grid.grid-3,
.vnm-compat .wp-block-arneiron-stat-strip .landing-stats-grid.grid-4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
}

.vnm-compat .wp-block-arneiron-how-it-works .landing-steps.grid.grid-2,
.vnm-compat .wp-block-arneiron-how-it-works .landing-steps.grid.grid-3,
.vnm-compat .wp-block-arneiron-how-it-works .landing-steps.grid.grid-4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.vnm-compat .wp-block-arneiron-testimonials .grid-2,
.vnm-compat .wp-block-arneiron-testimonials .grid-3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.vnm-compat .wp-block-arneiron-gallery .grid-2,
.vnm-compat .wp-block-arneiron-gallery .grid-3,
.vnm-compat .wp-block-arneiron-gallery .grid-4,
.vnm-compat .wp-block-arneiron-gallery .grid-5,
.vnm-compat .wp-block-arneiron-gallery .grid-6 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
}

/* The price table's comparison layout is a real <table>; let it scroll inside
 * its column rather than widen the page. */
.vnm-compat .wp-block-arneiron-price-table {
	max-width: 100%;
	overflow-x: auto;
}

/* -------------------------------------------------------------------------
 * 1. `arneiron/title` token backfill — see the ★ note in the header.
 *    Values are taken from L2's presets, not invented here.
 * ---------------------------------------------------------------------- */

.vnm-compat .arneiron-section-title {
	--arneiron-title-color: var(--wp--preset--color--ink, #000);
	--arneiron-title-font: var(--wp--preset--font-family--jost, "Jost", sans-serif);
	--arneiron-title-size: var(--wp--preset--font-size--lg, 38px);
	--arneiron-title-weight: 700;
	--arneiron-title-style: normal;
	--arneiron-subtitle-font: var(--wp--preset--font-family--jost, "Jost", sans-serif);
	--arneiron-subtitle-style: normal;
	--arneiron-button-color: var(--wp--preset--color--brand, #8888ea);
	--arneiron-font-size-smaller: var(--wp--preset--font-size--sm, 14px);
	--arneiron-font-size-larger: var(--wp--preset--font-size--md, 20px);
}

/* `.sep-element` is positioned by the block's own sheet but given no
 * appearance anywhere. Left with no box it is a 0x0 absolutely-positioned
 * span — invisible, and harmless. It is drawn here as the small rule the
 * source element used, and only inside our own scope. */
.vnm-compat .arneiron-section-title .sep-element {
	display: none;
}

/* -------------------------------------------------------------------------
 * 2. Icon box — the block ships ZERO front-end CSS.
 * ---------------------------------------------------------------------- */

.vnm-compat--common-icon-box {
	height: 100%;
}

.vnm-compat .arneiron-box {
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	box-sizing: border-box;
	height: 100%;
	padding: clamp(20px, 3vw, 32px);
}

.vnm-compat .arneiron-box.arneiron-square {
	border-radius: 0;
}

.vnm-compat .arneiron-box.arneiron-rounded {
	border-radius: 8px;
}

.vnm-compat .arneiron-box.arneiron-round {
	border-radius: 24px;
}

.vnm-compat .arneiron-block-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Icon plate. Sized by the `arneiron-icon-*` class the source carried. */
.vnm-compat .arneiron-block-content > [class*="arneiron-icon-"] {
	align-items: center;
	border-radius: 50%;
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
	overflow: hidden;
}

.vnm-compat .arneiron-icon-xs { height: 40px; width: 40px; }
.vnm-compat .arneiron-icon-s  { height: 48px; width: 48px; }
.vnm-compat .arneiron-icon-m  { height: 56px; width: 56px; }
.vnm-compat .arneiron-icon-l  { height: 64px; width: 64px; }
.vnm-compat .arneiron-icon-xl { height: 80px; width: 80px; }

.vnm-compat .arneiron-icon-bg-main-color {
	background: var(--wp--preset--color--brand, #8888ea);
}

.vnm-compat .arneiron-icon-bg-main-color-light {
	background: var(--wp--preset--color--brand-light, #9494f6);
}

.vnm-compat .arneiron-icon-bg-white-color {
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid rgba(0, 0, 0, 0.08);
}

.vnm-compat .arneiron-icon-bg-transparent {
	background: transparent;
}

.vnm-compat .arneiron-square [class*="arneiron-icon-"],
.vnm-compat .arneiron-icon-square {
	border-radius: 0;
}

.vnm-compat [class*="arneiron-icon-"] .icon {
	align-items: center;
	display: flex;
	height: 60%;
	justify-content: center;
	width: 60%;
}

.vnm-compat [class*="arneiron-icon-"] .icon img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.vnm-compat .arneiron-item-title {
	color: var(--wp--preset--color--ink, #000);
	font-family: var(--wp--preset--font-family--jost, "Jost", sans-serif);
	font-size: var(--wp--preset--font-size--md, 20px);
	font-weight: 600;
	line-height: 1.3;
}

/* `arneiron-ibox-title-side` puts the plate beside the title, body underneath. */
.vnm-compat .arneiron-ibox-title-side .arneiron-ibox-title-side-top {
	align-items: center;
	display: flex;
	gap: 16px;
	margin-bottom: 12px;
}

.vnm-compat .arneiron-ibox-title-side .arneiron-ibox-title-side-top > [class*="arneiron-icon-"] {
	order: -1;
}

.vnm-compat .arneiron-ibox-side .arneiron-block-content {
	align-items: flex-start;
	flex-direction: row;
}

.vnm-compat .arneiron-text-center { text-align: center; }
.vnm-compat .arneiron-text-left   { text-align: left; }
.vnm-compat .arneiron-text-right  { text-align: right; }

.vnm-compat .arneiron-ibox-top.arneiron-text-center .arneiron-block-content {
	align-items: center;
}

/* -------------------------------------------------------------------------
 * 3. Button / link — `button/style-index.css` carries shadow helpers only.
 * ---------------------------------------------------------------------- */

.vnm-compat .arneiron-button {
	background: var(--wp--preset--color--brand-aa, #5b5bd6);
	border: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--surface, #fff);
	display: inline-block;
	font-family: var(--wp--preset--font-family--jost, "Jost", sans-serif);
	font-size: var(--wp--preset--font-size--sm, 14px);
	font-weight: 600;
	line-height: 1.2;
	padding: 12px 28px;
	text-decoration: none;
	transition: background 0.25s ease;
}

.vnm-compat .arneiron-button:hover,
.vnm-compat .arneiron-button:focus-visible {
	background: var(--wp--preset--color--brand-dark, #7070d2);
	color: var(--wp--preset--color--surface, #fff);
}

.vnm-compat .arneiron-link {
	color: var(--wp--preset--color--brand-aa, #5b5bd6);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vnm-compat .arneiron-button-container {
	margin-top: 8px;
}

.vnm-compat .arneiron-button-container.arneiron-text-center { text-align: center; }
.vnm-compat .arneiron-button-container.arneiron-text-right  { text-align: right; }

/* -------------------------------------------------------------------------
 * 4. Video — no arneiron counterpart exists; see `vnm_sc_common_video()`.
 * ---------------------------------------------------------------------- */

.vnm-compat-video {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-block: clamp(16px, 3vw, 32px);
}

.vnm-compat-video-title {
	color: var(--wp--preset--color--ink, #000);
	font-family: var(--wp--preset--font-family--jost, "Jost", sans-serif);
	font-size: var(--wp--preset--font-size--md, 20px);
	font-weight: 600;
	line-height: 1.3;
}