/* Tillägg för outreach.spekt.se. stil.css är spekt.se:s gemensamma stil och hålls orörd. */

/* ------- märket: SPEKT-loggan + tjänstens namn ------- */
.marke .tjanst {
  margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--linje);
  font-family: "Martian Mono", ui-monospace, Menlo, monospace;
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ljus);
  line-height: 26px;
}
nav.lankar { align-items: center; }
nav.lankar a.knapp { color: #14100A; padding: 8px 16px; font-size: 0.85rem; }
nav.lankar a.knapp:hover { color: #14100A; }
@media (max-width: 380px) { .marke .tjanst { display: none; } }

/* ------- priser ------- */
.priser { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; align-items: stretch; }
.priser article {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--yta); border: 1px solid var(--linje); border-radius: 10px; padding: 28px 26px;
}
.priser article.forst { border-color: var(--accent); background: var(--yta-ljus); }
.priser article.egen { background: transparent; border-style: dashed; }
.priser h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.priser .pris { margin: 4px 0 0; font-size: 2.4rem; font-weight: 850; letter-spacing: -0.02em; line-height: 1.05; }
.priser .pris small { font-size: 0.95rem; font-weight: 600; color: var(--dov); letter-spacing: 0; white-space: nowrap; }
.priser .per { margin: 0; font-size: 0.72rem; color: var(--accent-ljus); letter-spacing: 0.04em; }
.priser ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; font-size: 0.93rem; flex: 1; align-content: start; }
.priser li { padding-left: 22px; position: relative; color: var(--dov); }
.priser li::before { content: "✓"; content: "✓" / ""; position: absolute; left: 0; color: var(--accent-ljus); }
.priser .egen p { margin: 0; color: var(--dov); font-size: 0.95rem; flex: 1; }
.priser .knapp { align-self: flex-start; margin-top: 10px; }
.villkor { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; max-width: 72ch; color: var(--dov); font-size: 0.95rem; }
.villkor li { padding-left: 22px; position: relative; }
.villkor li::before { content: "→"; content: "→" / ""; position: absolute; left: 0; color: var(--accent); }
.villkor strong { color: var(--text); }

/* ------- vanliga frågor ------- */
.fragor { max-width: 780px; display: grid; gap: 10px; }
.fragor details { background: var(--yta); border: 1px solid var(--linje); border-radius: 10px; }
.fragor summary {
  cursor: pointer; list-style: none; padding: 18px 22px; min-height: 44px;
  font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.fragor summary::-webkit-details-marker { display: none; }
.fragor summary::after { content: "+"; content: "+" / ""; color: var(--accent-ljus); font-weight: 600; font-size: 1.2rem; line-height: 1; }
.fragor details[open] summary::after { content: "–"; content: "–" / ""; }
.fragor summary:focus-visible { outline-offset: -2px; border-radius: 10px; }
.fragor details p { margin: 0; padding: 0 22px 20px; color: var(--dov); }

/* ------- integritetssidan ------- */
.text { max-width: 70ch; }
.text h2 { font-size: 1.3rem; margin: 40px 0 10px; }
.text p, .text li { color: var(--dov); }
.text strong { color: var(--text); }
.text a { color: var(--text); text-underline-offset: 3px; text-decoration-color: var(--accent-djup); }