/* CYNERA override.css FINAL4 - stable background + explicit logo */
html, body { height: 100%; }
html { background: #070A12; }
body { margin: 0; padding: 0; background: transparent !important; position: relative; z-index: 1; }

html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-color: #070A12;
  background-image:
    linear-gradient(180deg, rgba(7,10,18,.28), rgba(7,10,18,.48)),
    url("/assets/img/bg-cynera-4k.jpg"),
    radial-gradient(1200px 600px at 15% 10%, rgba(124,92,255,.28), rgba(7,10,18,0) 55%),
    radial-gradient(1000px 500px at 80% 15%, rgba(42,232,194,.22), rgba(7,10,18,0) 55%),
    radial-gradient(900px 450px at 55% 85%, rgba(255,92,122,.16), rgba(7,10,18,0) 60%);
  background-size: auto, cover, auto, auto, auto;
  background-position: 0 0, center center, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

main, header, footer { position: relative; z-index: 1; }

.logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo img{
  height: 72px;
  width: auto;
  display: block;
}
@media (max-width: 1024px){ .logo img{ height: 64px; } }
@media (max-width: 600px){ .logo img{ height: 48px; } }

/* === REMOVE old CSS logo placeholder === */
.logo::before,
.logo::after {
  content: none !important;
  display: none !important;
}

.logo {
  background: none !important;
}

/* =========================
   HEADER – RESPONSIVE SAFE
   Variant B: menu pod logem
   ========================= */

/* společný základ */
header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* logo se nikdy nesmršťuje */
.logo{
  flex: 0 0 auto;
}

/* --- MOBILE / úzké šířky --- */
@media (max-width: 820px){

  /* povolíme zalomení do více řádků */
  header .container{
    flex-wrap: wrap;
  }

  /* menu jde POD logo */
  .nav{
    flex: 0 0 100%;
  }

  .nav ul{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    padding-top: 8px;
  }
}

/* --- DESKTOP / široké šířky --- */
@media (min-width: 821px){

  /* vše v jednom řádku */
  header .container{
    flex-wrap: nowrap;
  }

  .nav{
    flex: 1 1 auto;
  }

  .nav ul{
    display: flex;
    gap: 16px;
    justify-content: flex-end;
  }
}

/* ===== TOPBAR - SAFE RESPONSIVE LAYOUT (Variant B: menu under logo) ===== */
.topbar .nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo{
  flex: 0 0 auto;
}

.menu{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Mobile: menu under logo */
@media (max-width: 820px){
  .topbar .nav{
    flex-wrap: wrap;
  }
  .menu{
    width: 100%;
    justify-content: flex-start;
    margin-top: 8px;
  }
}

/* KPI grid (used on /nastroje security snapshot) */
.kpiGrid{
  display:grid;
  gap:12px;
  margin-top:14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 980px){
  .kpiGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .kpiGrid{ grid-template-columns: 1fr; }
}
/* Snapshot layout */
.snapshot .kpiGrid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(5,minmax(0,1fr));
}
@media (max-width: 980px){
  .snapshot .kpiGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 560px){
  .snapshot .kpiGrid{grid-template-columns:1fr;}
}