/*
 * What theme.json can't express: effects, motion and the theme's block
 * styles (registered in functions.php). Colours, fonts and sizes come from
 * the presets, so they follow Global Styles.
 */

:root {

	/* Native scrollbars and form controls match the dark design. */
	color-scheme: dark;
	--waasamc-line: var(--wp--custom--hairline);
	--waasamc-bone-15: color-mix(in srgb, var(--wp--preset--color--bone) 15%, transparent);
	--waasamc-bone-40: color-mix(in srgb, var(--wp--preset--color--bone) 40%, transparent);
}

@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}

::selection {
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--asphalt);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Header, main and footer sit flush; sections bring their own spacing. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Film grain over everything, purely decorative. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 50;
	pointer-events: none;
	opacity: 0.06;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Outlined text (the "Ääriviiva" format). */
.is-outline {
	color: transparent;
	-webkit-text-stroke: 2px var(--wp--preset--color--bone);
}

.is-style-glow-bottom .is-outline {
	-webkit-text-stroke-color: var(--wp--preset--color--signal);
}

/* ---- Text styles ---- */

.is-style-eyebrow,
.is-style-eyebrow-line {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
}

.is-style-eyebrow-line {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-weight: 500;
}

.is-style-eyebrow-line::before {
	content: "";
	flex: none;
	width: 2.5rem;
	height: 1px;
	background: currentcolor;
}

/* ---- Wrapping ---- */

/*
 * Headings break into even lines; a word that can't fit breaks with a hyphen
 * (the page is lang="fi").
 */
:is(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
	hyphens: auto;
}

/* Running text avoids a single word on its last line. */
:is(p, li, blockquote, figcaption, dd) {
	text-wrap: pretty;
}

.is-style-label {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--wp--preset--color--bone-muted);
}

/* ---- Cards ---- */

.is-style-card-glass,
.is-style-card-highlight {
	position: relative;
	padding: 1.25rem;
	border: 1px solid var(--waasamc-bone-15);
	border-radius: var(--wp--preset--border-radius--card);
	background: color-mix(in srgb, var(--wp--preset--color--tarmac) 70%, transparent);
	backdrop-filter: blur(8px);
	transition: border-color 0.15s;
}

.is-style-card-highlight {
	border-color: color-mix(in srgb, var(--wp--preset--color--signal) 40%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--signal) 10%, transparent);
}

.is-style-card-highlight .is-style-label {
	color: var(--wp--preset--color--signal);
}

.is-style-card {
	position: relative;
	padding: 2rem;
	border: 1px solid var(--waasamc-line);
	border-radius: var(--wp--preset--border-radius--card-large);
	transition: border-color 0.15s, background-color 0.15s;
}

@media (min-width: 640px) {

	.is-style-card {
		padding: 2.5rem;
	}
}

:is(.is-style-card-glass, .is-style-card-highlight) > * + * {
	margin-block-start: 0.5rem;
}

:is(.is-style-card-glass, .is-style-card-highlight) > * + :last-child:not(:nth-child(2)) {
	margin-block-start: 0.25rem;
}

/* A card holding a post links as a whole; its title link stretches over it. */
:is(.is-style-card, .is-style-card-glass) .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.is-style-card-glass:has(.wp-block-post-title a:is(:hover, :focus-visible)) {
	border-color: var(--waasamc-bone-40);
}

.is-style-card:has(.wp-block-post-title a:is(:hover, :focus-visible)) {
	border-color: color-mix(in srgb, var(--wp--preset--color--signal) 60%, transparent);
	background: var(--wp--preset--color--tarmac);
}

.is-style-card:has(.wp-block-post-title a:is(:hover, :focus-visible)) .wp-block-post-title a {
	color: var(--wp--preset--color--signal);
}

.is-style-card-glass .wp-block-read-more {
	display: inline-block;
	padding-block: 0.5rem; /* A big enough target to tap. */
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--wp--preset--color--bone) 60%, transparent);
	transition: color 0.15s;
}

.is-style-card-glass:has(a:is(:hover, :focus-visible)) .wp-block-read-more {
	color: var(--wp--preset--color--bone);
}

.wp-block-post-title a {
	color: inherit;
}

/* ---- Hero ---- */

.is-style-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	overflow: hidden;
}

.is-style-hero > :first-child {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
}

/* Flex items would shrink to their content; keep the layout's width. */
.is-style-hero > :first-child > * {
	width: 100%;
}

/* Headlight glow. */
.is-style-hero::before,
.is-style-glow-bottom::before {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(140px);
}

.is-style-hero::before {
	top: -10rem;
	right: -20%;
	width: 70vmax;
	height: 70vmax;
	background: color-mix(in srgb, var(--wp--preset--color--signal) 20%, transparent);
}

.is-style-glow-bottom {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.is-style-glow-bottom::before {
	bottom: -50%;
	left: 50%;
	width: 60vmax;
	height: 60vmax;
	transform: translateX(-50%);
	background: color-mix(in srgb, var(--wp--preset--color--signal) 15%, transparent);
}

/* WAASA / MC, with the intro next to MC on wider screens. */
.is-style-wordmark {
	position: relative;
}

.is-style-wordmark h1 {
	margin: 0;
	font-size: var(--wp--preset--font-size--wordmark);
	letter-spacing: -0.025em;
	line-height: 0.78;
}

.is-style-wordmark > .wp-block-group {
	display: none;
}

@media (min-width: 768px) {

	.is-style-wordmark > .wp-block-group {
		display: block;
		position: absolute;
		bottom: 2vw;

		/* Just past the MC: its width in the wordmark size, plus a gap. */
		left: calc(var(--wp--preset--font-size--wordmark) * 1.14 + 1.5rem);
		max-width: 20rem;
		margin: 0;
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.625;
		color: var(--wp--preset--color--bone-soft);
	}

	/* One sentence: the bound member count, then the rest. */
	.is-style-wordmark > .wp-block-group > p {
		display: inline;
		margin: 0;
	}

	/* The space between the parts (the editor has no whitespace between them). */
	.is-style-wordmark > .wp-block-group > p:first-child::after {
		content: " ";
	}
}

/* Road: dashed centre line rolling towards you. */
.is-style-road {
	position: relative;
	flex: none;
	height: 4rem;
	margin: 0 !important;
	border-block: 1px solid var(--waasamc-line);
	background: var(--wp--preset--color--tarmac);
}

.is-style-road::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 0.375rem;
	transform: translateY(-50%);
	opacity: 0.8;
	background: linear-gradient(90deg, var(--wp--preset--color--bone) 0 32px, transparent 32px 64px) 0 0 / 64px 100%;
	animation: waasamc-road 0.9s linear infinite;
}

@keyframes waasamc-road {

	to {
		background-position-x: -64px;
	}
}

/* ---- Ticker ---- */

.wp-block-group:has(> .is-style-marquee) {
	overflow: hidden;
}

.is-style-marquee {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: waasamc-marquee 45s linear infinite;
}

/*
 * Spacing on the items rather than a gap, so the doubled list is exactly
 * twice as wide and loops seamlessly.
 */
.is-style-marquee li {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	padding-inline-end: 2.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-medium);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	white-space: nowrap;
	color: color-mix(in srgb, var(--wp--preset--color--bone) 80%, transparent);
}

.is-style-marquee li::after {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	transform: rotate(45deg);
	background: var(--wp--preset--color--signal);
}

/* The road and chevrons are empty on purpose: no editor placeholder. */
.editor-styles-wrapper :is(.is-style-road, .is-style-chevrons) > * {
	display: none;
}

/*
 * In the editor each item is there once (the copy is added on the site),
 * so instead of looping the row drifts to its last item and back.
 * Selected, it stands still and wraps, so its items can be edited.
 */
.editor-styles-wrapper .wp-block-group:has(> .is-style-marquee) {
	container-type: inline-size;
}

.editor-styles-wrapper .is-style-marquee {
	animation: none;
}

@media (prefers-reduced-motion: no-preference) {

	.editor-styles-wrapper .is-style-marquee {
		animation: waasamc-marquee-editor 30s ease-in-out infinite alternate;
	}
}

.editor-styles-wrapper .is-style-marquee:is(.is-selected, .has-child-selected, :focus-within) {
	flex-wrap: wrap;
	row-gap: 1rem;
	width: auto;
	animation: none;
}

@keyframes waasamc-marquee-editor {

	to {
		transform: translateX(min(0px, calc(100cqw - 100%)));
	}
}

.is-style-marquee:hover {
	animation-play-state: paused;
}

@keyframes waasamc-marquee {

	to {
		transform: translateX(-50%);
	}
}

/* ---- Chevrons, like a bend sign ---- */

.is-style-chevrons {
	height: 2.5rem;
	opacity: 0.25;
	background: var(--wp--preset--color--asphalt);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36.8 32'%3E%3Cpath d='M0 0h10l14 16-14 16H0l14-16z'/%3E%3C/svg%3E") 0 0 / auto 100% repeat-x;
}

/* ---- Key figures ---- */

.is-style-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--waasamc-line);
	border-radius: var(--wp--preset--border-radius--card);
	background: var(--waasamc-line);
	text-align: center;
}

.is-style-stats > * {
	margin: 0 !important;
	padding: 1.5rem 0.5rem;
	background: var(--wp--preset--color--asphalt);
}

.is-style-stats p {
	margin: 0;
}

.is-style-stats .is-style-label {
	letter-spacing: 0.2em;
}

/*
 * On phones the three tiles are too narrow for their words:
 * one row each, label left, figure right.
 */
@media (max-width: 480px) {

	.is-style-stats {
		grid-template-columns: 1fr;
		text-align: start;
	}

	.is-style-stats > * {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1rem 1.25rem;
	}

	.is-style-stats p:last-child {
		margin-top: 0 !important;
		font-size: 2rem !important;
	}
}

.is-style-stats p:last-child {
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}

/* ---- News as dated rows ---- */

.is-style-dated-rows {
	margin: 0;
	padding: 0;
	border-block: 1px solid var(--waasamc-line);
	list-style: none;
}

.is-style-dated-rows > li {
	position: relative;
	display: grid;
	grid-template-columns: 8.5rem 1fr auto; /* Fits a full date, "30.12.2026". */
	align-items: baseline;
	column-gap: 1.5rem;
	margin: 0 !important;
	padding-block: 1.25rem;
}

.is-style-dated-rows > li + li {
	border-top: 1px solid var(--waasamc-line);
}

.is-style-dated-rows .wp-block-post-date {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.875rem);
	font-weight: 900;
	letter-spacing: 0;
	text-transform: none;
}

.is-style-dated-rows .wp-block-post-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	transition: color 0.15s;
}

/* On phones the date goes above the title, which then has the width. */
@media (max-width: 599px) {

	.is-style-dated-rows > li {
		grid-template-columns: 1fr auto;
		row-gap: 0.25rem;
	}

	.is-style-dated-rows .wp-block-post-date {
		grid-column: 1 / -1;
		font-size: 1.25rem;
	}
}

.is-style-dated-rows .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.is-style-dated-rows li > p:last-child {
	margin: 0;
	color: var(--waasamc-bone-40);
	transition: color 0.15s, transform 0.15s;
}

.is-style-dated-rows > li:has(a:is(:hover, :focus-visible)) :is(.wp-block-post-title a, p:last-child) {
	color: var(--wp--preset--color--signal);
}

.is-style-dated-rows > li:has(a:is(:hover, :focus-visible)) p:last-child {
	transform: translateX(0.25rem);
}

@media (min-width: 640px) {

	.is-style-dated-rows > li {
		grid-template-columns: 8rem 1fr auto;
	}
}

/* ---- Header ---- */

.is-style-overlay {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 40;
}

.admin-bar .is-style-overlay {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.wp-block-site-logo img {
	border-radius: 50%;
}

header .is-style-label {
	display: none;
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	color: color-mix(in srgb, var(--wp--preset--color--bone) 60%, transparent);
}

@media (min-width: 640px) {

	header .is-style-label {
		display: block;
	}
}

header .wp-block-button__link {
	white-space: nowrap;
}

/* With the menu behind its button: logo left, Join and menu button right. */
@media (max-width: 1023px) {

	header .is-layout-flex > .wp-block-group:first-child {
		margin-right: auto;
	}
}

/* The phone menu: a dark panel of large links. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
	background: var(--wp--preset--color--tarmac) !important;
	color: var(--wp--preset--color--bone) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--waasamc-line);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-block: 1rem !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-small);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--bone);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--signal);
}

.wp-block-navigation__responsive-container-open {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--bone) 25%, transparent);
	border-radius: 50%;
	transition: border-color 0.15s;
}

.wp-block-navigation__responsive-container-open:hover {
	border-color: var(--wp--preset--color--bone);
}

/*
 * The close button looks like the menu button and takes its place: the
 * header's top padding plus half the difference between the logo (48px) and
 * the button (44px), at the page's side padding.
 */
.is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--30) + 2px);
	right: var(--wp--style--root--padding-right, 1.5rem);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--bone) 25%, transparent);
	border-radius: 50%;
	transition: border-color 0.15s;
}

.is-menu-open .wp-block-navigation__responsive-container-close:hover {
	border-color: var(--wp--preset--color--bone);
}

/* ---- Post content ---- */

.wp-block-post-content {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.75;
}

/* Headings within the text: a step below the page title, so long words fit. */
.wp-block-post-content h2 {
	font-size: var(--wp--preset--font-size--display-medium);
}

.wp-block-post-content h3 {
	font-size: var(--wp--preset--font-size--display-small);
}

.wp-block-post-content a:where(:not(.wp-element-button)) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wp-block-post-content img {
	border-radius: var(--wp--preset--border-radius--card);
}

.wp-block-post-featured-image img {
	border-radius: var(--wp--preset--border-radius--card-large);
}

/* ---- Odds and ends ---- */

.wp-block-quote {
	margin-inline: 0;
}

.wp-block-quote p {
	margin: 0;
}

.wp-block-buttons.is-style-large .wp-block-button__link {
	padding: 1rem 2rem;
	font-size: var(--wp--preset--font-size--large);
}

/*
 * Equal-height hero cards. The grid stretches each cell, but the news card
 * sits inside a query, its list and a post, so those fill the cell too.
 */
.is-style-hero .is-layout-grid > .wp-block-query,
.is-style-hero .is-layout-grid .wp-block-post-template,
.is-style-hero .is-layout-grid .wp-block-post-template > li {
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0;
}

.is-style-hero .is-layout-grid .wp-block-post-template > li > * {
	flex: 1;
}

/* Narrower than the content width, but still starting at its left edge. */
.is-style-hero .is-layout-constrained > .wp-block-group.is-layout-grid {
	max-width: 64rem;
	margin-left: max(0px, (100% - var(--wp--style--global--wide-size)) / 2) !important;
}

.is-style-card-glass .wp-block-post-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.waasamc-logo-fallback {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 2px solid currentcolor;
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 900;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--bone);
}

/* The menu button sits last, after Liity jäseneksi. */
@media (max-width: 1023px) {

	header .wp-block-navigation {
		order: 3;
	}
}

/* ---- Front page ---- */

/* The Etusivu page's own content, e.g. an announcement; nothing if empty. */
.waasamc-front-content:not(:empty) {
	padding-top: var(--wp--preset--spacing--70);
}

/* Anything iOS still detects (an address, a date) keeps the text's own look. */
a[x-apple-data-detectors] {
	color: inherit !important;
	font: inherit !important;
	text-decoration: none !important;
}

/* ---- Menu ---- */

/*
 * Core shows the full menu from 600px, but between the logo and the Join
 * button it only fits from 1024px: below that, it stays behind its button.
 */
@media (min-width: 600px) and (max-width: 1023px) {

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* ---- Comments ---- */

.waasamc-comments .wp-block-comment-template {
	margin: 2rem 0 0;
	padding: 0;
	border-top: 1px solid var(--waasamc-line);
	list-style: none;
}

.waasamc-comments .wp-block-comment-template li {
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--waasamc-line);
}

/* Replies, indented under their comment. */
.waasamc-comments .wp-block-comment-template ol {
	margin: 1.5rem 0 0 1.5rem;
	padding: 0;
	border-left: 2px solid var(--waasamc-line);
	list-style: none;
}

.waasamc-comments .wp-block-comment-template ol li {
	padding-left: 1.5rem;
	border-bottom: 0;
}

.waasamc-comments .wp-block-comment-author-name {
	font-weight: 600;
}

.waasamc-comments .wp-block-comment-date,
.waasamc-comments .comment-notes,
.waasamc-comments .logged-in-as {
	color: var(--wp--preset--color--bone-muted);
}

.waasamc-comments .wp-block-post-comments-form {
	margin-top: 2.5rem;
}

.waasamc-comments .comment-reply-title {
	font-size: var(--wp--preset--font-size--display-small);
}

.waasamc-comments .comment-form label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.waasamc-comments .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
}

.waasamc-comments .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
}

/* ---- 404 ---- */

.waasamc-404-art svg {
	display: block;
	width: 100%;
	max-width: 40rem;
	height: auto;
	margin-inline: auto;
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {

	.is-style-road::after,
	.is-style-marquee {
		animation: none;
	}

	/* Standing still, the ticker wraps and drops its looping copy. */
	.is-style-marquee {
		flex-wrap: wrap;
		row-gap: 1rem;
		width: auto;
	}

	.is-style-marquee li[aria-hidden] {
		display: none;
	}
}