/* Wygląd DataDrive (kierunek B), część 2 z 5: nagłówek i menu. Opis kierunku i spis plików 20–24: 20-wyglad-baza-i-elementy.css */

/* 5. Nagłówek i menu */
/* Pasek górny: granat, biały napis 15,9:1 */
.topbar{background:var(--navy-2);font-weight:500}
.topbar a{opacity:1}
.lang__btn{border-radius:var(--r-sm);font-weight:600}
.lang__list{border-color:var(--line-kontrast)}
.topbar .lang__list a{font-weight:500}

/* Nagłówek: białe, pełne tło; pod spodem cienka linia w barwach logo */
.site-header{background:var(--white);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:3px solid var(--dd-teal);border-image:var(--grad-logo) 1;transition:none}
.nav__logo img{height:56px}
.nav__btn,.nav__link{font-weight:500;font-size:1rem;transition:background-color .15s,color .15s}
.nav__btn svg{transition:none}
.nav__login{font-weight:600;transition:background-color .15s,color .15s}
.nav__login svg{color:var(--dd-blue)}
.klodka__palak{transition:none}
:is(.nav__login,.footer__login):is(:hover,:focus-visible) .klodka__palak{transform:none}
.nav__toggle{background:var(--white);border:1px solid var(--ink);border-radius:var(--r-sm);color:var(--ink);transition:background-color .15s,color .15s}
.nav__toggle:active{transform:none}
.nav__toggle[aria-expanded="true"]{background:var(--ink);color:var(--white)}
.nav__bar{transition:transform .15s}
.mega__col ul a,.drop a{font-weight:500;transition:background-color .15s,color .15s}
.mega__col ul a:hover,.drop a:hover{background:var(--pale);color:var(--blue)}
.mega__col ul a:hover .mi{transform:none}
.mi{color:var(--dd-blue);transition:none}
.mega__uses a:hover .mu img{transform:none}

@media (min-width:1201px){
  .nav{gap:28px}
  .nav__btn,.nav__link{padding:10px 12px}
  .nav .btn{padding:11px 18px}
  /* Pozycje menu mają wysokość całego nagłówka, żeby lista rozwijana zaczynała się pod linią, tak jak duże menu */
  .nav__menu{align-self:stretch;align-items:stretch}
  .nav__menu>li{display:flex;align-items:center}
  /* Menu rozwijane przylega do linii pod nagłówkiem: biała płyta z ramką, bez cienia */
  .mega,.drop{padding-top:3px;transform:none;transition:opacity .12s ease,visibility 0s linear .12s}
  .is-open>.mega,.is-open>.drop{transition:opacity .12s ease,visibility 0s}
  .mega__in,.drop ul{background:var(--white);border:1px solid var(--line-kontrast);border-top:0;border-radius:0 0 var(--r) var(--r)}
  .mega__in--modules,.mega__in--devices{padding:22px 16px 16px}
  .mega__h{margin:0 10px 8px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:var(--fs-min);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
}
@media (max-width:1200px){
  .nav__logo img{height:48px}
  /* Menu mobilne: pozycje widać od razu po otwarciu (pojawia się tylko cała płyta) */
  .nav__menu>li,.nav__actions>*{opacity:1;transform:none;transition:none}
  .nav.is-open .nav__menu>li,.nav.is-open .nav__actions>*{transition:none}
  .nav__menu>li{border-bottom-color:var(--line)}
  .nav__btn,.nav__link{font-weight:600}
  .nav__menu .is-open>.mega,.nav__menu .is-open>.drop{animation:none}
  .nav__menu .mega__h{font-size:var(--fs-min);font-weight:600}
  .nav__login{border:1px solid var(--line-strong);background:var(--white)}
}