/* Skupna glava in navigacija (Go), v9. Na ozkih zaslonih se navigacija pospravi v gumb zgoraj desno.
   Povezave so v pisavi gumba »Zavrnem« (IBM Plex Sans 400, velike črke). */

/* Prostor za drsnik je vedno rezerviran, kot na domači strani: kratka stran (npr. /preveri/ na velikem zaslonu)
   ni zamaknjena za pol drsnika, ko preklapljamo med stranmi v meniju. */
html {
  scrollbar-gutter: stable;
}
/* Glava kot na domači strani (Diagnostika; /styles.css: .page, .shell, .hero-top, .logo, .divider):
   stolpec do 1120 px s 24 px roba (20 px do 480 px), logotip 112 px (102 px do 720 px) 14 px od vrha,
   povezave ob desnem robu stolpca, 12 px (13 px do 720 px) pod vrstico tanka rožnata črta čez stolpec.
   Ta datoteka se naloži za slogi posamezne strani, zato ta pravila veljajo namesto njihovih. */
.site-header {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100% - 48px, 1120px);
  min-height: 0;
  margin: 0 auto;
  padding: 14px 0 13px;
  border-bottom: 0;
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 61, 111, 0.06) 0%, rgba(217, 61, 111, 0.14) 18%,
    rgba(217, 61, 111, 0.3) 50%, rgba(255, 243, 247, 0.82) 76%, rgba(217, 61, 111, 0.12) 100%);
}

.site-header > a:first-child {
  display: block;
  flex: none;
}

.site-logo {
  display: block;
  width: 112px;
  height: auto;
  margin-left: 0;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px clamp(16px, 2.2vw, 30px);
  margin-left: auto;
  /* Pisava kot gumb »Zavrnem« v vrstici za soglasje (/assets/consent.css): IBM Plex Sans 400, velike črke, razmik 0.04em;
     velikost (12 px) in barva (#101217) kot ploščica »DIAGNOSTIKA PROCESOV« nad naslovom na domači strani. */
  font: 400 12px/1.4 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-nav a {
  color: #101217;
  text-decoration: none;
  transition: color 160ms ease;
}

/* Lebdenje: signalna barva kot gumb »Želim ponudbo!« na domači strani (brez podčrtaja). */
.site-nav a:hover,
.site-nav a:focus-visible {
  color: #d93d6f;
}

.site-nav a[aria-current="page"] {
  font-weight: 600;
}

/* Vsaka povezava je široka kot njeno krepko besedilo (skrita kopija iz data-label), zato se ob krepki
   trenutni strani ostale povezave ne premaknejo in je meni na vseh straneh na istem mestu (samo v vrstici, ne v spustnem seznamu). */
@media (min-width: 761px) {
  .site-nav a[data-label] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }

  .site-nav a[data-label]::after {
    content: attr(data-label);
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
  }
}

/* Gumb s tremi crticami: viden samo na ozkih zaslonih, brez skripta ga skrije <noscript>. */
.site-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #101217;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.site-nav-toggle:hover,
.site-nav-toggle:focus-visible {
  background: #f2f3f5;
}

.site-nav-toggle:focus-visible {
  outline: 2px solid #D93D6F;
  outline-offset: 2px;
}

.site-nav-toggle__box {
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
}

.site-nav-toggle__bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.18s ease, opacity 0.12s ease;
}

.site-nav-toggle__bar:nth-child(1) { top: 0; }
.site-nav-toggle__bar:nth-child(2) { top: 6px; }
.site-nav-toggle__bar:nth-child(3) { top: 12px; }

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(2) { opacity: 0; }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Do 760 px (prej 700): šest povezav v eni vrstici potrebuje okoli 760 px. */
@media (max-width: 760px) {
  .site-header {
    z-index: 40;
  }

  .site-nav-toggle {
    display: inline-flex;
  }

  /* Zaprt meni: spustni seznam pod crto glave, brez vpliva na tok strani. */
  .site-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: -24px;
    right: -24px;
    z-index: 1;
    display: none;
    margin: 0;
    padding: 4px 24px 14px;
    background: #fff;
    border-bottom: 1px solid #d9dde2;
    box-shadow: 0 16px 28px rgba(16, 18, 23, 0.08);
  }

  .site-nav[data-open="1"] {
    display: block;
    animation: site-nav-drop 0.16s ease-out;
  }

  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-top: 1px solid #eef0f3;
  }

  .site-nav a:first-child {
    border-top: 0;
  }
}

@keyframes site-nav-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav-toggle__bar { transition: none; }
  .site-nav[data-open="1"] { animation: none; }
}

@media (max-width: 720px) {
  .site-header {
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 14px;
  }

  .site-logo {
    width: 102px;
  }
}

@media (max-width: 480px) {
  .site-header {
    width: min(100% - 40px, 1120px);
  }

  .site-nav {
    left: -20px;
    right: -20px;
    padding-right: 20px;
    padding-left: 20px;
  }
}