/*
Theme Name:   Brainstimulation
Theme URI:    https://www.brainstimulation.se/
Description:  Childtema till GeneratePress för brainstimulation.se. Hjärngympa, tester och kluringar. Designidé: synapser som tänds. Djup natt-indigo, elektrisk violett, korall och en gnista av lime. Bricolage Grotesque i rubriker och Atkinson Hyperlegible i brödtext, ett typsnitt byggt för att vara lättläst även med nedsatt syn.
Author:       Redaktionen
Template:     generatepress
Version:      1.0.3
Text Domain:  brainstimulation-child
License:      GNU General Public License v2 or later
*/

/* ==========================================================================
   1. Typsnitt (självhostade, OFL)
   ========================================================================== */
@font-face{font-family:"Bricolage Grotesque";src:url("assets/fonts/bricolage-grotesque-wght.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("assets/fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ==========================================================================
   2. Färger och mått
   ========================================================================== */
:root{
	--bs-natt:#16133d;
	--bs-natt-2:#221d5c;
	--bs-violett:#5b3df5;
	--bs-violett-mork:#4327d9;
	--bs-violett-ljus:#ece8ff;
	--bs-korall:#ff6a57;
	--bs-korall-mork:#c8412f;
	--bs-lime:#c6f432;
	--bs-gron:#0e8a6f;
	--bs-gul:#f2b632;
	--bs-papper:#f8f6ff;
	--bs-vit:#ffffff;
	--bs-black:#1d1b2f;
	--bs-dov:#5d5a73;
	--bs-linje:#e3dff2;
	--bs-radie:18px;
	--bs-radie-liten:10px;
	--bs-skugga:0 1px 2px rgba(22,19,61,.06),0 8px 28px rgba(22,19,61,.08);
	--bs-skugga-hover:0 2px 4px rgba(22,19,61,.08),0 16px 40px rgba(91,61,245,.18);
	--bs-rubrik:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
	--bs-text:"Atkinson Hyperlegible",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
	--bs-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
	--bs-bredd:1180px;
}

/* ==========================================================================
   3. Grund
   ========================================================================== */
body{background:var(--bs-papper);color:var(--bs-black);font-family:var(--bs-text);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,.entry-title,.main-title{font-family:var(--bs-rubrik);color:var(--bs-natt);letter-spacing:-.015em;font-variation-settings:"wdth" 100}
h1,.entry-title{font-size:clamp(2rem,1.3rem + 3vw,3.25rem);font-weight:800;line-height:1.08}
h2{font-size:clamp(1.55rem,1.2rem + 1.4vw,2.2rem);font-weight:750;line-height:1.15;margin-top:2.2em}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);font-weight:700;line-height:1.25;margin-top:1.8em}
h4{font-size:1.1rem;font-weight:700}
p,li{max-width:72ch}
a{color:var(--bs-violett);text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.18em;transition:color .15s}
a:hover{color:var(--bs-violett-mork);text-decoration-thickness:.14em}
::selection{background:var(--bs-lime);color:var(--bs-natt)}
:focus-visible{outline:3px solid var(--bs-korall);outline-offset:3px;border-radius:4px}
strong,b{font-weight:700;color:var(--bs-natt)}
small{color:var(--bs-dov)}
img{border-radius:var(--bs-radie-liten)}

/* Synaps-avdelare: hr blir en nervbana med noder */
hr,.wp-block-separator{border:0;height:14px;margin:2.6em auto;max-width:280px;background:
	radial-gradient(circle,var(--bs-violett) 0 4px,transparent 5px) 0 50%/14px 14px no-repeat,
	radial-gradient(circle,var(--bs-korall) 0 4px,transparent 5px) 50% 50%/14px 14px no-repeat,
	radial-gradient(circle,var(--bs-violett) 0 4px,transparent 5px) 100% 50%/14px 14px no-repeat,
	linear-gradient(var(--bs-linje),var(--bs-linje)) 50% 50%/100% 2px no-repeat}

/* ==========================================================================
   4. Sidhuvud
   ========================================================================== */
body .site-header{background:var(--bs-natt);background-image:linear-gradient(180deg,rgba(22,19,61,.0),rgba(22,19,61,.0)),url("assets/synapser.svg");background-size:cover;background-position:center;border-bottom:3px solid var(--bs-violett);position:relative}
body .site-header .inside-header{padding-top:18px;padding-bottom:18px}
body .main-title{font-size:1.6rem;font-weight:800;margin:0;line-height:1}
body .main-title a,body .main-title a:hover{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:.55rem}
.bs-logo-ikon{display:inline-flex;width:40px;height:40px;flex:0 0 40px}
.bs-logo-ikon svg{width:100%;height:100%}
.bs-logo-text span{color:var(--bs-lime)}
body .site-description{color:#c9c2ff;font-size:.9rem;margin-top:.35rem;font-family:var(--bs-text)}

/* Navigation: färger sätts med hög specificitet så att Customizerns standard inte vinner */
body .main-navigation,body .main-navigation ul ul,body .main-navigation .main-nav ul ul{background:transparent}
body .site-header .main-navigation{background:transparent}
body .main-navigation .main-nav ul li a,body .main-navigation .menu-toggle,body .main-navigation .menu-bar-items{color:#fff;font-family:var(--bs-rubrik);font-weight:650;font-size:1rem;text-decoration:none}
body .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover>a,body .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus>a{color:var(--bs-lime);background:transparent}
body .main-navigation .main-nav ul li[class*="current-menu-"]>a{color:var(--bs-lime);background:transparent;box-shadow:inset 0 -3px 0 var(--bs-lime)}
body .main-navigation .main-nav ul ul{background:var(--bs-natt-2);border-radius:var(--bs-radie-liten);box-shadow:var(--bs-skugga)}
body .main-navigation .main-nav ul ul li a{font-size:.95rem}
body.nav-below-header .main-navigation,body .main-navigation.toggled .main-nav>ul,body .main-navigation.toggled .main-nav ul ul{background:var(--bs-natt)}
body .menu-toggle{border-radius:999px;border:2px solid rgba(255,255,255,.25)}
body .main-navigation .main-nav ul li.bs-meny-knapp>a{background:var(--bs-korall);color:var(--bs-natt);border-radius:999px;line-height:2.4em;padding:0 1.1em;margin:0 .3em}
body .main-navigation .main-nav ul li.bs-meny-knapp>a:hover{background:var(--bs-lime);color:var(--bs-natt)}

/* ==========================================================================
   5. Innehållsytor
   ========================================================================== */
body.separate-containers .inside-article,body.one-container .site-content,body .inside-page-header{background:var(--bs-vit);border-radius:var(--bs-radie);box-shadow:var(--bs-skugga)}
body.separate-containers .site-main{margin-top:32px;margin-bottom:32px}
body .entry-meta{color:var(--bs-dov);font-size:.9rem}
body .entry-meta a{color:var(--bs-dov)}
body .entry-content>*:first-child{margin-top:0}
.entry-content ul,.entry-content ol{padding-left:1.25em}
.entry-content ul li::marker{color:var(--bs-violett)}
.entry-content ol li::marker{color:var(--bs-violett);font-family:var(--bs-rubrik);font-weight:700}
.entry-content blockquote{border-left:4px solid var(--bs-violett);background:var(--bs-violett-ljus);margin:1.6em 0;padding:1em 1.3em;border-radius:0 var(--bs-radie-liten) var(--bs-radie-liten) 0;font-style:normal}
.entry-content table{border-collapse:collapse;width:100%;font-size:.95rem;border:0}
.entry-content th{background:var(--bs-natt);color:#fff;font-family:var(--bs-rubrik);text-align:left;padding:.7em .8em;border:0}
.entry-content td{padding:.65em .8em;border:0;border-bottom:1px solid var(--bs-linje)}
.entry-content tr:nth-child(even) td{background:#faf9ff}

/* Tomma stycken och JSON-LD som wpautop slår in i stycken ska inte ta plats */
.entry-content p:empty{display:none!important}
.entry-content p:has(>script:only-child){display:none!important}

/* Startsidan: sidtiteln finns kvar som H1 för sökmotorer och skärmläsare men döljs visuellt, eftersom heron bär rubriken */
body.bs-start .entry-header{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.bs-start.separate-containers .inside-article{background:transparent;box-shadow:none;padding:0}
body.bs-start.separate-containers .site-main{margin-top:0}

/* ==========================================================================
   6. Knappar och formulär
   ========================================================================== */
.bs-knapp,body button,body .button,body input[type="submit"],body input[type="button"]{display:inline-flex;align-items:center;gap:.5em;background:var(--bs-violett);color:#fff;border:0;border-radius:999px;padding:.75em 1.4em;font-family:var(--bs-rubrik);font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s}
.bs-knapp:hover,body button:hover,body .button:hover,body input[type="submit"]:hover{background:var(--bs-violett-mork);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(91,61,245,.3)}
.bs-knapp--gnista{background:var(--bs-lime);color:var(--bs-natt)}
.bs-knapp--gnista:hover{background:#fff;color:var(--bs-natt)}
.bs-knapp--kontur{background:transparent;color:var(--bs-violett);box-shadow:inset 0 0 0 2px var(--bs-violett)}
.bs-knapp--kontur:hover{background:var(--bs-violett);color:#fff}
body input[type="text"],body input[type="email"],body input[type="number"],body input[type="search"],body textarea,body select{border:2px solid var(--bs-linje);border-radius:var(--bs-radie-liten);background:#fff;color:var(--bs-black);padding:.65em .85em;font-family:var(--bs-text);font-size:1rem}
body input:focus,body textarea:focus,body select:focus{border-color:var(--bs-violett);outline:0;box-shadow:0 0 0 4px var(--bs-violett-ljus)}

/* ==========================================================================
   7. Komponenter för innehållet (klasser att använda i Text-fliken)
   ========================================================================== */

/* 7.1 Hero: <section class="bs-hero"> */
.bs-hero{position:relative;overflow:hidden;background:var(--bs-natt) url("assets/synapser.svg") center/cover;color:#fff;border-radius:calc(var(--bs-radie) + 6px);padding:clamp(2.2rem,1rem + 5vw,4.5rem) clamp(1.4rem,.8rem + 4vw,4rem);margin:28px 0 36px}
.bs-hero::after{content:"";position:absolute;inset:auto -80px -120px auto;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(91,61,245,.55),transparent 65%);pointer-events:none}
.bs-hero>*{position:relative;z-index:1}
.bs-hero h1,.bs-hero h2{color:#fff;margin:0 0 .4em;font-size:clamp(2.2rem,1.3rem + 4vw,4rem);line-height:1.02;max-width:16ch}
.bs-hero h1 em,.bs-hero h2 em{font-style:normal;color:var(--bs-lime)}
.bs-hero p{color:#dcd7ff;font-size:clamp(1.05rem,1rem + .4vw,1.3rem);max-width:52ch}
.bs-hero .bs-etikett{background:rgba(198,244,50,.14);color:var(--bs-lime)}
.bs-knappar{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem;max-width:none}
.bs-hero .bs-knapp--kontur{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.bs-hero .bs-knapp--kontur:hover{background:rgba(255,255,255,.12);color:#fff}

/* 7.2 Etikett ovanför rubrik: <span class="bs-etikett"> */
.bs-etikett+h1,.bs-etikett+h2,.bs-etikett+h3{margin-top:0}
.bs-etikett{display:inline-block;margin-top:0;max-width:none;font-family:var(--bs-rubrik);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bs-violett);background:var(--bs-violett-ljus);padding:.35em .8em;border-radius:999px;margin-bottom:.9em}

/* 7.3 Rutnät med kort: <div class="bs-rutnat"><a class="bs-kort" href="..."> */
.bs-rutnat{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin:1.4em 0 2em}
.bs-rutnat--tva{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.bs-rutnat--fyra{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:600px){.bs-rutnat--fyra{grid-template-columns:1fr}}
.bs-kort{position:relative;display:flex;flex-direction:column;gap:.45em;background:var(--bs-vit);border:1px solid var(--bs-linje);border-radius:var(--bs-radie);padding:1.35rem 1.35rem 1.2rem;color:var(--bs-black);text-decoration:none;box-shadow:var(--bs-skugga);transition:transform .18s,box-shadow .18s,border-color .18s}
a.bs-kort:hover,div.bs-kort:hover{transform:translateY(-4px);box-shadow:var(--bs-skugga-hover);border-color:#c9bfff;color:var(--bs-black)}
.bs-kort h3 a.bs-kort__lank,.bs-kort h3 a.bs-kort__lank:hover{color:inherit;text-decoration:none}
.bs-kort a.bs-kort__lank::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.bs-kort__fot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin:auto 0 0!important;padding-top:.7em;max-width:none}
.bs-kort h3,.bs-kort strong{font-family:var(--bs-rubrik);font-size:1.2rem;font-weight:750;color:var(--bs-natt);margin:0;line-height:1.2}
.bs-kort p{font-size:.95rem;color:var(--bs-dov);margin:0}
.bs-kort__ikon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--bs-violett-ljus);color:var(--bs-violett);font-family:var(--bs-rubrik);font-weight:800;font-size:1.35rem;margin-bottom:.35em}
.bs-kort__ikon svg{width:26px;height:26px}
.bs-kort--korall .bs-kort__ikon{background:#ffe7e3;color:var(--bs-korall-mork)}
.bs-kort--gron .bs-kort__ikon{background:#ddf5ee;color:var(--bs-gron)}
.bs-kort--gul .bs-kort__ikon{background:#fdf1d3;color:#9a6a00}
.bs-kort--natt{background:var(--bs-natt);border-color:var(--bs-natt)}
.bs-kort--natt h3,.bs-kort--natt strong{color:#fff}
.bs-kort--natt p{color:#c9c2ff}
.bs-kort--natt .bs-kort__ikon{background:rgba(198,244,50,.15);color:var(--bs-lime)}
.bs-kort__mer{font-family:var(--bs-rubrik);font-weight:700;font-size:.92rem;color:var(--bs-violett)}
.bs-kort--natt .bs-kort__mer{color:var(--bs-lime)}
a.bs-kort:hover .bs-kort__mer,div.bs-kort:hover .bs-kort__mer{text-decoration:underline}

/* 7.4 Svårighetsnivå: <span class="bs-niva bs-niva--latt">Lätt</span> */
.bs-niva{display:inline-flex;align-items:center;gap:.4em;font-family:var(--bs-rubrik);font-weight:700;font-size:.78rem;padding:.25em .7em;border-radius:999px;background:var(--bs-violett-ljus);color:var(--bs-violett);width:max-content}
.bs-niva::before{content:"";width:.55em;height:.55em;border-radius:50%;background:currentColor}
.bs-niva--latt{background:#ddf5ee;color:#0b6f59}
.bs-niva--medel{background:#fdf1d3;color:#8a5d00}
.bs-niva--svar{background:#ffe7e3;color:var(--bs-korall-mork)}

/* 7.5 Dagens utmaning: <div class="bs-dagens"> */
.bs-dagens{display:grid;grid-template-columns:auto 1fr;gap:1.2rem 1.5rem;align-items:start;background:linear-gradient(135deg,#fff 0%,#f3f0ff 100%);border:2px solid var(--bs-violett);border-radius:var(--bs-radie);padding:1.5rem;margin:1.6em 0;box-shadow:var(--bs-skugga)}
.bs-dagens__datum{display:grid;place-items:center;text-align:center;width:84px;height:84px;border-radius:20px;background:var(--bs-violett);color:#fff;font-family:var(--bs-rubrik);line-height:1}
.bs-dagens__datum b{display:block;color:#fff;font-size:2rem;font-weight:800}
.bs-dagens__datum small{display:block;color:#dcd7ff;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;margin-top:.2em}
.bs-dagens h2,.bs-dagens h3{margin:0 0 .3em}
@media (max-width:560px){.bs-dagens{grid-template-columns:1fr}.bs-dagens__datum{width:68px;height:68px}}

/* 7.6 Gåta med dolt svar: <div class="bs-gata"><p>Fråga</p><details class="bs-svar"><summary>Visa svar</summary><p>Svar</p></details></div> */
.bs-gata{position:relative;background:var(--bs-vit);border:1px solid var(--bs-linje);border-left:5px solid var(--bs-violett);border-radius:var(--bs-radie-liten);padding:1.1rem 1.3rem;margin:1em 0;box-shadow:0 1px 2px rgba(22,19,61,.05)}
.bs-gata>p:first-child,.bs-gata>h3:first-child{margin-top:0}
.bs-gata__nr{font-family:var(--bs-rubrik);font-weight:800;color:var(--bs-violett);margin-right:.35em}
.bs-gata .bs-niva{position:absolute;top:1rem;right:1rem}
.bs-gata:has(.bs-niva)>p:first-child{padding-right:4.8rem}
.bs-gata__nr{display:inline-block;min-width:1.6em}
details.bs-svar{margin-top:.6em}
details.bs-svar>summary{display:inline-flex;align-items:center;gap:.45em;cursor:pointer;list-style:none;font-family:var(--bs-rubrik);font-weight:700;font-size:.95rem;color:var(--bs-violett);background:var(--bs-violett-ljus);padding:.45em 1em;border-radius:999px;user-select:none;transition:background .15s}
details.bs-svar>summary::-webkit-details-marker{display:none}
details.bs-svar>summary::before{content:"?";display:grid;place-items:center;width:1.3em;height:1.3em;border-radius:50%;background:var(--bs-violett);color:#fff;font-size:.8em}
details.bs-svar>summary:hover{background:#ddd5ff}
details.bs-svar[open]>summary{background:var(--bs-lime);color:var(--bs-natt)}
details.bs-svar[open]>summary::before{content:"!";background:var(--bs-natt)}
details.bs-svar>*:not(summary){margin:.8em 0 0;padding:.8em 1em;background:#f6fbe6;border-radius:var(--bs-radie-liten);animation:bs-tand .35s ease-out}
@keyframes bs-tand{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* 7.7 Faktarutor: bs-fakta (visste du att), bs-info, bs-tips, bs-varning */
.bs-fakta,.bs-info,.bs-tips,.bs-varning{border-radius:var(--bs-radie);padding:1.2rem 1.4rem;margin:1.6em 0}
.bs-fakta>*:last-child,.bs-info>*:last-child,.bs-tips>*:last-child,.bs-varning>*:last-child{margin-bottom:0}
.bs-fakta{position:relative;background:var(--bs-natt);color:#e6e2ff;overflow:hidden}
.bs-fakta::before{content:"Visste du att";display:block;font-family:var(--bs-rubrik);font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bs-lime);margin-bottom:.4em}
.bs-fakta strong,.bs-fakta a{color:#fff}
.bs-fakta::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(198,244,50,.25),transparent 70%)}
.bs-info{background:var(--bs-violett-ljus);border:1px solid #d6cdff}
.bs-tips{background:#ecf8f3;border:1px solid #bfe7d8}
.bs-tips::before{content:"Tips";display:block;font-family:var(--bs-rubrik);font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bs-gron);margin-bottom:.3em}
.bs-varning{background:#fff3f1;border:1px solid #ffc9c0}
.bs-varning::before{content:"Bra att veta";display:block;font-family:var(--bs-rubrik);font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bs-korall-mork);margin-bottom:.3em}

/* 7.8 Kort direktsvar överst i artikeln: <div class="bs-direktsvar"> */
.bs-direktsvar{font-size:1.12rem;background:var(--bs-vit);border:2px solid var(--bs-linje);border-radius:var(--bs-radie);padding:1.2rem 1.4rem;margin:0 0 1.8em}
.bs-direktsvar>*:last-child{margin-bottom:0}

/* 7.9 Vertikal tidslinje: <ol class="bs-tidslinje"><li><b>År/steg</b><p>Text</p></li></ol> */
.bs-tidslinje{list-style:none;margin:1.8em 0;padding:0 0 0 2rem;position:relative}
.bs-tidslinje::before{content:"";position:absolute;left:.55rem;top:.4em;bottom:.4em;width:3px;border-radius:3px;background:linear-gradient(var(--bs-violett),var(--bs-korall))}
.bs-tidslinje>li{position:relative;margin:0 0 1.4em;padding:0}
.bs-tidslinje>li::before{content:"";position:absolute;left:-1.85rem;top:.35em;width:1rem;height:1rem;border-radius:50%;background:#fff;border:3px solid var(--bs-violett);box-shadow:0 0 0 4px var(--bs-papper)}
.bs-tidslinje>li:nth-child(3n)::before{border-color:var(--bs-korall)}
.bs-tidslinje>li>b:first-child{display:block;font-family:var(--bs-rubrik);font-size:1.05rem;color:var(--bs-natt)}
.bs-tidslinje>li p{margin:.25em 0 0}

/* 7.10 Numrerade steg: <ol class="bs-steg"><li><b>Rubrik</b> text</li></ol> */
.bs-steg{list-style:none;counter-reset:bs-steg;padding:0;margin:1.6em 0}
.bs-steg>li{counter-increment:bs-steg;position:relative;padding:.2em 0 .2em 3.3rem;margin:0 0 1.2em;min-height:2.4rem}
.bs-steg>li::before{content:counter(bs-steg);position:absolute;left:0;top:0;width:2.4rem;height:2.4rem;border-radius:12px;display:grid;place-items:center;background:var(--bs-natt);color:var(--bs-lime);font-family:var(--bs-rubrik);font-weight:800}
.bs-steg>li>b:first-child{display:block;font-family:var(--bs-rubrik);color:var(--bs-natt)}

/* 7.11 Resultat- och poängvisning: <div class="bs-resultat"><span class="bs-resultat__tal">243</span><span class="bs-resultat__enhet">ms</span></div> */
.bs-resultat{display:inline-flex;align-items:baseline;gap:.35em;background:var(--bs-natt);color:#fff;border-radius:var(--bs-radie);padding:.6em 1.1em}
.bs-resultat__tal{font-family:var(--bs-mono);font-size:clamp(2rem,1.5rem + 2vw,3rem);font-weight:700;color:var(--bs-lime);font-variant-numeric:tabular-nums;line-height:1}
.bs-resultat__enhet{font-family:var(--bs-rubrik);color:#c9c2ff}

/* 7.12 Verktygsyta för tester och spel: <div class="bs-spelyta"> */
.bs-spelyta{background:var(--bs-natt);color:#fff;border-radius:calc(var(--bs-radie) + 4px);padding:clamp(1.2rem,.8rem + 2vw,2.2rem);margin:1.4em 0 2em;box-shadow:0 18px 50px rgba(22,19,61,.25)}
.bs-spelyta h2,.bs-spelyta h3{color:#fff;margin-top:0}
.bs-spelyta p{color:#d7d1ff}

/* 7.13 Tabell som kan scrollas på mobil: <div class="bs-tabell"><table>...</table></div> */
.bs-tabell{overflow-x:auto;border-radius:var(--bs-radie-liten);border:1px solid var(--bs-linje);margin:1.4em 0;-webkit-overflow-scrolling:touch}
.bs-tabell table{margin:0;min-width:520px}
.bs-tabell--smal table{min-width:0}

/* 7.14 Internlänksbox: <aside class="bs-internlankar"><h2>Mer att utforska</h2><ul><li><a>...</a></li></ul></aside> */
.bs-internlankar{background:var(--bs-violett-ljus);border-radius:var(--bs-radie);padding:1.3rem 1.5rem;margin:2.4em 0}
.bs-internlankar h2,.bs-internlankar h3{font-size:1.15rem;margin:0 0 .7em}
.bs-internlankar ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.5rem}
.bs-internlankar li{margin:0}
.bs-internlankar a{display:block;background:#fff;border-radius:var(--bs-radie-liten);padding:.6em .9em;font-family:var(--bs-rubrik);font-weight:650;text-decoration:none;color:var(--bs-natt);transition:background .15s,color .15s}
.bs-internlankar a::before{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--bs-violett);margin-right:.55em;vertical-align:.08em}
.bs-internlankar a:hover{background:var(--bs-natt);color:#fff}
.bs-internlankar a:hover::before{background:var(--bs-lime)}

/* 7.15 Källor: <div class="bs-kallor"><h2>Källor</h2><ol>...</ol></div> */
.bs-kallor{border-top:2px solid var(--bs-linje);margin-top:2.6em;padding-top:1em;font-size:.9rem;color:var(--bs-dov)}
.bs-kallor h2,.bs-kallor h3{font-size:1rem;margin:0 0 .5em}
.bs-kallor li{margin-bottom:.3em}

/* 7.16 Forskningsavdelningen: lugnare uttryck, <div class="bs-forskning"> */
.bs-forskning{background:#f4f6fb;border:1px solid #dde3ef;border-radius:var(--bs-radie);padding:clamp(1.2rem,.8rem + 2vw,2rem);margin:2em 0}
.bs-forskning .bs-etikett{background:#e2e8f4;color:#2c3e66}
.bs-forskning h2,.bs-forskning h3{color:#1c2a4a}

/* 7.17 Sektion med rubrik och länk till höger: <div class="bs-sektion-topp"><h2>..</h2><a>Visa alla</a></div> */
.bs-sektion-topp{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1rem;margin-top:2.4em}
.bs-sektion-topp h2{margin:0}
.bs-sektion-topp a{font-family:var(--bs-rubrik);font-weight:700}

/* 7.18 Diagram med etiketter i HTML: <div class="bs-kurva"><svg>..</svg><span class="bs-kurva__etikett" style="left:50%">100</span></div> */
.bs-kurva{position:relative;margin:1.6em 0 2.4em;padding-bottom:2rem}
.bs-kurva svg{display:block;width:100%;height:auto}
.bs-kurva__etikett{position:absolute;bottom:0;transform:translateX(-50%);font-family:var(--bs-mono);font-size:.82rem;color:var(--bs-dov)}
.bs-kurva__andel{position:absolute;transform:translateX(-50%);font-family:var(--bs-rubrik);font-weight:800;font-size:clamp(.75rem,.6rem + .6vw,1rem);color:var(--bs-natt);text-align:center;line-height:1.1}
.bs-kurva__andel small{display:block;font-family:var(--bs-text);font-weight:400;font-size:.72rem;color:var(--bs-dov)}

/* ==========================================================================
   8. Sidfot
   ========================================================================== */
body .site-footer,body .site-info,body .footer-widgets{background:var(--bs-natt);color:#c9c2ff}
body .site-footer a,body .footer-widgets a{color:#fff}
body .site-footer a:hover,body .footer-widgets a:hover{color:var(--bs-lime)}
body .footer-widgets .widget-title{color:#fff;font-family:var(--bs-rubrik)}
body .site-info{border-top:1px solid rgba(255,255,255,.08);font-size:.88rem}
.bs-sidfot{display:flex;flex-direction:column;gap:.35rem;align-items:center;text-align:center}
.bs-sidfot__namn{font-family:var(--bs-rubrik);font-weight:800;color:#fff;font-size:1.05rem}
.bs-sidfot__namn span{color:var(--bs-lime)}
.bs-sidfot__lankar{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;font-size:.9rem}
.bs-sidfot__lankar a{color:#d8d3ff;text-decoration:underline;text-underline-offset:3px}
.bs-sidfot__lankar a:hover,.bs-sidfot__lankar a:focus-visible{color:var(--bs-lime)}
.bs-sidfot__not{color:#9d95d6;font-size:.82rem;max-width:62ch}

/* ==========================================================================
   9. Arkiv, sök och 404
   ========================================================================== */
body .page-header h1,body .page-header .page-title{font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem)}
body.search .inside-article,body.archive .inside-article,body.blog .inside-article{transition:transform .18s,box-shadow .18s}
body.search .inside-article:hover,body.archive .inside-article:hover,body.blog .inside-article:hover{transform:translateY(-3px);box-shadow:var(--bs-skugga-hover)}
body.archive .entry-title a,body.blog .entry-title a,body.search .entry-title a{color:var(--bs-natt);text-decoration:none}
body.archive .entry-title,body.blog .entry-title,body.search .entry-title{font-size:1.5rem}
body .paging-navigation .page-numbers{border-radius:999px;padding:.3em .8em;font-family:var(--bs-rubrik);font-weight:700}
body .paging-navigation .page-numbers.current{background:var(--bs-violett);color:#fff}

/* ==========================================================================
   10. Mobil, utskrift och rörelse
   ========================================================================== */
@media (max-width:768px){
	body{font-size:17px}
	body.separate-containers .inside-article{border-radius:14px}
	.bs-hero{border-radius:var(--bs-radie);margin-top:16px}
}
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
	body{background:#fff;font-size:12pt}
	.site-header,.main-navigation,.site-footer,.bs-internlankar,.bs-knappar,.bs-knapp{display:none!important}
	.inside-article{box-shadow:none!important}
	details.bs-svar>summary{display:none}
	details.bs-svar>*:not(summary){display:none}
	.bs-gata{break-inside:avoid;border-left-width:3px}
}