/*
 * core/paragraph — the theme's paragraph styles.
 *
 * Both styles here are registered with register_block_style() in functions.php
 * so they appear in the editor's Styles panel; this file holds their CSS.
 * Loaded only on pages that contain a paragraph block.
 *
 * Rules that set margins carry a :root prefix. Core prints its layout styles
 * (`:root :where(.is-layout-flow) > * { margin-block-end: 0 }`) after the
 * enqueued block stylesheets, so at equal specificity core wins and the margin
 * disappears. :root is the same lever core's own Global Styles use.
 */

/* Label: a caption above a heading.
 *
 * _portabletext.scss: .pt-label is brand green, weight 500 and normal size —
 * neither uppercase nor letter-spaced. It labels the heading that follows, so
 * it sits tight against it. */
:root .is-style-label {
	margin-block: 0 0.25rem;
	color: var( --wp--preset--color--primary );
	font-weight: 500;
}

:root .is-style-label + :is(h1, h2, h3, h4) {
	margin-block-start: 0;
}

/* Step number: the numbered circle in a checklist.
 *
 * A single line centred by line-height rather than flex, so the paragraph needs
 * no wrapper of its own — the imported markup used to nest the number inside a
 * group purely to centre it. */
:root .is-style-step-number {
	display: block;
	inline-size: 4rem;
	block-size: 4rem;
	margin-block: 0 var( --wp--preset--spacing--30 );
	margin-inline: auto;
	border-radius: 50%;

	/* rgba($color-primary-500, 0.1) in the source. */
	background-color: color-mix( in srgb, var( --wp--preset--color--primary ) 10%, transparent );
	color: var( --wp--preset--color--primary );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 500;

	/* The circle is 4rem and the number 1.5rem, so 4/1.5 centres the single
	   line vertically without needing flex or a unit on line-height. */
	line-height: 2.6667;
	text-align: center;
}

/* In the vertical variant the number sits on the heading's line rather than
   above it: smaller, filled with the brand green, and staying in the flex row. */
:root .is-style-step-number-inline {
	flex: 0 0 auto;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	margin-block: 0;
	border-radius: 50%;
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 500;

	/* 2.5rem circle, 1.125rem number. */
	line-height: 2.2222;
	text-align: center;
}

/* Initials stand in for a missing portrait in the contact box: the same 4rem
   circle, so the box is the same height with or without an image. */
:root p.is-style-avatar {
	display: block;
	flex: 0 0 4rem;
	inline-size: 4rem;
	block-size: 4rem;
	margin: 0;
	border-radius: 9999px;
	background-color: color-mix( in srgb, var( --wp--preset--color--primary ) 10%, transparent );
	color: var( --wp--preset--color--primary );
	font-size: 1.25rem;
	font-weight: 500;

	/* 4rem circle, 1.25rem text. */
	line-height: 3.2;
	text-align: center;
}

/* A key figure and its caption.
 *
 * The source's .stats__number is a plain element, not a heading, so it inherits
 * the body line height rather than theme.json's 1.15 — and none of the tight
 * heading letter-spacing. Without resetting both, "+20 000" lost nine pixels of
 * height and the figures sat at different heights across the row. */
:root p.is-style-stat-value {
	margin-block: 0 0.75rem;
	color: var( --wp--preset--color--primary );
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp(3rem, 2rem + 2.5vw, 4.5rem);
	font-weight: 800;
	line-height: 1.6;
	letter-spacing: normal;
	white-space: nowrap;
}

/* _stats.scss gives the caption no size of its own, so it is body text at
   1rem/1.6 rather than the 1.0625rem/1.8 of rich text. */
:root p.is-style-stat-label {
	margin-block: 0;
	color: var( --wp--preset--color--primary-dark );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 800;
	line-height: 1.6;
}

/* is-style-arrow-links — the link row under a media-and-text section.
 *
 * The row sits outside the rich-text paragraph rules, so it keeps body size
 * rather than the reading size: _media-with-text.scss gives it 1.5rem of top
 * margin, a 1rem gap and line-height 1.6.
 *
 * The links themselves are Astro's arrow-link: uppercase, tracked, medium
 * weight, no underline, and an arrow after the label. That treatment sat in
 * components.css from the first commit inside a comment whose terminator was
 * missing, so it never reached a page. Production has drawn it all along. */
:root .is-style-arrow-links {
	margin-block: 1.5rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

:root .is-style-arrow-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	inline-size: fit-content;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	transition: color 200ms ease;
}

:root .is-style-arrow-links a:hover {
	color: var(--wp--preset--color--primary-dark);
}

/* Nuoli on kuvake eikä merkki: sama heroicons-nuoli kuin lähteessä, maskina
   jotta se seuraa linkin väriä. */
:root .is-style-arrow-links a::after {
	content: '';
	inline-size: 1rem;
	block-size: 1rem;
	flex: 0 0 1rem;
	background-color: currentcolor;
	-webkit-mask: var( --vml-arrow ) center / contain no-repeat;
	mask: var( --vml-arrow ) center / contain no-repeat;
}