/* Detectum – modern, enhetlig design (mörk body, vit header/footer) */
:root{
  --bg:#0b141a; --bg-2:#081016;        /* mörk bakgrund */
  --text:#e6f0f6; --muted:#b8c7d1;     /* text på mörk bakgrund */
  --card:#152a36;                      /* panel/kort */
  --line:rgba(255,255,255,.08);
  --brand:#41b3ff; --brand-600:#2196f3; --accent:#60d394;
}
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--brand); text-decoration:none }
a:hover{ filter:brightness(1.1) }

.container{ width:min(1100px,92%); margin-inline:auto }

/* ===== HEADER (vit) ===== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#fff; color:#222;
  border-bottom:1px solid #e6e6e6;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.75rem 0;
}
.brand{ display:inline-flex; align-items:center; gap:.75rem }
.brand img{ height:auto; max-height:48px }

/* Hamburger-ikon (alltid synlig) */
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid #e0e0e0; color:#222;
  padding:.5rem; border-radius:.5rem; cursor:pointer; transition:transform .2s ease;
}
.nav-toggle .bar{ display:block; width:24px; height:2.5px; background:#222; margin:3.5px 0; }
.nav-toggle.active{ transform:rotate(90deg) }

/* ===== SUBBAR – fälls ned under headern i normalt flöde ===== */
.subbar{
  display:none;                 /* dold initialt */
  background:#fff; color:#222;
  border-bottom:1px solid #e6e6e6;
}
.subbar.open{ display:block; }  /* visas när .open sätts av JS */

/* Länkar – mobil/platta (staplade) */
.subbar a{
  display:block;
  padding:12px 16px;
  color:#222;
  font-weight:600;
  text-decoration:none;
  border-top:1px solid #f0f0f0;
}
.subbar a:hover{ background:rgba(0,0,0,.05); }

/* ===== HERO ===== */
.hero{ padding:clamp(2.5rem,6vw,6rem) 0 }
.hero-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center }
.hero h1{ font-size:clamp(1.9rem, 4vw, 3.1rem); line-height:1.1; margin:0 0 .75rem }
.hero p{ color:var(--muted); margin:0 0 1.1rem }
.hero-media{
  border-radius:1rem; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.25); max-width:100%;
}
.hero-media img{ display:block; width:100%; max-width:100%; height:auto !important; object-fit:contain }

/* ===== KORT & GRID ===== */
.section{ padding:clamp(2.5rem,6vw,5rem) 0 }
.section.alt{ background:rgba(255,255,255,.02) }
.section-header{ margin-bottom:1.25rem }
.section-header h2{ margin:0 0 .5rem }

.cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:.75rem; padding:1rem;
  display:flex; flex-direction:column; gap:.5rem; box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.card h3{ margin:.25rem 0 }
.card-link{ margin-top:auto }
.inline-links a{ display:inline-block; margin-right:.75rem }
.panel{ background:var(--card); border:1px solid var(--line); border-radius:.75rem; padding:1rem }
.grid.two{ display:grid; grid-template-columns:1fr 1fr; gap:2rem }

/* ===== KNAPPAR ===== */
.btn{ display:inline-block; text-decoration:none; padding:.65rem 1rem; border-radius:.6rem; font-weight:700 }
.btn-primary{ background:linear-gradient(90deg, var(--brand), var(--brand-600)); color:#001018 }
.btn-secondary{ background:linear-gradient(90deg, var(--accent), #46c27f); color:#001018 }
.btn-ghost{ border:1px solid rgba(255,255,255,.3); color:var(--text) }

/* ===== FOOTER (vit) ===== */
.site-footer{ background:#fff; color:#222; border-top:1px solid #eaeaea }
.footer-inner{ display:grid; grid-template-columns:1.2fr 1fr auto; gap:2rem; padding:2rem 0 }
.footer-nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem }
.footer-nav a{ color:#333 }
.tagline{ color:#555 }
.badges a{ color:#555 }
.copyright{ border-top:1px solid #eaeaea; padding:.75rem 0; color:#555 }

/* ===== RESPONSIVT ===== */
@media (max-width:960px){
  .hero-inner{ grid-template-columns:1fr }
  .cards{ grid-template-columns:1fr 1fr }
  .grid.two{ grid-template-columns:1fr }
}
@media (max-width:760px){
  .cards{ grid-template-columns:1fr }
}

/* PC (≥1024px): horisontell menyrad när subbar är öppen */
@media (min-width:1024px){
  .subbar{ display:none; }      /* dold tills man klickar */
  .subbar.open{ display:block; }

  .subbar{ text-align:center; } /* centrera menyraden inom container */
  .subbar .container{ max-width:1100px; margin:0 auto; padding:0 16px; }

  .subbar a{
    display:inline-block;       /* länkar i rad på PC */
    border-top:none;
    padding:14px 18px;
  }
}

/* Bilder i kort – säkerställa “contain” på små skärmar */
.cards .card img{
  display:block; width:100%; height:auto !important; object-fit:contain !important;
  background:rgba(255,255,255,.03); border-radius:.5rem;
}

/* === Ljust läge för en sektion === */
.on-white {
  background:#fff !important;
  color:#000 !important;
}

/* Normal text i on-white */
.on-white p,
.on-white li,
.on-white summary,
.on-white strong,
.on-white span {
  color:#000 !important;
}

/* Paneler/kort som annars har mörk bakgrund */
.on-white .panel,
.on-white .card {
  background:#fff !important;
  color:#000 !important;
  border:1px solid #e5e7eb !important;
  box-shadow:none !important;
}

/* Rubriker */
.on-white h1,
.on-white h2,
.on-white h3,
.on-white h4 {
  color:#000 !important;
}

/* Länkar i ljust block */
.on-white a {
  color:#000 !important;
}
.on-white a:hover {
  color:#333 !important;
  text-decoration:underline;
}

/* =========================
   HERO – Balanserad variant
   ========================= */
.hero--balanced {
  padding-block: clamp(3rem, 6vw, 6rem);
}

.hero-balanced__grid {
  display: grid;
  grid-template-columns: 1fr 0.88fr; /* ~54/46 för asymmetri */
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

/* Textkolumn */
.hero-balanced__copy h1 {
  margin-bottom: 0.35em;
  line-height: 1.05;
}
.hero-balanced__copy p {
  font-size: clamp(1.05rem, 1.2vw + 0.9rem, 1.35rem);
  margin-bottom: 1rem;
  max-width: 36ch;
  opacity: 0.95;
}
.hero-balanced__copy .cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Bildkolumn */
.hero-balanced__media {
  margin: 0;
}

.hero-balanced__media .media-frame {
  position: relative;
  border-radius: 16px;
  overflow: clip; /* modern clipping; fallback blir hidden */
  aspect-ratio: 4 / 3;       /* håller konsekvent yta */
  background: color-mix(in srgb, #0a5 10%, #fff 90%); /* diskret ton i samma familj som accenter (justera vid behov) */
  box-shadow:
    0 10px 20px rgba(0,0,0,0.06),
    0 3px 8px rgba(0,0,0,0.05);
}

.hero-balanced__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* konsekvent beskärning */
  object-position: 50% 50%; /* justera vid behov (t.ex. 60% 50%) */
  filter: saturate(0.98);
}

.hero-balanced__media .media-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.12) 100%),
    radial-gradient(90% 120% at 90% 10%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%);
  mix-blend-mode: multiply; /* subtil kontrastökning utan att “smutsa ner” */
  pointer-events: none;
}

/* Bildtext – valfritt, låg vikt */
.hero-balanced__media .media-caption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Responsivitet */
@media (max-width: 960px) {
  .hero-balanced__grid {
    grid-template-columns: 1fr;
  }
  .hero-balanced__copy {
    order: 1;
  }
  .hero-balanced__media {
    order: 2;
  }
  .hero-balanced__media .media-frame {
    aspect-ratio: 16 / 10; /* lite bredare känsla på mobil */
  }
  .hero-balanced__media .media-caption {
    display: none; /* håll det tight på mobil */
  }
}

/* Små micro-justeringar för knappar i hero (valfritt) */
.hero--balanced .btn-primary {
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.hero--balanced .btn-ghost {
  border-color: currentColor;
  opacity: 0.9;
}
``

/* === Sticky footer layout === */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100dvh; }
.site-main { flex: 1 0 auto; display: block; }
/* Avoid margin-collapse that can lift footer */
.site-main > *:first-child { margin-top: 0; }
.site-footer { margin-top: 0; }


/* =========================
   Miljökontroll – mobilvänliga paneler
   ========================= */

/* Gör paneler och kort aldrig bredare än sin container */
.panel,
.card {
  max-width: 100%;
  box-sizing: border-box;
}

/* Skydda mot innehåll som spränger layouten (långa ord/URL:er) */
.panel, .panel * ,
.card,  .card  * {
  overflow-wrap: break-word;
  word-break: break-word; /* extra skydd för riktigt långa strängar */
}

/* Bilder/iframes i paneler får aldrig sticka ut */
.panel img, .panel iframe,
.card  img, .card  iframe {
  max-width: 100%;
  height: auto;
}

/* Bredare tabeller blir skrollbara horisontellt istället för att spränga bredden */
.panel table, .card table {
  display: block;
  width: max-content;     /* låt tabellen vara så bred den behöver */
  max-width: 100%;        /* men aldrig bredare än vyn */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}

/* Mindre paddning/hörnradie på mobil för tätare uttryck */
@media (max-width: 720px) {
  .panel, .card {
    padding: clamp(0.75rem, 2.5vw, 1rem);
    border-radius: 12px;
  }
}

/* Tvåspaltsgrid (om sidan använder .grid.two i paneler) -> 1 kolumn på mobil */
@media (max-width: 960px) {
  .grid.two {
    grid-template-columns: 1fr !important;
  }
}

/* Om någon panel fått fast bredd inline (t.ex. style="width:800px") – nolla den på små skärmar */
@media (max-width: 960px) {
  .panel[style*="width"],
  .card[style*="width"] {
    width: auto !important;
  }
}

/* Hindra att body skrollar horisontellt om något ändå sticker ut */
html, body {
  overflow-x: hidden;
}