/* ════════════════════════════════════════════════════════════════════════
   Delad stil för rendera.dev:s innehållssidor.

   Startsidan är ett enda dokument med vyer bakom #/. Det duger för en
   portfolio men gör att hela sajten bara har EN adress att ranka på.
   De här sidorna finns för att Raman ska kunna synas på fler sökningar
   än sitt eget namn: cybersäkerhet, moln, kompetenser, certifikat.

   Formspråket följer startsidan men är avskalat. Sidorna ska läsas, inte
   imponera, och de ska vara snabba: ingen canvas, inget musspår, ingen
   laddskärm. Det som rankar är innehåll och hastighet.
   ════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:Archivo;src:url(/fonts/archivo-400-900.woff2) format("woff2-variations");
  font-weight:400 900;font-stretch:62.5% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-700.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#000;
  --panel:#0a0a0b;
  --line:#1a1c1f;
  --edge:#2a2d31;
  --dim:#6b7280;
  --mid:#9ca3af;
  --text:#f4f5f7;
  /* CYAN, samma som startsidans forval sedan 2026-09-07. Undersidorna
     stod kvar pa turkos, vilket ar en av de fem temafargerna men inte
     den valda — sajten bytte farg mitt i ett klick fran startsidan. */
  --accent:#22d3ee;
  --accent-rgb:34,211,238;
  --sans:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --mitt:min(940px,calc(100% - 2.6rem));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:1rem;line-height:1.75;
  -webkit-font-smoothing:antialiased
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
a:hover{color:#fff}

h1,h2,h3{font-weight:800;line-height:1.12;margin:0;letter-spacing:-.015em}
h1{font-size:clamp(2rem,5.4vw,3.2rem)}
h2{font-size:clamp(1.4rem,3.4vw,2rem);margin-top:3.4rem;margin-bottom:1.1rem}
h3{font-size:1.06rem;margin-top:2rem;margin-bottom:.5rem}
p{margin:0 0 1.15rem;color:#d6dae1;max-width:68ch}
ul,ol{color:#d6dae1;max-width:68ch;padding-left:1.3rem}
li{margin-bottom:.5rem}
strong{color:var(--text)}

.mitt{width:var(--mitt);margin-inline:auto}
/* Toppraden får vara bredare än texten. Sex menyposter ryms inte på
   940 px tillsammans med märket, och en ensam post på rad två ser ut
   som ett fel även när den inte är det. */
.topp .mitt{width:min(1180px,calc(100% - 2.6rem))}

.hoppa{position:absolute;left:-999px;top:0;z-index:100;background:var(--accent);color:#04120f;padding:.7rem 1.2rem;font-weight:700}
.hoppa:focus{left:1rem;top:1rem}

/* ── topp ───────────────────────────────────────────────────────────── */
.topp{
  position:sticky;top:0;z-index:20;background:rgba(0,0,0,.92);
  border-bottom:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
/* Märket till vänster, menyn till höger. Bryter menyn behöver den falla
   till en egen rad under märket, inte lämna en ensam post hängande. */
.topprad{
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem 1.4rem;min-height:66px;flex-wrap:wrap;padding-block:.7rem
}
.topprad nav{margin-left:auto}
.marke{display:flex;flex-direction:column;text-decoration:none;color:var(--text);line-height:1.15}
.marke b{font-size:.95rem;font-weight:800;letter-spacing:.01em}
.marke span{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.toppmeny{display:flex;gap:.55rem 1.1rem;flex-wrap:wrap;list-style:none;margin:0;padding:0;justify-content:flex-end}
.toppmeny a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--mid);padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s
}
.toppmeny a:hover,.toppmeny a[aria-current=page]{color:var(--accent);border-color:var(--accent)}

/* ── språkvalet ─────────────────────────────────────────────────────────
   Två riktiga adresser, inte ett byte i webbläsaren: varje sida finns på
   /sv/... och på sin engelska slug, och länken går till motsvarande sida
   — inte till startsidan. Den som läser Cybersäkerhet och trycker EN ska
   hamna på Cybersecurity, inte kastas hem. */
.sprakval{display:flex;gap:.25rem;align-items:center;margin-left:.8rem}
.sprakval a{
  display:flex;align-items:center;gap:.34rem;padding:.34rem .5rem;
  border:1px solid transparent;border-radius:6px;text-decoration:none;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--dim);
  transition:color .2s,border-color .2s,background .2s
}
.sprakval a:hover{color:var(--text);border-color:var(--line)}
.sprakval a[aria-current=true]{color:var(--text);border-color:var(--accent);background:rgba(255,255,255,.04)}
/* Konturen är inte dekoration. Den vita halvan av båda flaggorna
   försvinner annars in i sidhuvudet, och en flagga utan kant ser ut som
   en trasig bild. */
.sprakval svg{display:block;width:18px;height:13px;border-radius:2px;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.16);opacity:.72;transition:opacity .2s}
.sprakval a:hover svg,.sprakval a[aria-current=true] svg{opacity:1}

@media (max-width:720px){
  .topprad nav{margin-left:0;width:100%}
  .toppmeny{justify-content:flex-start}
  .toppmeny a{font-size:.7rem}
  /* 44 px är minimum för en tumme. Raden är 22 px hög på dator, och den
     höjden hade gjort flaggorna till två prickar man inte träffar. */
  /* Flaggorna delar forsta raden med market och menyn faller ner under.
     order pa NAV och inte pa flaggorna: la man order:-1 pa flaggorna
     hamnade de fore namnet, alltsa langst till vanster, och sidhuvudet
     borjade med tva flaggor i stallet for med vems sajt det ar. */
  .topprad nav{order:1}
  .sprakval{margin-left:auto}
  .sprakval a{min-height:38px;min-width:48px;justify-content:center}
}

/* ── sidhuvud ───────────────────────────────────────────────────────── */
.huvud{padding:clamp(3rem,7vw,5rem) 0 clamp(1.6rem,3vw,2.4rem)}
.smulor{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);margin:0 0 1.4rem
}
.smulor a{text-decoration:none}
.smulor span{color:var(--edge);margin:0 .5rem}
.ing{font-size:1.1rem;color:var(--mid);max-width:60ch;margin-top:1.4rem}

/* Den tunna accentlinjen som binder ihop sidorna med startsidan. */
.regel{height:1px;background:linear-gradient(90deg,var(--accent),transparent 62%);margin:2.4rem 0}

main{padding-bottom:clamp(3rem,7vw,5rem)}

/* ── kort och listor ────────────────────────────────────────────────── */
.rutor{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin:1.6rem 0 0}
.ruta{border:1px solid var(--line);background:var(--panel);padding:1.3rem 1.4rem;transition:border-color .25s}
.ruta:hover{border-color:var(--edge)}
.ruta h3{margin-top:0}
.ruta p{margin-bottom:0;font-size:.94rem}

.etikett{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:.5rem
}

/* Kompetensmärken */
.marken{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 0;padding:0;list-style:none;max-width:none}
.marken li{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;
  border:1px solid var(--line);padding:.34rem .7rem;color:var(--mid);margin:0
}

/* Certifikatrader */
.cert{list-style:none;padding:0;margin:1.4rem 0 0;max-width:none}
.cert li{
  display:grid;grid-template-columns:1fr auto;gap:.4rem 1.4rem;align-items:baseline;
  border-bottom:1px solid var(--line);padding:.9rem 0;margin:0
}
.cert b{font-weight:700;font-size:1rem}
.cert .kod{font-family:var(--mono);font-size:.74rem;color:var(--accent);margin-left:.6rem}
.cert .ut{font-family:var(--mono);font-size:.72rem;color:var(--dim);text-align:right;white-space:nowrap}
.cert small{grid-column:1/-1;color:var(--dim);font-size:.84rem;line-height:1.6}
@media (max-width:560px){
  .cert li{grid-template-columns:1fr}
  .cert .ut{text-align:left}
}

/* ── uppmaning ──────────────────────────────────────────────────────── */
.cta{
  border:1px solid var(--line);background:var(--panel);
  padding:clamp(1.6rem,4vw,2.4rem);margin-top:3.4rem
}
.cta h2{margin-top:0}
.cta p{margin-bottom:1.6rem}
.knapp{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--accent);color:#04120f;text-decoration:none;font-weight:800;
  padding:.85rem 1.5rem;transition:transform .2s,filter .2s
}
.knapp:hover{transform:translateY(-2px);filter:brightness(1.08);color:#04120f}
.knapp.tom{background:transparent;color:var(--accent);border:1px solid var(--edge)}
.knapp.tom:hover{border-color:var(--accent);color:var(--accent)}
.knappar{display:flex;flex-wrap:wrap;gap:.9rem}

/* ── sidfot ─────────────────────────────────────────────────────────── */
.fot{border-top:1px solid var(--line);padding:2.4rem 0;background:var(--panel)}
.fotrad{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;justify-content:space-between;align-items:flex-start}
.fot p,.fot li{font-size:.88rem;color:var(--dim);margin:0}
.fot ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.9rem 1.4rem}
.fot a{text-decoration:none;color:var(--mid)}
.fot a:hover{color:var(--accent)}
.fotslut{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--edge);
  margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--line)
}