/* Textsidor — Om oss och vad som kan komma.
   Toppraden, anslaget och spalten kommer från katalog.css, som länkas
   före den här filen. Här finns bara det som en sida med löptext
   behöver och katalogen inte har. */

/* Den här filen länkas bara av textsidorna, så body får styras här.
   Fotnoten ska sjunka till botten när texten är kort — annars hänger
   den mitt på skärmen med tomrum under. */
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* På portföljen ligger rubrik och ingress i samma flexkolumn med 18 px
   mellan sig. Här är texten ett eget block, så avståndet måste sättas
   för hand för att bli detsamma. */
.anslag { padding-bottom: 0; }

/* Heter inte .sida — det namnet är upptaget i katalog.css, där det är
   wrappern som klipper kortlekens överhäng. */
.innehall {
  flex-grow: 1;
  padding-top: 18px;
  padding-bottom: 80px;
}

/* Måtten på själva texten bor i katalog.css, delade med portföljens
   ingress. Här finns bara det som flera stycken behöver. */

/* Nollställ först: annars bär första stycket webbläsarens egen
   marginal och skjuter ned hela texten från rubriken. */
.brodtext > * {
  margin: 0;
}

.brodtext > * + * {
  margin-top: 1.1em;
}

.brodtext h2 {
  margin-top: 2.4em;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--black);
}

/* Rubriken får inte stå ensam sist på en skärm. */
.brodtext h2 + * {
  margin-top: 0.6em;
}

.brodtext strong {
  font-weight: 600;
  color: var(--black);
}

.brodtext a {
  color: var(--bla);
  text-underline-offset: 2px;
}

.brodtext a:hover { color: var(--bla-mork); }

.brodtext ul {
  margin-left: 0;
  padding-left: 1.2em;
}

.brodtext li + li {
  margin-top: 0.4em;
}

/* ================================================================
   Fotnot
   ================================================================ */

.fotnot {
  padding: 30px 0 46px;
  border-top: 1px solid var(--linje-harfin);
}

.fotnot__lank {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bla);
  text-decoration: none;
}

.fotnot__lank::before {
  content: '←';
}

.fotnot__lank:hover { color: var(--bla-mork); }