/* Typsnitt som ligger på sajten. Licens: SIL Open Font License. */
@font-face {font-family: 'Archivo'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(/fonts/archivo-4c18bbf2.woff2) format('woff2')}
@font-face {font-family: 'Archivo'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(/fonts/archivo-4c18bbf2.woff2) format('woff2')}
@font-face {font-family: 'Archivo'; font-style: normal; font-weight: 800; font-stretch: 112%; font-display: swap; src: url(/fonts/archivo-4c18bbf2.woff2) format('woff2')}

/* Ramen runt varje exempel: remsan högst upp och rutan längst ner.
   Allt börjar på rf- så att exemplens egna stilar inte krockar. */

.rf-top,
.rf-foot {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  background: #17432F;
  color: #F4F7F2;
}
.rf-top a,
.rf-foot a { color: inherit; }
.rf-top a:focus-visible,
.rf-foot a:focus-visible { outline: 3px solid #F2C94C; outline-offset: 3px; }

.rf-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 1.25rem;
  padding: 0.6rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.rf-brand {
  font-weight: 800;
  font-stretch: 112%;
  text-decoration: none;
}
.rf-note {
  flex: 1 1 12rem;
  color: #B9CDC2;
}
.rf-all { text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 34rem) {
  .rf-top { justify-content: space-between; }
  .rf-note { order: 3; flex: 1 1 100%; }
}

.rf-foot {
  padding: 3rem 1rem 3.5rem;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.rf-wrap { max-width: 44rem; margin: 0 auto; }
.rf-foot h2 {
  font: inherit;
  font-weight: 800;
  font-size: clamp(1.5rem, 4.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: inherit;
  margin: 0 0 1rem;
  max-width: 22ch;
}
.rf-foot p { margin: 0 0 1rem; max-width: 60ch; }
.rf-foot ul { margin: 0 0 1.25rem; padding: 0 0 0 1.2rem; max-width: 58ch; }
.rf-foot li { margin: 0 0 0.4rem; }
.rf-foot strong { font-weight: 800; color: #F2C94C; }
.rf-real { color: #B9CDC2; font-size: 1rem; }
.rf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  margin-top: 1.75rem;
}
.rf-cta {
  display: inline-block;
  background: #F2C94C;
  color: #1B1B14 !important;
  font-weight: 800;
  text-decoration: none;
  padding: 0.9rem 1.35rem;
  border-radius: 6px;
}
.rf-cta:hover { background: #FFD75E; }
.rf-more { text-underline-offset: 3px; }

/* Rasmus kommentarer inne i ett exempel */
.rf-aside {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  background: #E3EEE7;
  color: #17432F;
  border-left: 4px solid #17432F;
  border-radius: 0 6px 6px 0;
  padding: 0.65rem 0.9rem;
  margin: 1rem 0;
  max-width: 44rem;
}
.rf-aside b { font-weight: 800; }

/* Rasmus reglage inne i ett exempel: vems sida som visas, eller vilket företag */
.rf-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: 0;
  background: #E3EEE7;
  color: #17432F;
  border-left: 4px solid #17432F;
  border-radius: 0 6px 6px 0;
  padding: 0.6rem 0.9rem;
  margin: 0;
}
.rf-switch b { font-weight: 800; margin-right: 0.15rem; }
.rf-switch button {
  font: inherit;
  font-weight: 800;
  color: #17432F;
  background: transparent;
  border: 1.5px solid #17432F;
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}
.rf-switch button[aria-pressed="true"] { background: #17432F; color: #F4F7F2; }
.rf-switch button:focus-visible { outline: 3px solid #F2C94C; outline-offset: 2px; }
.rf-switch .rf-reset { margin-left: auto; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; padding-left: 0.2rem; padding-right: 0.2rem; }

/* Skärmbild bredvid texten i rutan längst ner */
.rf-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.rf-fig { margin: 0; max-width: 17rem; }
.rf-shot { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid #0C2419; }
.rf-fig figcaption { margin-top: 0.6rem; color: #B9CDC2; font-size: 0.9375rem; line-height: 1.4; }
@media (min-width: 50rem) {
  .rf-split { max-width: 58rem; grid-template-columns: minmax(0, 1fr) 15rem; gap: 4rem; align-items: center; }
}
/* En anteckning som ligger först eller sist i en ruta */
.rf-aside.rf-flush { margin-top: 0; margin-bottom: 0; }