/*
 * LK Web theme: pages.css, the look of the theme's own templates: page, single post, posts page, archive, 404.
 *
 * A calm, editorial text page that belongs to the concept: a title band on the concept's ground, then one readable
 * column. Only the concept's tokens are used, each with a fallback: --ink, --paper, --on-ink, --on-paper, --accent,
 * --on-accent (the converter writes it when the concept lacks it: ink or paper, whichever reads better on the accent),
 * --rule-ink / --rule-paper, --space-1..9, --step--1..5, --radius, --radius-btn, --container-max, --gutter,
 * --nav-h (or --head-h), --font-display. The ground comes from html[data-ground="dark" | "light"].
 *
 * Fonts are set only in rules of zero specificity (:where), so the concept's own heading rules win wherever it has
 * them; a missing --font-display then simply leaves the inherited font.
 *
 * Loaded after the concept's CSS: the selectors below are scoped to the theme's own classes (lkw-page-head,
 * lkw-page-body, lkw-prose, lkw-posts, lkw-subpages) and never reach the concept's pages.
 */

/* ---------- this file's own tokens, from the concept's ---------- */

:root {
  --lkw-measure: 42rem;
  --lkw-accent: var(--accent, currentColor);
  --lkw-rule: color-mix(in srgb, currentColor 18%, transparent);
  --lkw-soft: color-mix(in srgb, currentColor 70%, transparent);
  --lkw-pad-inline: max(var(--gutter, 24px), calc((100% - var(--container-max, 1240px)) / 2));
}

html[data-ground="dark"] {
  --lkw-ground: var(--ink, #141414);
  --lkw-strong: var(--paper, #ffffff);
  --lkw-on-accent: var(--on-accent, var(--ink, #141414));
  --lkw-rule: var(--rule-ink, rgba(255, 255, 255, 0.16));
  --lkw-focus: var(--lkw-accent);
}

/* On paper an accent is often too pale for a focus ring (under 3:1): the ring takes the accent darkened toward the
   ink. The accent itself stays for marks, arrows and underlines. */
html[data-ground="light"] {
  --lkw-ground: var(--paper, #ffffff);
  --lkw-strong: var(--ink, #141414);
  --lkw-on-accent: var(--on-accent, var(--paper, #ffffff));
  --lkw-rule: var(--rule-paper, rgba(0, 0, 0, 0.16));
  --lkw-focus: color-mix(in srgb, var(--lkw-accent) 60%, var(--lkw-strong));
}

/* ---------- title band ---------- */

/* The concepts' headers are usually fixed and transparent: the band starts below the header and carries the ground,
   so the header's text stays readable over it. */
.lkw-page-head {
  position: relative;
  background: var(--lkw-ground, transparent);
  padding-top: calc(var(--nav-h, var(--head-h, 72px)) + clamp(var(--space-5, 48px), 7vw, var(--space-8, 128px)));
  padding-bottom: clamp(var(--space-5, 48px), 5vw, var(--space-7, 96px));
  padding-inline: var(--lkw-pad-inline);
  border-bottom: 1px solid var(--lkw-rule);
}

.lkw-page-head::before {
  content: "";
  display: block;
  width: var(--space-6, 64px);
  height: 2px;
  margin-bottom: var(--space-4, 32px);
  background: var(--lkw-accent);
}

.lkw-page-head .lkw-page-title {
  margin: 0;
  max-width: 20ch;
  font-size: min(var(--step-5, clamp(40px, 1.2rem + 5vw, 88px)), 9.5vw);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--lkw-strong, currentColor);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

:where(.lkw-page-head .lkw-page-title) {
  font-family: var(--font-display);
  font-weight: 700;
}

.lkw-page-head .lkw-page-meta {
  margin-top: var(--space-3, 24px);
  font-size: var(--step--1, 14px);
  letter-spacing: 0.02em;
  color: var(--lkw-soft);
}

/* ---------- the page body and its readable column ---------- */

.lkw-page-body {
  padding-top: clamp(var(--space-5, 48px), 6vw, var(--space-7, 96px));
  padding-bottom: clamp(var(--space-6, 64px), 8vw, var(--space-8, 128px));
  padding-inline: var(--lkw-pad-inline);
}

.lkw-prose > * {
  margin-block: 0;
  max-width: var(--lkw-measure);
}

.lkw-prose > * + * {
  margin-block-start: var(--space-3, 24px);
}

.lkw-prose > :is(h2, h3, h4, h5, h6) {
  margin-block-start: clamp(var(--space-5, 48px), 5vw, var(--space-6, 64px));
}

.lkw-prose > :is(h2, h3, h4, h5, h6) + * {
  margin-block-start: var(--space-2, 16px);
}

.lkw-prose > :is(.wp-block-image, .wp-block-gallery, .wp-block-table, .wp-block-quote, .wp-block-buttons, .wp-block-embed, .lkw-subpages),
.lkw-prose > :is(.wp-block-image, .wp-block-gallery, .wp-block-table, .wp-block-quote, .wp-block-embed, .lkw-subpages, .wp-block-contact-form-7-contact-form-selector) + * {
  margin-block-start: clamp(var(--space-4, 32px), 4vw, var(--space-5, 48px));
}

.lkw-prose > :first-child {
  margin-block-start: 0;
}

/* The form block's wrappers have no box (base.css): the <form> itself takes the column's width and spacing. */
.lkw-prose .wpcf7-form {
  max-width: var(--lkw-measure);
}

.lkw-prose > .wp-block-contact-form-7-contact-form-selector:not(:first-child) .wpcf7-form {
  margin-block-start: clamp(var(--space-4, 32px), 4vw, var(--space-5, 48px));
}

.lkw-prose > :is(.alignwide, .alignfull, .wp-block-gallery) {
  max-width: none;
}

/* ---------- text ---------- */

.lkw-prose :is(p, li) {
  line-height: 1.65;
}

.lkw-prose :is(p, li, td, th, figcaption, blockquote, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

.lkw-prose :is(h2, h3, h4, h5, h6) {
  color: var(--lkw-strong, currentColor);
  text-wrap: balance;
}

:where(.lkw-prose) :where(h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 700;
}

.lkw-prose h2 {
  font-size: var(--step-3, clamp(28px, 1.2rem + 1.5vw, 40px));
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.lkw-prose h3 {
  font-size: var(--step-2, var(--step-1, clamp(22px, 1.1rem + 0.6vw, 28px)));
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.lkw-prose :is(h4, h5, h6) {
  font-size: var(--step-1, 20px);
  line-height: 1.25;
}

.lkw-prose strong {
  font-weight: 700;
}

.lkw-prose a:not(.wp-block-button__link) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--lkw-accent);
  text-underline-offset: 0.2em;
}

.lkw-prose a:not(.wp-block-button__link):hover {
  text-decoration-thickness: 2px;
}

/* ---------- lists ---------- */

.lkw-prose :is(ul, ol):not(.lkw-subpages) {
  padding-left: 1.4em;
}

.lkw-prose ul:not(.lkw-subpages) {
  list-style: disc;
}

.lkw-prose ul:not(.lkw-subpages) ul {
  list-style: circle;
}

.lkw-prose ol {
  list-style: decimal;
}

.lkw-prose li + li,
.lkw-prose li > :is(ul, ol) {
  margin-top: var(--space-1, 8px);
}

.lkw-prose li::marker {
  color: var(--lkw-accent);
}

/* ---------- quote ---------- */

.lkw-prose .wp-block-quote {
  margin-inline: 0;
  padding: 0 0 0 var(--space-4, 32px);
  border-left: 2px solid var(--lkw-accent);
}

.lkw-prose .wp-block-quote > * + * {
  margin-top: var(--space-2, 16px);
}

.lkw-prose .wp-block-quote p {
  font-size: var(--step-2, clamp(22px, 1.1rem + 0.6vw, 28px));
  line-height: 1.35;
  color: var(--lkw-strong, currentColor);
}

:where(.lkw-prose .wp-block-quote p) {
  font-family: var(--font-display);
}

.lkw-prose .wp-block-quote cite {
  display: block;
  margin-top: var(--space-3, 24px);
  font-size: var(--step--1, 14px);
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--lkw-soft);
}

/* ---------- photos and galleries ---------- */

.lkw-prose .wp-block-image img,
.lkw-prose .wp-block-gallery img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius, 0);
}

.lkw-prose :is(.wp-block-image, .wp-block-table, .wp-block-gallery) > figcaption {
  margin-top: var(--space-2, 16px);
  font-size: var(--step--1, 14px);
  line-height: 1.5;
  color: var(--lkw-soft);
}

.lkw-prose .wp-block-gallery {
  gap: var(--space-2, 16px);
  --wp--style--unstable-gallery-gap: var(--space-2, 16px);
}

/* ---------- tables ---------- */

.lkw-prose .wp-block-table {
  overflow-x: auto;
}

.lkw-prose .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.lkw-prose .wp-block-table :is(th, td) {
  padding: var(--space-2, 16px) var(--space-3, 24px) var(--space-2, 16px) 0;
  border: 0;
  border-bottom: 1px solid var(--lkw-rule);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.lkw-prose .wp-block-table :is(th, td):last-child {
  padding-right: 0;
}

.lkw-prose .wp-block-table thead th {
  font-weight: 700;
  color: var(--lkw-strong, currentColor);
  border-bottom-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* ---------- buttons ---------- */

.lkw-prose .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 16px);
}

.lkw-prose .wp-block-button__link {
  min-height: 48px;
  padding: 0 var(--space-4, 32px);
  border: 1px solid transparent;
  border-radius: var(--radius-btn, var(--radius, 0));
  background: var(--lkw-accent);
  color: var(--lkw-on-accent, #ffffff);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lkw-prose .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--lkw-accent) 82%, #000000);
}

.lkw-prose .is-style-outline > .wp-block-button__link {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

/* ---------- the list of child pages ---------- */

.lkw-prose .lkw-subpages,
.lkw-subpages {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--lkw-rule);
}

.lkw-subpages > li {
  margin: 0;
  border-bottom: 1px solid var(--lkw-rule);
}

.lkw-prose .lkw-subpages a,
.lkw-subpages a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 24px);
  min-height: 56px;
  padding-block: var(--space-2, 16px);
  font-size: var(--step-1, 20px);
  line-height: 1.2;
  color: var(--lkw-strong, currentColor);
  text-decoration: none;
}

:where(.lkw-subpages a) {
  font-family: var(--font-display);
}

.lkw-subpages a::after {
  content: "\2192";
  flex: none;
  color: var(--lkw-accent);
  transition: transform 0.2s ease;
}

.lkw-subpages a:hover::after {
  transform: translateX(4px);
}

/* ---------- the band of child pages on a concept page ----------
   The content converter adds it after the concept's last section of a page that has child pages:
     section.lkw-added.lkw-children > div.lkw-children__in > h2 ("Lue lisää") + ul.lkw-subpages > li > a
   It sits on the ground, in the concept's container, with the title band's accent mark, and lists the pages as
   tappable rows: one column on a phone, more where there is room. Both grounds: the ground, the strong text colour
   and the rules come from html[data-ground] (ink band with paper text, or paper band with ink text); the keyboard
   focus ring uses --lkw-focus, which stays readable on paper. */

.lkw-children {
  position: relative;
  background: var(--lkw-ground, transparent);
  border-top: 1px solid var(--lkw-rule);
  padding-block: clamp(var(--space-6, 64px), 8vw, var(--space-8, 128px));
}

.lkw-children .lkw-children__in {
  box-sizing: border-box;
  max-width: var(--container-max, 1240px);
  margin-inline: auto;
  padding-inline: var(--gutter, 24px);
}

.lkw-children .lkw-children__in::before {
  content: "";
  display: block;
  width: var(--space-6, 64px);
  height: 2px;
  margin-bottom: var(--space-4, 32px);
  background: var(--lkw-accent);
}

.lkw-children h2 {
  margin: 0 0 clamp(var(--space-4, 32px), 4vw, var(--space-5, 48px));
  font-size: var(--step-3, clamp(28px, 1.2rem + 1.5vw, 40px));
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--lkw-strong, currentColor);
}

:where(.lkw-children h2) {
  font-family: var(--font-display);
  font-weight: 700;
}

.lkw-children .lkw-subpages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  column-gap: var(--space-5, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 0;
}

.lkw-children .lkw-subpages > li {
  margin: 0;
  border-top: 1px solid var(--lkw-rule);
  border-bottom: 0;
}

.lkw-children .lkw-subpages a {
  position: relative;
  display: block;
  min-height: 44px;
  padding-block: var(--space-3, 24px);
  padding-right: calc(1.5em + var(--space-2, 16px));
  font-size: var(--step-2, var(--step-1, clamp(22px, 1.1rem + 0.6vw, 28px)));
  line-height: 1.2;
  color: var(--lkw-strong, currentColor);
  text-decoration: none;
  overflow-wrap: break-word;
}

/* The arrow is out of the flow, so the hover underline marks the words only. */
.lkw-children .lkw-subpages a::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.lkw-children .lkw-subpages a:is(:hover, :focus-visible) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--lkw-accent);
  text-underline-offset: 0.2em;
}

.lkw-children .lkw-subpages a:hover::after {
  transform: translate(4px, -50%);
}

.lkw-children .lkw-subpages a:focus-visible {
  outline: 2px solid var(--lkw-focus, var(--lkw-accent));
  outline-offset: 4px;
}

/* ---------- posts page and archives ---------- */

.lkw-posts .lkw-post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lkw-rule);
}

.lkw-posts .lkw-post-list > li {
  margin: 0;
  padding-block: clamp(var(--space-4, 32px), 4vw, var(--space-5, 48px));
  border-bottom: 1px solid var(--lkw-rule);
}

.lkw-posts .lkw-post {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3, 24px);
}

.lkw-posts .lkw-post-photo {
  margin: 0;
}

.lkw-posts .lkw-post-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius, 0);
}

.lkw-posts .lkw-post-date {
  font-size: var(--step--1, 14px);
  letter-spacing: 0.02em;
  color: var(--lkw-soft);
}

.lkw-posts .lkw-post-title {
  margin: var(--space-1, 8px) 0 0;
  font-size: var(--step-3, clamp(26px, 1.2rem + 1.4vw, 38px));
  line-height: 1.1;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

:where(.lkw-posts .lkw-post-title) {
  font-family: var(--font-display);
  font-weight: 700;
}

.lkw-posts .lkw-post-title a {
  color: var(--lkw-strong, currentColor);
  text-decoration: none;
}

.lkw-posts .lkw-post-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--lkw-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.lkw-posts .lkw-post-excerpt {
  margin-top: var(--space-2, 16px);
  max-width: var(--lkw-measure);
}

.lkw-posts .lkw-post-excerpt p {
  margin: 0;
  line-height: 1.6;
}

.lkw-posts .lkw-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 16px);
  margin-top: var(--space-5, 48px);
}

.lkw-posts .lkw-pagination :is(a, .page-numbers) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.lkw-posts .lkw-pagination a:hover {
  color: var(--lkw-strong, currentColor);
}

.lkw-posts .lkw-pagination .page-numbers.current {
  color: var(--lkw-strong, currentColor);
  box-shadow: inset 0 -2px 0 var(--lkw-accent);
}

.lkw-posts .lkw-no-posts {
  color: var(--lkw-soft);
}

@media (min-width: 900px) {
  .lkw-posts .lkw-post:has(> .lkw-post-photo) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-5, 48px);
    align-items: start;
  }
}

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

.lkw-prose .lkw-home-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 8px);
  min-height: 44px;
  font-weight: 700;
  color: var(--lkw-strong, currentColor);
  text-decoration: none;
  border-bottom: 2px solid var(--lkw-accent);
}

.lkw-prose .lkw-home-link a::after {
  content: "\2192";
}

/* ---------- phones ---------- */

@media (max-width: 599px) {
  .lkw-page-head::before {
    margin-bottom: var(--space-3, 24px);
  }

  .lkw-prose .wp-block-table :is(th, td) {
    padding-right: var(--space-2, 16px);
  }

  .lkw-prose .wp-block-quote {
    padding-left: var(--space-3, 24px);
  }
}

/* ---------- the block editor, text pages ----------
   In the editor a text page shows only its content, without the template's lkw-prose wrapper. A root holding no
   group (the concept's pages are made of groups) gets the same rhythm, so the client edits what the visitor sees. */

.is-root-container:not(:has(> .wp-block-group, > .wp-block-template-part)) > * + * {
  margin-block-start: var(--space-3, 24px);
}

.is-root-container:not(:has(> .wp-block-group, > .wp-block-template-part)) > :is(h2, h3, h4, h5, h6) {
  margin-block-start: var(--space-6, 64px);
}

.is-root-container:not(:has(> .wp-block-group, > .wp-block-template-part)) :is(p, li) {
  line-height: 1.65;
}

.is-root-container:not(:has(> .wp-block-group, > .wp-block-template-part)) :is(ul, ol) {
  padding-left: 1.4em;
}

.is-root-container:not(:has(> .wp-block-group, > .wp-block-template-part)) ul {
  list-style: disc;
}

.is-root-container:not(:has(> .wp-block-group, > .wp-block-template-part)) ol {
  list-style: decimal;
}