/* Tillitsverket v1 – typografi + enkla ramar för tydliga komponenter.
   Svart Helvetica på vitt. Inga skuggor, färger eller bilder. */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  color: #000;
  background: #fff;
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1rem 6rem;
  line-height: 1.5;
}

header {
  margin-bottom: 3rem;
  display: flex;
  align-items: flex-end; /* meny och logga på samma horisontella linje */
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.logo img { height: 7rem; width: auto; display: block; }
.logo { margin: 0; }

nav ul { list-style: none; }
nav li { display: inline-block; margin-right: 1.25rem; margin-bottom: 0.25rem; }

a { color: #000; }

h1 { font-size: 1.75rem; margin-bottom: 1rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1rem; margin: 1.75rem 0 0.5rem; }

p, ul, ol, dl, blockquote { margin-bottom: 1rem; }
main ul, main ol { padding-left: 1.25rem; }

.intro { font-size: 1.15rem; margin-bottom: 2rem; }
.intro.hero { font-size: 1.75rem; font-weight: bold; line-height: 1.25; margin-bottom: 1.5rem; }
.crumb { font-size: 0.85rem; margin-bottom: 0.5rem; }
.date { font-size: 0.85rem; margin-bottom: 1.5rem; }

blockquote { padding-left: 1.25rem; font-style: italic; }
.quote-source { font-style: normal; font-size: 0.85rem; }

dl dt { font-weight: bold; display: inline; }
dl dt::after { content: ": "; }
dl dd { display: inline; }
dl dd::after { content: "\A"; white-space: pre; }

.placeholder {
  color: #555;
  font-size: 0.9rem;
  border: 1px dashed #000;
  padding: 0.75rem 1rem;
}

/* Kort: ingångar, undersidor och andra tydliga komponenter */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.card { border: 1px solid #000; padding: 1rem 1.25rem; }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.subnav { margin-top: 2rem; }

dl {
  border: 1px solid #000;
  padding: 0.75rem 1rem;
}

/* Kommande aktiviteter: stora kort med platshållarbild och ingress */
.event {
  border: 1px solid #000;
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.img-placeholder {
  aspect-ratio: 3 / 2;
  border: 1px dashed #000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 0.9rem;
}
.event .img-placeholder { flex: 0 0 14rem; }
.card .img-placeholder { margin-bottom: 0.75rem; }
.event h3 { margin-top: 0; font-size: 1.35rem; }
.event .date { margin-bottom: 0.75rem; }
.event p:last-child { margin-bottom: 0; }
@media (max-width: 40rem) {
  .event { flex-direction: column; }
  .event .img-placeholder { flex: none; }
}

/* Sektion med ram, t.ex. Aktuellt på startsidan */
section.framed { border: 1px solid #000; padding: 1rem 1.25rem; margin-top: 2rem; }
section.framed h2:first-child { margin-top: 0; }
section.framed > :last-child, section.framed li:last-child { margin-bottom: 0; }

footer { margin-top: 5rem; font-size: 0.85rem; border-top: 1px solid #000; padding-top: 1rem; }
footer nav { margin-bottom: 0.75rem; }

.footer-news { margin-bottom: 1.5rem; }
.footer-news h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.footer-news ul { list-style: none; padding: 0; }
.footer-news li { margin-bottom: 0.25rem; }
.footer-news .date { color: #555; }