/*
 * Henkilötiedot, Tietosuojaseloste and the 404.
 * Loaded after shell.css; uses its tokens and the `rv-` prefix. Other templates keep their own files.
 */

/* ---- Shared by the three pages ---- */

h1.rv-page-title {
  margin: 0;
  font-size: 32px;
  line-height: 38px;
}

.rv-lead {
  margin: 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 26px;
}

/* Solid button (a core Button block): the 404 "Takaisin etusivulle". Square, no underline. */
.rv-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  height: 46px;
  box-sizing: border-box;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.rv-button .wp-block-button__link:hover {
  background: var(--wp--preset--color--link-hover);
  color: var(--wp--preset--color--white);
}

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

.rv-main--notfound {
  gap: 24px;
}

@media (min-width: 782px) {
  h1.rv-page-title {
    font-size: 42px;
    line-height: 48px;
  }

  .rv-lead {
    font-size: 18px;
    line-height: 28px;
  }
}

/* ---- Page content Risto edits (paragraph, heading, list, quote, image, separator) ---- */

.rv-prose > * {
  margin: 0;
}

.rv-prose > * + * {
  margin-top: 12px;
}

.rv-prose p {
  max-width: 62ch;
  font-size: 17px;
  line-height: 26px;
}

.rv-prose h2 {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 3px solid var(--wp--preset--color--primary);
  font-size: 23px;
  line-height: 29px;
}

.rv-prose > h2:first-child {
  margin-top: 0;
}

.rv-prose ul,
.rv-prose ol {
  max-width: 62ch;
  padding-left: 1.25em;
  font-size: 17px;
  line-height: 26px;
}

.rv-prose li + li {
  margin-top: 6px;
}

.rv-prose blockquote {
  max-width: 68ch;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--newsreader);
  font-style: italic;
  font-size: 18px;
  line-height: 27px;
  color: var(--wp--preset--color--quote);
}

.rv-prose hr {
  border: 0;
  border-top: 1px solid var(--wp--preset--color--divider);
}

/* Tietosuojaseloste: the "Päivitetty" line opens the content, muted. */
.rv-prose--privacy > p:first-child {
  color: var(--wp--preset--color--muted);
}

/* ---- Henkilötiedot: portrait beside the intro, then dated rows ---- */

.rv-portrait {
  box-sizing: border-box;
  width: 100%;
  height: 240px;
  margin: 0 0 40px;
  overflow: hidden;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--surface-border);
}

.rv-portrait--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  color: var(--wp--preset--color--muted);
}

.rv-portrait__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rv-person {
  display: flow-root;
}

/* Core makes post-content a block formatting context, which would sit beside the float as one box. */
.rv-prose--person {
  display: block;
}

.rv-prose--person p {
  font-size: 18px;
  line-height: 28px;
}

.rv-prose--person > * {
  display: flow-root; /* a block that sits beside the floated portrait instead of under it */
}

.rv-prose--person > * + * {
  margin-top: 14px;
}

.rv-prose--person > h2 {
  clear: both;
  margin-top: 40px;
  padding-top: 14px;
  font-size: 22px;
  line-height: 28px;
}

.rv-prose--person > h2 + * {
  margin-top: 14px;
}

.rv-prose--person > h2 ~ p {
  font-size: 17px;
  line-height: 26px;
}

.rv-prose--person > ul {
  list-style: none;
  padding: 0;
  font-size: 17px;
  line-height: 25px;
}

.rv-prose--person > ul li + li {
  margin-top: 14px;
}

.rv-prose--person > ul strong {
  display: block;
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
  color: var(--wp--preset--color--muted);
}

@media (min-width: 782px) {
  .rv-prose p,
  .rv-prose ul,
  .rv-prose ol {
    font-size: 18px;
    line-height: 28px;
  }

  .rv-prose h2 {
    font-size: 26px;
    line-height: 32px;
  }

  .rv-prose--privacy h2 {
    margin-top: 32px;
  }

  .rv-prose blockquote {
    padding-left: 24px;
    font-size: 19px;
    line-height: 29px;
  }

  .rv-portrait {
    float: left;
    width: 260px;
    height: 320px;
    margin: 0 40px 32px 0;
  }

  .rv-prose--person > * + * {
    margin-top: 16px;
  }

  .rv-prose--person p {
    max-width: 56ch;
    font-size: 19px;
    line-height: 30px;
  }

  .rv-prose--person > h2 {
    margin-top: 32px;
    padding-top: 16px;
  }

  .rv-prose--person > h2 + * {
    margin-top: 16px;
  }

  .rv-prose--person > h2 ~ p {
    max-width: 62ch;
    font-size: 18px;
    line-height: 27px;
  }

  .rv-prose--person > ul {
    max-width: none;
    font-size: 18px;
    line-height: 27px;
  }

  .rv-prose--person > ul li {
    padding-left: 134px;
  }

  .rv-prose--person > ul li + li {
    margin-top: 18px;
  }

  .rv-prose--person > ul strong {
    float: left;
    width: 110px;
    margin-left: -134px;
    font-size: inherit;
    line-height: inherit;
  }
}