/* =========================================================
   RESET & VARIABLER
========================================================= */
* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --accent:       #00fff0;
  --accent-alt:   #ffbf00;
  --bg-dark:      #0f1115;
  --text:         #eee;
  --text-muted:   #aaa;
  --card-bg:      rgba(255,255,255,0.05);
  --glass-bg:     rgba(255,255,255,0.05);
  --border-color: rgba(255,255,255,0.12);
  --radius:       1rem;
  --transition:   0.3s;
}

html, body { height: 100%; overflow-x: hidden; }
body{
  display:flex; flex-direction:column;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:var(--bg-dark); color:var(--text); line-height:1.6;
  transition: background var(--transition), color var(--transition);
}

/* Behåll sticky footer */
main { flex:1; }
footer { margin-top:auto; }

/* Media ska aldrig spränga layouten */
img, video, iframe, svg { max-width:100%; height:auto; display:block; }

/* =========================================================
   TYPOGRAFI (snabb bas)
========================================================= */
h1,h2,h3 { line-height:1.25; }
a { color:inherit; }

/* =========================================================
   CONTAINER & LAYOUT
========================================================= */
.container{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:2rem 1rem;
}

/* =========================================================
   HEADER + NAV (RESPONSIV DROPDOWN)
========================================================= */
.header{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0.75rem 1rem;
  background:rgba(15,17,21,0.85);
  backdrop-filter:blur(12px);
}

.logo{ font-weight:700; letter-spacing:.5px; font-family:'JetBrains Mono', monospace; }

.nav{ display:flex; gap:1.25rem; align-items:center; }
.nav a{ text-decoration:none; color:var(--text); font-weight:500; transition:color var(--transition); white-space:nowrap; }
.nav a:hover, .nav a.active{ color:var(--accent); }

#themeToggle{ background:none; border:none; font-size:1.1rem; color:var(--text); cursor:pointer; transition:transform var(--transition); }
#themeToggle:hover{ transform:rotate(20deg); }

/* Hamburger-knapp (mobil) */
.menu-toggle{
  display:none;
  background:none; border:1px solid rgba(255,255,255,0.15);
  color:#eee; font-size:1.1rem; line-height:1;
  padding:.4rem .6rem; border-radius:.5rem; cursor:pointer;
}

@media (max-width: 820px){
  .menu-toggle{ display:inline-block; }
  #themeToggle{ margin-left:.5rem; }

  /* Dropdown-panel */
  .nav{
    position:absolute; left:0; right:0; top:100%;
    display:grid; gap:.5rem;
    background:rgba(15,17,21,0.96);
    backdrop-filter:blur(14px);
    padding:.75rem 1rem;
    border-bottom:1px solid rgba(255,255,255,0.08);

    max-height:0; overflow:hidden;
    transform-origin:top;
    transition:max-height .28s ease, padding .28s ease;
  }
  .nav.open{ max-height:70vh; padding:.75rem 1rem; }

  .nav a{ padding:.6rem .25rem; border-radius:.5rem; }
  .nav a:active{ background:rgba(255,255,255,0.06); }
}

/* =========================================================
   HERO (mesh + oscilloskop-vågor)
========================================================= */
.hero{
  position:relative; text-align:center; padding:8rem 1rem;
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }

.mesh-layer{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at center, rgba(0,255,255,0.05), transparent 70%),
    radial-gradient(circle at 70% 30%, rgba(0,255,255,0.04), transparent 60%);
  mix-blend-mode:screen;
  animation: pulseMesh 8s ease-in-out infinite alternate;
}
@keyframes pulseMesh{
  from{ opacity:.3; transform:scale(1); }
  to  { opacity:.6; transform:scale(1.05); }
}

/* Om din SVG har klassen .signal-layer */
.signal-layer{ position:absolute; inset:0; }
.signal-layer path{ stroke-linecap:round; stroke-linejoin:round; }

.wave1{ stroke-dasharray:6 10; animation: oscilloscope 2.5s linear infinite;  stroke:rgba(0,255,240,0.3);  }
.wave2{ stroke-dasharray:8 14; animation: oscilloscope 3.5s linear infinite;  stroke:rgba(255,191,0,0.25); }
.wave3{ stroke-dasharray:4 8;  animation: oscilloscope 4.5s linear infinite;  stroke:rgba(0,200,255,0.2);  }
@keyframes oscilloscope{
  from{ stroke-dashoffset:0; }
  to  { stroke-dashoffset:-300; }
}

/* Hero copy */
.hero-content{ position:relative; max-width:900px; margin:0 auto; }
.hero-title{
  font-family:'JetBrains Mono', monospace;
  font-size:3rem; font-weight:700; color:#fff;
}
.hero-subtitle{ margin-top:1rem; color:var(--text-muted); font-size:1.25rem; }
.cta{
  display:inline-block; margin-top:2rem; padding:.75rem 2rem;
  border-radius:var(--radius); border:1px solid var(--accent);
  color:var(--accent); text-decoration:none; font-weight:600;
  transition: all var(--transition);
}
.cta:hover{ background:var(--accent); color:#0f1115; }

/* =========================================================
   GRID-KORT (cards)
========================================================= */
.grid-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:2rem;
  margin-top:3rem;
}
.grid-cards a{ text-decoration:none; color:inherit; }

.card{ display:block; width:100%; max-width:100%; border-radius:var(--radius); }
.card.glass{
  position:relative; background:var(--card-bg); backdrop-filter:blur(12px);
  padding:2rem; transition: transform var(--transition), box-shadow var(--transition);
}
.card.glass:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,255,240,0.25); }

.card-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:.75rem; gap:.5rem; flex-wrap:wrap;
}
.card-header h2{
  font-family:'JetBrains Mono', monospace; font-size:1.5rem; color:#fff;
}

/* Taggar som “pill” */
.tag{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:.6rem;
  font-size:.75rem; font-weight:500; line-height:1;
  color:#000; background:#0ff;   /* default */
}
.tag.tech{   background:#0ff;    color:#000; }
.tag.radio{  background:#ff9500; color:#000; }
.tag.guides{ background:#7d5fff; color:#fff; }
.tag.misc{   background:#00fff0; color:#000; }
.tag.ongoing{background:#ffbf00; color:#111; }

.card p{ color:var(--text-muted); font-size:.95rem; }

/* =========================================================
   BLOGG – Filterbar + grid
========================================================= */
.filter-bar{
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
  margin:1.5rem 0;
}
.filter-btn{
  background:var(--glass-bg);
  border:1px solid var(--border-color);
  color:var(--text);
  padding:.5rem 1rem;
  border-radius:999px;
  cursor:pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.filter-btn:hover{ background:var(--accent); color:#000; border-color:transparent; }
.filter-btn.active{ background:var(--accent); color:#000; border-color:transparent; }

.blog-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:2rem;
}

/* =========================================================
   KONTAKT – Formulär
========================================================= */
.contact-card form{ display:flex; flex-direction:column; gap:1rem; }
.contact-card label{ font-weight:600; font-size:.95rem; color:#ddd; }
.contact-card input,
.contact-card textarea{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:.75rem;
  padding:.75rem 1rem;
  color:#fff; font-size:.95rem;
  transition: all .3s;
}
.contact-card input::placeholder,
.contact-card textarea::placeholder{ color:rgba(255,255,255,0.5); }
.contact-card input:focus,
.contact-card textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 8px rgba(0,255,240,0.25);
  outline:none;
}
.contact-card button.cta{ align-self:flex-start; }

/* =========================================================
   REVEAL ANIMATION
========================================================= */
.reveal{ opacity:0; transform:translateY(20px); transition: all .6s ease-out; }

/* =========================================================
   FOOTER
========================================================= */
.footer{ text-align:center; padding:2rem 1rem; background:#111; color:#777; }

/* =========================================================
   RESPONSIVT
========================================================= */
@media(max-width: 768px){
  .hero-title{ font-size:2.2rem; }
  .hero-subtitle{ font-size:1rem; }
  .grid-cards{ grid-template-columns: 1fr; }
}

/* =========================================================
   INBÄDDADE FONTER (valfritt – ha filerna i /fonts)
========================================================= */
/* Exempel: Inter/Space Grotesk – kommentera bort om du inte har filerna lokalt */
/*
@font-face{ font-family:'Inter'; src:url('../fonts/Inter_18pt-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; }
@font-face{ font-family:'Inter'; src:url('../fonts/Inter_18pt-Medium.ttf') format('truetype');  font-weight:500; font-style:normal; }
@font-face{ font-family:'Inter'; src:url('../fonts/Inter_18pt-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; }
@font-face{ font-family:'Inter'; src:url('../fonts/Inter_18pt-Bold.ttf') format('truetype');    font-weight:700; font-style:normal; }

@font-face{ font-family:'Space Grotesk'; src:url('../fonts/SpaceGrotesk-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; }
@font-face{ font-family:'Space Grotesk'; src:url('../fonts/SpaceGrotesk-Bold.ttf')   format('truetype'); font-weight:700; font-style:normal; }
*/

/* Mindre hero-variant på bloggsidan */
.hero.hero--small{ padding:4rem 1rem; }

/* Filter-wrap: centrera och ge lite luft */
.filter-wrap{
  margin: .5rem 0 1.5rem;
}

/* Horisontell chip-rad – scrollbar på mobil, centreras på desktop */
.chip-row{
  display:flex; gap:.5rem;
  overflow-x:auto; padding:.25rem; /* liten inre luft */
  -webkit-overflow-scrolling: touch;
  justify-content:center;          /* centrera när plats finns */
}
.chip-row::-webkit-scrollbar{ height:0; } /* dölj scrollbar subtilt */

/* Själva chip-knappen */
.chip{
  border:1px solid var(--border-color);
  background: var(--glass-bg);
  color: var(--text);
  padding:.45rem .9rem;
  border-radius:999px;
  font-size:.9rem;
  line-height:1;
  cursor:pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
  white-space:nowrap;
}
.chip:hover{ transform: translateY(-1px); }
.chip.active{
  background: var(--accent);
  color:#000;
  border-color: transparent;
}

/* Extra luft till kortgriden efter chipparna */
#blogCards{ margin-top: 1rem; }

/* Hero ska alltid spänna hela skärmen i sidled */
.hero{
  position: relative;
  width: 100%;
  min-height: 40vh;
  text-align: center;
  padding: 5rem 1rem;
  overflow: hidden;
}

/* Bakgrundslagren fyller hela hero-ytan */
.hero-bg,
.signal-layer,
.mesh-layer{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero svg.signal-layer{
  width: 100%;
  height: 100%;
  display: block; /* inga inline-gap */
}

/* Texten i hero centreras av en inre container */
.hero .container{
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* Variant: mindre hero för undersidor */
.hero.hero--small {
  min-height: 25vh;       /* grundare än startsidan */
  padding: 3rem 1rem;     /* mindre topp/botten-luft */
}

.hero.hero--small .hero-title {
  font-size: 2rem;        /* lite mindre rubrik */
}

.hero.hero--small .hero-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
}

/* =========================================================
   LIGHT THEME – optimerad palett och komponenter
   Aktiveras via <body class="light"> (scripts.js hanterar toggling)
========================================================= */
body.light{
  /* Basfärger */
  --bg-dark:        #f6f7fb;     /* sidbakgrund */
  --text:           #1b1d23;     /* primär text */
  --text-muted:     #5b6270;     /* sek. text */
  --card-bg:        rgba(255,255,255,0.85); /* glass-kort */
  --glass-bg:       rgba(255,255,255,0.75);
  --border-color:   rgba(0,0,0,0.08);
  --radius:         1rem;
  --transition:     0.3s;

  /* Accenter – lite kallare blå + varm gul för harmoni */
  --accent:         #3b82f6;     /* blå */
  --accent-alt:     #ffb020;     /* amber */

  background:#f6f7fb;
  color:var(--text);
}

/* Header & nav */
body.light .header{
  background: rgba(255,255,255,0.8);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(12px);
}
body.light .logo{ color:#0f172a; }
body.light .nav a{ color:#283046; }
body.light .nav a:hover,
body.light .nav a.active{ color:var(--accent); }

/* Hero (fullbredd) – vågor + mesh justeras för ljus bakgrund */
body.light .hero-title{ color:#0f172a; }
body.light .hero-subtitle{ color:#475569; }
body.light .mesh-layer{
  background:
    radial-gradient(circle at center, rgba(59,130,246,0.10), transparent 70%),
    radial-gradient(circle at 70% 30%, rgba(255,176,32,0.08), transparent 60%);
  mix-blend-mode: multiply;
}
/* Vågornas färg/kontrast i ljust läge */
body.light .wave1{ stroke: rgba(59,130,246,0.45); }   /* blå */
body.light .wave2{ stroke: rgba(255,176,32,0.35); }   /* amber */
body.light .wave3{ stroke: rgba(34,197,94,0.35); }    /* grön touch */

/* Cards / widgets */
body.light .card.glass,
body.light .widget{
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(15,23,42,0.08);
  border: 1px solid var(--border-color);
}
body.light .card.glass:hover,
body.light .widget:hover{
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
  transform: translateY(-3px);
}
body.light .card-header h2{ color:#0f172a; }
body.light .card p{ color:#5b6270; }

/* CTA-knappar */
body.light .cta{
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}
body.light .cta:hover{
  background: var(--accent);
  color: #fff;
}
body.light .cta.mini{
  border-color: var(--accent);
}

/* Chips (filter) */
body.light .chip{
  border-color: var(--border-color);
  background: rgba(255,255,255,0.85);
  color: #1b1d23;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
body.light .chip:hover{
  transform: translateY(-1px);
}
body.light .chip.active{
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

/* Tags som pills */
body.light .tag{
  color:#0f172a;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
body.light .tag.tech{   background:#bae6fd; color:#0c4a6e; }  /* blå-ljus */
body.light .tag.radio{  background:#ffe3b3; color:#7a4a00; }  /* amber-ljus */
body.light .tag.guides{ background:#e9d5ff; color:#5b21b6; }  /* violett-ljus */
body.light .tag.misc{   background:#d1fae5; color:#065f46; }  /* grön-ljus */
body.light .tag.ongoing{background:#ffe8bf; color:#7a4a00; }  /* amber-ongoing */

/* Badges & dots (dashboard) */
body.light .badge.pass{ background:#22c55e; color:#0b2313; }
body.light .badge.fail{ background:#ef4444; color:#fff; }
body.light .badge.warn{ background:#f59e0b; color:#111; }
body.light .dot.ok{ background:#22c55e; }
body.light .dot.warn{ background:#f59e0b; }

/* Länkar */
body.light a.link{ color:#1d4ed8; }
body.light a.link:hover{ color:#1e40af; }

/* Footer */
body.light .footer{
  background:#eef1f6;
  color:#475569;
  border-top: 1px solid var(--border-color);
}

/* Formulär (contact) */
body.light .contact-card input,
body.light .contact-card textarea{
  background: rgba(255,255,255,0.9);
  color:#111827;
  border:1px solid var(--border-color);
}
body.light .contact-card input::placeholder,
body.light .contact-card textarea::placeholder{ color:#9aa3b2; }
body.light .contact-card input:focus,
body.light .contact-card textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.15);
}

/* Reveal startvärden (om din dark-styling satte dem lite olika) */
body.light .reveal{ opacity:0; transform:translateY(20px); }

/* Mini-scope (dash) */
body.light .scope .trace{
  stroke: rgba(59,130,246,.7);
}

/* Hero-knapp i ljus */
body.light .hero .cta{
  border-color: var(--accent);
  color: var(--accent);
}
body.light .hero .cta:hover{
  background: var(--accent);
  color:#fff;
}