/* Contact page (/ota-yhteytta/ 14, /sv/contact-us/ 709, /en/contact-us/ 605): rules scoped by the classes in its content (round 3, 2026-10-16). Loaded on the front end and in the editor.

   The Finnish page (curated/14.html) carries the classes itself:
     .an-contact                 on every section of the page (not the hero)
     .an-contact-methods         avalon/contact "Kysy asiantuntijalta" (item style "card"): phone, e-mail, postal address
     .an-contact-form-band       avalon/section (light, anchor #lomake) around the form card
     .an-contact-form            core/group: the card with its heading, one line and the Leadoo form (avalon/pattern)
     .an-contact-people          avalon/people: the people of one group as framed cards
     .an-contact-billing         avalon/section (light): "Laskutustiedot", three white cards (core/columns)
   The Swedish and English pages have the same classes (and a Gravity Forms form in the card) since round 4; the people
   rules still also reach a contact page without them through the converter's own class (ab-people--gray, only the
   contact pages have grayscale people). The section "SV / EN: the converted markup" (the Leadoo column's frame and the
   tap targets of the old Swedish / English markup) matched nothing any more and was removed (round 4, 2026-10-30).

   Colours: text and links navy (13.9:1 on white), the secondary text #5b6475 (6.0:1 on white, 5.5:1 on the light band);
   the accent blue (2.8:1 on white) only as lines and the icon discs, never as text. */

/* ------------------------------------------------------------ section heads: centred, the wave under the title */

.an-contact.ab-contact .ab-head {
	margin-inline: auto;
	text-align: center;
}

.an-contact.ab-contact .ab-title,
.an-contact.an-contact-billing > .ab-container > h2:first-child {
	position: relative;
}

.an-contact.ab-contact .ab-title::after,
.an-contact.an-contact-billing > .ab-container > h2:first-child::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -22px;
	width: 132px;
	height: 18px;
	transform: translateX(-50%);
	background: url("../../../../plugins/vestelli-blocks/assets/img/wave-03.png") no-repeat center / contain;
	opacity: 0.85;
}

.an-contact.ab-contact .ab-title + .ab-intro {
	margin-top: calc(var(--ab-flow) + 26px);
	text-wrap: balance;
}

/* a link in the intro ("sivulla olevalla lomakkeella" -> #lomake) looks like one */
.an-contact.ab-contact .ab-intro a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.an-contact.ab-contact .ab-intro a:hover {
	text-decoration-thickness: 2px;
}

.an-contact.ab-contact .ab-head:not(:has(.ab-intro)) {
	margin-bottom: calc(var(--ab-head-gap) + 22px);
}

.an-contact.an-contact-billing > .ab-container > h2:first-child {
	margin-inline: auto;
	text-align: center;
}

/* ------------------------------------------------------------ contact methods (avalon/contact, cards) */

.an-contact-methods.ab-contact .ab-grid {
	gap: 24px;
}

.an-contact-methods.ab-contact--cards .ab-contact-item {
	box-sizing: border-box;
	align-items: center;
	min-width: 0;
	padding: 36px 24px 32px;
	border: 1px solid #dfe3ea;
	border-top: 3px solid var(--ab-accent);
	background: #fff;
	text-align: center;
}

.an-contact-methods.ab-contact--cards .ab-contact-item__icon {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	margin: 0 0 16px;
	padding: 0;
	border-radius: 50%;
	background: #e6f6fd;
	color: var(--ab-navy);
}

.an-contact-methods.ab-contact--cards .ab-contact-item__icon .ab-icon {
	width: 22px;
	max-width: none;
	height: 22px;
}

.an-contact-methods .ab-contact-item__body {
	width: 100%;
	min-width: 0;
}

.an-contact-methods.ab-contact--cards .ab-contact-item__title {
	margin: 0 0 6px;
	color: #5b6475;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* the first paragraph is the item's value (navy), the next ones its notes (the opening hours: grey, smaller) */
.an-contact-methods.ab-contact .ab-contact-item .ab-flow > p {
	margin: 0;
	color: var(--ab-navy);
	font-size: 17px;
	line-height: 1.55;
}

.an-contact-methods.ab-contact .ab-contact-item .ab-flow > p + p {
	margin-top: 6px;
	color: #5b6475;
	font-size: 15px;
}

/* a number or an e-mail address is the large value, at least 44px high to tap */
.an-contact-methods.ab-contact .ab-contact-item .ab-flow > p:first-child:has(> a[href^="tel:"], > a[href^="mailto:"]) {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
}

.an-contact-methods.ab-contact .ab-contact-item .ab-flow > p > a:is([href^="tel:"], [href^="mailto:"]) {
	display: inline-flex;
	align-items: center;
	min-height: var(--ab-tap);
	color: var(--ab-navy);
	text-decoration: underline;
	text-decoration-color: var(--ab-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	white-space: nowrap;
}

.an-contact-methods.ab-contact .ab-contact-item .ab-flow > p > a:is([href^="tel:"], [href^="mailto:"]):hover {
	text-decoration-color: currentColor;
}

@media (min-width: 769px) and (max-width: 1024px) {
	.an-contact-methods.ab-contact--cards .ab-contact-item {
		padding: 28px 16px 24px;
	}

	.an-contact-methods.ab-contact .ab-contact-item .ab-flow > p:first-child:has(> a[href^="tel:"], > a[href^="mailto:"]) {
		font-size: 20px;
	}
}

/* phones: one card per row, the icon beside the text */
@media (max-width: 768px) {
	.an-contact-methods.ab-contact .ab-grid {
		gap: 12px;
	}

	.an-contact-methods.ab-contact--cards .ab-contact-item {
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
		padding: 18px 16px;
		border-top-width: 1px;
		border-left: 3px solid var(--ab-accent);
		text-align: left;
	}

	.an-contact-methods.ab-contact--cards .ab-contact-item__icon {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		margin: 0;
	}

	.an-contact-methods.ab-contact--cards .ab-contact-item__icon .ab-icon {
		width: 18px;
		height: 18px;
	}

	.an-contact-methods.ab-contact--cards .ab-contact-item__title {
		margin-bottom: 2px;
		font-size: 13px;
	}

	.an-contact-methods.ab-contact .ab-contact-item .ab-flow > p:first-child:has(> a[href^="tel:"], > a[href^="mailto:"]) {
		font-size: 20px;
	}
}

/* ------------------------------------------------------------ the form card */

.an-contact-form-band .wp-block-group.an-contact-form {
	box-sizing: border-box;
	max-width: 880px;
	margin-inline: auto;
	padding: 48px 56px 56px;
	border: 1px solid #dfe3ea;
	border-top: 4px solid var(--ab-accent);
	background: #fff;
}

.an-contact-form-band .wp-block-group.an-contact-form > * {
	margin-block: 0;
}

.an-contact-form-band .wp-block-group.an-contact-form > :is(h2, p) {
	text-align: center;
	text-wrap: balance;
}

.an-contact-form-band .wp-block-group.an-contact-form > h2 + p {
	margin-top: 12px;
	color: #5b6475;
	font-size: var(--ab-lead-size);
	line-height: 1.45;
}

/* the form (Leadoo puts its bot right after its script) */
.an-contact-form-band .wp-block-group.an-contact-form > script + * {
	margin-top: 32px;
}

@media (max-width: 1024px) {
	.an-contact-form-band .wp-block-group.an-contact-form {
		padding: 40px 32px 44px;
	}
}

@media (max-width: 768px) {
	.an-contact-form-band .wp-block-group.an-contact-form {
		padding: 28px 20px 32px;
	}

	.an-contact-form-band .wp-block-group.an-contact-form > script + * {
		margin-top: 24px;
	}
}

/* ------------------------------------------------------------ people: framed cards of one height */
/* (Finnish: .an-contact-people; Swedish / English: the converted grayscale people blocks of a content area without
   .an-contact sections) */

:is(.an-contact-people, .wp-block-post-content:has(> .ab-people--gray):not(:has(> .an-contact)) > .ab-people--gray).ab-people .ab-grid {
	--ab-gap: 24px;
}

:is(.an-contact-people, .wp-block-post-content:has(> .ab-people--gray):not(:has(> .an-contact)) > .ab-people--gray).ab-people .ab-person.ab-item p.ab-person__title {
	color: #5b6475;
}

:is(.an-contact-people, .wp-block-post-content:has(> .ab-people--gray):not(:has(> .an-contact)) > .ab-people--gray).ab-people .ab-person.ab-item p a {
	color: var(--ab-navy);
	text-decoration: underline;
	text-decoration-color: rgba(27, 42, 87, 0.35);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

:is(.an-contact-people, .wp-block-post-content:has(> .ab-people--gray):not(:has(> .an-contact)) > .ab-people--gray).ab-people .ab-person.ab-item p a:hover {
	text-decoration-color: currentColor;
}

@media (min-width: 769px) {
	:is(.an-contact-people, .wp-block-post-content:has(> .ab-people--gray):not(:has(> .an-contact)) > .ab-people--gray).ab-people .ab-person.ab-item {
		box-sizing: border-box;
		padding: 32px 20px 28px;
		border: 1px solid #dfe3ea;
		background: #fff;
	}

	/* the call and e-mail buttons (tablets) on one line at the bottom of every card */
	:is(.an-contact-people, .wp-block-post-content:has(> .ab-people--gray):not(:has(> .an-contact)) > .ab-people--gray).ab-people .ab-person.ab-item > .ab-person__actions {
		margin-top: auto;
		padding-top: 12px;
	}
}

/* touch screens (the e-mail address is a button there): the number's tap area 45px high without moving the lines (an
   inline link's vertical padding takes no room); the call button beside it is the 44px target too */
@media (max-width: 1024px) {
	:is(.an-contact-people, .wp-block-post-content:has(> .ab-people--gray):not(:has(> .an-contact)) > .ab-people--gray).ab-people .ab-person.ab-item p a[href^="tel:"] {
		padding-block: 13px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	:is(.an-contact-people, .wp-block-post-content:has(> .ab-people--gray):not(:has(> .an-contact)) > .ab-people--gray).ab-people .ab-grid {
		--ab-gap: 16px;
	}

	:is(.an-contact-people, .wp-block-post-content:has(> .ab-people--gray):not(:has(> .an-contact)) > .ab-people--gray).ab-people .ab-person.ab-item {
		padding: 24px 10px 20px;
	}
}

/* groups one after another on the same background: one gap between them, as between the first two (the converted first
   group is stored without its bottom padding; a group added after the second one, "Hallinto" on 2.11.2026, followed the
   second group's own bottom padding and doubled the gap above its title). The last group keeps its padding. */
.an-contact-people.ab-people.ab-bg-none:has(+ .an-contact-people.ab-people.ab-bg-none),
.an-contact-people.ab-people.ab-bg-light:has(+ .an-contact-people.ab-people.ab-bg-light) {
	padding-bottom: 0;
}

/* ------------------------------------------------------------ billing details (Laskutustiedot) */

.an-contact.an-contact-billing > .ab-container.ab-flow > h2:first-child + .wp-block-columns.an-cols {
	margin-top: calc(var(--ab-head-gap) + 22px);
}

.an-contact-billing .wp-block-columns.an-cols {
	gap: 24px;
}

.an-contact-billing .wp-block-columns.an-cols > .wp-block-column {
	box-sizing: border-box;
	padding: 28px 24px 30px;
	border: 1px solid #dfe3ea;
	background: #fff;
}

.an-contact-billing .wp-block-columns.an-cols > .wp-block-column > h3 {
	margin: 0;
	font-size: var(--ab-item-size);
	line-height: 1.3;
}

.an-contact-billing .wp-block-columns.an-cols > .wp-block-column.wp-block-column > h3 + p {
	margin-top: 8px;
}

.an-contact-billing .wp-block-columns.an-cols > .wp-block-column > p {
	font-size: 16px;
	line-height: 1.6;
}

/* the e-invoice e-mail address: a 44px tap area (the vertical padding of an inline link takes no room) */
.an-contact-billing .wp-block-columns.an-cols > .wp-block-column > p > a[href^="mailto:"] {
	padding-block: 12px;
}

/* tablets: two cards in a row, the third one under them across the row (the e-mail address stays on one line) */
@media (min-width: 769px) and (max-width: 1100px) {
	.an-contact-billing .wp-block-columns.an-cols {
		flex-wrap: wrap !important;
	}

	.an-contact-billing .wp-block-columns.an-cols > .wp-block-column {
		flex: 1 1 calc(50% - 12px) !important;
	}
}

@media (max-width: 768px) {
	.an-contact-billing .wp-block-columns.an-cols {
		gap: 12px;
	}

	.an-contact-billing .wp-block-columns.an-cols > .wp-block-column {
		padding: 20px 16px 22px;
	}
}