/*
Theme Name: WorkForYou
Theme URI: https://workforyou.se
Author: WorkForYou
Description: Snabbt, lättviktigt tema för WorkForYou.se – guider om lön, skatt och arbetsliv. Byggt för Yoast SEO, Core Web Vitals och läsbarhet. Inga externa beroenden, inget byggsteg.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: workforyou
*/

/* ============================================================ DESIGNSYSTEM */
:root{
  --ink:#0F1B2D;
  --ink-2:#3C4A5E;
  --ink-3:#6B7889;
  --line:#E3E8EF;
  --bg:#FFFFFF;
  --bg-2:#F5F8FC;
  --bg-3:#ECF1F8;
  --brand:#1D4ED8;
  --brand-dk:#12328F;
  --brand-lt:#E8EFFD;
  --accent:#F59E0B;
  --ok:#16803C;
  --radius:14px;
  --radius-lg:22px;
  --shadow-1:0 1px 2px rgba(15,27,45,.06), 0 2px 8px rgba(15,27,45,.05);
  --shadow-2:0 8px 24px rgba(15,27,45,.10), 0 2px 6px rgba(15,27,45,.06);
  --wrap:1140px;
  --wrap-narrow:720px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* kategorifärger – används på chips och kort */
.c-lon-och-skatt{--cat:#1D4ED8}
.c-karriar{--cat:#0E7C7B}
.c-arbetsratt{--cat:#475569}
.c-formaner{--cat:#6D28D9}
.c-yrken{--cat:#C2410C}
.c-foretagande{--cat:#15803D}
.c-arbetsliv{--cat:#3730A3}
.c-pension{--cat:#0369A1}

/* ================================================================== RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:clamp(16.5px,.4vw + 15.5px,18px);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--brand-dk)}
h1,h2,h3,h4{line-height:1.2; letter-spacing:-.018em; margin:0 0 .5em; font-weight:750}
h1{font-size:clamp(2rem,3.6vw + 1rem,3.05rem)}
h2{font-size:clamp(1.5rem,1.5vw + 1rem,2.05rem); margin-top:2.2em}
h3{font-size:clamp(1.18rem,.6vw + 1rem,1.4rem); margin-top:1.8em}
p,ul,ol,table,figure,blockquote{margin:0 0 1.15em}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(18px,4vw,32px)}
.narrow{max-width:var(--wrap-narrow)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:200; background:#fff; padding:12px 18px; border-radius:8px; box-shadow:var(--shadow-2)}

/* ================================================================= HEADER */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--line); box-shadow:0 1px 12px rgba(15,27,45,.06)}
.hd{display:flex; align-items:center; gap:20px; min-height:68px}
.brand{font-weight:800; font-size:1.24rem; letter-spacing:-.03em; color:var(--ink); text-decoration:none; white-space:nowrap}
.brand span{color:var(--brand)}
.nav{margin-left:auto}
.nav ul{display:flex; gap:6px; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.nav a{
  display:block; padding:8px 13px; border-radius:9px; color:var(--ink-2);
  text-decoration:none; font-size:.95rem; font-weight:600;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.nav a:hover,.nav .current-menu-item>a{background:var(--brand-lt); color:var(--brand-dk)}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:1rem; cursor:pointer}
@media (max-width:900px){
  .burger{display:block}
  .nav{position:absolute; inset:68px 0 auto 0; background:#fff; border-bottom:1px solid var(--line);
       display:none; padding:12px clamp(18px,4vw,32px) 20px}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column; gap:2px}
  .nav a{padding:11px 12px}
}

/* =================================================================== HERO */
.hero{position:relative; overflow:hidden; background:var(--ink); color:#fff; isolation:isolate}
.hero::before,.hero::after{
  content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(70px); opacity:.55;
}
.hero::before{width:56vw; height:56vw; left:-14vw; top:-24vw; background:#2563EB}
.hero::after{width:44vw; height:44vw; right:-12vw; bottom:-26vw; background:#0E7C7B}
@media (prefers-reduced-motion:no-preference){
  .hero::before{animation:drift1 26s var(--ease) infinite alternate}
  .hero::after{animation:drift2 32s var(--ease) infinite alternate}
}
@keyframes drift1{to{transform:translate3d(7vw,4vw,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-6vw,-5vw,0) scale(1.08)}}
.hero-in{padding:clamp(54px,7vw,96px) 0 clamp(46px,6vw,76px); max-width:760px}
.hero h1{color:#fff; margin-bottom:.35em}
.hero p{font-size:clamp(1.05rem,.5vw + .95rem,1.25rem); color:#D5E0F0; margin-bottom:1.6em; max-width:60ch}
.hero .btns{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:14px 24px; border-radius:11px; font-weight:700; text-decoration:none;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn-1{background:var(--accent); color:#231602; box-shadow:0 6px 18px rgba(245,158,11,.32)}
.btn-1:hover{transform:translateY(-2px); color:#231602; box-shadow:0 10px 26px rgba(245,158,11,.4)}
.btn-2{background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25)}
.btn-2:hover{background:rgba(255,255,255,.18); color:#fff; transform:translateY(-2px)}
.hero-facts{display:flex; gap:clamp(20px,4vw,48px); margin-top:2.4em; flex-wrap:wrap}
.hero-facts b{display:block; font-size:1.6rem; letter-spacing:-.03em}
.hero-facts span{font-size:.9rem; color:#A9BCD6}

/* ================================================================ SEKTION */
.sect{padding:clamp(48px,6vw,84px) 0}
.sect-alt{background:var(--bg-2); border-block:1px solid var(--line)}
.sect-head{max-width:64ch; margin-bottom:2em}
.sect-head h2{margin-top:0}
.sect-head p{color:var(--ink-2); font-size:1.06rem; margin:0}
.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-lt); padding:5px 11px; border-radius:99px; margin-bottom:1em;
}

/* ================================================================== KORT */
.grid{display:grid; gap:22px}
.g-3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.g-4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-1);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:#CDD9E9}
.card-thumb{aspect-ratio:16/9; background:var(--bg-3); overflow:hidden}
.card-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.card:hover .card-thumb img{transform:scale(1.045)}
.card-body{padding:19px 21px 22px; display:flex; flex-direction:column; flex:1}
.chip{
  align-self:flex-start; font-size:.73rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cat,var(--brand)); border:1px solid currentColor; padding:3px 9px; border-radius:99px; margin-bottom:11px; opacity:.9;
}
.card h3{margin:0 0 .5em; font-size:1.12rem; line-height:1.32}
.card h3 a{color:var(--ink); text-decoration:none}
.card h3 a:hover{color:var(--brand)}
.card p{color:var(--ink-2); font-size:.95rem; margin:0 0 1em}
.card-meta{margin-top:auto; font-size:.83rem; color:var(--ink-3); display:flex; gap:10px; align-items:center}

/* kategoriblock */
.cat-card{
  display:block; padding:24px; border-radius:var(--radius-lg); text-decoration:none; background:#fff;
  border:1px solid var(--line); border-left:4px solid var(--cat,var(--brand)); box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-2)}
.cat-card strong{display:block; color:var(--ink); font-size:1.1rem; margin-bottom:.35em}
.cat-card span{color:var(--ink-2); font-size:.93rem; display:block}
.cat-card em{display:block; margin-top:.8em; font-style:normal; font-size:.8rem; color:var(--ink-3)}

/* kalkylatorram */
.calc-frame{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(18px,3vw,34px); box-shadow:var(--shadow-2);
}

/* ================================================================ ARTIKEL */
.entry-head{padding:clamp(34px,5vw,58px) 0 0}
.crumbs{font-size:.86rem; color:var(--ink-3); margin-bottom:1.4em}
.crumbs a{color:var(--ink-2)}
.entry-meta{display:flex; gap:14px; flex-wrap:wrap; align-items:center; color:var(--ink-3); font-size:.9rem; margin-top:1.1em}
.entry-thumb{margin:clamp(24px,4vw,40px) 0 0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1)}
.entry{padding-bottom:clamp(40px,6vw,72px)}
.entry-content{max-width:var(--wrap-narrow); margin-inline:auto}
.entry-content h2{scroll-margin-top:90px}
.entry-content table{width:100%; border-collapse:collapse; font-size:.95rem; margin:1.8em 0}
.entry-content th,.entry-content td{padding:11px 13px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.entry-content thead th{background:var(--bg-2); font-weight:750; border-bottom:2px solid var(--line)}
.entry-content tbody tr:hover{background:var(--bg-2)}
.entry-content figure{margin:2em 0}
.entry-content figure svg{width:100%; height:auto; border-radius:var(--radius); background:var(--bg-2)}
.entry-content figcaption{font-size:.87rem; color:var(--ink-3); margin-top:.7em; text-align:center}
.entry-content blockquote{
  margin:2em 0; padding:20px 24px; background:var(--bg-2); border-left:4px solid var(--brand);
  border-radius:0 var(--radius) var(--radius) 0;
}
.entry-content blockquote p{margin-bottom:.6em}
.entry-content blockquote cite{font-style:normal; font-weight:700; font-size:.9rem; color:var(--ink-2)}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li{margin-bottom:.5em}
.entry-content li::marker{color:var(--brand)}
.wfy-note{font-size:.92rem; color:var(--ink-2); background:var(--bg-2); padding:14px 18px; border-radius:var(--radius)}

/* ================================================================ FOOTER */
.site-footer{background:var(--ink); color:#B9C7DA; padding:clamp(40px,5vw,64px) 0 28px; margin-top:clamp(40px,6vw,72px)}
.site-footer a{color:#DCE6F5; text-decoration:none}
.site-footer a:hover{color:#fff; text-decoration:underline}
.ft-grid{display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ft-grid h4{color:#fff; font-size:.95rem; margin-bottom:.9em}
.ft-grid ul{list-style:none; margin:0; padding:0}
.ft-grid li{margin-bottom:.5em; font-size:.93rem}
.ft-bot{margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.13); font-size:.85rem; color:#8DA0B9}

/* ============================================================== ANIMATION */
.reveal{opacity:0; transform:translateY(18px)}
.reveal.is-in{opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================ PAGINERING */
.pagi{display:flex; gap:8px; justify-content:center; margin-top:2.5em; flex-wrap:wrap}
.pagi .page-numbers{
  padding:9px 15px; border:1px solid var(--line); border-radius:10px; text-decoration:none;
  color:var(--ink-2); font-weight:600; background:#fff;
}
.pagi .current{background:var(--brand); border-color:var(--brand); color:#fff}
.pagi a:hover{background:var(--brand-lt); color:var(--brand-dk)}