/*
 * Styles of core blocks (inc/block-styles.php): paragraph "Ingressi" (lead) and "Huomautus" (notice), the quote
 * block (it looks like the notice; theme.json's italic box is overridden here), list "Valintamerkit" (check) and
 * "Vaiheet" (steps), link lists. Front end and editor; the tokens are in blocks.css.
 */

/* ------------------------------------------------------------ surfaces (the decision) */

/* ONE light surface. A light section (.ab-bg-light, or core's background "Vaalea") is the palette's "light" #f2f6f8,
   a cool very light blue-grey that goes with the tint; it replaced the warm grey #f7f6f6, which made the tint look
   off. The tint #eaf8f9 is for cards, picture tiles and icon circles on white and inside navy sections; on a light
   section those are white: --ab-tint is white there (blocks.css .ab-bg-light, and below for core groups), so a
   component never shows two light colours side by side. Navy sections are unchanged. Tables, notices and quotes have
   no background of their own (since 2026-09-25): they sit on their section's colour. */
.has-light-background-color {
	--ab-tint: #fff;
}

/* ------------------------------------------------------------ lead paragraph */

/* the text right after a page or section title (instead of an h3 subtitle): 18 / 20 / 24px, regular weight, in the
   heading colour (white on dark sections and in the hero); never wider than the text column (36em at 24px was
   864px, wider than the 760px text below it) */
p.is-style-lead {
	max-width: min(36em, var(--ab-text-width, 760px));
	color: var(--ab-heading, #012b55);
	font-size: var(--ab-lead-size, 18px);
	font-weight: 400;
	line-height: 1.45;
}

.ab-flow.ab-flow > :is(h1, h2) + p.is-style-lead {
	margin-block-start: var(--ab-flow-p, 12px);
}

:is(.has-navy-background-color, .has-heading-background-color, .wp-block-cover) p.is-style-lead {
	color: inherit;
}

.has-text-align-center.is-style-lead {
	margin-inline: auto;
}

/* ------------------------------------------------------------ notice ("Huomaa: ...") and quotes */

/* A short remark set apart like a quote (2026-09-25; the tint box with a 4px bar looked like a pasted light box on
   navy): no box and no background of its own, a 2px turquoise rule on the left, the text a step larger (16 / 17 /
   18px) in the heading colour. It sits on its section's colour, so it works the same on white, light and dark sections
   (white text on navy, the turquoise rule on all three). Core quotes (the customers' words in the references and
   articles) have the same look, upright instead of the old italic box, with the name below in small type. */
p.is-style-notice,
blockquote.wp-block-quote {
	box-sizing: border-box;
	max-width: var(--ab-measure, 68ch);
	margin-inline: 0;
	padding: 0 0 0 20px;
	border: 0;
	border-left: var(--ab-underline, 2px) solid var(--ab-accent, #30cbd3);
	border-radius: 0;
	background: none;
	color: var(--ab-heading, #012b55);
	font-size: var(--ab-item-size, 16px);
	font-style: normal;
	font-weight: 400;
	line-height: 1.55;
}

/* dark core groups (a dark section already has the white heading colour) */
:is(.has-navy-background-color, .has-heading-background-color) :is(p.is-style-notice, blockquote.wp-block-quote) {
	color: inherit;
}

p.is-style-notice strong:first-child {
	font-weight: 700;
}

/* links in the text colour, underlined like links in running text (the quote's paragraphs are not the post's own) */
:is(p.is-style-notice, blockquote.wp-block-quote) a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* the quote's paragraphs and the name below them */
blockquote.wp-block-quote > * {
	margin-block: 0;
}

blockquote.wp-block-quote > * + * {
	margin-block-start: 0.75em;
}

blockquote.wp-block-quote :is(p, li) {
	font-size: inherit;
	font-style: normal;
	line-height: inherit;
}

blockquote.wp-block-quote cite,
blockquote.wp-block-quote > footer {
	display: block;
	margin-block-start: 12px;
	color: var(--ab-muted, #4a5563);
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

:is(.is-dark, .has-navy-background-color, .has-heading-background-color) blockquote.wp-block-quote :is(cite, footer) {
	color: inherit;
	opacity: 0.8;
}

/* in a section the remark stays with the text it belongs to: 24 / 27 / 30px from the paragraph or list around it,
   as a quote in an article (with the component gap of 32 / 44 / 56px it floated as far from its text as a table
   does). A component, a heading or buttons next to it keep their own gaps (blocks.css). */
.ab-flow.ab-flow > :is(p, ul, ol) + :is(p.is-style-notice, blockquote.wp-block-quote),
.ab-flow.ab-flow > :is(p.is-style-notice, blockquote.wp-block-quote) + :is(p, ul, ol, blockquote) {
	margin-block-start: calc(var(--ab-flow, 16px) * 1.5);
}

/* in an article a quote has a little more room than a paragraph (24 / 27 / 30px); headings keep their own spacing */
.wp-block-post-content > :is(p, ul, ol, figure, blockquote) + blockquote.wp-block-quote,
.wp-block-post-content > blockquote.wp-block-quote + :is(p, ul, ol, blockquote) {
	margin-block-start: calc(var(--ab-flow, 16px) * 1.5);
}

@media (min-width: 769px) {
	p.is-style-notice,
	blockquote.wp-block-quote {
		padding-left: 24px;
	}
}

/* ------------------------------------------------------------ check list */

/* list style "check": turquoise circles with a white check */
:is(ul, ol).is-style-check {
	padding: 0;
	list-style: none;
}

:is(ul, ol).is-style-check > li {
	position: relative;
	padding-left: 1.75em;
}

:is(ul, ol).is-style-check > li + li {
	margin-top: 0.55em;
}

:is(ul, ol).is-style-check > li::before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: 0;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	background-color: var(--ab-accent, #30cbd3);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.2l2.8 2.8 6.2-6.2'/%3E%3C/svg%3E");
	background-position: center;
	background-size: 0.75em;
	background-repeat: no-repeat;
}

:is(ul, ol).is-style-check :is(ul, ol) {
	margin-top: 0.4em;
	padding-left: 1.25em;
	list-style: disc;
}

/* ------------------------------------------------------------ link lists */

/* A list of links (document lists on /fi/tuki/, also a single link or one in the check style; inc/block-styles.php
   adds .ab-link-list) and the old site's "fancy" lists (.nectar-fancy-ul, until the converter turns them into core
   lists): plain link rows, no bullets and no check circles (a check means "included", not "download"); the links are
   underlined like links in running text. Phones and tablets: each link a 44px row between hairlines (they were 19px
   lines 6px apart). Desktop: compact lines 6px apart. */
:is(ul, ol).ab-link-list a,
.nectar-fancy-ul a {
	text-decoration: underline;
	text-decoration-thickness: var(--ab-underline, 2px);
	text-underline-offset: 0.15em;
}

:is(ul, ol).ab-link-list.ab-link-list {
	padding-inline-start: 0;
	list-style: none;
}

:is(ul, ol).ab-link-list.is-style-check > li {
	padding-left: 0;
}

:is(ul, ol).ab-link-list.is-style-check > li::before {
	content: none;
}

:is(ul, ol).ab-link-list > li + li {
	margin-top: 6px;
}

/* an item of two links side by side (an article number and the document) stays one line */
:is(ul, ol).ab-link-list > li > a + a {
	margin-inline-start: 0.35em;
}

.nectar-fancy-ul > ul {
	margin: 0;
	padding-inline-start: 1.25em;
	list-style: disc;
}

.nectar-fancy-ul > ul + ul {
	margin-top: 0;
}

.nectar-fancy-ul > ul:not(:has(li)),
.nectar-fancy-ul > ul > li > i:empty {
	display: none;
}

@media (max-width: 1024px) {
	:is(ul, ol).ab-link-list.ab-link-list,
	.nectar-fancy-ul > ul {
		padding-inline-start: 0;
		list-style: none;
		border-top: 1px solid var(--ab-line, #e3e8ee);
	}

	.nectar-fancy-ul > ul + ul {
		border-top: 0;
	}

	:is(ul, ol).ab-link-list > li,
	:is(ul, ol).ab-link-list > li + li,
	.nectar-fancy-ul > ul > li {
		margin: 0;
		border-bottom: 1px solid var(--ab-line, #e3e8ee);
	}

	:is(ul, ol).ab-link-list > li:not(:has(> a + a)) > a,
	:is(ul, ol).ab-link-list > li:is(:has(> a + a), :not(:has(> a))),
	.nectar-fancy-ul > ul > li > a,
	.nectar-fancy-ul > ul > li:not(:has(> a)) {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		min-height: 44px;
		padding-block: 8px;
		line-height: 1.4;
	}

	/* two links in one item: the row holds both, each link at least 44px high */
	:is(ul, ol).ab-link-list > li:has(> a + a) {
		flex-wrap: wrap;
		padding-block: 0;
	}

	:is(ul, ol).ab-link-list > li:has(> a + a) > a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	:is(.is-dark, .has-navy-background-color) :is(:is(ul, ol).ab-link-list, .nectar-fancy-ul > ul),
	:is(.is-dark, .has-navy-background-color) :is(:is(ul, ol).ab-link-list, .nectar-fancy-ul > ul) > li {
		border-color: rgba(255, 255, 255, 0.2);
	}
}

/* ------------------------------------------------------------ numbered steps */

/* numbered steps: the number in a navy circle (turquoise on dark sections), a thin line joining the circles */
:is(ul, ol).is-style-steps {
	padding: 0;
	list-style: none;
	counter-reset: ab-step;
}

:is(ul, ol).is-style-steps > li {
	position: relative;
	min-height: 32px;
	padding: 3px 0 0 48px;
	counter-increment: ab-step;
}

:is(ul, ol).is-style-steps > li + li {
	margin-top: 20px;
}

:is(ul, ol).is-style-steps > li::before {
	content: counter(ab-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ab-navy, #002b56);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

:is(ul, ol).is-style-steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 38px;
	bottom: -14px;
	left: 15px;
	width: 2px;
	border-radius: 0;
	background: var(--ab-line, #e3e8ee);
}

:is(ul, ol).is-style-steps > li > strong:first-child {
	color: var(--ab-heading, #012b55);
}

:is(ul, ol).is-style-steps :is(ul, ol) {
	margin-top: 0.4em;
	padding-left: 1.25em;
}

.is-dark :is(ul, ol).is-style-steps > li::before,
.has-navy-background-color :is(ul, ol).is-style-steps > li::before {
	background: var(--ab-accent, #30cbd3);
	color: var(--ab-navy, #002b56);
}

.is-dark :is(ul, ol).is-style-steps > li:not(:last-child)::after,
.has-navy-background-color :is(ul, ol).is-style-steps > li:not(:last-child)::after {
	background: rgba(255, 255, 255, 0.25);
}

@media (min-width: 1025px) {
	:is(ul, ol).is-style-steps > li {
		min-height: 36px;
		padding-left: 54px;
	}

	:is(ul, ol).is-style-steps > li::before {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	:is(ul, ol).is-style-steps > li:not(:last-child)::after {
		top: 42px;
		left: 17px;
	}

	/* four steps: two by two across the section (a column of four left the right half of a wide band empty); the
	   order reads by rows, so the connecting line goes */
	.ab-flow > :is(ul, ol).is-style-steps:has(> li:nth-child(4):last-child) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 48px;
		max-width: none;
	}

	.ab-flow > :is(ul, ol).is-style-steps:has(> li:nth-child(4):last-child) > li {
		max-width: var(--ab-measure, 68ch);
		margin-top: 0;
	}

	.ab-flow > :is(ul, ol).is-style-steps:has(> li:nth-child(4):last-child) > li::after {
		content: none;
	}
}