/* ── Nav-integration (index.css laddar nav-stilarna) ── */

/* Menyn är position:fixed (från index.css) men saknar bakgrundsfärg förrän
   klassen 'scrolled' läggs till av JS. På privacy-sidan saknas det skriptet,
   så vi sätter bakgrunden direkt — menyn ska alltid vara solid här. */
#navbar {
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

/* Skip-länk — visas vid tangentbordsfokus */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--amber); color: #191724;
  padding: 10px 18px; border-radius: 0 0 8px 8px;
  font-weight: 600; text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* Innehållet skjuts ner under den fixerade menyn */
body { padding-top: 0; }  /* index.css sätter body-stilar — override vid behov */
/* Stilar för integritetspolicysidan (privacy.html).
   Tidigare inbäddade som <style>-tagg direkt i HTML. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
:root {
  /* --bg/--text/--amber-text/--amber-hover ärvs redan från index.css (laddas
     före denna fil på privacy.html) — behöver inte upprepas här. Bara det
     som privacy.css historiskt definierat om själv listas nedan, nu med
     riktiga ljusa värden istället för att bara upprepa index.css mörka. */
  --amber: #f6c177;
  --purple: #9d91f8;
  --surface: #ffffff;
  --border: #e8e4df;
  --muted: #6b6274;   /* 5.51:1 mot --bg */
  --dim: #75697f;     /* 4.89:1 mot --bg */
  --nav-bg: rgba(255,255,255,0.9);
  --input-bg: #f4f5f7;
  --code-text: #5d3fc9;   /* 6.61:1 — samma som --purple-text i index.css */
  --success-text: #1a7a42; /* 5.11:1 */
  --danger-text2: #c81e1e; /* 5.45:1 — egen variabel eftersom .contact-msg.error
                               historiskt använt en annan röd ton (#f87171)
                               än de andra felmeddelandena på sajten */
}
body.dark {
  --amber: #f6c177;
  --purple: #9d91f8;
  --surface: #1f1d2e;
  --border: rgba(246,193,119,0.08);
  --muted: #908caa;
  --dim: #918cab;
  --nav-bg: rgba(25,23,36,0.95);
  --input-bg: rgba(25,23,36,0.6);
  --code-text: #c4b5fd;
  --success-text: #4ade80;
  --danger-text2: #f87171;
}

.back-link {
  font-size: 0.82rem; color: var(--muted);
  text-decoration: none; font-family: 'JetBrains Mono', monospace;
  transition: color 0.2s;
}
.back-link:hover { color: var(--amber-hover); }

/* Main */
main {
  max-width: 760px; margin: 0 auto;
  /* padding-top 80px = höjden på den fixerade menyn (index.css: nav position:fixed).
     Utan det scrollar innehållet under menyn istället för bakom den. */
  padding: 80px 24px 100px;
}

/* Header */
.page-header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.page-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600; color: var(--purple);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.page-header h1 {
  font-size: 2.2rem; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.15;
  margin-bottom: 12px;
}
.page-header h1 span { color: var(--amber-text); }
.page-meta {
  font-size: 0.82rem; color: var(--dim);
  font-family: 'JetBrains Mono', monospace;
}

/* Intro */
.intro {
  background: rgba(124,106,247,0.06);
  border: 1px solid rgba(124,106,247,0.12);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 48px;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.7;
}
.intro strong { color: var(--text); }

/* Sections */
.policy-section {
  margin-bottom: 48px;
}
.section-number {
  font-family: 'JetBrains Mono', monospace;
  /* 700 istället för 600: vikt 600 laddas inte längre (användes bara här), och
     vid 0.7rem med versaler är skillnaden omärklig. Sparar en 22 kB-fil. */
  font-size: 0.7rem; font-weight: 700;
  color: var(--amber-text); letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.policy-section h2 {
  font-size: 1.15rem; font-weight: 700;
  margin-bottom: 14px; color: var(--text);
}
.policy-section p {
  color: var(--muted); font-size: 0.93rem;
  margin-bottom: 12px;
}
.policy-section p:last-child { margin-bottom: 0; }

/* List */
.policy-list {
  list-style: none;
  margin: 12px 0;
}
.policy-list li {
  display: flex; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 0.93rem; color: var(--muted);
}
.policy-list li:last-child { border-bottom: none; }
.policy-list li::before {
  content: '–';
  color: var(--amber-text);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
  margin-top: 1px;
}
.policy-list li strong { color: var(--text); }

/* Rights grid */
.rights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.right-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.right-icon { font-size: 1.4rem; margin-bottom: 8px; }
.right-title { font-size: 0.82rem; font-weight: 600; margin-bottom: 4px; }
.right-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 560px) {
  .rights-grid { grid-template-columns: 1fr; }
}

/* Code */
code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  background: rgba(124,106,247,0.1);
  color: var(--code-text);
  padding: 2px 7px;
  border-radius: 4px;
}

/* Contact card */
.contact-card {
  background: linear-gradient(135deg, rgba(246,193,119,0.06), rgba(124,106,247,0.06));
  border: 1px solid rgba(246,193,119,0.1);
  border-radius: 14px;
  padding: 28px 32px;
}
.contact-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.contact-card > p { font-size: 0.85rem; color: var(--muted); margin-bottom: 20px; }
.contact-field { margin-bottom: 14px; }
.contact-field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.contact-field input, .contact-field textarea {
  width: 100%; background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text); padding: 10px 14px; border-radius: 8px; font-family: 'Outfit', sans-serif;
  font-size: 0.9rem; box-sizing: border-box;
}
.contact-field textarea { resize: vertical; min-height: 100px; }
.contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: var(--amber); }
.contact-website { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.contact-submit {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--amber); color: #191724;
  padding: 10px 22px; border-radius: 8px; border: none;
  font-weight: 600; font-size: 0.88rem; cursor: pointer;
  transition: opacity 0.2s; font-family: 'Outfit', sans-serif;
}
.contact-submit:hover { opacity: 0.88; }
.contact-submit:disabled { opacity: 0.5; cursor: default; }
.contact-msg { font-size: 0.85rem; margin-top: 12px; display: none; }
.contact-msg.success { color: var(--success-text); display: block; }
.contact-msg.error { color: var(--danger-text2); display: block; }

/* Divider */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}

/* Footer — borttagen. Fotnoten stylas nu helt av index.css (samma
   kolumn-layout som index.html). Den gamla regeln här satte
   font-family: 'JetBrains Mono', text-align: center och mindre padding,
   vilket vann över index.css eftersom privacy.css laddas sist — det gjorde
   att footer-texten blev monospace och centrerad istället för Outfit och
   vänsterställd som på index.html. */