/* ==========================================================
   digitalradighet.se — färsk design inspirerad av digg.se
   ========================================================== */

/* Självhostat typsnitt — inga anrop till tredje part */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/public-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #ffffff;
  --bg-soft: #f4f7f8;
  --bg-dark: #0b2235;
  --bg-dark-2: #102f47;
  --ink: #11202e;
  --ink-soft: #47596b;
  --accent: #0b7d60;        /* grön accent, som digg — ≥ 4,5:1 mot vitt (WCAG AA) */
  --accent-dark: #08624b;
  --accent-bright: #2bd8a8;
  --accent-warm: #e8552e;   /* varm detalj */
  --line: #dbe4ea;
  --radius: 14px;
  --max: 1160px;
  --shadow: 0 10px 30px rgba(11, 34, 53, .08);
  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Skip-link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff; padding: 10px 16px; z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------- Topplista + header ---------- */
.topbar {
  background: var(--bg-dark); color: #cfe0ec;
  font-size: .82rem; letter-spacing: .02em;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.topbar a { color: var(--accent-bright); text-decoration: none; }

header.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 22px; padding: 14px 24px; }
.logo-area { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); }
.logo-area img.vixit { height: 42px; width: auto; border-radius: 6px; }
.logo-word {
  font-weight: 800; font-size: 1.22rem; letter-spacing: -.01em; line-height: 1.1;
}
.logo-word span { color: var(--accent); }
.logo-word small { display: block; font-weight: 600; font-size: .72rem; color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase; }

nav.main-nav { margin-left: auto; }
nav.main-nav ul { list-style: none; display: flex; gap: 6px; }
nav.main-nav a {
  display: block; padding: 10px 14px; border-radius: 999px;
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem;
  transition: background .15s ease, color .15s ease;
}
nav.main-nav a:hover { background: var(--bg-soft); }
nav.main-nav a.active { background: var(--bg-dark); color: #fff; }
nav.main-nav a.nav-cta { background: var(--accent); color: #fff; }
nav.main-nav a.nav-cta:hover { background: var(--accent-dark); }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: .2s; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(43,216,168,.16), transparent 60%),
    radial-gradient(700px 380px at -10% 110%, rgba(14,143,110,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%);
  color: #eaf3f8;
  padding: 88px 0 72px;
  position: relative; overflow: hidden;
}
.hero .grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: 48px; align-items: center; }
.hero-tag {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-bright);
  border: 1px solid rgba(43,216,168,.4); border-radius: 999px; padding: 6px 14px;
  margin-bottom: 22px;
}
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.12; letter-spacing: -.02em; font-weight: 800; }
.hero h1 .mark { color: var(--accent-bright); }
.hero p.lead { margin: 20px 0 18px; font-size: 1.13rem; color: #bcd0de; max-width: 56ch; }
.hero-join {
  margin-bottom: 26px; max-width: 56ch; color: #bcd0de; font-size: 1.05rem;
  border-left: 3px solid var(--accent-bright); padding-left: 14px;
}
.hero-join strong { color: #fff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  padding: 13px 24px; border-radius: 999px; transition: transform .12s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.35); color: #fff; }
.btn-ghost:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.btn-light { background: var(--bg-dark); color: #fff; }
.btn-light:hover { background: var(--bg-dark-2); }
.btn-outline { border: 1.5px solid var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.hero-panel {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 28px;
  backdrop-filter: blur(6px);
}
.hero-panel h2 { color: var(--accent-bright); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.hero-panel ul { list-style: none; }
.hero-panel li { padding: 11px 0; border-top: 1px dashed rgba(255,255,255,.16); font-size: .98rem; }
.hero-panel li:first-child { border-top: 0; }
.hero-panel a { color: #fff; text-decoration: none; }
.hero-panel a:hover { color: var(--accent-bright); }
.hero-panel .kicker { display: block; font-size: .76rem; color: #8fa8ba; }

/* ---------- Sektioner ---------- */
section.block { padding: 76px 0; }
section.block.soft { background: var(--bg-soft); }
.section-head { max-width: 68ch; margin-bottom: 44px; }
.section-head .eyebrow {
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.015em; margin: 8px 0 12px; }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }

/* Kort / teman */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.card .card-tag {
  align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  background: #e9f7f2; border-radius: 999px; padding: 5px 12px;
}
.card h3 { font-size: 1.18rem; line-height: 1.3; }
.card p { color: var(--ink-soft); font-size: .97rem; flex: 1; }
.card a.more { font-weight: 700; text-decoration: none; }
.card a.more::after { content: " →"; }

/* Rättsreferenser */
.law-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.law {
  border: 1px solid var(--line); border-left: 5px solid var(--accent);
  border-radius: 10px; background: #fff; padding: 22px 24px;
}
.law h3 { font-size: 1.08rem; margin-bottom: 6px; }
.law h3 .tag { color: var(--ink-soft); font-weight: 600; font-size: .82rem; display: block; }
.law p { color: var(--ink-soft); font-size: .95rem; }
.law { scroll-margin-top: 96px; transition: box-shadow .3s ease; }
.law:target { box-shadow: 0 0 0 3px var(--accent-bright); }
.laws-title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.01em; margin: 56px 0 20px; scroll-margin-top: 96px; }

/* Regelverkskarta (SVG byggs av tools/regelkarta/regelkarta.py) */
.rk {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 18px;
  padding: 30px 30px 22px;
}
.rk-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.01em; margin-bottom: 6px; }
.rk-head p { color: var(--ink-soft); max-width: 72ch; }
.rk-legend {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin-top: 14px; font-size: .84rem; color: var(--ink-soft);
}
.rk-legend li { display: flex; align-items: center; gap: 6px; }
.rk-legend svg { width: 14px; height: 14px; flex: none; }
.rk-scroll {
  margin-top: 20px; overflow-x: auto; overscroll-behavior-x: contain;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.rk-scroll:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
@media (pointer: fine) {
  .rk-scroll { cursor: grab; }
  .rk-scroll.dragging { cursor: grabbing; user-select: none; }
  .rk-scroll.dragging a { cursor: grabbing; }
}
.rk-scroll svg { display: block; max-width: none; }
.rk-note { margin-top: 10px; font-size: .84rem; color: var(--ink-soft); }
.rk-note a { font-weight: 700; margin-left: 4px; }

/* Släktlinjer som lista: ersätter kartan på smala skärmar */
.rl { display: none; margin-top: 18px; }
.rl-group {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
}
.rl-group h3 {
  font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px;
}
.rl-tree, .rl-tree ul { list-style: none; }
.rl-tree > li { padding: 8px 0; }
.rl-tree > li + li { border-top: 1px dashed var(--line); }
.rl-tree ul { margin: 6px 0 0 6px; padding-left: 12px; border-left: 2px solid var(--line); }
.rl-tree ul li { padding: 5px 0; }
.rl-tree p { font-size: .9rem; line-height: 1.75; color: var(--ink-soft); }
.rl-node { color: var(--ink); font-weight: 700; }
.rl-node small { white-space: nowrap; }
.rl-node a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
.rl-node a:hover { color: var(--accent); }
.rl-node small { font-weight: 500; color: var(--ink-soft); font-size: .8rem; }
.rl-planned, .rl-planned a { color: #b8401f; }
.rl-arrow { color: var(--ink-soft); font-size: .82rem; }
.rl-end { color: var(--ink-soft); font-style: italic; font-size: .82rem; white-space: nowrap; }
.rl-note { font-size: .82rem !important; margin-top: 2px; }
.rl-i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: 0; }
.rl-eu { background: #0b7d60; border-radius: 50%; }
.rl-se { background: #1d4f91; border-radius: 2px; }
.rl-dom { background: #a3361b; transform: rotate(45deg) scale(.85); }
.rl-int { background: #5b3a96; border-radius: 50%; }
.rl-strategi { border: 2px solid #0b7d60; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff; background: #0b7d60; }
.rl-planned .rl-i { background: #fff; border: 2px dashed #e8552e; }
.rl-full { display: block; text-align: center; margin-top: 6px; }
.rl-hint { text-align: center; font-size: .8rem; color: var(--ink-soft); margin-top: 6px; }
@media (max-width: 760px) {
  .rk-scroll, .rk-note, .rk-legend + .rk-legend li:last-child { display: none; }
  .rl { display: block; }
}

.rel {
  display: inline-block; vertical-align: middle;
  font-size: .7rem; font-weight: 800; letter-spacing: .03em;
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.rel-impl  { background: #e4eefb; color: #1d4f91; }
.rel-comp  { background: #e9f7f2; color: var(--accent-dark); }
.rel-repl  { background: #fdeae4; color: #a3361b; }
.rel-base  { background: #f1eafb; color: #5b3a96; }
.rel-amend { background: #fbf3dd; color: #7a5a06; }

/* Temaartiklar */
.article-list { display: grid; gap: 18px; }
.article {
  display: grid; grid-template-columns: 130px 1fr; gap: 26px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 28px;
}
.article .date {
  font-size: .8rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .06em;
}
.article h3 { margin-bottom: 8px; font-size: 1.25rem; }
.article h3 a { color: inherit; text-decoration: none; }
.article h3 a:hover { color: var(--accent); }
.article p { color: var(--ink-soft); }

/* Nyheter */
.news-list { list-style: none; display: grid; gap: 14px; }
.news-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px;
}
.news-meta { font-size: .8rem; color: var(--ink-soft); }
.news-land {
  font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.news-item h3 { font-size: 1.12rem; line-height: 1.35; margin: 4px 0 6px; }
.news-item h3 a { color: var(--ink); text-decoration: none; }
.news-item h3 a:hover { color: var(--accent); text-decoration: underline; }
.news-item p { color: var(--ink-soft); font-size: .97rem; }
.news-source { font-size: .8rem; color: var(--ink-soft); margin-top: 6px; }
.news-empty { color: var(--ink-soft); }
.section-head .news-disclaimer { font-size: .9rem; margin-top: 12px; }

/* Nyhetsbubbla (startsidan) */
.news-bubble { position: fixed; right: 20px; bottom: 20px; z-index: 150; }
.news-bubble-btn {
  display: flex; align-items: center; gap: 8px; position: relative;
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
  background: var(--bg-dark); color: #fff; border: 2px solid var(--accent-bright);
  border-radius: 999px; padding: 12px 20px 12px 16px;
  box-shadow: 0 10px 30px rgba(11, 34, 53, .3);
  transition: transform .15s ease, background .15s ease;
}
.news-bubble-btn:hover { transform: translateY(-2px); background: var(--bg-dark-2); }
.news-bubble-btn svg { color: var(--accent-bright); flex: none; }
.news-badge {
  position: absolute; top: -8px; right: -6px; min-width: 24px; height: 24px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--accent-warm); color: #fff; font-size: .78rem; font-weight: 800;
  border: 2px solid #fff;
}
.news-panel {
  position: fixed; inset: auto 20px 88px auto; margin: 0;
  width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 22px; box-shadow: 0 20px 50px rgba(11, 34, 53, .25);
}
.news-panel::backdrop { background: transparent; }
.news-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.news-panel-head h2 {
  font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.news-panel-close {
  font: inherit; background: none; border: 0; cursor: pointer; color: var(--ink-soft);
  width: 32px; height: 32px; border-radius: 999px;
}
.news-panel-close:hover { background: var(--bg-soft); color: var(--ink); }
.news-panel-list { list-style: none; }
.news-panel-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.news-panel-list li:first-child { border-top: 0; }
.news-panel-list a { color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.4; display: block; margin-top: 2px; }
.news-panel-list a:hover { color: var(--accent); text-decoration: underline; }
.news-panel-more { display: block; margin-top: 10px; font-weight: 700; text-decoration: none; }
.news-panel-more::after { content: " →"; }

/* Om-sida */
.about { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.about img { border-radius: var(--radius); box-shadow: var(--shadow); height: auto; }
.about .who { font-size: .85rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.about h2 { font-size: 2rem; margin-bottom: 16px; letter-spacing: -.015em; }
.about p { color: var(--ink-soft); margin-bottom: 14px; max-width: 62ch; }
.about .about-actions { margin-top: 24px; }

/* Kontakt */
.contact-box {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 34px; max-width: 640px;
}
.contact-box dl { display: grid; grid-template-columns: 130px 1fr; gap: 12px 18px; margin-top: 18px; }
.contact-box dt { font-weight: 800; }
.contact-box a { text-decoration: none; }
.contact-box .note { margin-top: 20px; color: var(--ink-soft); font-size: .92rem; }

/* CTA-band */
.cta-band {
  background: linear-gradient(120deg, var(--bg-dark), var(--bg-dark-2));
  color: #eaf3f8; border-radius: 18px; padding: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.cta-band h2 { font-size: 1.6rem; letter-spacing: -.01em; margin-bottom: 6px; }
.cta-band p { color: #bcd0de; max-width: 52ch; }

/* Footer */
footer {
  background: var(--bg-dark); color: #9fb6c6; padding: 54px 0 30px; margin-top: 40px;
}
footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
footer h2 { color: #fff; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
footer ul { list-style: none; }
footer li { margin: 7px 0; }
footer a { color: #cfe0ec; text-decoration: none; }
footer a:hover { color: var(--accent-bright); }
footer .foot-logo { height: 34px; width: auto; margin-bottom: 14px; }
footer .legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 18px; font-size: .82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- Responsivt ---------- */
@media (max-width: 940px) {
  .hero .grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .law-grid { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .about img { max-width: 320px; }
  footer .cols { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; }
  .article { grid-template-columns: 1fr; gap: 8px; }
  .rk { padding: 20px 16px 18px; }
  .nav-toggle { display: block; }
  nav.main-nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); display: none; }
  nav.main-nav.open { display: block; }
  nav.main-nav ul { flex-direction: column; padding: 12px 20px 20px; }
  header.site-header { position: relative; }
  .news-bubble { right: 16px; bottom: 16px; }
  .news-bubble-btn { padding: 14px; }
  .news-bubble-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .news-panel { inset: auto 16px 84px 16px; width: auto; }
}