/*
 * Rich-text extras for the classes emitted by src/lib/richtext.ts (arrow headings, image alignment,
 * inline icons, form embed card, tables, legacy responsive helpers). Loaded globally after base.css
 * by Base.astro and the EmVB canvas, so every rich-text consumer (sections, posts, team, footer) gets them.
 */

/* Icon heading → homepage eyebrow pattern: magenta ↘ arrow before the section heading. */
.prose .icon-heading > :first-child,
.prose .rt-eyebrow {
	position: relative;
	padding-left: calc(var(--eyebrow-icon, clamp(1.375rem, 1.1rem + 0.8vw, 1.9375rem)) + clamp(1rem, 0.6rem + 1vw, 1.875rem));
}
.prose .icon-heading > :first-child::before,
.prose .rt-eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc((1lh - var(--eyebrow-icon, clamp(1.375rem, 1.1rem + 0.8vw, 1.9375rem))) / 2 - 0.04em);
	width: var(--eyebrow-icon, clamp(1.375rem, 1.1rem + 0.8vw, 1.9375rem));
	aspect-ratio: 1;
	background: url("/redesign/icon-section-arrow-magenta.svg") center / contain no-repeat;
}
.prose .icon-heading > * + * {
	margin-top: var(--space-5);
}
.prose .icon-heading + * {
	margin-top: var(--space-5);
}

/* Images: wrapper carries the alignment; a joined paragraph of images is a wrapping row. */
.prose .rt-img {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4) var(--space-6);
	justify-content: flex-start;
}
.prose .rt-img--center {
	justify-content: center;
}
.prose .rt-img--right {
	justify-content: flex-end;
}
.prose .rt-img img {
	margin: 0;
	max-width: 100%;
	height: auto;
}
.prose .rt-inline-icon {
	display: inline-block;
	width: 1.5em;
	height: auto;
	margin-right: 0.5em;
	vertical-align: -0.2em;
}

/* ---------- Icon lists → homepage bullets ----------
 * Legacy icon lists (importer listIcon / iconItem; the check-box images are no longer rendered) use
 * the homepage chevron (Figma "Our technology" / "Executive brief" bullets). An item that starts with
 * a title becomes a feature cell: mist card on light bands, translucent panel with an accent rule on
 * dark ones (Figma "Who we help" cells / technology panels). */
.prose .bulleted-list {
	display: grid;
	gap: var(--space-4);
	padding: 0;
	list-style: none;
}
.prose .bulleted-list + .bulleted-list {
	margin-top: var(--space-4);
}
.prose .mvk-bullet {
	position: relative;
	padding-left: 1.3125rem;
}
.prose .mvk-bullet::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-top: 1.5px solid var(--chev, var(--c-magenta));
	border-right: 1.5px solid var(--chev, var(--c-magenta));
	transform: rotate(45deg);
}
.prose .bullet-content > * + * {
	margin-top: 0.375rem;
}
.prose .bullet-content > :where(h2, h3, h4, h5, h6, .p2, .p3, .p6):first-child {
	font-family: var(--font-display);
	font-size: var(--fs-h5);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}
.prose .mvk-bullet:has(> .bullet-content > :where(h2, h3, h4, h5, h6, .p2, .p3, .p6):first-child) {
	padding: 1.375rem 1.5rem 1.5rem 2.75rem;
	background: var(--c-mist);
}
.prose .mvk-bullet:has(> .bullet-content > :where(h2, h3, h4, h5, h6, .p2, .p3, .p6):first-child)::before {
	left: 1.5rem;
	top: calc(1.375rem + 0.45em);
}
[data-tone="mist"] .prose .mvk-bullet:has(> .bullet-content > :where(h2, h3, h4, h5, h6, .p2, .p3, .p6):first-child),
[data-tone="panel"] .prose .mvk-bullet:has(> .bullet-content > :where(h2, h3, h4, h5, h6, .p2, .p3, .p6):first-child) {
	background: var(--c-white);
}
:is([data-tone="dark"], [data-tone="blue"], [data-tone="image"]) .prose .mvk-bullet:has(> .bullet-content > :where(h2, h3, h4, h5, h6, .p2, .p3, .p6):first-child) {
	background: var(--c-panel-dark);
	border: 0.5px solid var(--c-white-50);
	border-top: var(--accent-rule) solid var(--chev, var(--c-magenta));
}

/* Chevron bullets on the blue band: magenta has too little contrast there. */
[data-tone="blue"] .prose :where(ul:not([class]) > li)::before {
	border-color: var(--c-white);
}

/* Tables: the first row of legacy tables is a header row written as <td><strong>. */
.prose .table-scroll {
	-webkit-overflow-scrolling: touch;
}
.prose .table-scroll table {
	min-width: 36rem;
}
.prose .table-scroll tr:first-child > td {
	background: var(--c-panel);
	font-weight: 700;
}
[data-tone="dark"] .prose .table-scroll tr:first-child > td,
[data-tone="blue"] .prose .table-scroll tr:first-child > td,
[data-tone="image"] .prose .table-scroll tr:first-child > td {
	background: var(--c-white-20);
}
[data-tone="image"] .prose :where(th, td) {
	border-color: var(--c-white-20);
}

/* Embedded form: the legacy white card → homepage form card (mist panel on light, white on dark). */
.prose .form-embed--card {
	padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
	border: 1px solid var(--c-mist);
	background: var(--c-mist);
	color: var(--c-ink);
}
:is([data-tone="dark"], [data-tone="blue"], [data-tone="image"]) .prose .form-embed--card {
	background: var(--c-white);
	border-color: var(--c-white);
}

/* Centred legacy paragraphs that also carry a measure stay centred. */
.prose [style*="text-align: center"] {
	margin-inline: auto;
}

/* Legacy "Learn More >" links rendered as the homepage arrow link (see arrowLinks in richtext.ts). */
.prose .link-arrow {
	color: var(--c-blue);
	font-weight: 700;
	text-decoration: none;
}
.prose .link-arrow:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
:is([data-tone="dark"], [data-tone="image"]) .prose .link-arrow {
	color: var(--c-cyan);
}
[data-tone="blue"] .prose .link-arrow {
	color: var(--c-white);
}

/* Accent words on photo bands (base.css covers dark + blue only). */
[data-tone="image"] .text-accent {
	color: var(--c-cyan);
}

/* Legacy responsive visibility classes (Foundation "medium" = 640px) on images / raw HTML. */
@media (max-width: 639.98px) {
	.prose .show-for-medium {
		display: none !important;
	}
}
@media (min-width: 640px) {
	.prose .hide-for-medium {
		display: none !important;
	}
}

/* Edge margins (legacy rules/headings first or last in a column) must not leak out of the section. */
.prose > :first-child {
	margin-top: 0;
}
.prose > :last-child {
	margin-bottom: 0;
}

/* The short accent rule sits under left-aligned copy (an <hr> centres itself by default). */
.prose .color-splash-hr {
	margin-inline: 0;
}
.prose [style*="text-align: center"] + .color-splash-hr,
.prose .color-splash-hr:has(+ [style*="text-align: center"]) {
	margin-inline: auto;
}

/* Legacy htmlBlock layouts carry fixed inline widths (e.g. a 360px video column); never wider than the
 * column on small screens. */
@media (max-width: 639px) {
	.prose :where(div, figure, table, iframe, img)[style*="width"] {
		max-width: 100% !important;
	}
	.prose :where(div)[style*="flex"] {
		flex-basis: auto !important;
		min-width: 0 !important;
	}
	.prose :where(div)[style*="display: flex"],
	.prose :where(div)[style*="display:flex"] {
		flex-wrap: wrap !important;
	}
}

/* Section rhythm comes from tones and spacing (homepage), so legacy full-width rules that open or close
 * a block of rich text are not drawn; rules between content inside a section stay. */
.prose > hr.divider:first-child,
.prose > hr.divider:last-child {
	display: none;
}
.prose > hr.divider:first-child + * {
	margin-top: 0;
}

/* Bullets on the blue band: magenta has too little contrast. */
[data-tone="blue"] .prose {
	--chev: var(--c-white);
}

/* Link lists (a paragraph of links separated by line breaks, e.g. "All services"): the mega-menu link
 * style — Manrope 500 ink, no underline, blue on hover — with a heading-sized link above them. */
.prose p:has(> a + br) {
	line-height: 1.875;
}
.prose p:has(> a + br) > a {
	color: inherit;
	font-weight: 500;
	text-decoration: none;
}
.prose p:has(> a + br) > a :where(span) {
	text-decoration: none !important;
}
.prose p:has(> a + br) > a:hover {
	color: var(--c-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}
:is([data-tone="dark"], [data-tone="blue"], [data-tone="image"]) .prose p:has(> a + br) > a:hover {
	color: var(--c-cyan);
}
.prose p:has(> a:only-child[style*="font-size"]) > a {
	font-family: var(--font-display);
	font-size: var(--fs-h5) !important;
	font-weight: 500;
	letter-spacing: -0.02em;
	text-decoration: none !important;
	text-transform: uppercase;
	color: inherit;
}
.prose p:has(> a:only-child[style*="font-size"]) > a::after {
	content: " ›";
	color: var(--c-blue);
}