/*
Theme Name: Ala-Kuolimo
Theme URI: https://alakuolimo.fi/
Author: Ala-Kuolimon osakaskunta
Author URI: https://alakuolimo.fi/
Description: Ala-Kuolimon osakaskunnan teema.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alakuolimo
Tags: blog
*/

/* ==========================================================================
   Sisällys
   1.  Muuttujat (värit, tyypografia, mitat)
   2.  Tumma tila
   3.  Perusta ja normalisointi
   4.  Tyypografia
   5.  Apuluokat ja asettelu
   6.  Yläpalkki ja navigaatio
   7.  Sisältöalue ja artikkelit
   8.  Sivutus ja artikkelinavigaatio
   9.  Sivupalkki ja vimpaimet
   10. Lomakkeet ja painikkeet
   11. Kommentit
   12. Kalastuslupa-nosto
   13. Alapalkki
   14. Lohkoeditorin sisältötyylit
   15. Tuloste ja liikkeen vähennys
   ========================================================================== */


/* 1. Muuttujat
   -------------------------------------------------------------------------- */

:root {
	/* Värit tulevat theme.jsonista, jotta editori ja etusivu pysyvät samassa
	   linjassa. Fallback-arvot varmistavat toiminnan, jos global styles on
	   poistettu käytöstä. */
	--ak-paper:    var(--wp--preset--color--paper,   #fbfaf7);
	--ak-surface:  var(--wp--preset--color--surface, #f3f0e9);
	--ak-ink:      var(--wp--preset--color--ink,     #16303d);
	--ak-muted:    var(--wp--preset--color--muted,   #5c6b73);
	--ak-accent:   var(--wp--preset--color--accent,  #1e7a8c);
	--ak-deep:     var(--wp--preset--color--deep,    #145966);
	--ak-rule:     var(--wp--preset--color--rule,    #e4e0d8);

	--ak-selection: rgba(30, 122, 140, 0.18);
	--ak-shadow:    0 1px 2px rgba(22, 48, 61, 0.04), 0 8px 24px -12px rgba(22, 48, 61, 0.14);
	--ak-shadow-lift: 0 2px 4px rgba(22, 48, 61, 0.05), 0 18px 40px -20px rgba(22, 48, 61, 0.28);

	--ak-font-sans:  var(--wp--preset--font-family--sans,  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif);
	--ak-font-serif: var(--wp--preset--font-family--serif, Newsreader, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif);
	--ak-font-mono:  var(--wp--preset--font-family--mono,  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

	/* Syvyyskäyrämotiivi: neljä käyrää 420 x 64 pikselin laatassa.
	   Laatta on tarkoituksella käyriä korkeampi (ylin harja 5,25, alin pohja
	   59,5), jotta viivat piirtyvät kokonaan eivätkä litisty reunaan.
	   Käyttökohteen korkeuden on siksi oltava vähintään --ak-contour-h.
	   Piirretään maskina, joten väri tulee paletista myös tummassa tilassa. */
	--ak-contour-w: 420px;
	--ak-contour-h: 64px;
	--ak-contours: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='420'%20height='64'%20viewBox='0%200%20420%2064'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-linecap='round'%3E%3Cpath%20stroke-width='1.5'%20d='M0%2014C70%203.3%20140%203.3%20210%2014%20280%2024.7%20350%2024.7%20420%2014'/%3E%3Cpath%20stroke-width='1'%20d='M0%2026C70%2014%20140%2014%20210%2026%20280%2038%20350%2038%20420%2026'/%3E%3Cpath%20stroke-width='1.5'%20d='M0%2038C70%2023.3%20140%2023.3%20210%2038%20280%2052.7%20350%2052.7%20420%2038'/%3E%3Cpath%20stroke-width='1'%20d='M0%2050C70%2038%20140%2038%20210%2050%20280%2062%20350%2062%20420%2050'/%3E%3C/g%3E%3C/svg%3E");

	/* Täytetty aalto: sivun ja alapalkin raja. Aallon yläpuoli on läpinäkyvä,
	   joten siinä näkyy sivun oma tausta. */
	--ak-wave-w: 420px;
	--ak-wave-h: 2.5rem;
	--ak-wave-fill: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='420'%20height='40'%20viewBox='0%200%20420%2040'%3E%3Cpath%20fill='black'%20d='M0%2016C70%204%20140%204%20210%2016%20280%2028%20350%2028%20420%2016L420%2040L0%2040Z'/%3E%3C/svg%3E");

	--ak-wrap:    76rem;   /* uloin leveys */
	--ak-cta-max: 50rem;   /* Kalastuslupa-noston enimmäisleveys (800 px) */
	--ak-measure: 68ch;    /* luettava rivinpituus leipätekstille */
	--ak-gutter:  clamp(1.25rem, 5vw, 3rem);

	--ak-space-xs: 0.5rem;
	--ak-space-s:  0.875rem;
	--ak-space-m:  1.5rem;
	--ak-space-l:  2.5rem;
	--ak-space-xl: clamp(3rem, 7vw, 5.5rem);

	--ak-radius: 4px;
}


/* 2. Tumma tila
   -------------------------------------------------------------------------- */

/* Ylikirjoitetaan theme.jsonin preset-muuttujat, jolloin myös editorista
   valitut väriluokat (.has-ink-color ym.) kääntyvät oikein. Kaksinkertainen
   :root nostaa tarkkuutta, jotta järjestys global stylesiin nähden ei haittaa. */
@media (prefers-color-scheme: dark) {
	:root:root {
		--wp--preset--color--paper:   #0f1e26;
		--wp--preset--color--surface: #162a33;
		--wp--preset--color--ink:     #e9ece9;
		--wp--preset--color--muted:   #a2b3bb;
		--wp--preset--color--accent:  #6cc3d5;
		--wp--preset--color--deep:    #9bd8e4;
		--wp--preset--color--rule:    #243a44;
	}

	:root:root {
		--ak-selection: rgba(108, 195, 213, 0.22);
		--ak-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
		--ak-shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 40px -18px rgba(0, 0, 0, 0.75);
		color-scheme: dark;
	}

	/* Kortit erottuvat taustasta vaaleammalla pinnalla, eivät varjolla. */
	.entry-card {
		background: var(--ak-surface);
	}

	/* Kuvat ja upotukset hiukan pehmeämmin kirkkaalla taustalla. */
	.entry-content img,
	.entry-content video {
		filter: brightness(0.94);
	}
}


/* 3. Perusta ja normalisointi
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--ak-paper);
	color: var(--ak-ink);
	font-family: var(--ak-font-sans);
	font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	line-height: 1.65;
	/* Interin suositeltu tiivistys leipätekstikoossa. */
	letter-spacing: -0.011em;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

::selection {
	background: var(--ak-selection);
}

img,
svg,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
	border-radius: var(--ak-radius);
}

figure {
	margin: 0;
}

hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--ak-rule);
	margin: var(--ak-space-l) 0;
	height: 0;
	opacity: 1;
}

.wp-block-separator.is-style-wide {
	max-width: none;
}


/* 4. Tyypografia
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ak-font-serif);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.015em;
	margin: 0 0 0.6em;
	text-wrap: balance;
	/* Newsreaderin opsz-akseli hoitaa hienosäädön: isot otsikot tiiviimmiksi,
	   pienet leveämmiksi. */
	font-optical-sizing: auto;
}

h1 { font-size: clamp(2.25rem, 1.55rem + 3vw, 3.75rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.625rem, 1.35rem + 1.25vw, 2.25rem); letter-spacing: -0.02em; }
h3 { font-size: clamp(1.25rem, 1.14rem + 0.55vw, 1.5rem); font-weight: 550; }
h4 { font-size: 1.125rem; font-weight: 600; }
h5,
h6 {
	font-family: var(--ak-font-sans);
	font-size: 0.875rem;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ak-muted);
}

p,
ul,
ol,
dl,
pre,
table,
blockquote,
figure {
	margin: 0 0 var(--ak-space-m);
}

* + h2 { margin-top: var(--ak-space-l); }
* + h3,
* + h4 { margin-top: var(--ak-space-m); }

a {
	color: var(--ak-deep);
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--ak-accent);
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--ak-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

strong,
b {
	font-weight: 650;
}

small {
	font-size: 0.875em;
}

ul,
ol {
	padding-left: 1.35em;
}

li + li {
	margin-top: 0.35em;
}

.entry-content li::marker {
	color: var(--ak-accent);
}

blockquote,
.wp-block-quote {
	border-left: 3px solid var(--ak-accent);
	padding: 0.15rem 0 0.15rem var(--ak-space-m);
	font-family: var(--ak-font-serif);
	font-size: 1.125em;
	color: var(--ak-ink);
}

blockquote cite,
.wp-block-quote cite {
	display: block;
	margin-top: var(--ak-space-xs);
	font-family: var(--ak-font-sans);
	font-size: 0.8125rem;
	font-style: normal;
	color: var(--ak-muted);
}

code,
kbd,
samp,
pre {
	font-family: var(--ak-font-mono);
	font-size: 0.9em;
}

code {
	background: var(--ak-surface);
	padding: 0.15em 0.4em;
	border-radius: 3px;
}

pre {
	background: var(--ak-surface);
	border: 1px solid var(--ak-rule);
	border-radius: var(--ak-radius);
	padding: var(--ak-space-m);
	overflow-x: auto;
}

pre code {
	background: none;
	padding: 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--ak-surface) 55%, transparent);
}

th,
td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--ak-rule);
	vertical-align: top;
}

thead th {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ak-muted);
	border-bottom-width: 2px;
}

figcaption,
.wp-element-caption,
.wp-caption-text {
	margin-top: var(--ak-space-xs);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ak-muted);
}


/* 5. Apuluokat ja asettelu
   -------------------------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: var(--ak-wrap);
	margin-inline: auto;
	padding-inline: var(--ak-gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 0;
	top: -100%;
	z-index: 100;
	background: var(--ak-ink);
	color: var(--ak-paper);
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	border-radius: 0 0 var(--ak-radius) 0;
}

.skip-link:focus {
	top: 0;
	color: var(--ak-paper);
}

.site-content {
	padding-block: var(--ak-space-xl);
}

.site-content > .wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ak-space-xl) clamp(2rem, 5vw, 4rem);
}

.has-sidebar .site-content > .wrap {
	align-items: start;
}

.content-area {
	min-width: 0;
}

@media (min-width: 62em) {
	.has-sidebar .site-content > .wrap {
		grid-template-columns: minmax(0, 1fr) 16rem;
	}
}

/* Leipätekstin luettava rivinpituus. Leveät lohkot saavat murtaa sen. */
.entry-content > *,
.page-header > *,
.entry-summary > * {
	max-width: var(--ak-measure);
}

.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > .wp-block-table,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-embed,
.entry-content > figure {
	max-width: none;
}

/* Kalastuslupa-nosto saa murtaa leipätekstin rivinpituuden, mutta ei levitä
   koko palstan mittaan: oma katto määritellään osiossa 12. */
.entry-content > .alakuolimo-cta {
	max-width: var(--ak-cta-max);
}

.alignwide {
	width: 100%;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.alignleft {
	float: left;
	margin: 0.35rem var(--ak-space-m) var(--ak-space-s) 0;
}

.alignright {
	float: right;
	margin: 0.35rem 0 var(--ak-space-s) var(--ak-space-m);
}

.aligncenter {
	margin-inline: auto;
}

.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

@media (max-width: 40em) {
	.alignleft,
	.alignright {
		float: none;
		margin-inline: 0;
	}

	.alignfull,
	.alignwide {
		width: auto;
		max-width: none;
		margin-inline: 0;
	}

	table {
		display: block;
		overflow-x: auto;
	}
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ak-accent);
	margin: 0 0 var(--ak-space-s);
}

.eyebrow::after {
	content: "";
	flex: 0 0 2.5rem;
	height: 1px;
	background: currentColor;
	opacity: 0.45;
}


/* 5b. Syvyyskäyrämotiivi
   --------------------------------------------------------------------------
   Motiivi piirretään maskilla, jotta väri tulee teeman muuttujista. Sitä
   käytetään osioiden erottimena, alapalkin ylälaidassa ja kuvattomien
   nostojen taustana. */

.contour {
	--ak-contour-color: var(--ak-rule);
	--ak-contour-height: 4rem;

	display: block;
	height: var(--ak-contour-height);
	background-color: var(--ak-contour-color);
	-webkit-mask-image: var(--ak-contours);
	mask-image: var(--ak-contours);
	/* Vain vaakatoisto: pystysuunnassa laatta ei saa pinota käyriä päällekkäin. */
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-position: left center;
	mask-position: left center;
	-webkit-mask-size: var(--ak-contour-w) var(--ak-contour-h);
	mask-size: var(--ak-contour-w) var(--ak-contour-h);
	pointer-events: none;
}

/* Häivytetty versio: viivat vaimenevat oikealle. Vaatii maskien yhdistämisen;
   vanhemmissa selaimissa näytetään tasainen käyrästö, mikä on myös siisti. */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {

.contour--fade {
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	-webkit-mask-image: var(--ak-contours), linear-gradient(to right, #000 0%, #000 45%, transparent 98%);
	mask-image: var(--ak-contours), linear-gradient(to right, #000 0%, #000 45%, transparent 98%);
	-webkit-mask-repeat: repeat-x, no-repeat;
	mask-repeat: repeat-x, no-repeat;
	-webkit-mask-position: left center, left center;
	mask-position: left center, left center;
	-webkit-mask-size: var(--ak-contour-w) var(--ak-contour-h), 100% 100%;
	mask-size: var(--ak-contour-w) var(--ak-contour-h), 100% 100%;
}

}

/* Erotinlohkon tyylivaihtoehto "Syvyyskäyrät". */
.wp-block-separator.is-style-contours,
hr.is-style-contours {
	border: 0;
	height: 4rem;
	max-width: none;
	background-color: var(--ak-rule);
	-webkit-mask-image: var(--ak-contours);
	mask-image: var(--ak-contours);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-position: left center;
	mask-position: left center;
	-webkit-mask-size: var(--ak-contour-w) var(--ak-contour-h);
	mask-size: var(--ak-contour-w) var(--ak-contour-h);
	margin-block: var(--ak-space-l);
}


/* 6. Yläpalkki ja navigaatio
   -------------------------------------------------------------------------- */

.site-header {
	border-top: 3px solid var(--ak-accent);
	border-bottom: 1px solid var(--ak-rule);
	background: var(--ak-paper);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ak-space-m);
	min-height: 4.75rem;
	padding-block: var(--ak-space-s);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-width: 0;
}

.site-branding__text {
	min-width: 0;
}

.site-branding img,
.custom-logo {
	max-height: 3.25rem;
	width: auto;
}

.site-title {
	font-family: var(--ak-font-serif);
	font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0;
}

.site-title a {
	color: var(--ak-ink);
	text-decoration: none;
}

.site-title a:hover {
	color: var(--ak-accent);
}

.site-description {
	margin: 0.15rem 0 0;
	font-size: 0.8125rem;
	color: var(--ak-muted);
}

/* Valikko */
.primary-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav li {
	margin: 0;
	position: relative;
}

.primary-nav a {
	display: block;
	color: var(--ak-ink);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	padding: 0.5rem 0;
}

.primary-nav > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(0.75rem, 1.6vw, 1.5rem);
}

.primary-nav > ul > li > a {
	position: relative;
}

.primary-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.15rem;
	height: 2px;
	background: var(--ak-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.18s ease;
}

.primary-nav > ul > li > a:hover::after,
.primary-nav > ul > li.current-menu-item > a::after,
.primary-nav > ul > li.current-menu-ancestor > a::after,
.primary-nav > ul > li.current_page_item > a::after,
.primary-nav > ul > li.current_page_ancestor > a::after {
	transform: scaleX(1);
}

.primary-nav a:hover {
	color: var(--ak-accent);
}

/* Alavalikot työpöydällä */
.primary-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -0.875rem;
	z-index: 40;
	min-width: 14rem;
	background: var(--ak-paper);
	border: 1px solid var(--ak-rule);
	border-radius: var(--ak-radius);
	box-shadow: var(--ak-shadow);
	padding: 0.4rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu,
.primary-nav li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-nav .sub-menu a {
	padding: 0.45rem 0.75rem;
	border-radius: 3px;
	font-weight: 400;
}

.primary-nav .sub-menu a:hover {
	background: var(--ak-surface);
}

.primary-nav .sub-menu .sub-menu {
	top: -0.4rem;
	left: 100%;
}

/* Alavalikon avaus­nappi (lisätään JS:llä) */
.submenu-toggle {
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 0.35rem;
	margin-left: 0.1rem;
	line-height: 0;
	display: inline-flex;
	align-items: center;
}

.submenu-toggle svg {
	width: 0.7rem;
	height: 0.7rem;
	fill: currentColor;
	transition: transform 0.18s ease;
}

.submenu-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.menu-item-has-children > a,
.page_item_has_children > a {
	display: inline-block;
}

/* Hampurilaisnappi */
.nav-toggle {
	display: none;
	appearance: none;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: 1px solid var(--ak-rule);
	border-radius: var(--ak-radius);
	color: var(--ak-ink);
	font: inherit;
	font-size: 0.875rem;
	padding: 0.5rem 0.75rem;
	cursor: pointer;
}

.nav-toggle__bars {
	display: block;
	position: relative;
	width: 1rem;
	height: 2px;
	background: currentColor;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 0.18s ease;
}

.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after  { top: 5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	transform: translateY(-5px) rotate(-45deg);
}

/* Päävalikossa on useita kohtia alavalikoineen, joten vaakasuora valikko
   näytetään vasta kun tilaa on varmasti riittävästi. Sitä kapeammilla näytöillä
   käytetään laatikkovalikkoa. */
@media (max-width: 74.99em) {
	.nav-toggle {
		display: inline-flex;
	}

	.primary-nav {
		position: absolute;
		top: calc(100% + 1px);
		left: 0;
		right: 0;
		z-index: 50;
		display: none;
		background: var(--ak-paper);
		border-bottom: 1px solid var(--ak-rule);
		box-shadow: var(--ak-shadow);
		/* Sama sisennys kuin logolla: nav on sijoitettu wrapin täyteen
		   leveyteen, joten reunus lisätään tässä. */
		padding: var(--ak-space-s) var(--ak-gutter) var(--ak-space-m);
		max-height: calc(100vh - 5rem);
		overflow-y: auto;
	}

	.primary-nav.is-open {
		display: block;
	}

	.primary-nav > ul {
		display: block;
	}

	.primary-nav li {
		border-bottom: 1px solid var(--ak-rule);
	}

	.primary-nav li:last-child {
		border-bottom: 0;
	}

	.primary-nav a {
		padding: 0.75rem 0;
		font-size: 1rem;
	}

	.primary-nav > ul > li > a::after {
		display: none;
	}

	.primary-nav .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.primary-nav .menu-item-has-children > a {
		flex: 1;
	}

	.submenu-toggle {
		padding: 0.75rem 0.5rem;
	}

	.primary-nav .sub-menu {
		position: static;
		flex-basis: 100%;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--ak-rule);
		border-radius: 0;
		margin: 0 0 0.5rem 0.25rem;
		padding: 0 0 0 0.75rem;
		min-width: 0;
	}

	.primary-nav li.is-open > .sub-menu {
		display: block;
	}

	.primary-nav .sub-menu li {
		border-bottom: 0;
	}

	.primary-nav .sub-menu a {
		padding: 0.5rem 0;
	}
}

.site-header__inner {
	position: relative;
}


/* 7. Sisältöalue ja artikkelit
   -------------------------------------------------------------------------- */

.page-header {
	margin-bottom: var(--ak-space-l);
}

.page-header .page-title {
	margin-bottom: 0.3em;
}

.archive-description,
.page-header p {
	color: var(--ak-muted);
	max-width: var(--ak-measure);
}

.page-header .contour,
.entry-header .contour {
	margin-top: var(--ak-space-m);
	opacity: 0.9;
}

/* Listaus: uusin juttu nostetaan isoksi, loput asettuvat ruudukkoon.
   -------------------------------------------------------------------------- */

.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	/* Nostettu juttu asettuu vierekkäin vain jos listalla on siihen tilaa.
	   Mitta otetaan listasta itsestään, ei ikkunasta, koska sivupalkki vie
	   osan leveydestä. */
	container-type: inline-size;
	container-name: postlist;
}

/* Koko kortti on klikattava: otsikon linkki venytetään pseudoelementillä
   kortin päälle. Linkkejä on silti vain yksi, joten ruudunlukija ei toista
   samaa kohdetta kolmesti eikä näppäimistö pysähdy korttiin kuin kerran. */
.entry-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ak-paper);
	border: 1px solid var(--ak-rule);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.entry-card .entry-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* Fokusrengas piirretään kortin ympärille, ei pelkän otsikkotekstin. */
.entry-card:focus-within {
	outline: 2px solid var(--ak-accent);
	outline-offset: 3px;
}

.entry-card .entry-title a:focus-visible {
	outline: none;
}

.entry-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ak-shadow-lift);
	border-color: color-mix(in srgb, var(--ak-accent) 40%, var(--ak-rule));
}

.entry-card__thumb {
	display: block;
	overflow: hidden;
	background: var(--ak-surface);
}

.entry-card__thumb img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.entry-card:hover .entry-card__thumb img {
	transform: scale(1.04);
}

/* Ilman artikkelikuvaa: syvyyskäyrät tuovat rytmiä ruudukkoon, eikä tyhjää
   kuvapaikkaa tarvitse teeskennellä. */
.entry-card__placeholder {
	position: relative;
	aspect-ratio: 16 / 5;
	background: var(--ak-surface);
	border-bottom: 1px solid var(--ak-rule);
	overflow: hidden;
}

.entry-card__placeholder .contour {
	--ak-contour-color: color-mix(in srgb, var(--ak-accent) 30%, transparent);
	--ak-contour-height: 100%;

	position: absolute;
	inset: 0;
}

.entry-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.15rem;
	padding: clamp(1rem, 2vw, 1.35rem);
}

/* Otsikko, päiväys ja "Lue lisää" – ei ingressiä eikä kategoriaa. */
.entry-card .entry-meta {
	margin-bottom: 0;
}

.entry-card .entry-title {
	font-size: 1.25rem;
	letter-spacing: -0.015em;
	margin-bottom: 0.3rem;
}

.entry-card:hover .entry-title a {
	color: var(--ak-accent);
}

.entry-card .read-more {
	margin-top: auto;
	padding-top: var(--ak-space-s);
}

/* Nostettu ensimmäinen juttu */
.entry-card--featured {
	grid-column: 1 / -1;
}

/* Nostossa runko on keskitetty, joten "Lue lisää" seuraa päiväystä eikä
   painu kortin alalaitaan. */
.entry-card--featured .read-more {
	margin-top: var(--ak-space-s);
}

.entry-card--featured .entry-title {
	font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.875rem);
}

.entry-card--featured .entry-summary {
	font-size: 1.0625rem;
}

.entry-card--featured .entry-card__placeholder {
	aspect-ratio: auto;
	min-height: 7rem;
}

@container postlist (min-width: 48rem) {
	.entry-card--featured {
		flex-direction: row;
		align-items: stretch;
	}

	.entry-card--featured .entry-card__thumb {
		flex: 1 1 48%;
	}

	.entry-card--featured .entry-card__thumb img {
		height: 100%;
		min-height: 17rem;
		aspect-ratio: auto;
	}

	.entry-card--featured .entry-card__placeholder {
		flex: 1 1 48%;
		min-height: 17rem;
	}

	.entry-card--featured .entry-card__body {
		flex: 1 1 52%;
		justify-content: center;
		padding: clamp(1.5rem, 3vw, 2.5rem);
	}
}

/* Kapeammalla listalla nosto on pystysuora, mutta kuva saa lisää korkeutta. */
@container postlist (max-width: 47.99rem) {
	.entry-card--featured .entry-card__thumb img {
		aspect-ratio: 16 / 8;
	}
}

.entry-title a {
	color: var(--ak-ink);
	text-decoration: none;
}

.entry-title a:hover {
	color: var(--ak-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
	font-size: 0.8125rem;
	color: var(--ak-muted);
	margin: 0 0 var(--ak-space-xs);
}

.entry-meta a {
	color: inherit;
}

.entry-meta a:hover {
	color: var(--ak-accent);
}

.entry-meta__sep {
	opacity: 0.5;
}

.entry-summary p:last-child {
	margin-bottom: 0;
}

.read-more {
	display: inline-block;
	margin-top: var(--ak-space-xs);
	font-size: 0.9375rem;
	font-weight: 550;
	text-decoration: none;
}

.read-more::after {
	content: " →";
	transition: margin 0.15s ease;
}

.read-more:hover::after,
.entry-card:hover .read-more::after {
	margin-left: 0.15em;
}

.entry-card .read-more {
	color: var(--ak-deep);
}

.entry-card:hover .read-more {
	color: var(--ak-accent);
}

.sticky .entry-title::before {
	content: "★ ";
	color: var(--ak-accent);
}

/* Yksittäinen artikkeli / sivu */
.entry-header {
	margin-bottom: var(--ak-space-l);
}

.entry-header .entry-title {
	margin-bottom: var(--ak-space-s);
}

.entry-featured {
	position: relative;
	margin-bottom: var(--ak-space-l);
}

.entry-featured img {
	width: 100%;
	max-height: 32rem;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: var(--ak-shadow);
}

/* Kun artikkelikuvaa ei ole, otsikon alle jää syvyyskäyrämerkki (ks. osio 7
   alussa: .page-header .contour, .entry-header .contour). */

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content > :last-child {
	margin-bottom: 0;
}

.entry-footer {
	margin-top: var(--ak-space-l);
	padding-top: var(--ak-space-m);
	border-top: 1px solid var(--ak-rule);
	font-size: 0.875rem;
	color: var(--ak-muted);
	display: grid;
	gap: var(--ak-space-xs);
}

.entry-footer a {
	color: inherit;
}

/* PDF-linkit saavat tunnisteen – osakaskunnan pöytäkirjat ovat PDF-muodossa. */
.entry-content a[href$=".pdf"]::after,
.entry-content a[href$=".PDF"]::after,
.widget a[href$=".pdf"]::after {
	content: "PDF";
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.05em 0.35em;
	border: 1px solid currentColor;
	border-radius: 2px;
	font-family: var(--ak-font-sans);
	font-size: 0.62em;
	font-weight: 650;
	letter-spacing: 0.06em;
	vertical-align: 0.12em;
	text-decoration: none;
	opacity: 0.75;
}

/* Galleriat ja kuvalohkot */
.wp-block-gallery,
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: var(--ak-space-s);
}

.gallery-item {
	margin: 0;
	width: auto !important;
}

.gallery-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 0 !important;
}

.wp-block-image img {
	width: 100%;
}

.wp-block-embed iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}


/* 8. Sivutus ja artikkelinavigaatio
   -------------------------------------------------------------------------- */

.navigation.pagination,
.wp-block-query-pagination {
	margin-top: var(--ak-space-xl);
	padding-top: var(--ak-space-m);
	border-top: 1px solid var(--ak-rule);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.9375rem;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.6rem;
	border: 1px solid var(--ak-rule);
	border-radius: var(--ak-radius);
	text-decoration: none;
	color: var(--ak-ink);
}

.page-numbers:hover {
	border-color: var(--ak-accent);
	color: var(--ak-accent);
}

.page-numbers.current {
	background: var(--ak-accent);
	border-color: var(--ak-accent);
	color: #fff;
	font-weight: 600;
}

.page-numbers.dots {
	border-color: transparent;
	min-width: 1.5rem;
}

.post-navigation {
	margin-top: var(--ak-space-xl);
	padding-top: var(--ak-space-m);
	border-top: 1px solid var(--ak-rule);
}

.post-navigation .nav-links {
	display: grid;
	gap: var(--ak-space-m);
}

@media (min-width: 40em) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.post-navigation .nav-next {
		text-align: right;
	}
}

.post-navigation a {
	text-decoration: none;
	display: block;
}

.post-navigation .nav-label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ak-muted);
	margin-bottom: 0.2rem;
}

.post-navigation .nav-title {
	font-family: var(--ak-font-serif);
	font-size: 1.0625rem;
	color: var(--ak-ink);
}

.post-navigation a:hover .nav-title {
	color: var(--ak-accent);
}


/* 9. Sivupalkki ja vimpaimet
   -------------------------------------------------------------------------- */

.sidebar {
	font-size: 0.9375rem;
}

@media (min-width: 62em) {
	.sidebar {
		position: sticky;
		top: var(--ak-space-m);
	}
}

.widget {
	margin-bottom: var(--ak-space-l);
}

.widget:last-child {
	margin-bottom: 0;
}

.widget-title,
.widget h2 {
	font-family: var(--ak-font-sans);
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ak-muted);
	margin-bottom: var(--ak-space-s);
	padding-bottom: var(--ak-space-xs);
	border-bottom: 1px solid var(--ak-rule);
}

.widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget li {
	margin: 0;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--ak-rule);
	line-height: 1.45;
}

.widget li:last-child {
	border-bottom: 0;
}

.widget a {
	text-decoration: none;
}

.widget a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.widget .sub-menu,
.widget .children {
	padding-left: 0.75rem;
	margin-top: 0.4rem;
	border-top: 1px solid var(--ak-rule);
}

.widget_recent_entries .post-date,
.wp-block-latest-posts__post-date {
	display: block;
	font-size: 0.75rem;
	color: var(--ak-muted);
}


/* 10. Lomakkeet ja painikkeet
   -------------------------------------------------------------------------- */

input,
select,
textarea,
button {
	font: inherit;
	color: inherit;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	background: var(--ak-paper);
	border: 1px solid var(--ak-rule);
	border-radius: var(--ak-radius);
	padding: 0.55rem 0.7rem;
	font-size: 0.9375rem;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--ak-accent);
}

textarea {
	min-height: 9rem;
	resize: vertical;
}

label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.search-form {
	display: flex;
	gap: 0.4rem;
}

.search-form label {
	flex: 1;
	margin: 0;
}

button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.ak-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	background: var(--ak-accent);
	color: #fff;
	border: 1px solid var(--ak-accent);
	border-radius: var(--ak-radius);
	padding: 0.55rem 1.1rem;
	font-size: 0.9375rem;
	font-weight: 550;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.ak-button:hover {
	background: var(--ak-deep);
	border-color: var(--ak-deep);
	color: #fff;
}

@media (prefers-color-scheme: dark) {
	button,
	input[type="submit"],
	input[type="button"],
	.wp-block-button__link,
	.ak-button {
		color: #0f1e26;
	}

	button:hover,
	input[type="submit"]:hover,
	.wp-block-button__link:hover,
	.ak-button:hover {
		color: #0f1e26;
	}
}

.wp-block-button.is-style-outline .wp-block-button__link,
.ak-button--ghost {
	background: transparent;
	color: var(--ak-deep);
	border-color: currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.ak-button--ghost:hover {
	background: var(--ak-surface);
	color: var(--ak-deep);
}

/* Hampurilaisnappi ja alavalikkonappi eivät ole varsinaisia painikkeita. */
.nav-toggle,
.submenu-toggle {
	background: none;
	color: var(--ak-ink);
	border-color: var(--ak-rule);
}

.submenu-toggle {
	border: 0;
	padding: 0.35rem;
}

.nav-toggle:hover,
.submenu-toggle:hover {
	background: var(--ak-surface);
	color: var(--ak-accent);
}


/* 11. Kommentit
   -------------------------------------------------------------------------- */

.comments-area {
	margin-top: var(--ak-space-xl);
	padding-top: var(--ak-space-l);
	border-top: 1px solid var(--ak-rule);
}

.comments-title,
.comment-reply-title {
	font-size: 1.25rem;
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--ak-space-l);
}

.comment-list .children {
	list-style: none;
	padding-left: clamp(0.75rem, 3vw, 2rem);
	border-left: 1px solid var(--ak-rule);
}

.comment-body {
	padding: var(--ak-space-m) 0;
	border-bottom: 1px solid var(--ak-rule);
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: var(--ak-space-xs);
	font-size: 0.8125rem;
	color: var(--ak-muted);
}

.comment-author img {
	border-radius: 50%;
}

.comment-author .fn {
	font-style: normal;
	font-weight: 600;
	color: var(--ak-ink);
}

.comment-content {
	font-size: 0.9375rem;
}

.reply {
	font-size: 0.8125rem;
}

.comment-form p {
	margin-bottom: var(--ak-space-s);
}

.comment-notes,
.comment-form-cookies-consent label,
.form-submit + p {
	font-size: 0.8125rem;
	color: var(--ak-muted);
	font-weight: 400;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.comment-form-cookies-consent input {
	width: auto;
}


/* 12. Kalastuslupa-nosto
   -------------------------------------------------------------------------- */

.alakuolimo-cta {
	max-width: var(--ak-cta-max);
	display: grid;
	gap: var(--ak-space-m);
	align-items: center;
	background: var(--ak-surface);
	border: 1px solid var(--ak-rule);
	border-left: 3px solid var(--ak-accent);
	border-radius: var(--ak-radius);
	padding: clamp(1.25rem, 3vw, 2rem);
	margin-block: var(--ak-space-l);
}

@media (min-width: 44em) {
	.alakuolimo-cta {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--ak-space-l);
	}
}

.alakuolimo-cta__title {
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	margin: 0 0 0.35rem;
}

.alakuolimo-cta__text {
	margin: 0;
	color: var(--ak-muted);
	max-width: 46ch;
}

.alakuolimo-cta__text:last-child {
	margin-bottom: 0;
}

.alakuolimo-cta__action {
	display: grid;
	gap: 0.4rem;
	justify-items: start;
}

@media (min-width: 44em) {
	.alakuolimo-cta__action {
		justify-items: end;
		text-align: right;
	}
}

.alakuolimo-cta__button {
	padding: 0.7rem 1.35rem;
	font-size: 1rem;
	white-space: nowrap;
}

.alakuolimo-cta__note {
	font-size: 0.75rem;
	color: var(--ak-muted);
}

/* Jos lohkolle on editorissa valittu Leveä tai Koko leveys, se on tietoinen
   valinta ja kumoaa katon. */
.alakuolimo-cta.alignwide,
.alakuolimo-cta.alignfull {
	max-width: none;
}

.alakuolimo-cta.is-style-plain,
.alakuolimo-cta--plain {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--ak-rule);
	border-bottom: 1px solid var(--ak-rule);
	border-radius: 0;
	padding-inline: 0;
}


/* 13. Alapalkki
   -------------------------------------------------------------------------- */

.site-footer {
	position: relative;
	/* Alapalkin sävy alkaa vasta aallon alapuolelta: ylin aalto on sivun ja
	   alapalkin raja, ei suora viiva. Aallon yläpuolella näkyy sivun tausta. */
	background-color: transparent;
	background-image: linear-gradient(var(--ak-surface), var(--ak-surface));
	background-repeat: no-repeat;
	background-position: left calc(var(--ak-wave-h) - 1px);
	background-size: 100% calc(100% - var(--ak-wave-h) + 1px);
	/* Yläreunaan varataan aaltoraja + käyräkaista + väli, jotta vimpaimet eivät
	   koskaan istu koristekäyrien päällä kapeallakaan näytöllä. */
	padding-block: calc(var(--ak-wave-h) + var(--ak-contour-h) + var(--ak-space-m)) var(--ak-space-m);
	font-size: 0.9375rem;
	overflow: hidden;
}

/* Aaltoraja. Täytetty muoto samalla sävyllä kuin alapalkki. */
.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--ak-wave-h);
	background-color: var(--ak-surface);
	-webkit-mask-image: var(--ak-wave-fill);
	mask-image: var(--ak-wave-fill);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-position: left bottom;
	mask-position: left bottom;
	-webkit-mask-size: var(--ak-wave-w) var(--ak-wave-h);
	mask-size: var(--ak-wave-w) var(--ak-wave-h);
	pointer-events: none;
}

/* Vaimeat käyrät aaltorajan alapuolella. Korkeus on sama kuin laatan, jotta
   alin käyrä ei katkea. */
.site-footer::after {
	content: "";
	position: absolute;
	top: var(--ak-wave-h);
	left: 0;
	right: 0;
	height: var(--ak-contour-h);
	background-color: color-mix(in srgb, var(--ak-accent) 15%, transparent);
	-webkit-mask-image: var(--ak-contours);
	mask-image: var(--ak-contours);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-position: left top;
	mask-position: left top;
	-webkit-mask-size: var(--ak-contour-w) var(--ak-contour-h);
	mask-size: var(--ak-contour-w) var(--ak-contour-h);
	pointer-events: none;
}

/* Käyrät haalistuvat alaspäin, jolloin ne sulavat alapalkin pintaan. */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {

.site-footer::after {
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	-webkit-mask-image: var(--ak-contours), linear-gradient(to bottom, #000 0%, #000 20%, transparent 100%);
	mask-image: var(--ak-contours), linear-gradient(to bottom, #000 0%, #000 20%, transparent 100%);
	-webkit-mask-repeat: repeat-x, no-repeat;
	mask-repeat: repeat-x, no-repeat;
	-webkit-mask-position: left top, left top;
	mask-position: left top, left top;
	-webkit-mask-size: var(--ak-contour-w) var(--ak-contour-h), 100% 100%;
	mask-size: var(--ak-contour-w) var(--ak-contour-h), 100% 100%;
}

}

.footer-widgets {
	display: grid;
	gap: var(--ak-space-l);
	margin-bottom: var(--ak-space-l);
}

@media (min-width: 44em) {
	.footer-widgets {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
		gap: var(--ak-space-xl);
	}
}

.footer-widgets .widget {
	margin-bottom: 0;
}

.site-footer .widget li {
	border-bottom-color: color-mix(in srgb, var(--ak-rule) 70%, transparent);
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ak-space-s);
	padding-top: var(--ak-space-m);
	border-top: 1px solid var(--ak-rule);
	font-size: 0.8125rem;
	color: var(--ak-muted);
}

.footer-bottom p {
	margin: 0;
}

.footer-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0;
	padding: 0;
}

.footer-nav li {
	margin: 0;
}

.footer-nav a,
.footer-bottom a {
	color: inherit;
	text-decoration: none;
}

.footer-nav a:hover,
.footer-bottom a:hover {
	color: var(--ak-accent);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}


/* 14. Lohkoeditorin sisältötyylit (etusivun puoli)
   -------------------------------------------------------------------------- */

.wp-block-columns {
	gap: var(--ak-space-m);
}

.wp-block-group.has-background {
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--ak-radius);
}

.wp-block-table figcaption {
	text-align: left;
}

.wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ak-space-s);
	padding: var(--ak-space-s) 0;
	border-bottom: 1px solid var(--ak-rule);
}

.wp-block-file__button {
	font-size: 0.8125rem;
}

.wp-block-pullquote {
	border-top: 1px solid var(--ak-rule);
	border-bottom: 1px solid var(--ak-rule);
	padding: var(--ak-space-l) 0;
	text-align: left;
}


/* 14b. Esiintulo vieritettäessä
   --------------------------------------------------------------------------
   Luokka js-reveal asetetaan <html>-elementtiin pienellä skriptillä vain jos
   selain ei pyydä liikkeen vähentämistä. Ilman skriptiä (tai jos se ei lataudu)
   sisältö näkyy normaalisti – piilotus tapahtuu vain tämän luokan alla. */

@media (prefers-reduced-motion: no-preference) {
	.js-reveal .entry-card,
	.js-reveal .alakuolimo-cta,
	.js-reveal .entry-featured {
		opacity: 0;
		transform: translateY(14px);
	}

	.js-reveal .entry-card.is-visible,
	.js-reveal .alakuolimo-cta.is-visible,
	.js-reveal .entry-featured.is-visible {
		opacity: 1;
		transform: none;
		transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	/* Ruudukossa kortit tulevat esiin pienellä viiveellä toisensa jälkeen. */
	.js-reveal .entry-card:nth-child(2).is-visible { transition-delay: 0.06s; }
	.js-reveal .entry-card:nth-child(3).is-visible { transition-delay: 0.12s; }
	.js-reveal .entry-card:nth-child(4).is-visible { transition-delay: 0.18s; }
}


/* 15. Tuloste ja liikkeen vähennys
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.site-header,
	.site-footer,
	.sidebar,
	.nav-toggle,
	.primary-nav,
	.post-navigation,
	.comments-area,
	.navigation.pagination,
	.alakuolimo-cta,
	.skip-link {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.site-content {
		padding: 0;
	}

	.site-content > .wrap {
		display: block;
		max-width: none;
		padding: 0;
	}

	.entry-content > * {
		max-width: none;
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}

	h1, h2, h3 {
		page-break-after: avoid;
	}
}