/* YH-stöd, alla sidor (2026-10-27). Samma gröna och guld som den gamla
 * sidan, verktyget först. Sidorna byggs från en mall så att huvudet och
 * foten är lika överallt. */

:root {
    --gron: #1F4D3B;
    --gron-mork: #143329;
    --band: linear-gradient(135deg, #1F4D3B 0%, #143329 100%);
    --guld: #C6A85B;
    --guld-ljus: #D9BF7C;
    --pa-guld: #2B2416;
    --papper: #F7F6F2;
    --ljus: #EEF2EE;
    --vit: #FFFFFF;
    --linje: rgba(31, 77, 59, 0.12);
    --linje-stark: rgba(31, 77, 59, 0.22);
    --text: #1A1A1A;
    --dampad: #4A514C;
    --pa-gron: rgba(245, 241, 232, 0.86);
    --pa-gron-svag: rgba(245, 241, 232, 0.66);
    --radie: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text); background: var(--papper); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--gron); }
a:hover { color: var(--gron-mork); }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.025em; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--guld); outline-offset: 2px; }

.hoppa { position: absolute; left: -9999px; }
.hoppa:focus { left: 16px; top: 16px; z-index: 10; background: var(--vit); padding: 10px 14px; border-radius: 8px; }

.knapp { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; }
.knapp-guld { background: var(--guld); color: var(--pa-guld); }
.knapp-guld:hover { background: var(--guld-ljus); color: var(--pa-guld); }
.knapp-ram { color: #fff; box-shadow: inset 0 0 0 1px rgba(245, 241, 232, 0.4); }
.knapp-ram:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--guld); }
.knapp-gron { background: var(--gron); color: #fff; }
.knapp-gron:hover { background: var(--gron-mork); color: #fff; }

/* Det mörkgröna bandet överst, med huvudet. */
.band { background: var(--band); color: #fff; }
/* Huvudet är vitt ovanpå bandet (Theo 2026-10-27). */
.nav-rad { background: var(--vit); border-bottom: 1px solid var(--linje); color: var(--text); }
.nav { max-width: 1200px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.logga { font-weight: 800; font-size: 22px; letter-spacing: -0.03em; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.logga:hover { color: #fff; }
.nav-rad .logga, .nav-rad .logga:hover { color: var(--text); }
.logga .logo-yh { color: var(--guld); }
.nav-lankar { display: flex; align-items: center; gap: 8px 26px; font-size: 15px; flex-wrap: wrap; }
.nav-lankar a:not(.knapp) { color: var(--dampad); text-decoration: none; padding: 6px 0; }
.nav-lankar a:not(.knapp):hover, .nav-lankar a[aria-current] { color: var(--gron); }
.nav-lankar a[aria-current] { box-shadow: inset 0 -2px 0 var(--guld); }
.nav-lankar { margin-left: auto; }
.nav-logga-in { min-height: 42px; padding: 0 20px; background: var(--gron); color: #fff; }
.nav-logga-in:hover { background: var(--gron-mork); color: #fff; }

.band-inre { max-width: 1200px; margin: 0 auto; padding: 56px 24px 88px; }
.tillbaka { display: inline-block; color: var(--pa-gron); text-decoration: none; font-size: 15px; margin-bottom: 22px; }
.tillbaka:hover { color: #fff; }
.band h1 { font-size: clamp(38px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; max-width: 860px; }
.band .ingress { margin: 22px 0 0; font-size: 20px; line-height: 1.6; color: var(--pa-gron); max-width: 680px; }
.band .knappar { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.meta { display: flex; gap: 8px 16px; flex-wrap: wrap; font-size: 14px; color: var(--pa-gron-svag); margin-bottom: 18px; }
.meta .tagg { color: var(--guld); font-weight: 600; }

/* Startsidans topp: text till vänster, demon av verktyget till höger. */
.topp-text { max-width: 620px; }
.demo { margin: 0; }
.demo-ruta, .demo > picture { display: block; border-radius: 14px; overflow: hidden; background: #EEF4F0; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55); }
/* Knapparna står under demon så att de inte skymmer verktyget. */
.demo-knappar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.demo-knapp { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(245, 241, 232, 0.4); font: 600 14px Inter, system-ui, sans-serif; cursor: pointer; }
.demo-knapp:hover { box-shadow: inset 0 0 0 1px var(--guld); }
/* Se större: demon i en ruta över sidan. */
.demo-stor { position: fixed; inset: 0; z-index: 100; background: rgba(10, 26, 20, 0.9); display: flex; align-items: center; justify-content: center; padding: 16px; }
.demo-stor-yta { width: 100%; }
.demo-stor-ruta { border-radius: 12px; overflow: hidden; background: #EEF4F0; box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.6); }
.demo img { display: block; width: 100%; height: auto; }
.topp-rutnat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 96px; }
.topp-text p { margin: 0; }
.topp-text p + p { margin-top: 14px; }
.prova { background: var(--vit); color: var(--text); border-radius: 18px; padding: 26px; box-shadow: 0 40px 90px -36px rgba(0, 0, 0, 0.6); }
.prova h2 { font-size: 22px; color: var(--gron); margin-bottom: 16px; }
.prova { min-width: 0; }
.prova form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.prova label { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border: 1px solid var(--linje-stark); border-radius: 10px; color: var(--dampad); font-size: 12px; font-weight: 600; }
.prova label:focus-within { border-color: var(--gron); }
.prova input, .prova select { width: 100%; min-width: 0; text-overflow: ellipsis; border: 0; font: inherit; font-size: 17px; font-weight: 500; color: var(--text); padding: 2px 0; background: transparent; min-height: 28px; }
.prova input:focus, .prova select:focus { outline: none; }
.prova .knapp { min-height: 54px; border-radius: 10px; font-size: 16px; margin-top: 4px; }

/* Sektionerna på ljus botten. */
.sektion { max-width: 1200px; margin: 0 auto; padding: 88px 24px; }
.sektion h2 { font-size: 36px; color: var(--gron); }
.sektion-huvud { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.sektion-huvud > a:not(.knapp) { font-weight: 600; font-size: 15px; }
.vit-botten { background: var(--vit); border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); }
.smal { max-width: 780px; }

.moduler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.modul { background: var(--vit); border: 1px solid var(--linje); border-radius: 14px; overflow: hidden; }
.modul h3 { font-size: 21px; padding: 22px 24px 0; color: var(--text); }
.modul p { margin: 6px 0 0; padding: 0 24px 26px; font-size: 15px; line-height: 1.55; color: var(--dampad); }
.modul-bild { background: var(--ljus); height: 176px; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; }
.modul-bild > i { display: block; height: 12px; background: var(--gron); border-radius: 3px; }
.modul-tabell { justify-content: center; gap: 8px; font-size: 12px; padding: 18px 20px; }
.modul-tabell .rad { display: flex; justify-content: space-between; gap: 8px; background: var(--vit); padding: 7px 10px; border-radius: 4px; }
.modul-tabell .rad-huvud { background: var(--gron); color: #fff; }
.modul-taggar { flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: flex-start; gap: 8px; font-size: 13px; }
.modul-taggar span { background: var(--vit); border: 1px solid var(--linje-stark); border-radius: 999px; padding: 7px 12px; }
.modul-taggar .vald { background: var(--gron); border-color: var(--gron); color: #fff; }

.tjanster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.tjanster a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; border-top: 1px solid var(--linje-stark); color: var(--text); text-decoration: none; font-size: 21px; font-weight: 600; }
.tjanster a:nth-last-child(-n+2) { border-bottom: 1px solid var(--linje-stark); }
.tjanster a:hover { color: var(--gron); }
.tjanster a span { color: var(--guld); transition: transform .15s; }
.tjanster a:hover span { transform: translateX(4px); }

.kort-rutnat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kort { display: flex; flex-direction: column; gap: 10px; background: var(--vit); border: 1px solid var(--linje); border-radius: var(--radie); padding: 26px; color: var(--text); text-decoration: none; }
a.kort:hover { border-color: var(--gron); color: var(--text); }
.kort .tagg { font-size: 13px; font-weight: 600; color: var(--gron); }
.kort h3 { font-size: 19px; line-height: 1.35; }
.kort p { margin: 0; font-size: 15px; color: var(--dampad); }
.kort .av { margin-top: auto; padding-top: 8px; font-size: 14px; color: var(--dampad); }

/* Tjänstesidorna. */
.ingar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ingar .kort h3 { font-size: 19px; }
.steg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: steg; }
.steg li { counter-increment: steg; border-top: 2px solid var(--gron); padding-top: 18px; }
.steg li::before { content: counter(steg, decimal-leading-zero); display: block; font-size: 14px; font-weight: 700; color: var(--guld); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.steg h3 { font-size: 18px; margin-bottom: 6px; }
.steg p { margin: 0; font-size: 15px; color: var(--dampad); }
.punkter { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.punkter li { position: relative; padding-left: 22px; font-size: 17px; }
.punkter li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 2px; background: var(--guld); }
.fragor details { border-top: 1px solid var(--linje-stark); }
.fragor details:last-child { border-bottom: 1px solid var(--linje-stark); }
.fragor summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 18px; font-weight: 600; }
.fragor summary::-webkit-details-marker { display: none; }
.fragor summary::after { content: "+"; color: var(--gron); font-weight: 400; font-size: 24px; line-height: 1; }
.fragor details[open] summary::after { content: "−"; }
.fragor details p { margin: 0 0 22px; max-width: 720px; color: var(--dampad); font-size: 16px; }
.delar { display: grid; gap: 72px; }

/* Artiklarna. */
.artikel { max-width: 720px; margin: 0 auto; padding: 72px 24px 24px; font-size: 18px; line-height: 1.75; }
.artikel h2 { font-size: 27px; color: var(--gron); margin: 44px 0 12px; }
.artikel h3 { font-size: 20px; margin: 28px 0 8px; }
.artikel p { margin: 0 0 18px; }
.artikel ul, .artikel ol { margin: 0 0 20px; padding-left: 22px; }
.artikel li { margin-bottom: 8px; }
.artikel .insikt-pullquote { margin: 32px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--guld); font-size: 22px; line-height: 1.5; font-weight: 600; color: var(--gron); }
.artikel .insikt-takeaways { margin: 36px 0; padding: 26px 28px; background: var(--vit); border: 1px solid var(--linje); border-radius: var(--radie); }
.artikel .insikt-takeaways h3 { margin-top: 0; color: var(--gron); }
.artikel .insikt-takeaways ul { margin-bottom: 0; }
.signatur { max-width: 720px; margin: 0 auto; padding: 8px 24px 72px; display: flex; gap: 16px; align-items: center; }
.signatur img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.signatur b { display: block; font-size: 17px; }
.signatur span { font-size: 15px; color: var(--dampad); }

/* Policysidorna: innehållet ligger kvar som det var skrivet. */
.policy h2 { font-size: 24px; color: var(--gron); margin: 40px 0 12px; }
.policy h2:first-child { margin-top: 0; }
.policy h3 { font-size: 18px; margin: 0 0 6px; }
.policy p, .policy li { font-size: 17px; }
.policy ul { padding-left: 22px; }
.policy .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 12px 0; }
.policy .detail-item { background: var(--vit); border: 1px solid var(--linje); border-radius: var(--radie); padding: 20px 22px; }
.policy .detail-item p { margin: 0; font-size: 15px; color: var(--dampad); }
.policy table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0; }
.policy th, .policy td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linje-stark); vertical-align: top; }
.policy th { color: var(--gron); }

/* Kontakt och fot, lika på alla sidor. */
.kontakt { background: var(--band); color: #fff; }
.kontakt .sektion { padding-bottom: 40px; }
.kontakt h2 { color: #fff; }
.folk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.person { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.person img { width: 132px; height: 132px; border-radius: 12px; object-fit: cover; }
.person address { font-style: normal; display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.person b { font-size: 21px; }
.person span { color: var(--pa-gron-svag); margin-bottom: 10px; }
.person a { color: #fff; }
.fot { margin-top: 72px; padding-top: 28px; border-top: 1px solid rgba(245, 241, 232, 0.16); display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 32px; font-size: 14px; color: var(--pa-gron-svag); }
.fot p { margin: 10px 0 0; }
.fot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fot a { color: var(--pa-gron); text-decoration: none; }
.fot a:hover { color: #fff; }
.fot-rubrik { color: #fff; font-weight: 600; margin-bottom: 10px; }

@media (max-width: 960px) {
    .steg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .topp-rutnat, .moduler, .tjanster, .kort-rutnat, .folk, .ingar, .fot, .policy .detail-grid { grid-template-columns: minmax(0, 1fr); }
    .topp-rutnat { gap: 36px; padding-top: 32px; padding-bottom: 56px; }
    .demo { width: 100%; max-width: 640px; justify-self: center; }
    .demo-knappar { justify-content: center; }
    .tjanster a:nth-last-child(2) { border-bottom: 0; }
    .nav, .sektion, .band-inre { padding-left: 16px; padding-right: 16px; }
    .sektion { padding-top: 64px; padding-bottom: 64px; }
    .sektion h2 { font-size: 30px; }
    .band .ingress { font-size: 18px; }
    /* Mobilen: loggan och Logga in på första raden, länkarna under. */
    .nav { padding-top: 14px; padding-bottom: 10px; gap: 10px 16px; }
    .nav-logga-in { order: 2; margin-left: auto; min-height: 38px; padding: 0 16px; font-size: 14px; }
    .nav-lankar { order: 3; width: 100%; margin-left: 0; justify-content: flex-start; gap: 4px 22px; font-size: 14px; }
}
@media (max-width: 520px) {
    .steg { grid-template-columns: minmax(0, 1fr); }
}