/**
 * 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.
 */

/* ------------------------------------------------------------ base: buttons and form fields */

:where(button, input[type="button"], input[type="submit"]) {
	background-color: var(--wp--preset--color--accent, #01a6e6);
	color: #fff;
	font-size: 16px;
	line-height: 1.2;
	padding: 6px 12px;
	font-weight: 400;
	text-transform: none;
	text-shadow: none;
	border: 0 none;
	box-shadow: none;
	border-radius: 0;
}

:where(button, input[type="button"], input[type="submit"]):hover {
	background-color: #00aee8;
}

/* a submit button is a 44px tap target */
:where(input[type="submit"], button[type="submit"]) {
	min-height: var(--ab-tap, 44px);
	padding: 10px 20px;
}

/* form fields: 16px text (phones do not zoom in), 44px high */
:where(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"], input[type="search"], input[type="url"], textarea, select) {
	display: block;
	width: 100%;
	min-height: var(--ab-tap, 44px);
	padding: 10px 12px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--wp--preset--color--navy, #1b2a57);
	background-color: #fcfcfc;
	background-image: none;
	border: 1px solid #d5d8e0;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	box-shadow: none;
	border-radius: 0;
}

:where(select) {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%231b2a57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
	appearance: none;
}

:where(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"], input[type="search"], input[type="url"], textarea)::placeholder {
	color: rgba(27, 42, 87, 0.55);
}

/* the focused field: a navy border and the site's focus ring (the old theme removed every outline) */
:where(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"], input[type="search"], input[type="url"], textarea, select):focus {
	background-color: #fff;
	border-color: var(--wp--preset--color--navy, #1b2a57);
	outline: 2px solid var(--wp--preset--color--accent, #01a6e6);
	outline-offset: 0;
	box-shadow: none;
}

:where(textarea) {
	height: 160px;
}

/* Keyboard focus is always visible (2px accent ring, 2px away from the element); a mouse click shows none. Components
   with a ring of their own (buttons, accordion rows, the header) set theirs with a class. */
:where(a, button, summary, [tabindex], input[type="checkbox"], input[type="radio"]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #01a6e6);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

/* ------------------------------------------------------------ header (custom.css: "full-height cyan hover fill") */

/* the nav section has no vertical padding so that the menu links fill the full header height (90px) */
.vestelli-header .vestelli-header-nav-section {
	padding-top: 0;
	padding-bottom: 0;
}

.vestelli-header .vestelli-main-menu > li > a {
	min-height: 90px;
	padding-top: 0;
	padding-bottom: 0;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.vestelli-header .vestelli-main-menu > li > a:hover,
.vestelli-header .vestelli-main-menu > li > a:focus-visible {
	background-color: #00adee;
	color: #fff;
	opacity: 1;
}

/* ------------------------------------------------------------ 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;
}

.woocommerce button[type="submit"],
.woocommerce button.button.alt,
.woocommerce a.button.alt {
	padding: 10px 24px;
	border: 0;
	border-radius: 0;
	background: #01a6e6;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

.woocommerce button[type="submit"]:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background: #00aee8;
	color: #fff;
}

/* 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;
	}
}

/* ------------------------------------------------------------ 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 / 400, padding 12px 24px, accent blue (#01a6e6), at least 44px high (48px on
   phones; style.css). Block styles: "Leveä" (32px sides), "Perus", "Tummansininen" (navy). 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: 400;
	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: 400;
	line-height: 1.2;
}

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

.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, white 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--white, #fff);
	font-size: 16px;
	font-weight: 400;
	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: #00aee8;
	color: var(--wp--preset--color--white, #fff);
	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);
}

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

/* a [caption] as the old skin framed it: a light grey box with a thin border and 10px padding, the picture inside and a
   small centred caption under it */
.wp-caption {
	box-sizing: border-box;
	max-width: 100%;
	padding: 10px;
	border: 1px solid #e6e6e6;
	background: #f7f7f7;
	text-align: center;
}

.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: 6px 4px 0;
	font-size: 14px;
	line-height: 1.45;
}

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

/* ------------------------------------------------------------ 404 page (templates/404.html: a centred title and a search field) */

.an-404 {
	padding-top: calc(var(--ab-header-h, 72px) + var(--ab-pad-m, 40px));
	padding-bottom: var(--ab-pad-xl, 56px);
}

.an-404 .an-404-title {
	max-width: var(--ab-text-width, 760px);
	margin: 0 auto;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	text-wrap: balance;
}

.an-404 .an-404-search {
	width: 100%;
	max-width: 480px;
	margin: var(--ab-head-gap, 24px) auto 0;
}

.an-404 .an-404-search .wp-block-search__inside-wrapper {
	gap: 8px;
}

.an-404 .an-404-search .wp-block-search__input {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--ab-btn-h, 44px);
	padding: 10px 14px;
	border: 1px solid #d5d8e0;
	border-radius: 0;
	background: #fcfcfc;
	font-size: 16px;
	line-height: 1.4;
}

.an-404 .an-404-search .wp-block-search__button {
	min-height: var(--ab-btn-h, 44px);
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--accent, #01a6e6);
	color: #fff;
	font-size: 16px;
}

/* the ways out under the search: Etusivu, Palvelut, Ota yhteyttä (a row on wide screens; one full-width button per line
   on phones) */
.an-404 .an-404-buttons {
	gap: 12px;
	max-width: 480px;
	margin: var(--ab-flow-c, 32px) auto 0;
}

@media (max-width: 480px) {
	.an-404 .an-404-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.an-404 .an-404-buttons .wp-block-button,
	.an-404 .an-404-buttons .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* ------------------------------------------------------------ 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;
	}
}