/**
 * Vestelli site CSS: the old theme's custom.css (vestelli-avalon/assets/css/custom.css) and the base styles of plain
 * elements (buttons, form fields, quotes, lists, tables, embeds), on the Avalon Nordic standard since 2026-10-08
 * (sizes and spacing from the --ab-* tokens of vestelli-blocks/assets/blocks.css; Vestelli's colours and fonts).
 * The block-specific parts live in the vestelli-blocks plugin (assets/blocks.css); the header in header.css.
 *
 * The base rules are wrapped in :where() so that they never win over a class of a component.
 */

/* (the base rules of buttons and form fields, the focus ring and the header's menu fill are in assets/css/site-base.css,
   loaded right before this file; this file is also an editor style, 2026-10-16) */

/* ------------------------------------------------------------ paragraph styles: lead ("Ingressi") and kicker */

/* the text right after a page or section title (instead of an h3 subtitle): 20 / 18 / 17px, regular weight, never
   wider than the text column */
p.is-style-lead {
	max-width: min(36em, var(--ab-text-width, 760px));
	font-size: var(--ab-lead-size, var(--wp--preset--font-size--large, 17px));
	font-weight: 400;
	line-height: 1.45;
}

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

/* right under a title: the paragraphs' gap; the text after it: the blocks' gap */
:root :is(.ab-flow, .an-text, .is-layout-flow, .is-layout-constrained) > :is(h1, h2) + p.is-style-lead.is-style-lead {
	margin-block-start: var(--ab-flow-p, 14px);
}

.an-text > p.is-style-lead {
	margin-bottom: var(--ab-flow, 16px);
}

/* the small label above a title ("Jätevesijärjestelmät" above the hero h1): 14px bold capitals in the accent colour,
   white on dark sections and photos; the title follows it closely */
p.is-style-kicker {
	margin-block-end: 0;
	color: var(--wp--preset--color--accent, #01a6e6);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

:is(.is-dark, .ab-hero, .has-navy-background-color, .has-heading-background-color, .wp-block-cover) p.is-style-kicker {
	color: rgba(255, 255, 255, 0.9);
}

:root :is(.ab-flow, .an-text, .is-layout-flow, .is-layout-constrained, .wp-block-column, .ab-hero__content) > p.is-style-kicker.is-style-kicker + :is(h1, h2, h3, h4) {
	margin-block-start: 8px;
}

/* ------------------------------------------------------------ text alignment on phones */

/* A centred title or text stays centred on phones. The converter carried Beaver Builder's phone alignment over only for
   headings and texts (class an-ta-m-left, vestelli-blocks blocks.css), not for the wave and the button beside them,
   so the closing call to action of /palvelut/ (and /sv/tjanster/, /en/services/) went left on phones under a centred
   wave and above a centred button. Centred like the site's other call-to-action bands. */
@media (max-width: 768px) {
	.has-text-align-center:is(.an-ta-m-left, .an-ta-m-right) {
		text-align: center !important;
	}
}

/* ------------------------------------------------------------ quotes (custom.css: Blockquote) */

blockquote,
.wp-block-quote {
	position: relative;
	box-sizing: border-box;
	max-width: var(--ab-measure, 68ch);
	padding: var(--ab-pad-s, 24px) var(--ab-gutter, 20px);
	margin: 0;
	background-color: #f6f7f7;
	border: none;
	border-left: 4px solid var(--wp--preset--color--accent, #01a6e6);
	border-radius: 0;
	font-style: italic;
	font-size: inherit;
	color: var(--wp--preset--color--body, #1b2a57);
	box-shadow: none;
}

blockquote p,
.wp-block-quote p {
	margin: 0 0 var(--ab-flow-p, 14px);
	position: relative;
	z-index: 1;
}

blockquote p:last-child,
.wp-block-quote p:last-child {
	margin-bottom: 0;
}

blockquote cite,
.wp-block-quote cite {
	display: block;
	margin-top: var(--ab-flow-p, 14px);
	font-size: 14px;
	font-style: normal;
	color: #5d6680;
	position: relative;
	z-index: 1;
}

blockquote cite::before,
.wp-block-quote cite::before {
	content: "— ";
}

/* ------------------------------------------------------------ check list (custom.css: the class "check-list") */

.check-list,
.wp-block-list.check-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.check-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
	list-style: none;
}

.check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--va-brand-color, #1b2a57);
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1.35;
}

.check-list li::marker {
	content: "";
}

/* ------------------------------------------------------------ tables in the content */

/* core/table: the whole width, a navy head row, hairlines between the rows, 16px text (15px on phones); the first
   column names the rows. On phones a table with a head shows each row as a labelled block (below); a table without
   one stays a table in its own box, which scrolls sideways if it ever needs to (the page itself never does).
   WooCommerce's tables keep their own look. */
.wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table > table,
.an-html table.has-thead {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}

.wp-block-table > table > * > tr > :is(th, td) {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid #e3e5ea;
	vertical-align: top;
	overflow-wrap: break-word;
}

.wp-block-table > table > thead {
	border: 0;
}

.wp-block-table > table > thead > tr > :is(th, td) {
	background: var(--wp--preset--color--navy, #1b2a57);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	vertical-align: bottom;
}

.wp-block-table > table > :is(tbody, tfoot) > tr > :first-child {
	color: var(--wp--preset--color--heading, #012b55);
	font-weight: 700;
}

.wp-block-table > table > tfoot > tr > :is(th, td) {
	border-top: 2px solid #e3e5ea;
	font-weight: 700;
}

/* the "Raidat" style: light rows */
.wp-block-table.is-style-stripes > table > tbody > tr:nth-child(odd) > :is(th, td) {
	background: var(--wp--preset--color--light, #f7f6f6);
}

.wp-block-table.is-style-stripes {
	border-bottom: 0;
}

.wp-block-table > figcaption {
	margin: 12px 0 0;
	color: inherit;
	font-size: 14px;
	opacity: 0.85;
}

/* dark sections: a lighter head row and hairlines */
:is(.is-dark, .has-navy-background-color) .wp-block-table > table > thead > tr > :is(th, td) {
	background: rgba(255, 255, 255, 0.12);
}

:is(.is-dark, .has-navy-background-color) .wp-block-table > table > * > tr > :is(th, td) {
	border-bottom-color: rgba(255, 255, 255, 0.24);
}

:is(.is-dark, .has-navy-background-color) .wp-block-table > table > :is(tbody, tfoot) > tr > :first-child {
	color: inherit;
}

@media (max-width: 768px) {
	.wp-block-table > table {
		font-size: 15px;
	}

	.wp-block-table > table > * > tr > :is(th, td) {
		padding: 10px 12px;
	}
}

/* a first column of short labels stays on one line (the class comes from inc/tables.php) */
:root table.ab-table--nowrap-first > * > tr > :first-child {
	white-space: nowrap;
}

/* Phones: a table with a head (class ab-table--cards and data-label="…" on the body cells, added by inc/tables.php;
   the Avalon Nordic standard) shows each row as a block, so no comparison column is hidden off the screen: a 2px navy
   rule in place of the head row, then per row its title (the first cell, without a label) and one value per column
   with the column's heading as a small label in front of it; hairlines between the rows. The cells of a column with
   long texts or long words (ab-table__wide) put the label above the value; a cell of links only (ab-table__links)
   shows one 44px link per line. The head row stays for screen readers only. */
@media (max-width: 768px) {
	:root table.ab-table--cards {
		--an-tbl-title: var(--wp--preset--color--heading, #012b55);
		--an-tbl-rule: var(--wp--preset--color--navy, #1b2a57);
		--an-tbl-line: #e3e5ea;
		--an-tbl-label: #5d6680;
		--an-tbl-lw: 104px; /* the labels' column */
		display: block;
		width: 100%;
		min-width: 0;
		border: 0;
		border-top: 2px solid var(--an-tbl-rule);
		background: none;
	}

	:root :is(.is-dark, .has-navy-background-color, .has-heading-background-color) table.ab-table--cards {
		--an-tbl-title: currentColor;
		--an-tbl-rule: currentColor;
		--an-tbl-line: rgba(255, 255, 255, 0.24);
		--an-tbl-label: rgba(255, 255, 255, 0.75);
	}

	:root table.ab-table--cards > thead {
		position: absolute;
		inset: auto;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	:root table.ab-table--cards > :is(tbody, tfoot) {
		display: block;
		width: auto;
		border: 0;
	}

	/* a row: its title and its labelled values, a hairline below */
	:root table.ab-table--cards > :is(tbody, tfoot) > tr {
		display: block;
		box-sizing: border-box;
		width: auto;
		margin: 0;
		padding: 16px 0 14px;
		border: 0;
		border-bottom: 1px solid var(--an-tbl-line);
		background: none;
	}

	:root table.ab-table--cards > :is(tbody, tfoot) > tr:has(> .ab-table__links:last-child) {
		padding-bottom: 6px;
	}

	/* the label in the left gutter of the cell, the value to the right of it */
	:root table.ab-table--cards > :is(tbody, tfoot) > tr > :is(td, th) {
		display: flow-root;
		box-sizing: border-box;
		width: auto;
		padding: 5px 0 5px calc(var(--an-tbl-lw) + 12px);
		border: 0;
		background: none;
		color: inherit;
		font-weight: 400;
		white-space: normal;
		text-align: left;
	}

	:root table.ab-table--cards > :is(tbody, tfoot) > tr > [data-label]::before {
		content: attr(data-label);
		content: attr(data-label) / "";
		display: block;
		float: left;
		box-sizing: border-box;
		width: var(--an-tbl-lw);
		margin: 0 0 0 calc(-1 * var(--an-tbl-lw) - 12px);
		padding-top: 2px;
		color: var(--an-tbl-label);
		font-size: 13px;
		font-weight: 700;
		line-height: 1.4;
		hyphens: auto;
		overflow-wrap: break-word;
	}

	/* the first cell is the row's title: the whole width, without its label */
	:root table.ab-table--cards > :is(tbody, tfoot) > tr > :first-child {
		padding: 0 0 6px;
		color: var(--an-tbl-title);
		font-size: 17px;
		font-weight: 700;
		line-height: 1.4;
		white-space: normal;
	}

	:root table.ab-table--cards > :is(tbody, tfoot) > tr > [data-label]:first-child::before {
		content: none;
		display: none;
	}

	:root table.ab-table--cards > :is(tbody, tfoot) > tr > .ab-table__links:first-child {
		margin-top: calc((1.4em - var(--ab-tap, 44px)) / 2);
		padding: 0;
	}

	/* a list in a cell: one item per line, no bullets */
	:root table.ab-table--cards :is(ul, ol) {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	:root table.ab-table--cards li + li {
		margin-top: 6px;
	}

	/* a column with long texts or long words, and a cell of links only: the label above the value */
	:root table.ab-table--cards > :is(tbody, tfoot) > tr > .ab-table__wide:not(:first-child) {
		padding: 5px 0;
	}

	:root table.ab-table--cards > :is(tbody, tfoot) > tr > .ab-table__links:not(:first-child) {
		padding: 6px 0 0;
	}

	:root table.ab-table--cards > :is(tbody, tfoot) > tr > :is(.ab-table__wide, .ab-table__links)[data-label]::before {
		float: none;
		width: auto;
		margin: 0 0 2px;
		padding-top: 0;
	}

	:root table.ab-table--cards > :is(tbody, tfoot) > tr > .ab-table__links[data-label]::before {
		margin-bottom: 0;
	}

	:root table.ab-table--cards .ab-table__links br {
		display: none;
	}

	:root table.ab-table--cards .ab-table__links a:where(:not(.wp-element-button)) {
		display: block;
		box-sizing: border-box;
		min-height: var(--ab-tap, 44px);
		padding-block: calc((var(--ab-tap, 44px) - 1.4em) / 2);
		line-height: 1.4;
	}
}

/* A pasted HTML table whose first row of bold cells became its head (class an-table--head, added by inc/tables.php; the
   privacy statement's tables): from 769px up the core/table look (the whole width, a navy head row with white 15px bold
   text, hairlines between the rows, the first column bold); on phones it is a card table like any table with a head
   (above), where an empty value is left out together with its label. */
@media (min-width: 769px) {
	table.an-table--head {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
		font-size: 16px;
		line-height: 1.5;
		text-align: left;
	}

	:root table.an-table--head > * > tr > :is(th, td) {
		padding: 12px 16px;
		border: 0;
		border-bottom: 1px solid #e3e5ea;
		vertical-align: top;
		overflow-wrap: break-word;
		text-align: left;
	}

	:root table.an-table--head > thead > tr > :is(th, td) {
		background: var(--wp--preset--color--navy, #1b2a57);
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.35;
		vertical-align: bottom;
	}

	:root table.an-table--head > :is(tbody, tfoot) > tr > :first-child {
		color: var(--wp--preset--color--heading, #012b55);
		font-weight: 700;
	}
}

/* a figure's distance from the text around it (a table pasted into the text is not a .wp-block-table) */
:root :is(.wp-block-post-content, .an-text) > table.an-table--head {
	margin-block: var(--ab-flow-c, 32px);
}

@media (max-width: 768px) {
	:root table.an-table--head.ab-table--cards > :is(tbody, tfoot) > tr > td:empty:not(:first-child) {
		display: none;
	}
}

/* Table with the class "Avalon-table" (old content): brand header row, striped/bordered/compact variants */
.Avalon-table {
	max-width: 100%;
	overflow-x: auto;
}

.Avalon-table table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 15px;
	line-height: 1.5;
	background-color: #fff;
	min-width: 600px;
}

.Avalon-table thead {
	background-color: var(--va-brand-color, #1b2a57);
	color: #fff;
}

.Avalon-table thead th {
	padding: 12px 16px;
	text-align: left;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.Avalon-table tbody tr {
	border-bottom: 1px solid #e0e0e0;
	transition: background-color 0.2s ease;
}

.Avalon-table tbody tr:hover {
	background-color: #f6f7f7;
}

.Avalon-table tbody tr:last-child {
	border-bottom: none;
}

.Avalon-table tbody td {
	padding: 12px 16px;
	color: #333;
	vertical-align: top;
}

.Avalon-table tbody td:first-child {
	font-weight: 500;
	color: var(--va-brand-color, #1b2a57);
}

.Avalon-table tfoot {
	background-color: #f6f7f7;
	font-weight: 600;
}

.Avalon-table tfoot td {
	padding: 12px 16px;
	border-top: 2px solid #e0e0e0;
	color: var(--va-brand-color, #1b2a57);
}

@media (max-width: 768px) {
	.Avalon-table table {
		font-size: 14px;
		min-width: 500px;
	}

	.Avalon-table thead th,
	.Avalon-table tbody td,
	.Avalon-table tfoot td {
		padding: 10px 12px;
	}
}

.Avalon-table.striped tbody tr:nth-child(even) {
	background-color: #f9f9f9;
}

.Avalon-table.bordered table {
	border: 1px solid #e0e0e0;
}

.Avalon-table.bordered tbody td {
	border-right: 1px solid #e0e0e0;
}

.Avalon-table.bordered tbody td:last-child {
	border-right: none;
}

.Avalon-table.compact thead th,
.Avalon-table.compact tbody td,
.Avalon-table.compact tfoot td {
	padding: 8px 12px;
}

/* Table with the class "taulukko" (old content; on phones a taulukko with a head is shown as labelled rows like any
   other table with a head: ab-table--cards above) */
table.taulukko {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	background: #fff;
	border: 1px solid #e5e5e5;
}

table.taulukko caption {
	caption-side: top;
	text-align: left;
	font-weight: 700;
	padding: 0 0 0.6em;
	color: inherit;
}

table.taulukko thead th {
	background: #f5f5f5;
	text-align: left;
	font-weight: 700;
	padding: 12px 14px;
	border-bottom: 2px solid #e0e0e0;
	vertical-align: bottom;
}

table.taulukko tbody td,
table.taulukko tbody th {
	padding: 10px 14px;
	border-bottom: 1px solid #ececec;
	vertical-align: top;
}

table.taulukko tbody tr:nth-child(even) td,
table.taulukko tbody tr:nth-child(even) th {
	background: #fafafa;
}

table.taulukko tbody tr:last-child td,
table.taulukko tbody tr:last-child th {
	border-bottom: none;
}

/* ------------------------------------------------------------ embedded videos (core/embed: YouTube, Vimeo) */

/* 16:9 at the column's width (core's responsive embeds handle the blocks with an aspect class; this covers the
   ones without it and iframes pasted into a text) */
.wp-block-embed {
	max-width: 100%;
	margin-inline: 0;
}

.wp-block-embed .wp-block-embed__wrapper {
	position: relative;
}

.wp-block-embed:is(.is-provider-youtube, .is-provider-vimeo, .wp-block-embed-youtube, .wp-block-embed-vimeo):not(.wp-has-aspect-ratio) iframe,
.wp-block-post-content iframe:is([src*="youtube"], [src*="youtu.be"], [src*="vimeo"]) {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

.wp-block-embed.wp-has-aspect-ratio iframe {
	border: 0;
}

.wp-block-embed figcaption {
	margin: 12px 0 0;
	font-size: 14px;
	opacity: 0.85;
}

/* ------------------------------------------------------------ Gravity Forms on a dark background (custom.css) */

#form_white label {
	color: #fff !important;
}

#form_white .gfield_description.validation_message.gfield_validation_message {
	color: #b00020 !important;
	background: rgba(255, 255, 255, 0.95) !important;
}

#form_white .gfield {
	margin-bottom: 10px !important;
}

p.gform_description {
	font-size: 16px !important;
	margin-bottom: var(--ab-flow-c, 32px) !important;
}

#form_white input.gform_button.button {
	background-color: #fff !important;
	color: var(--wp--preset--color--navy, #1b2a57) !important;
}

/* ------------------------------------------------------------ lists: "Valintamerkit" (checks) and "Latauslista" (downloads) */

/* the body text's size, the icon beside the item's first line, the items a little apart */
.wp-block-list.is-style-checks,
.wp-block-list.is-style-downloads {
	list-style: none;
	margin-inline: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

.is-style-checks > li,
.is-style-downloads > li {
	position: relative;
	margin: 0;
	padding: 0 0 0 30px;
	list-style: none;
}

.is-style-checks > li + li,
.is-style-downloads > li + li {
	margin-top: 12px;
}

.is-style-checks > li::before,
.is-style-downloads > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc((1.6em - 18px) / 2);
	top: calc((1lh - 18px) / 2);
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--ab-li-icon) no-repeat center / contain;
	mask: var(--ab-li-icon) no-repeat center / contain;
}

.is-style-checks {
	--ab-li-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' aria-hidden='true'%3E%3Cpath fill='currentColor' transform='translate(0 448) scale(1 -1)' d='M173.898 8.5957l-166.4 166.4c-9.99707 9.99707 -9.99707 26.2061 0 36.2041l36.2031 36.2041c9.99707 9.99805 26.207 9.99805 36.2041 0l112.095 -112.095l240.095 240.095c9.99707 9.99707 26.207 9.99707 36.2041 0l36.2031 -36.2041 c9.99707 -9.99707 9.99707 -26.2061 0 -36.2041l-294.4 -294.401c-9.99805 -9.99707 -26.207 -9.99707 -36.2031 0.000976562z'/%3E%3C/svg%3E");
}

.is-style-downloads {
	--ab-li-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' aria-hidden='true'%3E%3Cpath fill='currentColor' transform='translate(0 448) scale(1 -1)' d='M48 224L48 64C48 55 55 48 64 48L448 48C457 48 464 55 464 64L464 224L48 224ZM0 320C0 355 29 384 64 384L448 384C483 384 512 355 512 320L512 64C512 29 483 0 448 0L64 0C29 0 0 29 0 64L0 320Z'/%3E%3C/svg%3E");
}

/* a document list's links: 40px rows (tap targets) without moving the text */
.is-style-downloads > li > a {
	display: inline-block;
	margin-block: -9px;
	padding-block: 9px;
}

/* ------------------------------------------------------------ WooCommerce forms (account, cart, checkout) */

/* the headings of the shop's shortcode pages on the site's scale (h2 as an h3, h3 as an h4); not the product page's
   wrapper, whose own lists and headings have their sizes */
div.woocommerce:not(.product) h2 {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
}

div.woocommerce:not(.product) h3 {
	font-size: var(--an-h4, 18px);
	line-height: 1.35;
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon {
	border: 1px solid #e6e6e6;
	border-radius: 0;
}

.woocommerce form .form-row {
	margin: 0 0 12px;
	padding: 3px;
}

.woocommerce form :is(input[type="checkbox"], input[type="radio"]) {
	margin: 4px 0 0;
	line-height: normal;
}

.woocommerce form .form-row label {
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 700;
}

.woocommerce form .form-row :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea) {
	display: block;
	width: 100%;
	height: auto;
	min-height: var(--ab-tap, 44px);
	padding: 10px 12px;
	border: 1px solid #d5d8e0;
	border-radius: 0;
	background-color: #fcfcfc;
	box-shadow: none;
	color: #1b2a57;
	font-size: 16px;
	line-height: 1.4;
}

.woocommerce form .form-row textarea {
	height: 160px;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	padding: 10px 20px;
	border: 1px solid #ccc;
	border-radius: 0;
	background: #fcfcfc;
	color: #1b2a57;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

/* (the site's button: navy text on the accent, 5.0:1) */
.woocommerce button[type="submit"],
.woocommerce button.button.alt,
.woocommerce a.button.alt {
	padding: 10px 24px;
	border: 0;
	border-radius: 0;
	background: #01a6e6;
	color: var(--wp--preset--color--navy, #1b2a57);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.woocommerce button[type="submit"]:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background: #33b8eb;
	color: var(--wp--preset--color--navy, #1b2a57);
}

/* the shop's product block (on the cart page): WooCommerce's own layout; the names at the card names' size (18 / 17 /
   16px; WooCommerce shrinks a grid of four to 0.8em, 12-13px), the button the site's 16px */
.an-article ul.wc-block-grid__products,
ul.wc-block-grid__products {
	margin: 0 -8px 16px;
}

:root .wc-block-grid.wc-block-grid.wc-block-grid .wc-block-grid__product.wc-block-grid__product {
	font-size: var(--ab-item-size, 16px);
}

.wc-block-grid__product .wc-block-grid__product-title {
	color: var(--wp--preset--color--heading, #012b55);
	font-size: inherit;
	font-weight: 700;
	line-height: 1.3;
}

.wc-block-grid__product .wp-block-button .wp-block-button__link.wp-block-button__link {
	padding: 12px 24px;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--navy, #1b2a57);
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
}

/* ------------------------------------------------------------ icon grid (a box of callouts with a picture above the title) */

/* desktops: the columns the box asks for (two by default, in a compact box beside a text); tablets: as many 150px
   columns as fit (two in a half column, four across a row), titles 17px; phones: two columns. Titles 18 / 17 / 16px,
   long words hyphenated, never split at any letter. */
.an-icon-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ab-flow, 16px) var(--ab-gap, 20px);
}

.an-icon-grid:not([class*="an-icon-grid--"]) {
	max-width: 480px;
}

.an-icon-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.an-icon-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.an-icon-grid--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.an-icon-grid--6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* (the items are grid cells: no flow gap) */
.an-icon-grid.an-icon-grid > .an-icon-grid__item {
	margin-block: 0;
	text-align: center;
}

.an-icon-grid > .an-icon-grid__item > * {
	margin-block: 0;
}

.an-icon-grid > .an-icon-grid__item > .wp-block-image {
	margin-bottom: 12px;
}

.an-icon-grid__title.an-icon-grid__title {
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--navy);
	font-size: var(--ab-item-size, 16px);
	font-weight: 400;
	line-height: 1.35;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: normal;
}

@media (min-width: 769px) and (max-width: 1024px) {
	.an-icon-grid.an-icon-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.an-icon-grid__icon img {
		width: 80px !important;
	}
}

@media (max-width: 768px) {
	.an-icon-grid.an-icon-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: none;
	}
}

/* phones (round 4): a grid of an odd number of callouts (the services pages' five "Mihin sopii" icons: 2 + 2 + 1 left
   the last icon alone) is a list of rows, the icon at the left (64px) and its title beside it; three columns would be
   103px wide, too narrow for the titles' long words ("saneerauskohteisiin"). An even number keeps the two columns. */
@media (max-width: 768px) {
	.an-icon-grid.an-icon-grid:has(> .an-icon-grid__item:nth-child(odd):last-child:not(:first-child)) {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 12px;
	}

	.an-icon-grid:has(> .an-icon-grid__item:nth-child(odd):last-child:not(:first-child)) > .an-icon-grid__item.an-icon-grid__item {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		align-items: center;
		column-gap: 16px;
		text-align: left;
	}

	.an-icon-grid:has(> .an-icon-grid__item:nth-child(odd):last-child:not(:first-child)) > .an-icon-grid__item > .wp-block-image.wp-block-image {
		margin: 0;
	}

	.an-icon-grid:has(> .an-icon-grid__item:nth-child(odd):last-child:not(:first-child)) > .an-icon-grid__item > .wp-block-image img {
		width: 64px !important;
		margin: 0;
	}

	.an-icon-grid:has(> .an-icon-grid__item:nth-child(odd):last-child:not(:first-child)) .an-icon-grid__title.an-icon-grid__title {
		text-align: left;
	}
}

/* a title that is a link: a 44px tap target (inline, the vertical padding reaches into the space around the title;
   the text does not move) */
.an-icon-grid__title > a {
	padding-block: max(0px, calc((var(--ab-tap, 44px) - 1.2em) / 2));
}

/* ------------------------------------------------------------ icon beside a text (the old icon module) */

.an-icon-line {
	gap: 15px;
}

.an-icon-line > * {
	margin-block: 0;
}

.an-icon-line .wp-block-heading {
	margin: 0;
}

/* an icon with a heading as its text (the contact page's phone number): the icon on the heading's first line */
.an-icon-line:has(> .wp-block-heading) {
	align-items: flex-start;
	min-height: 48px;
	padding-top: 8px;
	box-sizing: border-box;
}

/* ------------------------------------------------------------ buttons */

/* The theme's button (theme.json): 16px bold, padding 12px 24px, accent blue (#01a6e6) with navy text (5.0:1; round 4,
   it had white text at 2.8:1), at least 44px high (48px on phones; style.css). Block styles: "Leveä" (32px sides),
   "Perus" (the plain button), "Tummansininen" (navy, white text). An arrow after the text: class has-arrow = always
   there, has-arrow-hover = slides in when the pointer is on the button. */
.wp-block-button.is-style-wide > .wp-block-button__link {
	padding-right: 32px;
	padding-left: 32px;
}

.wp-block-button.is-style-regular > .wp-block-button__link {
	padding: 12px 24px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.wp-block-button.is-style-navy > .wp-block-button__link {
	padding: 12px 24px;
	border: 1px solid #0f1e4b;
	border-radius: 0;
	background-color: var(--wp--preset--color--navy, #1b2a57);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.wp-block-button.is-style-navy > .wp-block-button__link:hover {
	background-color: #0f1e4b;
	color: #fff;
}

.wp-block-button.has-arrow > .wp-block-button__link::after,
.wp-block-button.has-arrow-hover > .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 9px;
	height: 1.3em;
	margin-left: 8px;
	vertical-align: -0.28em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' aria-hidden='true'%3E%3Cpath fill='currentColor' transform='translate(0 448) scale(1 -1)' d='M247 215C260 202 260 182 247 169L87 9C75 -3 54 -3 42 9C29 22 29 42 42 55L179 192L42 329C29 342 29 362 42 375C54 387 75 387 87 375L247 215Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' aria-hidden='true'%3E%3Cpath fill='currentColor' transform='translate(0 448) scale(1 -1)' d='M247 215C260 202 260 182 247 169L87 9C75 -3 54 -3 42 9C29 22 29 42 42 55L179 192L42 329C29 342 29 362 42 375C54 387 75 387 87 375L247 215Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.wp-block-button.has-arrow-hover > .wp-block-button__link::after {
	width: 0;
	margin-left: 0;
	opacity: 0;
	transition: width 0.2s ease-out, margin-left 0.2s ease-out, opacity 0.2s ease-out;
}

.wp-block-button.has-arrow-hover > .wp-block-button__link:hover::after,
.wp-block-button.has-arrow-hover > .wp-block-button__link:focus-visible::after {
	width: 9px;
	margin-left: 8px;
	opacity: 1;
}

/* The Elementor buttons that stayed in old pages (<p><a href="/referenssit/" role="button"><br>Asiakaskokemukset<br></a></p>:
   the thank-you pages, the Swedish and English product pages): a link with a real address gets the button look above
   (accent background, bold navy text, square, 44px high, 12px 24px; the <br> in it are ignored). One without an
   address (no href, "#" or empty) is no button and stays as it is. */
:is(.wp-block-post-content, .an-html) a[role="button"][href]:not([href="#"], [href=""]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--ab-btn-h, 44px);
	padding: 12px 24px;
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--accent, #01a6e6);
	color: var(--wp--preset--color--navy, #1b2a57);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	vertical-align: top;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: normal;
	transition: background-color 0.2s ease, color 0.2s ease;
}

:is(.wp-block-post-content, .an-html) a[role="button"][href]:not([href="#"], [href=""]):is(:hover, :focus-visible) {
	background-color: #33b8eb;
	color: var(--wp--preset--color--navy, #1b2a57);
	text-decoration: none;
}

:is(.wp-block-post-content, .an-html) a[role="button"][href]:not([href="#"], [href=""]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #01a6e6);
	outline-offset: 2px;
}

:is(.wp-block-post-content, .an-html) a[role="button"][href]:not([href="#"], [href=""]) br {
	display: none;
}

/* ------------------------------------------------------------ article text (the old row class "blogi-sisalto") */

/* the body text's size (17 / 16 / 16px; style.css has the rhythm); pictures the column's width. Without weight
   (:where): the pictures of blocks in the text keep their own sizes (the stats' 64px icons, people's photos, product
   cards, WooCommerce's images and payment logos) */
:where(.an-article:not(.an-page-plain__content)) img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* (a picture inside a paragraph of an old article: apart from the text lines around it) */
.an-article p > img:not(:only-child) {
	margin-block: var(--ab-flow, 16px);
}

/* Article pictures (round 4, inc/content-display.php): a picture whose largest file is narrower than the column
   (an-img-cap, max-width = that file's width) is shown at its own width, centred, never stretched or floated beside the
   text; on wider screens a tall picture is at most 80 % of the screen's height (the whole picture, centred in the
   column: a portrait photo was 700 x 933px) */
.an-article img.an-img-cap.an-img-cap {
	float: none;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 769px) {
	.an-article img.an-img-col:not(.wp-block-post-content :is(.wp-block-columns, .wp-block-media-text, .ab-section, [class*="wp-block-avalon-"]) img) {
		max-height: 80vh;
		object-fit: contain;
	}
}

/* phones: a cropped gallery in an article (two columns; round 4): every tile the same shape, so the rows are equally
   high (a row of portrait photos was 297px, a row of landscape ones 125px): 4:3, square when the gallery has a
   portrait photo (an-gallery--square, inc/content-display.php). Wider screens keep the gallery's own rows. */
@media (max-width: 768px) {
	.an-article .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
		aspect-ratio: 4 / 3;
		height: auto;
	}

	.an-article .wp-block-gallery.has-nested-images.is-cropped.an-gallery--square figure.wp-block-image:not(#individual-image) img {
		aspect-ratio: 1;
	}
}

/* a paragraph or heading that is only a link, in a card, a column or an article's text ("Lue lisää kohteesta.",
   "Tutustu tarkemmin tuotteeseen", "Lue juttu Taloussanomista"; class an-link-only, inc/content-display.php): the link
   stays inline and gets vertical padding, so it is a 44px tap target while the text does not move (the people cards'
   phone numbers do the same, blocks.css). Without weight (:where): a link that other rules make a box or a button keeps
   their look. */
:where(.ab-feature, .wp-block-column, .an-article .wp-block-post-content) > :where(.an-link-only:not(.ab-person .an-link-only)) > a {
	padding-block: max(0px, calc((var(--ab-tap, 44px) - 1.2em) / 2));
}

.an-article :is(.wp-caption, figure.wp-caption) {
	width: 100% !important;
	max-width: 100%;
}

/* a [caption] of an old article (round 4): a plain figure like an image block's, the picture and a small caption under
   it in the muted text colour (the old skin's grey box with a border and 10px padding made a stack of frames when
   several captioned pictures followed each other); figures are spaced like the other figures of a text (style.css) */
.wp-caption {
	box-sizing: border-box;
	max-width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.wp-caption.alignnone,
.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}

.wp-caption.aligncenter {
	display: block;
	margin: 5px auto;
}

.wp-caption img {
	display: block;
	max-width: 100%;
	height: auto;
}

.wp-caption p.wp-caption-text,
.wp-block-image figcaption {
	margin: 0;
	padding: 8px 0 0;
	color: #5d6680;
	font-size: 14px;
	line-height: 1.45;
}

:is(.is-dark, .has-navy-background-color) :is(.wp-caption p.wp-caption-text, .wp-block-image figcaption) {
	color: rgba(255, 255, 255, 0.8);
}

.an-article iframe {
	max-width: 100%;
}

/* (the 404 page's rules moved to assets/css/search.css on 2026-10-16: the search, 404 and empty-list views) */

/* ------------------------------------------------------------ the markup of an old HTML module */

/* its own margins stay inside it (as the module's box did), with the text rhythm */
.an-html {
	display: flow-root;
}

.an-html p,
.an-html :is(ul, ol) {
	margin: 0 0 var(--ab-flow-p, 14px);
}

.an-html :is(h1, h2, h3) {
	margin: var(--ab-flow-c, 32px) 0 var(--ab-flow, 16px);
}

.an-html :is(h4, h5, h6) {
	margin: var(--ab-flow, 16px) 0 var(--ab-flow-p, 14px);
}

.an-html > :first-child {
	margin-top: 0;
}

.an-html > :last-child {
	margin-bottom: 0;
}

.an-html img {
	vertical-align: middle;
}

/* the raw HTML of a rich text module: its last paragraph has no margin below, and its margins collapse with the
   neighbouring paragraphs' (no flow-root) */
.an-html.an-html--text {
	display: block;
}

.an-html--text p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------ callout with a picture beside the text (the old callout module) */

.an-callout-photo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--ab-flow, 16px) var(--ab-gap, 20px);
}

.an-callout-photo > .wp-block-image {
	margin: 0;
}

.an-callout-photo--right > .wp-block-image {
	order: 2;
}

.an-callout-photo > .wp-block-image img {
	width: 100%;
	height: auto;
}

/* (the body is a grid item: no flow gap above it, it is centred beside the picture) */
.an-callout-photo > .an-callout-photo__body {
	margin-block: 0;
}

.an-callout-photo__body > * {
	margin-block: 0;
}

.an-callout-photo__body > * + * {
	margin-block-start: var(--ab-flow-p, 14px);
}

.an-callout-photo__body > .wp-block-heading {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
}

.an-callout-photo__body > .wp-block-heading a {
	color: inherit;
	text-decoration: none;
}

.an-callout-photo__body > .wp-block-buttons {
	margin-block-start: var(--ab-flow, 16px);
}

/* a callout whose title is a link (the product groups on /tuotteet/): the whole callout is the link's tap target (the
   title link's area covers it; the title alone was a 20-25px target); its own button and any link in its text stay
   clickable above it */
.an-callout-photo:has(> .an-callout-photo__body > .wp-block-heading a[href]) {
	position: relative;
}

.an-callout-photo__body > .wp-block-heading a[href]::after {
	content: "";
	position: absolute;
	inset: 0;
}

.an-callout-photo:has(> .an-callout-photo__body > .wp-block-heading a[href]) :is(.wp-block-buttons, p a, li a) {
	position: relative;
	z-index: 1;
}

.an-callout-photo:has(> .an-callout-photo__body > .wp-block-heading a[href]):hover > .an-callout-photo__body > .wp-block-heading a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

@media (max-width: 768px) {
	.an-callout-photo {
		grid-template-columns: 1fr;
	}

	.an-callout-photo > .wp-block-image,
	.an-callout-photo--right > .wp-block-image {
		order: 0;
	}

	/* the product photo at most 220px high, at its own proportions on the text's left edge (a full-width square
	   photo was about 330px of the phone's screen per product) */
	.an-callout-photo > .wp-block-image img {
		width: auto;
		max-width: 100%;
		max-height: 220px;
		object-fit: contain;
	}
}

/* ------------------------------------------------------------ home page quiz (round 4, 2026-10-30) */

/* The product quiz (plugin Help Me Choose, chooser "Jätevesiapuri") without its step numbers: the user removed the
   1 2 3 4 under the choices (Avalon's Finnish quiz hides them too). Choosing a tile still moves on; the result's
   "Aloita alusta" link and the browser's back button take the visitor to the first question. The plugin (1.2.14) has
   no setting for the numbers, so they are hidden here; its script keeps updating them unseen. */
.hmc-form-container.hmc-form-container .hmc-swiper-pagination {
	display: none !important;
}

/* the footer under the steps is empty now: no 32px gap of its own; above the result's "Aloita alusta" link it stays */
.hmc-form-container.hmc-form-container .hmc-swiper-footer {
	gap: 0;
	padding: 0;
}

.hmc-form-container.hmc-form-container .hmc-swiper-footer:has(.hmc-swiper-reset:not(:empty)) {
	padding-top: var(--ab-flow-c, 32px);
}

/* the result's contact form in the look of the site's other forms (forms.css): navy 15px labels, 16px fields (phones
   do not zoom in when a field is tapped), the site's field border and focus ring (the plugin's black 14px labels,
   15px fields and blue glow) */
.hmc-form-container.hmc-form-container .hmc-rec-native-form .hmc-native-field-label {
	color: var(--wp--preset--color--heading, #012b55);
	font-size: 15px;
	font-weight: 700;
}

.hmc-form-container.hmc-form-container .hmc-rec-native-form .hmc-native-field-input {
	min-height: var(--ab-tap, 44px);
	padding: 10px 14px;
	border: 1px solid #d5d8e0;
	color: var(--wp--preset--color--navy, #1b2a57);
	font-size: 16px;
}

/* the example texts in the fields 5.7:1 on white (the plugin's 55% black was 4.7:1) */
.hmc-form-container.hmc-form-container .hmc-rec-native-form .hmc-native-field-input::placeholder {
	color: #5c6684;
	opacity: 1;
}

.hmc-form-container.hmc-form-container .hmc-rec-native-form .hmc-native-field-input:focus {
	border-color: var(--wp--preset--color--navy, #1b2a57);
	outline: 2px solid var(--wp--preset--color--accent, #01a6e6);
	outline-offset: 0;
	box-shadow: none;
}

/* desktop: the result's form fills its column (the plugin's 520px form ended 35px short of the section's right edge,
   as on Avalon's site); one column (the plugin's up to 900px) keeps 520px */
@media (min-width: 901px) {
	.hmc-form-container.hmc-form-container .hmc-contact-form-two-col-right .hmc-rec-native-form {
		max-width: none;
	}
}

/* round 4b (2026-11-02): the products named in a result text are links (content-quiz-results.php) but looked like the
   text around them (navy, regular, no underline). Underlined like the site's other links in running text (1px, 3px
   under the letters, 2px on hover); navy #1b2a57 on white = 13.9:1; the keyboard focus ring is the site's own. */
.hmc-form-container.hmc-form-container .hmc-rec-description a {
	color: var(--wp--preset--color--navy, #1b2a57);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.hmc-form-container.hmc-form-container .hmc-rec-description a:hover {
	text-decoration-thickness: 2px;
}

/* round 4b, fix 2 (2026-11-02): a choice whose result opens another page ("Suuri kohde" -> Projektit,
   quiz-suuri-kohde.php) shows only "Siirrytään…" until the next page loads (0.3 s + the page load). The box keeps the
   first question's height and the text sits in its middle, so the content below does not jump up; the first
   question stays in the layout unseen and cannot be tapped (the plugin leaves an inline "visibility: visible" on a
   step it has shown, hence !important). "Aloita alusta" is hidden then: it would not stop the move. */
.hmc-form-container.hmc-form-container .hmc-swiper:has(.hmc-recommendations-wrap--redirect) .swiper-slide:first-child:not(.swiper-slide-active) {
	max-height: none;
	visibility: hidden !important;
	pointer-events: none;
}

.hmc-form-container.hmc-form-container .hmc-swiper .hmc-recommendation-slide:has(.hmc-recommendations-wrap--redirect) {
	align-self: stretch;
	justify-content: center;
}

.hmc-form-container.hmc-form-container:has(.hmc-recommendations-wrap--redirect) .hmc-swiper-reset {
	visibility: hidden;
}