/* Martinsjakter – Lärarrummet-stilen.
   Lugn, redaktionell grund (grönsvart bläck på ljust papper) där varje app
   får sina egna färger från appar.json via CSS-variablerna --farg/--mork/--ljus/--detalj. */

@font-face{font-family:"Newsreader";src:url("/fonts/newsreader.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/fonts/public-sans.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bg:#f5f7f6; --ink:#17302b; --soft:#566a65; --acc:#1f6b55; --line:#d5dfdb; --card:#ffffff;
  --coffee:#ffdd00;
  --disp:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --max:1080px;
}
*{box-sizing:border-box}
/* Ankarlänkar (#kontakt osv.) landar under det fasta sidhuvudet i stället för bakom det */
html{scroll-behavior:smooth;scroll-padding-top:64px}
.box[id]{scroll-margin-top:44px}
.sec[id]{scroll-margin-top:-28px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:4px}
.in{max-width:var(--max);margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:10}
.skip:focus{left:8px}

/* ---------- Sidhuvud ---------- */
.top{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:5}
.top .in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px;flex-wrap:wrap}
.logo{font:600 23px/1 var(--disp);letter-spacing:-.01em;text-decoration:none}
.logo b{color:var(--acc);font-weight:600}
.top nav ul{display:flex;align-items:center;gap:clamp(2px,1vw,10px);list-style:none;margin:0;padding:0;font-size:15px;flex-wrap:wrap}
/* Menyn: lätt präglad text, mjuk platta och en remsa i apparnas färger vid hover */
.top nav a{position:relative;display:inline-block;padding:7px 12px;border-radius:999px;text-decoration:none;
  color:var(--ink);font-weight:500;letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(23,48,43,.18);
  transition:background-color .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s cubic-bezier(.22,.61,.36,1),color .5s}
.top nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#1f5fa8,#d6333f,#7c3aed,#f59e0b,#0e8a85);
  transform:scaleX(0);transform-origin:center;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.top nav a:hover{background:#fff;box-shadow:0 2px 10px rgba(23,48,43,.10),inset 0 0 0 1px rgba(23,48,43,.06)}
.top nav a:hover::after{transform:scaleX(1)}
/* Stöd: diskret krämgul platta, syns utan att ta fokus från resten av menyn */
.top nav a.stod{font-weight:600;color:var(--ink);
  background:#faf3d9;box-shadow:inset 0 0 0 1px rgba(196,160,40,.35)}
.top nav a.stod::after{display:none}
.top nav a.stod:hover{background:#f7ebbd;box-shadow:inset 0 0 0 1px rgba(196,160,40,.5),0 2px 8px rgba(196,160,40,.18)}

/* ---------- Gemensamt ---------- */
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);font-weight:600}
h1,h2,h3{font-family:var(--disp);font-weight:400;text-wrap:balance;letter-spacing:-.015em;margin:0}
.lead{font-size:18px;line-height:1.6;color:var(--soft);max-width:56ch}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--body);padding:12px 18px;border-radius:6px;text-decoration:none;border:1px solid var(--ink);transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.p{background:var(--ink);color:#fff}
.btn.coffee{background:var(--coffee);border-color:var(--coffee);color:#000}
.sec{padding-block:clamp(40px,7vw,64px);border-top:1px solid var(--line)}
.sec h2{font-size:clamp(28px,4vw,36px);line-height:1.1;margin-bottom:8px}
.sec .sub{color:var(--soft);margin:0 0 28px;max-width:60ch}

/* ---------- Startsidans topp ---------- */
.hero{display:grid;grid-template-columns:1.45fr .8fr;gap:clamp(28px,5vw,56px);align-items:center;padding-block:clamp(40px,7vw,72px)}
.hero h1{font-size:clamp(34px,5.4vw,58px);line-height:1.05;margin:14px 0 20px}
.hero h1 em{color:var(--acc)}
.hero .lead{margin:0 0 28px}

.trad img{width:min(480px,100%);height:auto;margin-inline:auto}

/* Färgremsa i apparnas färger – en liten signatur för samlingen */
.remsa{display:flex;height:6px;border-radius:3px;overflow:hidden;max-width:240px;margin-top:28px}
.remsa i{flex:1}

/* ---------- Appkort ---------- */
.appar{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.app{--farg:#1f6b55;--mork:#1f6b55;--ljus:#eef4f2;--detalj:var(--farg);
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  background:var(--ljus);border:1px solid color-mix(in srgb,var(--farg) 22%,transparent);
  border-radius:12px;padding:22px 22px 20px;text-decoration:none;min-width:0;
  transition:transform .15s,box-shadow .15s}
.app:hover{transform:translateY(-2px);box-shadow:0 10px 26px color-mix(in srgb,var(--farg) 22%,transparent)}
.logga{display:block;width:64px;height:64px;flex:none}
.logga.ruta{border-radius:15px;object-fit:cover;box-shadow:0 4px 12px color-mix(in srgb,var(--farg) 30%,transparent),0 0 0 3px #fff}
.logga.emblem{width:80px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.15))}
.app h3{font-size:25px;line-height:1.15;color:var(--ink)}
.app p{margin:6px 0 14px;color:var(--soft);font-size:15px;line-height:1.5}
.meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:#fff;color:var(--mork);border:1px solid color-mix(in srgb,var(--farg) 30%,transparent)}
.las{margin-left:auto;font-weight:600;font-size:14px;color:var(--mork);white-space:nowrap}
.app > div{min-width:0}

/* ---------- Bra att veta ---------- */
.tre{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 56px;max-width:900px}
.tre h3{font-size:22px;margin-bottom:6px}
.tre p{margin:0;color:var(--soft);font-size:15px}

/* ---------- Om mig ---------- */
.om{display:grid;grid-template-columns:200px 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.om img{height:auto;border-radius:50%;aspect-ratio:1;object-fit:cover;border:5px solid #fff;box-shadow:0 10px 30px rgba(23,48,43,.12)}
.om p{max-width:62ch;margin:0 0 14px}

/* ---------- Kontakt och stöd ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:clamp(22px,3vw,32px)}
.box h2{font-size:30px}
.box p{color:var(--soft);margin:8px 0 20px}
.mejl{font-weight:600;color:var(--acc);word-break:break-all}

/* ---------- Sidfot ---------- */
.fot{border-top:1px solid var(--line);padding-block:28px;font-size:14px;color:var(--soft)}
.fot .in{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fot a{color:var(--soft)}

/* ---------- Appsida ---------- */
.apptopp{background:var(--ljus);border-bottom:1px solid color-mix(in srgb,var(--farg) 25%,transparent);position:relative;overflow:hidden}
.apptopp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,var(--farg) 0 70%,var(--detalj) 70%)}
.apptopp .in{padding-block:clamp(36px,6vw,64px);display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,32px);align-items:center}
.apptopp .logga{width:clamp(96px,14vw,150px);height:clamp(96px,14vw,150px)}
.apptopp .logga.ruta{border-radius:clamp(22px,3vw,34px);box-shadow:0 12px 30px color-mix(in srgb,var(--farg) 35%,transparent),0 0 0 5px #fff}
.apptopp .logga.emblem{width:clamp(130px,18vw,200px)}
.apptopp h1{font-size:clamp(36px,6vw,60px);line-height:1}
.apptopp .lead{margin:14px 0 22px}
.tillbaka{display:inline-block;font-size:14px;color:var(--mork);text-decoration:none;margin-bottom:10px;font-weight:600}
.btn.app-btn{background:var(--farg);border-color:var(--farg);color:#fff}
.fakta{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,48px)}
.fakta h2{font-size:26px;margin-bottom:14px}
.fakta ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.fakta li{padding-left:22px;position:relative}
.fakta li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:3px;background:var(--farg)}
.rad{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.app.liten{grid-template-columns:auto 1fr;padding:16px;gap:14px}
.app.liten .logga{width:48px;height:48px}
.app.liten .logga.ruta{border-radius:12px}
.app.liten .logga.emblem{width:60px}
.app.liten h3{font-size:20px}
.app.liten p{margin:2px 0 0}

/* ---------- Mobil ---------- */
@media (max-width:820px){
  .hero,.om,.two,.fakta,.tre{grid-template-columns:1fr}
  .hero > div:last-child{order:-1}
  .trad img{width:min(320px,100%)}
  .appar{grid-template-columns:1fr}
  .om img{width:140px}
  .top{position:static}
  .top nav ul{margin-left:-12px}
  html{scroll-padding-top:0}
  .sec[id]{scroll-margin-top:0}
}
@media (max-width:440px){
  .app{grid-template-columns:1fr}
  .apptopp .in{grid-template-columns:1fr}
}

/* ---------- Upphovsrätt ---------- */
.upphov{display:grid;grid-template-columns:.8fr 2fr;gap:clamp(20px,4vw,48px);align-items:start}
.upphov p{margin:0 0 14px;max-width:66ch;color:var(--soft)}
.upphov p:last-child{margin:0}
.fot a{text-decoration:underline}

/* ---------- Läs mer på appens Om-sida ---------- */
.mer{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--ljus);border:1px solid color-mix(in srgb,var(--farg) 25%,transparent);
  border-left:6px solid var(--farg);border-radius:10px;padding:clamp(20px,3vw,28px);margin-bottom:clamp(40px,7vw,64px)}
.mer > div{flex:1 1 360px;min-width:0}
.mer h2{font-size:24px;margin-bottom:6px}
.mer p{margin:0;color:var(--soft);max-width:62ch}
@media (max-width:820px){.upphov{grid-template-columns:1fr}}

/* =====================================================================
   Levande detaljer – djup, färg och mjuk rörelse.
   All rörelse stängs av för den som valt minskad rörelse.
   ===================================================================== */

/* Mjuka färgklickar bakom toppen, i de första apparnas färger */
.hero-wrap{position:relative;overflow:hidden}
.klickar{position:absolute;inset:0;pointer-events:none;z-index:0}
.klickar i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.22;animation:drift 18s ease-in-out infinite alternate}
.klickar .k1{width:340px;height:340px;top:-90px;left:-80px}
.klickar .k2{width:300px;height:300px;top:10%;right:-60px;animation-delay:-4s}
.klickar .k3{width:260px;height:260px;bottom:-110px;left:35%;animation-delay:-8s;opacity:.16}
.klickar .k4{width:200px;height:200px;bottom:10%;right:30%;animation-delay:-12s;opacity:.14}
.hero{position:relative;z-index:1}
@keyframes drift{to{transform:translate(40px,30px) scale(1.12)}}

.eyebrow{display:inline-block;background:color-mix(in srgb,var(--acc) 12%,#fff);padding:6px 12px;border-radius:999px}
.trad img{filter:drop-shadow(0 22px 30px rgba(23,48,43,.18))}
@keyframes svava{50%{transform:translateY(-8px) rotate(-.6deg)}}
.remsa{height:8px;border-radius:4px}
.remsa i{transition:flex .3s}
.remsa:hover i:hover{flex:3}

/* Rubriker får ett litet färgstreck */
.sec > .in > h2::after,.om h2::after,.box h2::after{content:"";display:block;width:56px;height:5px;border-radius:3px;margin-top:10px;
  background:linear-gradient(90deg,#1f5fa8 0 25%,#d6333f 25% 50%,#7c3aed 50% 75%,#f59e0b 75%)}
.sec > .in > h2{margin-bottom:14px}

/* Appkort med djup */
.app{overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,#fff 0%,var(--ljus) 55%);
  box-shadow:0 1px 2px rgba(23,48,43,.05),0 6px 18px color-mix(in srgb,var(--farg) 10%,transparent);
  transition:transform .6s cubic-bezier(.22,.61,.36,1),box-shadow .6s cubic-bezier(.22,.61,.36,1)}
.app::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--farg) 0 72%,var(--detalj) 72%)}
.app .bubbla{position:absolute;z-index:-1;width:190px;height:190px;border-radius:50%;right:-60px;bottom:-80px;
  background:radial-gradient(circle,color-mix(in srgb,var(--farg) 22%,transparent),transparent 70%);transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.app:hover{transform:translateY(-3px);box-shadow:0 18px 40px color-mix(in srgb,var(--farg) 26%,transparent)}
.app:hover .bubbla{transform:scale(1.3)}
.app .logga{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.app:hover .logga{transform:rotate(-3deg) scale(1.04)}
.las b{display:inline-block;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.app:hover .las b{transform:translateX(4px)}

/* Kort och sektioner glider in när man scrollar (bara i webbläsare som stöder det) */
@supports (animation-timeline:view()){
  .app,.tre .kort,.box,.om,.fakta > div{animation:in-glid linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
}
@keyframes in-glid{from{opacity:0;translate:0 34px;scale:.98}}

/* Bra att veta: tonad bakgrund och färgade kort */
.sec.tonad{background:linear-gradient(180deg,#eaf1ee,#f5f7f6)}
.tre{max-width:none;gap:16px}
.tre .kort{--f:var(--acc);background:#fff;border-radius:14px;padding:22px;border:1px solid var(--line);border-top:5px solid var(--f);
  box-shadow:0 6px 18px rgba(23,48,43,.06);transition:transform .2s}
.tre .kort:nth-child(1){--f:var(--f1)} .tre .kort:nth-child(2){--f:var(--f2)}
.tre .kort:nth-child(3){--f:var(--f3)} .tre .kort:nth-child(4){--f:var(--f4)}
.tre .kort:hover{transform:translateY(-3px)}
.tre .kort.bred{grid-column:1/-1}

/* Om mig: färgring runt bilden */
.om img{border:0;padding:5px;background:conic-gradient(#1f5fa8,#d6333f,#7c3aed,#f59e0b,#1f5fa8)}

/* Kontakt och stöd */
.box{box-shadow:0 6px 18px rgba(23,48,43,.06);position:relative;overflow:hidden}
.box.kaffe{background:linear-gradient(150deg,#fff 40%,#fff7c2)}
.box.kaffe::after{content:"☕";position:absolute;right:18px;top:12px;font-size:56px;opacity:.15;transform:rotate(12deg)}
.btn.coffee{transition:transform .2s,box-shadow .2s}
.btn.coffee:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:0 8px 20px rgba(255,200,0,.45)}
.btn.p:hover,.btn.app-btn:hover{box-shadow:0 8px 20px rgba(23,48,43,.2)}

/* Appsidan: logga som svävar lätt */
.apptopp .logga{animation:svava 14s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .klickar i,.trad img,.apptopp .logga{animation:none}
  .app,.tre .kort,.box,.om,.fakta > div{animation:none!important}
}

/* Tillägg bredvid appnamnet, t.ex. Grundjaktens ämnen */
.namntillagg{font:600 .5em/1 var(--body);letter-spacing:.02em;color:var(--mork);background:#fff;border:1px solid color-mix(in srgb,var(--farg) 30%,transparent);border-radius:999px;padding:.35em .7em;vertical-align:middle;margin-left:.35em;white-space:nowrap}
.apptopp .namntillagg{font-size:.32em}

/* Huvudknappen högst upp: lätt gradient och djup */
.hero .btn.p{background:linear-gradient(180deg,#25483f,#17302b);border-color:#17302b;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  box-shadow:0 6px 18px rgba(23,48,43,.22),inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s cubic-bezier(.22,.61,.36,1)}
.hero .btn.p:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(23,48,43,.28),inset 0 1px 0 rgba(255,255,255,.14)}

/* "Ny" bredvid appnamnet: diskret puls som drar blicken utan att störa */
.namntillagg.ny{display:inline-block;animation:ny-puls 2.6s ease-in-out infinite}
@keyframes ny-puls{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--farg) 0%,transparent)}
  50%{transform:scale(1.07);box-shadow:0 0 0 5px color-mix(in srgb,var(--farg) 18%,transparent)}
}
@media (prefers-reduced-motion:reduce){.namntillagg.ny{animation:none}}