/* Color system – start with Katchunk-inspired variables; tweak later to match katchunk.com exactly */
:root{
  --bg: #0b0b10;        /* deep near-black */
  --card: #15151d;      /* dark card */
  --text: #e9ecf1;      /* off-white */
  --muted: #9aa4b2;     /* muted text */
  --accent: #33e1a5;    /* bold green-teal accent */
  --accent-2: #8aa3ff;  /* secondary accent */
  --border: #252736;
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.5;
}
.container{ max-width:1100px; margin:0 auto; padding:1.25rem }
.flex{ display:flex } .between{ justify-content:space-between } .center{ align-items:center }
.grid{ display:grid; gap:1rem } .grid-3{ grid-template-columns: 1fr 1fr auto }

.site-header{ border-bottom:1px solid var(--border); position:sticky; top:0; backdrop-filter:saturate(180%) blur(8px); background:rgba(11,11,16,0.85) }
.brand{ color:var(--text); text-decoration:none; font-weight:800; font-size:1.25rem }
.a a{ color:var(--muted); text-decoration:none; margin-left:1rem }
.a a:hover{ color:var(--text) } 
.nav a{ color:var(--muted); text-decoration:none; margin-left:1rem }
.nav a:hover{ color:var(--text) }
/* Lägg till gemensam aktiv nav-stil */
.nav a.active {
    color: var(--accent);
}

.hero{ padding:2rem 0 1rem }
.hero h1{ margin:0 0 .25rem; font-size:2rem }
.hero p{ color:var(--muted); margin:0 }
.hero a{ color:var(--accent); text-decoration:none; font-size:inherit }
.hero a:hover{ text-decoration:underline }

.filters{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1rem; margin:1rem 0 }
.input, .select, .btn{ width:100%; padding:.7rem .9rem; border-radius:10px; border:1px solid var(--border); background:#0f1017; color:var(--text) }
.select{ appearance:none }
.btn{ background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#0b0b10; font-weight:700; border:none; cursor:pointer }
.btn:hover{ filter:brightness(1.05) }
/* Lägg till align-end från Sfs.aspx */
.align-end{ display:flex; align-items:flex-end }

.law-list{ list-style:none; margin:0; padding:0 }
.law-item{ border-bottom:1px solid var(--border); padding:1rem 0 }
.law-meta{ font-size:.9rem; color:var(--muted); display:flex; gap:1rem }
.designator{ color:var(--accent); font-weight:700 }
.law-title{ margin:.25rem 0 0; font-weight:700; font-size:1.05rem }
.law-title a{ color:var(--text); text-decoration:none }
.law-title a:hover{ text-decoration:underline }

.pager{ margin:1.25rem 0 }
.pages{ list-style:none; padding:0; margin:0; display:flex; gap:.5rem; flex-wrap:wrap }
.pages li{ }
.pages a, .pages span{ display:block; padding:.55rem .85rem; border:1px solid var(--border); border-radius:10px; text-decoration:none; color:var(--text); background:var(--card) }
.pages li.active span{ background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#0b0b10; font-weight:800 }

.content a { color:var(--accent); text-decoration:none; font-size:inherit }
.content a:hover { text-decoration:underline }

.site-footer a { color:var(--accent); text-decoration:none; font-size:inherit }
.site-footer a:hover { text-decoration:underline }

.site-footer{ border-top:1px solid var(--border); margin-top:2rem; padding:1rem 0; color:var(--muted) }