/*
 * Mikkeli theme styles that theme.json cannot express: breakpoints, states,
 * icons and the header and footer. Tokens come from theme.json presets.
 *
 * Breakpoints (Style guide › Grid): Small < 600px, Medium 600–1135px,
 * Large 1136–1659px, Huge >= 1660px.
 */

:root {
	--mikkeli-grid-margin: var(--wp--custom--grid--margin);
	--mikkeli-icon-size: 1em;
}

@media (min-width: 600px) {
	:root {
		--mikkeli-grid-margin: var(--wp--custom--grid--margin-desktop);
	}
}

/* Icons are SVG masks, so they take the text colour. */
.is-style-links a::after,
.mikkeli-footer__links .wp-block-navigation-item__content::after,
a.wp-block-button__link[href]::after,
.mikkeli-www-subpages__toggle::after {
	content: "";
	display: inline-block;
	flex: none;
	width: var(--mikkeli-icon-size);
	height: var(--mikkeli-icon-size);
	background-color: currentColor;
	mask: var(--mikkeli-icon) center / contain no-repeat;
}

/* Focus: 3px marjapuuro outline outside the element (Style guide › Hyperlinks, ":Visible focus"). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.wp-element-button:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: 0;
}

/* Links: underlined, the underline thickens on hover (Hyperlink-underlined). */
a {
	text-decoration-thickness: var(--wp--custom--border--thin);
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-thickness: var(--wp--custom--border--medium);
}

/* Headings */
.is-style-serif {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 700;
}

/* Buttons (Blocks › Buttons): primary is the default style. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2-xs);
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-tertiary > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--terva-15);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: var(--wp--custom--border--regular) solid var(--wp--preset--color--terva-10);
	padding: calc(8px - var(--wp--custom--border--regular)) calc(24px - var(--wp--custom--border--regular));
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-tertiary > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--saimaa);
	color: var(--wp--preset--color--terva-15);
}

.wp-block-button.is-style-outline > .wp-block-button__link:active,
.wp-block-button.is-style-tertiary > .wp-block-button__link:active {
	background-color: var(--wp--preset--color--aurinko);
}

/* A linked button ends in an arrow: outward when it leads to another site (inc/buttons.php). */
.wp-block-button__link {
	--mikkeli-icon: url(../icons/arrow-forward.svg);
}

.wp-block-button__link.mikkeli-external {
	--mikkeli-icon: url(../icons/arrow-outward.svg);
}

/* Media and text (Blocks › Media and text): the text is a gutter from the media, or 32px inside a background
   (Näkymät › Etusivu, the highlight). */
.wp-block-media-text > .wp-block-media-text__content {
	padding: 0 0 0 var(--wp--custom--grid--gutter);
}

.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
	padding: 0 var(--wp--custom--grid--gutter) 0 0;
}

.wp-block-media-text.has-background > .wp-block-media-text__content {
	padding: var(--wp--preset--spacing--md);
}

/* Core stacks it at 600px and below: the gutter goes above the text. */
@media (max-width: 600px) {
	.wp-block-media-text.is-stacked-on-mobile:not(.has-background) > .wp-block-media-text__content {
		padding: var(--wp--custom--grid--gutter) 0 0;
	}
}

/* Large buttons (Buttons block › Large): every button in the group, in any style. */
.wp-block-buttons.is-style-large .wp-block-button__link {
	padding: 12px 24px;
	font-size: var(--wp--preset--font-size--large);
}

.wp-block-buttons.is-style-large .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(12px - var(--wp--custom--border--regular)) calc(24px - var(--wp--custom--border--regular));
}

/* Colour bar panel (Group block › Colour bar): a ruoho bar in the brand pattern, on top below 600px, on the left above. */
.wp-block-group.is-style-colour-bar {
	position: relative;
	background-color: var(--wp--preset--color--kallio-96);
	padding: calc(48px + var(--wp--preset--spacing--md)) var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
}

.wp-block-group.is-style-colour-bar::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 48px;
	background: url(../images/brand-pattern-horizontal.webp) 0 0 / 851px 48px repeat-x, var(--wp--preset--color--ruoho);
}

@media (min-width: 600px) {
	.wp-block-group.is-style-colour-bar {
		padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--md) var(--wp--preset--spacing--md) calc(90px + var(--wp--preset--spacing--md));
	}

	.wp-block-group.is-style-colour-bar::before {
		inset: 0 auto 0 0;
		width: 90px;
		height: auto;
		background: url(../images/brand-pattern-vertical.webp) 0 0 / 90px 612px repeat-y, var(--wp--preset--color--ruoho);
	}
}

.wp-block-group.is-style-colour-bar > :first-child {
	margin-block-start: 0;
}

.is-style-colour-bar + .is-style-colour-bar {
	margin-block-start: var(--wp--preset--spacing--md);
}

/* Separator: a 3px black line with 32px around it. */
.wp-block-separator,
.wp-block-separator.has-alpha-channel-opacity {
	border: 0;
	border-top: var(--wp--custom--border--thick) solid currentColor;
	opacity: 1;
	margin-block: var(--wp--preset--spacing--md);
}

/* Quote: asterisk beside the text; pullquote adds 3px rules above and below. */
.wp-block-quote,
.wp-block-pullquote {
	--mikkeli-icon: url(../icons/asterisk.svg);
	display: grid;
	grid-template-columns: 48px 1fr;
	column-gap: var(--wp--custom--grid--gutter);
	border: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--medium);
	text-align: left;
}

.wp-block-quote::before,
.wp-block-pullquote::before {
	content: "";
	grid-row: 1 / span 10;
	width: 48px;
	height: 48px;
	background-color: currentColor;
	mask: var(--mikkeli-icon) center / contain no-repeat;
}

.wp-block-quote > *,
.wp-block-pullquote > * {
	grid-column: 2;
}

.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
}

.wp-block-pullquote {
	border-block: var(--wp--custom--border--thick) solid var(--wp--preset--color--black);
	padding-block: var(--wp--preset--spacing--lg);
}

.wp-block-pullquote blockquote {
	margin: 0;
}

.wp-block-pullquote p {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 500;
	line-height: 1.1;
}

.wp-block-pullquote cite {
	font-size: var(--wp--preset--font-size--medium);
}

@media (max-width: 599px) {
	.wp-block-quote,
	.wp-block-pullquote {
		grid-template-columns: 1fr;
		row-gap: var(--wp--custom--grid--gutter);
	}

	.wp-block-quote::before,
	.wp-block-pullquote::before {
		grid-row: auto;
	}

	.wp-block-quote > *,
	.wp-block-pullquote > * {
		grid-column: 1;
	}
}

/* Details: an arrow before the summary (Blocks › Details). */
.wp-block-details summary {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2-xs);
	list-style: none;
	cursor: pointer;
	font-weight: 700;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::before {
	--mikkeli-icon: url(../icons/arrow-forward.svg);
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	mask: var(--mikkeli-icon) center / contain no-repeat;
}

.wp-block-details[open] > summary::before {
	--mikkeli-icon: url(../icons/arrow-downward.svg);
}

.wp-block-details > :not(summary) {
	font-size: var(--wp--preset--font-size--medium);
}

/* Accordion: bordered items with add/close before the heading (Blocks › Accordion). */
.wp-block-accordion-item {
	border-bottom: var(--wp--custom--border--regular) solid var(--wp--preset--color--black);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
}

.wp-block-accordion > .wp-block-accordion-item {
	margin-block: 0;
}

.wp-block-accordion-heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-5);
	line-height: 1.2;
}

.wp-block-accordion-heading__toggle {
	gap: var(--wp--preset--spacing--xs);
	padding-block: var(--wp--preset--spacing--2-xs);
}

.wp-block-accordion-heading__toggle::before {
	--mikkeli-icon: url(../icons/add.svg);
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	background-color: currentColor;
	mask: var(--mikkeli-icon) center / contain no-repeat;
}

/* The toggle's own state, so a closed accordion inside an open one keeps its add icon. */
.wp-block-accordion-heading__toggle[aria-expanded="true"]::before {
	--mikkeli-icon: url(../icons/close.svg);
}

.wp-block-accordion-heading__toggle-icon {
	display: none;
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration-thickness: var(--wp--custom--border--regular);
	text-underline-offset: 0.2em;
}

.wp-block-accordion-panel {
	padding-block-start: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--medium);
}

/* Breadcrumbs: chevrons between the levels (Blocks › Breadcrumbs). */
.wp-block-breadcrumbs {
	padding-block: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-breadcrumbs ol {
	gap: var(--wp--preset--spacing--2-xs);
}

.wp-block-breadcrumbs li {
	gap: var(--wp--preset--spacing--2-xs);
}

.wp-block-breadcrumbs li:not(:last-child)::after {
	--mikkeli-icon: url(../icons/chevron-forward.svg);
	content: "";
	width: 24px;
	height: 24px;
	margin: 0;
	opacity: 1;
	background-color: currentColor;
	mask: var(--mikkeli-icon) center / contain no-repeat;
}

.wp-block-breadcrumbs a {
	text-decoration: none;
}

.wp-block-breadcrumbs a:hover {
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--border--regular);
}

/* Table: 1.5px black borders, black header row. */
.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table :where(th, td) {
	border: var(--wp--custom--border--regular) solid var(--wp--preset--color--black);
	padding: var(--wp--preset--spacing--xs);
	text-align: left;
	vertical-align: top;
}

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

.wp-block-table th {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--h-6);
	font-weight: 500;
}

/* Links in header cells take the cells' white text: the link colour is 1.4:1 on black. */
.wp-block-table th a {
	color: inherit;
}

.wp-block-table tfoot {
	border-top: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

/* Form fields and search (Blocks › Form fields, Search). */
:where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea),
.wp-block-search__input {
	border: var(--wp--custom--border--regular) solid var(--wp--preset--color--black);
	border-radius: 0;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--terva-15);
	padding: calc(8px - var(--wp--custom--border--regular)) calc(16px - var(--wp--custom--border--regular));
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

:where(input, select, textarea):hover,
.wp-block-search__input:hover {
	background-color: var(--wp--preset--color--saimaa);
}

:where(input, select, textarea):focus,
.wp-block-search__input:focus {
	background-color: var(--wp--preset--color--aurinko);
}

:where(input, select, textarea):disabled {
	border-color: var(--wp--preset--color--kallio-light);
	background-color: var(--wp--preset--color--grey-91);
}

.wp-block-search__inside-wrapper {
	gap: 0;
}

.wp-block-search__label {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

/* Post lists (Blocks › Post template, Misc atoms › Label). */
.wp-block-post-date {
	text-transform: uppercase;
}

.wp-block-post-terms a {
	display: inline-block;
	padding: var(--wp--preset--spacing--3-xs) var(--wp--preset--spacing--2-xs);
	background-color: var(--wp--preset--color--kallio-90);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	text-transform: uppercase;
}

.wp-block-post-terms__separator {
	display: inline-block;
	width: var(--wp--preset--spacing--2-xs);
	overflow: hidden;
	color: transparent;
}

.wp-block-post-template .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.5;
}

.wp-block-post-template .wp-block-post-title a {
	text-decoration: underline;
}

.wp-block-post-template .wp-block-post-excerpt {
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-query-pagination {
	gap: var(--wp--preset--spacing--lg);
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	text-decoration: none;
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination .page-numbers.current {
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--border--regular);
}

/* Link list: links with an outward arrow, one per line. */
.is-style-links {
	--mikkeli-icon: url(../icons/arrow-outward.svg);
	--mikkeli-icon-size: 14px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	margin: 0;
	padding: 0;
	/* A zero-width marker instead of none: Safari drops a list's semantics with list-style: none. */
	list-style: "\200B";
}

.is-style-links a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3-xs);
	text-decoration: none;
}

.is-style-links a:hover {
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--border--regular);
}

/* Wide container for the header and footer rows: 1344px with the grid margins around it. */
.mikkeli-container {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--mikkeli-grid-margin));
	margin-inline: auto;
	padding-inline: var(--mikkeli-grid-margin);
}

/* Header (Näkymät › Proto navigaatio, "Sivuston navigaatio"). */
.mikkeli-header {
	position: relative;
	border-bottom: var(--wp--custom--border--thin) solid var(--wp--preset--color--kallio-80);
	background-color: var(--wp--preset--color--white);
}

.mikkeli-header > * {
	margin-block: 0;
}

.mikkeli-header__top {
	min-height: 80px;
	gap: var(--wp--preset--spacing--2-xs) var(--wp--custom--grid--gutter);
}

.mikkeli-header__logo {
	margin: 0;
	flex: none;
}

.mikkeli-header__logo img {
	display: block;
	width: 114px;
	height: auto;
}

.mikkeli-header__tools {
	gap: var(--wp--custom--grid--gutter);
	margin-inline-start: auto;
}

.mikkeli-header__utility {
	gap: var(--wp--custom--grid--gutter);
	font-size: var(--wp--preset--font-size--medium);
}

.mikkeli-header__utility a,
.mikkeli-header__main a {
	text-decoration: none;
}

/* Between 600 px and the desktop width, the utility links wrap below the logo, each on one line. */
.mikkeli-header__utility a {
	white-space: nowrap;
}

.mikkeli-header__utility a:hover,
.mikkeli-header__main a:hover {
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--border--regular);
	text-underline-offset: 0.3em;
}

.mikkeli-header__utility .mikkeli-icon-location > a {
	--mikkeli-icon: url(../icons/location-on.svg);
	--mikkeli-icon-size: 24px;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2-xs);
}

.mikkeli-header__utility .mikkeli-icon-location > a::before {
	content: "";
	width: var(--mikkeli-icon-size);
	height: var(--mikkeli-icon-size);
	background-color: currentColor;
	mask: var(--mikkeli-icon) center / contain no-repeat;
}

.mikkeli-header__search {
	margin: 0;
}

.mikkeli-header__search .wp-block-search__button {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--terva-10);
}

.mikkeli-header__search .wp-block-search__button svg {
	width: 24px;
	height: 24px;
}

.mikkeli-header__nav {
	min-height: 58px;
	padding-block: var(--wp--preset--spacing--2-xs);
}

.mikkeli-header__main {
	gap: var(--wp--custom--grid--gutter);
}

.mikkeli-header__main .wp-block-navigation__submenu-container {
	padding: var(--wp--preset--spacing--xs) 0;
	border: var(--wp--custom--border--thin) solid var(--wp--preset--color--kallio-80);
	font-size: var(--wp--preset--font-size--medium);
}

/* The design's submenu width, only when open: a closed submenu near the right edge would widen the page. */
.mikkeli-header__main.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	min-width: 285px;
}

/* A submenu that would not fit to the right of its item opens to the left (assets/js/navigation.js): a first-level
   one aligns with its item's right edge, a nested one opens beside its parent submenu instead of over it. */
.mikkeli-header__main.wp-block-navigation .has-child > .mikkeli-submenu-end {
	right: 0;
	left: auto;
}

.mikkeli-header__main.wp-block-navigation .wp-block-navigation__submenu-container .has-child > .mikkeli-submenu-end {
	right: 100%;
	left: auto;
}

/* A nested submenu with room on neither side opens inside its parent submenu, below its item. Below 782 px, where
   core does not open nested submenus to the side but over the items that follow, every nested submenu does. */
.mikkeli-header__main.wp-block-navigation .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container.mikkeli-submenu-stacked {
	position: static;
	min-width: 0;
	padding-block: 0;
	padding-inline-start: var(--wp--preset--spacing--sm);
	border: 0;
}

@media (max-width: 781px) {
	.mikkeli-header__main.wp-block-navigation .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-submenu__toggle ~ .wp-block-navigation__submenu-container {
		position: static;
		min-width: 0;
		padding-block: 0;
		padding-inline-start: var(--wp--preset--spacing--sm);
		border: 0;
	}
}

.mikkeli-header__main .wp-block-navigation__submenu-container a {
	padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
}

/* Mobile header: logo and the menu button on one row (Näkymät › Etusivu, mobile). */
@media (max-width: 599px) {
	.mikkeli-header__top {
		min-height: 90px;
	}

	.mikkeli-header__logo img {
		width: 100px;
	}

	.mikkeli-header .mikkeli-header__tools {
		display: none;
	}

	.mikkeli-header .mikkeli-header__nav {
		position: absolute;
		top: 29px;
		right: var(--mikkeli-grid-margin);
		width: auto;
		min-height: 0;
		padding: 0;
	}

	.mikkeli-header__nav .wp-block-navigation__responsive-container-open svg {
		width: 32px;
		height: 32px;
	}
}

/* Footer (Block patterns › Footer). The focus outline is white here: marjapuuro is 2.1:1 on mustikka (D10). */
.mikkeli-footer {
	--wp--custom--focus--color: var(--wp--preset--color--white);
	padding-block: var(--wp--preset--spacing--xl);
	background-color: var(--wp--preset--color--mustikka);
}

.mikkeli-footer > .mikkeli-container > * + * {
	margin-block-start: var(--wp--preset--spacing--sm);
}

.mikkeli-footer,
.mikkeli-footer a,
.mikkeli-footer :where(h2, h3, p) {
	color: var(--wp--preset--color--white);
}

.mikkeli-footer__logo {
	margin: 0;
}

.mikkeli-footer__logo img {
	display: block;
	width: 113px;
	height: auto;
}

.mikkeli-footer__columns {
	gap: var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--small);
}

.mikkeli-footer__heading {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.mikkeli-footer__contact {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.mikkeli-footer .wp-block-separator {
	color: var(--wp--preset--color--white);
}

.mikkeli-footer__bottom {
	gap: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--small);
}

.mikkeli-footer__bottom p {
	margin: 0;
}

/* Footer menus: the link list's look on Navigation blocks. */
.mikkeli-footer__links {
	--mikkeli-icon: url(../icons/arrow-outward.svg);
	--mikkeli-icon-size: 14px;
	font-size: inherit;
}

.mikkeli-footer__links .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--xs);
}

.mikkeli-footer__legal .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--sm);
}

.mikkeli-footer__links .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3-xs);
	padding: 0;
	text-decoration: none;
}

.mikkeli-footer__links .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--border--regular);
}

.mikkeli-footer .wp-block-social-links {
	gap: var(--wp--preset--spacing--xs);
}

.mikkeli-footer .wp-block-social-links .wp-social-link {
	color: var(--wp--preset--color--white);
}

/* Main content area */
.mikkeli-main {
	padding-block: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
}

/* Front page (templates/front-page.html): the hero meets the header, and sections are 48px apart. */
.wp-site-blocks > .mikkeli-main--front {
	margin-block-start: 0;
	padding-block: 0 var(--wp--preset--spacing--lg);
}

.mikkeli-main--front .wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--lg);
}

/* Hero (patterns/hero.php): the title, then the image beside two columns of buttons. */
.mikkeli-hero {
	padding-block: var(--mikkeli-grid-margin);
}

.mikkeli-hero > * + * {
	margin-block-start: var(--wp--preset--spacing--lg);
}

/* The title's text is at most the content width; the wave fills the rest of the row where it fits. */
.mikkeli-hero__title {
	position: relative;
	margin-block: 0;
	padding-inline-end: max(0px, min(100%, var(--wp--style--global--wide-size)) - var(--wp--style--global--content-size));
}

@media (min-width: 1136px) {
	.mikkeli-hero__title::after {
		content: "";
		position: absolute;
		inset-inline-end: 0;
		bottom: 16px;
		width: 493px;
		height: 63px;
		background: url(../images/wave.svg) center / contain no-repeat;
	}
}

.mikkeli-hero__content {
	row-gap: var(--wp--preset--spacing--lg);
}

.mikkeli-hero__image {
	height: 100%;
	margin: 0;
}

.mikkeli-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Side by side, the buttons set the row's height and the image fills it. */
@media (min-width: 782px) {
	.mikkeli-hero__image {
		position: relative;
	}

	.mikkeli-hero__image img {
		position: absolute;
		inset: 0;
	}
}

.mikkeli-hero__links {
	gap: var(--wp--preset--spacing--sm);
}

.mikkeli-hero__links > .wp-block-buttons {
	flex: 1 1 200px;
	gap: var(--wp--preset--spacing--xs);
}

.mikkeli-hero .wp-block-button__link {
	width: 100%;
	justify-content: space-between;
}

.mikkeli-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	justify-content: flex-start;
}

/* Stacked below 782px, where the Columns block stacks: the image keeps the design's proportions. */
@media (max-width: 781px) {
	.mikkeli-hero__image img {
		aspect-ratio: 793 / 453;
	}
}

/* Below 600px (Näkymät › Etusivu, mobile, the export of 2026-11-10): the image, then the title at 65px with the mobile
   wave under it, then the buttons, 32px apart. The title stays first in the page's order; only its place on the screen
   moves, as the columns' contents are laid out around it. */
@media (max-width: 599px) {
	.mikkeli-hero {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--md);
	}

	.mikkeli-hero > * + * {
		margin-block-start: 0;
	}

	/* Two classes: WordPress's `body .is-layout-flex` would keep the columns a flex box. */
	.mikkeli-hero .mikkeli-hero__content,
	.mikkeli-hero__content > .wp-block-column {
		display: contents;
	}

	.mikkeli-hero .mikkeli-hero__title,
	.mikkeli-hero__image,
	.mikkeli-hero__links {
		width: 100%;
		margin-inline: 0 !important;
	}

	.mikkeli-hero__image {
		order: 1;
	}

	/* The design's mobile size; important, as the preset's class is. */
	.mikkeli-hero .mikkeli-hero__title {
		order: 2;
		font-size: 65px !important;
		line-height: 1.1;
	}

	.mikkeli-hero__title::after {
		content: "";
		display: block;
		height: 29px;
		margin-block-start: var(--wp--preset--spacing--sm);
		background: url(../images/wave-mobile.svg) left center / contain no-repeat;
	}

	.mikkeli-hero__links {
		order: 3;
	}

	.mikkeli-hero__image img {
		aspect-ratio: 347 / 445;
	}
}

/* News (patterns/news.php, Näkymät › Uutiset ja kuulutukset › Uutiset): kallio-96, 32px above and 48px below. */
.mikkeli-news {
	padding-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
}

.mikkeli-news > * + * {
	margin-block-start: var(--wp--preset--spacing--md);
}

/* The heading looks like the design's active tab, at the start of the wide column. */
.mikkeli-news > .mikkeli-news__heading {
	width: fit-content;
	margin-inline: max(0px, (100% - var(--wp--style--global--wide-size)) / 2) auto !important;
	margin-block-start: 0;
	padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xs);
	border-bottom: var(--wp--custom--border--thick) solid currentColor;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.5;
}

.mikkeli-news .wp-block-post-template {
	column-gap: var(--wp--custom--grid--gutter);
	row-gap: var(--wp--preset--spacing--md);
}

.mikkeli-news .wp-block-post > * {
	margin-block: 0;
}

.mikkeli-news .wp-block-post > * + * {
	margin-block-start: var(--wp--preset--spacing--xs);
}

.mikkeli-news__date {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
}

.mikkeli-news .mikkeli-news__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.5;
}

.mikkeli-news .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* The three more: a row under a 1px rule, without their excerpts. */
.mikkeli-news__more {
	padding-block: var(--wp--preset--spacing--sm);
	border-top: var(--wp--custom--border--thin) solid var(--wp--preset--color--black);
}

.mikkeli-news__more .wp-block-post-excerpt {
	display: none;
}

/* Below 600px (Näkymät › Etusivu, mobile): white, the highlights a row of one at a time, the three more a list with
   their excerpts between rules, and the link to all news full width. */
@media (max-width: 599px) {
	.mikkeli-news.has-background {
		background-color: var(--wp--preset--color--white) !important;
	}

	.mikkeli-news .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.mikkeli-carousel .wp-block-post-template {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
	}

	.mikkeli-carousel .wp-block-post-template > li {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}

	.mikkeli-news__more {
		border-bottom: var(--wp--custom--border--thin) solid var(--wp--preset--color--black);
	}

	.mikkeli-news__more .wp-block-post-template {
		row-gap: var(--wp--preset--spacing--sm);
	}

	.mikkeli-news__more .wp-block-post-excerpt {
		display: block;
	}

	.mikkeli-news__all .wp-block-button {
		width: 100%;
	}

	.mikkeli-news__all .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* The row's previous and next buttons (assets/js/carousel.js): 40px outline buttons with arrows, only below 600px. */
.mikkeli-carousel__controls {
	display: none;
}

@media (max-width: 599px) {
	.mikkeli-carousel__controls {
		display: flex;
		justify-content: flex-end;
		gap: var(--wp--preset--spacing--xs);
		margin-block-start: var(--wp--preset--spacing--sm);
	}
}

.mikkeli-carousel__controls button {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: var(--wp--custom--border--regular) solid var(--wp--preset--color--terva-10);
	background: transparent;
	color: var(--wp--preset--color--terva-15);
	cursor: pointer;
}

.mikkeli-carousel__controls button::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: currentColor;
	mask: url(../icons/arrow-forward.svg) center / contain no-repeat;
}

.mikkeli-carousel__previous::before {
	transform: scaleX(-1);
}

.mikkeli-carousel__controls button:hover {
	background-color: var(--wp--preset--color--saimaa);
}

.mikkeli-carousel__controls button[aria-disabled="true"] {
	border-color: var(--wp--preset--color--grey-46);
	color: var(--wp--preset--color--grey-46);
	cursor: default;
	background: transparent;
}

/* News and announcements tabs (patterns/news-announcements.php, Näkymät › Uutiset ja kuulutukset › Uutisvälilehdet):
   the core Tabs block; the selected tab is underlined with 3px, as the news heading is. */
.mikkeli-news__tabs .wp-block-tab-list {
	gap: 0;
}

.mikkeli-news__tabs .wp-block-tab-list button {
	padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

.mikkeli-news__tabs .wp-block-tab-list button[aria-selected="true"]::before {
	border-bottom-width: var(--wp--custom--border--thick);
}

.mikkeli-news__tabs .wp-block-tab-list button:hover {
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--border--medium);
	text-underline-offset: 0.2em;
}

.mikkeli-news__tabs .wp-block-tab-panel {
	margin-block-start: var(--wp--preset--spacing--md);
}

.mikkeli-news__tabs .wp-block-tab-panel > * + * {
	margin-block-start: var(--wp--preset--spacing--md);
}

/* Lists from other services (mikkeli-www-blocks, docs/external-lists-design.md D6): their items' dates and titles look
   like the news list's; the button to all of them follows the list. */
.mikkeli-www-list__items {
	margin: 0;
	padding: 0;
	/* A zero-width marker instead of none: Safari drops a list's semantics with list-style: none. */
	list-style: "\200B";
}

.mikkeli-www-list__item {
	display: flex;
	flex-direction: column;
}

.mikkeli-www-list__date,
.mikkeli-www-list__meta {
	font-size: var(--wp--preset--font-size--small);
}

.mikkeli-www-list__date {
	text-transform: uppercase;
}

.mikkeli-www-list__title {
	font-size: var(--wp--preset--font-size--large);
}

.mikkeli-www-list__empty {
	margin: 0;
}

.mikkeli-www-list__all {
	margin-block-start: var(--wp--preset--spacing--md);
}

/* Announcements (Näkymät › Uutiset ja kuulutukset › Kuulutukset): a column of dates and titles, 24px apart, and the
   button to all of them at the right, as the news'. */
.mikkeli-news__tabs .mikkeli-www-list__items {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	padding-block: var(--wp--preset--spacing--sm);
}

.mikkeli-news__tabs .mikkeli-www-list__item {
	gap: var(--wp--preset--spacing--xs);
}

.mikkeli-news__tabs .mikkeli-www-list__all {
	display: flex;
	justify-content: flex-end;
}

/* Open jobs (Näkymät › Etusivu › Avoimet työpaikat): three to a row, each its title and below it its employment type
   and task area; one to a row below 600px. */
.mikkeli-jobs .mikkeli-www-list__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--grid--gutter);
	padding-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--2-xs);
}

.mikkeli-jobs .mikkeli-www-list__item {
	gap: var(--wp--preset--spacing--3-xs);
}

@media (max-width: 781px) {
	.mikkeli-jobs .mikkeli-www-list__items {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 599px) {
	.mikkeli-news__tabs .mikkeli-www-list__all .wp-block-button,
	.mikkeli-news__tabs .mikkeli-www-list__all .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* Events (patterns/events.php, Näkymät › Etusivu › Tapahtumakalenteri): the heading and lead, then Mikkeli.nyt's
   widget with its own look. */
.mikkeli-events > * + * {
	margin-block-start: var(--wp--preset--spacing--sm);
}

.mikkeli-events > .wp-block-mikkeli-www-mikkelinyt-events {
	margin-block-start: var(--wp--preset--spacing--md);
}

/* The page colour (inc/page-colour.php, docs/internal-pages-design.md D8, D13): the preset Sivun väri is the internal
   page's colour, saimaa 2 elsewhere. The theme page's news and events sections keep saimaa 2 whatever it is. */
.mikkeli-page-colour-ruoho-2 {
	--wp--preset--color--sivun-vari: var(--wp--preset--color--ruoho-2);
}

.mikkeli-page-colour-kerkka-2 {
	--wp--preset--color--sivun-vari: var(--wp--preset--color--kerkka-2);
}

.mikkeli-page-colour-orvokki-2 {
	--wp--preset--color--sivun-vari: var(--wp--preset--color--orvokki-2);
}

.mikkeli-theme-section {
	padding-block: var(--wp--preset--spacing--lg);
	background-color: var(--wp--preset--color--saimaa-2);
}

/* Internal pages (docs/internal-pages-design.md D2, D12): the breadcrumbs at the wide width. */
.mikkeli-main > .wp-block-breadcrumbs {
	margin-block-end: var(--wp--preset--spacing--sm);
}

/* Content page (templates/page.html; Näkymät › asiointisivu, Museoinfo): from 1136px the section page tree, 312px
   with its 24px inside, at the left of the content, 48px apart; below, after the content. A page without a tree, at
   the top level, has the content alone. */
.mikkeli-page-layout {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
}

.mikkeli-page-layout__content > .wp-block-post-title {
	margin-block-end: var(--wp--preset--spacing--md);
}

@media (min-width: 1136px) {
	.mikkeli-page-layout:has(> .mikkeli-page-layout__tree) {
		grid-template-columns: 312px minmax(0, 1fr);
	}

	.mikkeli-page-layout > .mikkeli-page-layout__tree {
		grid-row: 1;
		grid-column: 1;
		padding-inline-end: var(--wp--preset--spacing--sm);
	}

	.mikkeli-page-layout:has(> .mikkeli-page-layout__tree) > .mikkeli-page-layout__content {
		grid-column: 2;
	}
}

/* Wide pages (templates/page-wide.html; Näkymät › Kansisivu, alateemasivu, palvelukokonaisuuden sivu, hakemistosivu):
   the content's sections are 48px apart, and a theme section meets the footer. */
.mikkeli-main--wide .wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--lg);
}

.mikkeli-main--wide .wp-block-post-content > .mikkeli-theme-section + .mikkeli-theme-section {
	margin-block-start: 0;
}

.mikkeli-main--wide:has(.wp-block-post-content > .mikkeli-theme-section:last-child) {
	padding-block-end: 0;
}

/* Internal heroes (patterns/page-hero.php, page-hero-links.php; Blocks › Hero - text, Hero - text + ctas): the
   featured image and, beside it, the title and lead on Sivun väri in mustikka −1, 48px and 32px inside; on the theme
   page the frequently searched pages in a second box below, 24px apart. Below 782px they stack, as core's columns do. */
.mikkeli-page-hero {
	gap: var(--wp--custom--grid--gutter);
}

.mikkeli-page-hero__image,
.mikkeli-page-hero__image img {
	width: 100%;
	height: 100%;
}

.mikkeli-page-hero__image img {
	object-fit: cover;
}

.mikkeli-page-hero__boxes {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--grid--gutter);
}

.mikkeli-page-hero__box {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--mustikka-minus-1);
}

.mikkeli-page-hero__box > * {
	margin: 0;
}

.mikkeli-page-hero .wp-block-post-title,
.mikkeli-page-hero__links-heading {
	color: inherit;
}

.mikkeli-page-hero .wp-block-post-title {
	font-size: var(--wp--preset--font-size--h-1);
}

.mikkeli-page-hero__lead {
	font-size: var(--wp--preset--font-size--x-large);
}

.mikkeli-page-hero__links {
	flex: none;
	padding: var(--wp--preset--spacing--md);
}

.mikkeli-page-hero__links-heading {
	font-size: var(--wp--preset--font-size--h-5);
}

.mikkeli-page-hero__links .wp-block-buttons {
	gap: var(--wp--preset--spacing--xs);
}

/* Theme news (patterns/theme-news.php, Näkymät › Kansisivu › Uutiset): the heading and the button to the news list on
   one row, then three cards. */
.mikkeli-theme-news__header {
	margin-block-end: var(--wp--preset--spacing--md);
}

.mikkeli-theme-news__header > .wp-block-heading {
	margin: 0;
}

@media (max-width: 781px) {
	.mikkeli-theme-news__items .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* In the editor: a block whose background the page colour doesn't allow (assets/js/page-colour.js). */
.mikkeli-page-colour-outside {
	outline: var(--wp--custom--border--thick) dashed var(--wp--preset--color--marjapuuro);
	outline-offset: 2px;
}

/* Subpage navigation (mikkeli-www-blocks' Alasivut, docs/internal-pages-design.md D5): the page's subpages in its
   block style. */
.mikkeli-www-subpages__items,
.mikkeli-www-subpages__children,
.mikkeli-www-section-tree__items {
	margin: 0;
	padding: 0;
	list-style: "\200B";
}

.mikkeli-www-subpages__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-6);
	line-height: 1.3;
}

/* Avautuvat kortit, the default style (Blocks › Category expanding navigation; Näkymät › Kansisivu, alateemasivu):
   three to a row, two from 600px, one below. A card is kallio 96 with its image at 16:9, then its title and the
   button that opens the links to its subpages, pressed (aurinko) while they show. */
.mikkeli-www-subpages:not(.is-style-buttons, .is-style-list) > .mikkeli-www-subpages__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: var(--wp--custom--grid--gutter);
}

.mikkeli-www-subpages__card {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--kallio-96);
}

.mikkeli-www-subpages__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.mikkeli-www-subpages__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2-xs);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
}

.mikkeli-www-subpages__toggle {
	--mikkeli-icon: url(../icons/arrow-forward.svg);
	--mikkeli-icon-size: 24px;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--wp--preset--color--terva-15);
	cursor: pointer;
}

.mikkeli-www-subpages__toggle:hover {
	background-color: var(--wp--preset--color--saimaa);
}

.mikkeli-www-subpages__toggle[aria-expanded="true"],
.mikkeli-www-subpages__toggle:active {
	background-color: var(--wp--preset--color--aurinko);
}

.mikkeli-www-subpages__children {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	padding: 0 var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--large);
}

.mikkeli-www-subpages__children[hidden] {
	display: none;
}

/* Painikkeet (Näkymät › palvelukokonaisuuden sivu): large buttons, two to a row, one below 600px. */
.mikkeli-www-subpages.is-style-buttons > .mikkeli-www-subpages__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--custom--grid--gutter);
}

.mikkeli-www-subpages.is-style-buttons .wp-block-button__link {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}

/* Lista (Näkymät › hakemistosivu): each subpage's title, summary and button, 32px apart. */
.mikkeli-www-subpages.is-style-list > .mikkeli-www-subpages__items {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
}

.mikkeli-www-subpages__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--2-xs);
}

.mikkeli-www-subpages__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

@media (max-width: 1135px) {
	.mikkeli-www-subpages:not(.is-style-buttons, .is-style-list) > .mikkeli-www-subpages__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.mikkeli-www-subpages:not(.is-style-list) > .mikkeli-www-subpages__items {
		grid-template-columns: 1fr;
	}
}

/* Section page tree (mikkeli-www-blocks' Osion sivupuu, Näkymät › asiointisivu, Museoinfo › Osion koko sivupuu,
   docs/internal-pages-design.md D14): the parent's title, then its subpages as rows between kallio 80 lines; the
   current page is kallio 96 with a mustikka bar. */
.mikkeli-www-section-tree__heading {
	margin: 0;
	padding-block-end: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--h-6);
	line-height: 1.3;
}

.mikkeli-www-section-tree__items {
	border-block-start: var(--wp--custom--border--thin) solid var(--wp--preset--color--kallio-80);
}

.mikkeli-www-section-tree__item {
	border-block-end: var(--wp--custom--border--thin) solid var(--wp--preset--color--kallio-80);
}

.mikkeli-www-section-tree__item > a {
	display: block;
	padding: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--terva-15);
	text-decoration: none;
}

.mikkeli-www-section-tree__item > a:hover {
	text-decoration: underline;
}

.mikkeli-www-section-tree__item.is-current > a {
	padding-inline-start: calc(var(--wp--preset--spacing--xs) - 4px);
	border-inline-start: 4px solid var(--wp--preset--color--mustikka);
	background-color: var(--wp--preset--color--kallio-96);
}