/* ===========================================================================
   Pinnly — juridiska sidor

   Delad stil för /villkor, /integritetspolicy, /riktlinjer och /radera-konto.
   Landningssidan har all sin CSS inline eftersom den är EN fil; de här är
   fyra, och fyra kopior av samma stilmall glider isär första gången någon
   ändrar en färg. Därför en riktig fil här.

   Färgerna är samma variabler som index.html sätter, medvetet duplicerade
   och inte importerade: sidorna ska kunna laddas ensamma, och en juridisk
   sida som väntar på en andra fil innan den kan renderas är en juridisk
   sida som riskerar att inte synas.
   =========================================================================== */

:root {
  --green: #2DCE89;
  --green-deep: #16A66A;
  --ink: #0A0C0E;
  --paper: #FFFFFF;
  --paper-2: #F5F7F8;
  --line: #E5E8EA;
  --text: #0F1417;
  --text-muted: #5D686E;
  --text-invert: #FFFFFF;
  --text-invert-muted: rgba(255,255,255,0.66);
  --max: 780px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--paper);
  color: var(--text);
  line-height: 1.7;
  font-size: 1rem;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }

/* --- Toppen ------------------------------------------------------------- */
/* Ingen full navigering här. En juridisk sida ska leda tillbaka till appen
   eller till startsidan, inte in i en marknadsföringstratt. */
.top {
  background: var(--ink);
  color: var(--text-invert);
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.top a.home { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.top img { height: 19px; width: auto; }
.top .back {
  color: var(--text-invert-muted);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}
.top .back:hover { color: var(--text-invert); }

.lang { display: flex; gap: 4px; }
.lang button {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-invert-muted);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.lang button[aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green);
  color: #06231A;
}

/* --- Dokumenthuvud ------------------------------------------------------ */
header.doc { padding: 54px 0 28px; border-bottom: 1px solid var(--line); }
header.doc .eyebrow {
  color: var(--green-deep);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
header.doc h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
header.doc .meta { margin-top: 14px; color: var(--text-muted); font-size: 0.87rem; }

/* --- Innehåll ----------------------------------------------------------- */
main { padding: 34px 0 70px; }

/* Innehållsförteckning. Sammanfattningen ovanför den är inte juridiskt
   bindande och säger det själv — den finns för att den enda personen som
   läser hela villkoren annars är den som redan är arg. */
.summary {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 34px;
}
.summary h2 { font-size: 0.98rem; font-weight: 800; margin-bottom: 8px; }
.summary p { color: var(--text-muted); font-size: 0.92rem; }
.summary ul { margin: 10px 0 0 18px; color: var(--text-muted); font-size: 0.92rem; }
.summary li { margin-bottom: 5px; }
.summary .disclaimer { margin-top: 12px; font-size: 0.82rem; font-style: italic; }

.toc { margin-bottom: 40px; }
.toc h2 { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.toc ol { margin-left: 20px; font-size: 0.93rem; }
.toc li { margin-bottom: 4px; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--green-deep); text-decoration: underline; }

section.s { margin-bottom: 38px; scroll-margin-top: 86px; }
section.s h2 {
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
section.s h2 .num { color: var(--green-deep); margin-right: 8px; }
section.s h3 { font-size: 1rem; font-weight: 700; margin: 20px 0 8px; }
section.s p { margin-bottom: 12px; color: var(--text); }
section.s ul, section.s ol { margin: 0 0 14px 20px; }
section.s li { margin-bottom: 7px; }
section.s a { color: var(--green-deep); }

strong { font-weight: 700; }

/* Tabeller (personuppgiftsbiträden, kategorier av uppgifter). Rullar i sin
   egen behållare på mobil i stället för att spränga sidbredden. */
.table-scroll { overflow-x: auto; margin-bottom: 16px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 0.89rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 800; background: var(--paper-2); font-size: 0.8rem; letter-spacing: 0.02em; }
td { color: var(--text-muted); }
td:first-child { color: var(--text); font-weight: 600; }

/* Ruta för det som användaren behöver hitta snabbt: kontakt, hur man raderar
   sitt konto, hur man anmäler. */
.callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--paper-2);
  margin-bottom: 16px;
}
.callout p:last-child { margin-bottom: 0; }

/* Platshållare som måste fyllas i innan sidan kan anses fullständig. Syns
   med flit: en tom rad i en juridisk text är värre än en markerad. */
.todo {
  background: #FFF4D6;
  border: 1px dashed #D9A400;
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 0.86em;
  font-weight: 700;
  color: #7A5A00;
}

/* --- Footer ------------------------------------------------------------- */
footer {
  background: var(--ink);
  color: var(--text-invert-muted);
  padding: 40px 0;
  font-size: 0.86rem;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
footer a { color: var(--text-invert-muted); text-decoration: none; margin-right: 16px; }
footer a:hover { color: var(--text-invert); }
footer .foot-links { display: flex; flex-wrap: wrap; }

/* Språkväxlingen döljer det språk som inte är valt. Utan JS syns svenska,
   eftersom [data-lang] utan .hidden är default — sidan är läsbar även om
   skriptet aldrig kör. */
[data-lang].hidden { display: none; }

@media (max-width: 560px) {
  header.doc { padding: 38px 0 22px; }
  .top .back { display: none; }
}