/* 06-naglowek-i-menu.css: Nagłówek strony: pasek górny, przełącznik języka, menu, mega menu, menu mobilne.
   Style globalne motywu QS GPS; zasady i spis plików w 01-tokeny.css. */

/* Pasek górny i przełącznik języka */
.topbar{background:var(--blue);color:var(--white);font-size:.85rem;font-weight:600}
.topbar__in{display:flex;justify-content:space-between;align-items:center;gap:var(--gap);min-height:38px}
.topbar p{margin:0;display:flex;align-items:center;gap:22px}
.topbar a{display:inline-flex;align-items:center;gap:8px;min-height:32px;color:var(--white);opacity:.95;transition:opacity .2s}
.topbar a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.topbar svg{width:15px;height:15px}
@media (max-width:700px){.topbar .topbar__mail{display:none}} /* na telefonie zostaje numer (od razu do kliknięcia), e-mail jest w stopce i na Kontakcie */

/* Przełącznik języka: pozycje mają data-gt-lang (GTranslate) */
.lang{position:relative}
.lang__btn{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border:1px solid var(--glass-line-strong);border-radius:8px;background:none;color:var(--white);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;cursor:pointer;transition:background .2s}
.lang__btn:hover,.lang__btn[aria-expanded="true"]{background:var(--glass)}
.lang__flag{display:inline-flex}
.lang .flag{width:20px;height:14px;flex:none;border-radius:2px;box-shadow:0 0 0 1px var(--flag-ring)}
.lang__btn .lang__chev{width:12px;height:12px;transition:transform .2s}
.lang__btn[aria-expanded="true"] .lang__chev{transform:rotate(180deg)}
.lang__list{position:absolute;right:0;top:calc(100% + 6px);z-index:80;min-width:200px;padding:6px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--white);box-shadow:var(--shadow-pop);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility 0s linear .15s}
.lang.is-open .lang__list{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .15s}
.topbar .lang__list a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-2xs);color:var(--ink);font-size:.9rem;font-weight:600;opacity:1;text-decoration:none}
.topbar .lang__list a:hover,.topbar .lang__list a[aria-current="true"]{background:var(--pale);color:var(--blue)}

/* Nagłówek i menu */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--header-line);transition:border-color .3s,background .3s} /* linia pod nagłówkiem zawsze (właściciel 28.09), nie tylko po przewinięciu */
.site-header.is-scrolled{border-bottom-color:var(--header-line)}
.nav{position:relative;display:flex;align-items:center;gap:32px;min-height:var(--header)}
.nav__logo img{height:52px;width:auto}
.nav__menu{display:flex;align-items:center;gap:2px}
.nav__btn,.nav__link{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border:0;border-radius:var(--r-2xs);background:none;color:var(--ink);font-weight:600;font-size:.95rem;cursor:pointer;transition:background .2s,color .2s}
.nav__btn svg{width:14px;height:14px;transition:transform .25s}
.nav__btn:hover,.nav__link:hover,.nav__btn[aria-expanded="true"],.nav__link[aria-current="page"]{background:var(--pale);color:var(--blue)}
.nav__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav__login{display:inline-flex;align-items:center;white-space:nowrap;gap:8px;color:var(--ink);font-weight:700;font-size:var(--fs-sm);padding:10px 14px;border-radius:var(--r-2xs);transition:color .2s,background .2s}
.nav__login svg{width:17px;height:17px;color:var(--blue)}
.nav__login:hover{color:var(--blue);background:var(--pale)}
.nav .btn{padding:11px 20px;white-space:nowrap}
.nav__toggle{display:none;margin-left:auto;width:48px;height:48px;padding:0;place-items:center;background:var(--grad) border-box;border:0;border-radius:var(--r-sm);cursor:pointer;color:var(--white);transition:transform .2s}
.nav__toggle:active{transform:scale(.96)}
.nav__toggle svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* Dwie kreski obracają się w ✕ wokół środka ikony (jak na stronach Apple) */
.nav__bar{transform-box:view-box;transform-origin:12px 12px;transition:transform .35s var(--ease)}
.nav__bar--1{transform:translateY(-3.5px)}
.nav__bar--2{transform:translateY(3.5px)}
.nav__toggle[aria-expanded="true"] .nav__bar--1{transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__bar--2{transform:rotate(-45deg)}
.nav__panel{display:contents}
@media (max-width:1200px){.nav__logo img{height:48px}}

/* Mega menu i lista rozwijana */
.has-drop{position:relative}
.mega,.drop{position:absolute;top:100%;z-index:60;padding-top:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.mega{left:var(--gutter);right:var(--gutter)}
.drop{left:0;min-width:270px}
.is-open>.mega,.is-open>.drop{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s}
.mega__in,.drop ul{background:var(--pale-2);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow-pop)}
.mega__in{padding:22px}
.mega__in--modules{display:grid;grid-template-columns:repeat(4,max-content);justify-content:space-between;gap:4px clamp(12px,1.5vw,28px)}
.mega__in--devices{display:grid;grid-template-columns:max-content 1fr;gap:4px 24px}
.mega__h{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:4px 0 6px 16px;font-size:.85rem;font-weight:700;color:var(--muted)}
.mega__h--next{margin-top:0;height:46px;display:flex;align-items:flex-end}
.mega__col ul{display:grid;gap:2px}
.mega__col ul a,.drop a{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--r-xs);color:var(--ink);font-weight:600;font-size:var(--fs-sm);line-height:1.3;transition:background .15s,color .15s,box-shadow .15s}
.mega__col ul a:hover,.drop a:hover{background:var(--white);color:var(--blue);box-shadow:var(--shadow-item)}
.mega__col--wide ul{grid-template-columns:repeat(3,auto);grid-auto-flow:row;gap:2px 12px}
.mega__in--devices .mega__col ul a{padding:10px 12px}
/* Równe pozycje w menu Urządzenia (pozycje z opisem): każda na nazwę i dwie linie opisu, rzędy w kolumnach na tej samej wysokości */
@media (min-width:1201px){.mega__in--devices .mega__col ul{grid-auto-rows:1fr}.mega__in--devices .mega__col ul a{min-height:72px;height:100%}}
/* Równe kolumny w mega menu: 4 kolumny tej samej szerokości; w Urządzeniach kolumna Lokalizatory i 3 kolumny czujników na jednej siatce (subgrid) */
@media (min-width:1201px){.mega__in--modules{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:12px}.mega__in--devices{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:12px}.mega__in--devices .mega__col--wide{grid-column:2 / span 3;display:grid;grid-template-columns:subgrid;align-content:start}.mega__in--devices .mega__col--wide>*{grid-column:1 / -1}.mega__in--devices .mega__col--wide ul{grid-template-columns:subgrid;column-gap:12px}.mega__in--modules,.mega__in--devices{padding:18px}.mega__col ul a,.mega__in--devices .mega__col ul a{padding:10px 10px;gap:10px}.mega__h{margin-left:10px}.mega__in--modules .mega__col ul a{white-space:nowrap}}
/* Ikona pozycji menu (SVG z assets/ikony, currentColor) */
.mi{flex:none;display:grid;place-items:center;width:24px;height:24px;color:var(--blue);transition:transform .2s}
.mi svg{width:24px;height:24px}
.mega__col ul a:hover .mi{transform:scale(1.08)}
/* Nazwa + opis w dwóch liniach */
.mt{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Nazwa pozycji menu w jednej linii, za długa (np. po tłumaczeniu na niemiecki) kończy się wielokropkiem; opis najwyżej w 2 liniach */
.mn{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mega__col,.mega__col li,.mega__col ul a,.drop li,.drop a{min-width:0} /* pozycje nie szersze niż kolumna, żeby wielokropek działał */
.mt small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.mt small{font-size:var(--fs-min);font-weight:400;line-height:1.3;color:var(--muted)}
/* Pozycja wyróżniona (QSensor FuelCap): klasa is-key */
.mega__col .is-key a{background:var(--blue);color:var(--white);font-weight:700}
.mega__col .is-key a:hover{background:var(--blue-700);color:var(--white)}
.mega__col .is-key .mi{color:var(--white)}
.mega__col .is-key .mt small{color:var(--on-accent-2)}
/* Zastosowania w menu: karty ze zdjęciem */
.mega__uses{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.mega__uses>li{display:grid}
.mega__uses a{display:grid;row-gap:10px;padding:8px 8px 12px;border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);font-weight:700;font-size:var(--fs-sm);transition:border-color .2s,color .2s}
.mega__uses a:hover{border-color:var(--blue);color:var(--blue)}
.mu{display:block;aspect-ratio:16/8;border-radius:var(--r-2xs);overflow:hidden}
.mu img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.mega__uses a:hover .mu img{transform:scale(1.05)}
.mu--ph{display:grid;place-items:center;background:var(--grad-solid);color:var(--white)}
.mu--ph svg{width:34px;height:34px}
.mega__cta a{height:100%;align-content:space-between;padding:16px;background:var(--navy-2);border-color:var(--navy-2);color:var(--white);font-size:1rem}
.mega__cta a:hover{color:var(--white);background:var(--blue);border-color:var(--blue)}
.mega__cta svg{width:22px;height:22px}
.drop ul{padding:8px}

/* Menu mobilne: pełny ekran pod paskiem z logo, ☰ zmienia się w ✕, pozycje wjeżdżają po kolei */
@media (max-width:1200px){
  .nav__toggle{display:grid}
  .site-header{transition:background-color .3s,border-color .3s}
  .site-header.is-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--white);border-bottom-color:var(--line)}
  /* Otwarte menu: strona pod spodem się nie przewija, nagłówek z przyciskiem zamknięcia zostaje na miejscu */
  html.menu-open{overflow:hidden} /* tylko html: overflow na body przy html z overflow-x:clip robi z body osobny obszar przewijania i nagłówek przestaje się przyklejać */
  /* Pełny ekran pod paskiem z logo; --menu-top ustawia qs.js przy otwarciu */
  .nav__panel{position:fixed;left:0;right:0;top:var(--menu-top,72px);bottom:0;z-index:90;display:flex;flex-direction:column;padding:8px var(--gutter) 28px;background:var(--white);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
  .nav.is-open .nav__panel{opacity:1;visibility:visible;transition:opacity .3s ease}
  .nav__menu{flex-direction:column;align-items:stretch;gap:0;margin-top:4px}
  .nav__menu>li{border-bottom:1px solid var(--line)}
  .nav__menu>li,.nav__actions>*{opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s}
  .nav.is-open .nav__menu>li,.nav.is-open .nav__actions>*{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease);transition-delay:calc(60ms + var(--i,0) * 35ms)}
  .nav__menu>li:nth-child(2){--i:1}.nav__menu>li:nth-child(3){--i:2}.nav__menu>li:nth-child(4){--i:3}.nav__menu>li:nth-child(5){--i:4}.nav__menu>li:nth-child(6){--i:5}.nav__menu>li:nth-child(7){--i:6}
  .nav__actions>:nth-child(1){--i:7}.nav__actions>:nth-child(2){--i:8}
  .nav__btn,.nav__link{width:100%;justify-content:space-between;padding:13px 2px;font-size:var(--fs-text);font-weight:600;border-radius:0}
  .nav__btn svg{width:16px;height:16px;color:var(--blue)}
  /* Rozwinięte podmenu: własne jasne tło, nagłówki grup wersalikami, płynne pojawienie się */
  .nav__btn[aria-expanded="true"]{color:var(--blue);font-weight:700}
  .nav__btn:focus:not(:focus-visible),.nav__link:focus:not(:focus-visible){outline:none}
  .nav__menu>li.is-open{border-bottom-color:transparent}
  .nav__menu .is-open>.mega,.nav__menu .is-open>.drop{margin:0 0 12px;padding:6px 8px 10px;border-radius:var(--r);background:var(--pale-2);border:1px solid var(--line);animation:podmenu .3s var(--ease)}
  .nav__menu .mega__h{margin:12px 10px 4px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .nav__menu .mega__col ul a,.nav__menu .drop a{padding:10px}
  @keyframes podmenu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .nav__btn:hover,.nav__link:hover,.nav__btn[aria-expanded="true"],.nav__link[aria-current="page"]{background:none}
  .nav__actions{flex-direction:column;align-items:stretch;gap:10px;margin:auto 0 0;padding-top:24px}
  .nav__login{justify-content:center;background:var(--pale);padding:13px}
  .nav__actions .btn{padding:14px 20px}
  .mega,.drop{position:static;display:none;padding:0 0 12px;opacity:1;visibility:visible;transform:none;transition:none}
  .is-open>.mega,.is-open>.drop{display:block}
  .mega__in,.drop ul{padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}
  .mega__in--modules,.mega__in--devices{grid-template-columns:minmax(0,1fr);gap:4px}
  .mega__col--wide ul{grid-template-columns:minmax(0,1fr)}
  .mega__uses{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
  .mega__uses a{align-content:start}
  .mega__cta a{padding:12px;font-size:clamp(.8rem,3.7vw,1rem);overflow-wrap:anywhere}
}

/* Bez animacji, gdy użytkownik wyłączył ruch w systemie */
@media (prefers-reduced-motion: reduce){.nav__bar,.nav__panel,.nav__menu>li,.nav__actions>*{transition:none!important}.nav__menu .is-open>.mega,.nav__menu .is-open>.drop{animation:none}}

/* Bez skryptu (klasa „js” na <html> nie doszła): podmenu na komputerze otwiera się po najechaniu lub przejściu klawiszem Tab,
   na telefonie menu leży pod logo w całości (bez przycisku ☰), przełącznik języka jest ukryty (tłumaczenie działa tylko ze skryptem) */
html:not(.js) .lang{display:none}
@media (min-width:1201px){
  html:not(.js) :is(.has-mega,.has-drop):is(:hover,:focus-within)>:is(.mega,.drop){opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s}
}
@media (max-width:1200px){
  html:not(.js) .site-header{position:relative}
  html:not(.js) .nav{flex-wrap:wrap}
  html:not(.js) .nav__toggle{display:none}
  html:not(.js) .nav__panel{position:static;flex-basis:100%;padding:0 0 20px;opacity:1;visibility:visible;overflow:visible}
  html:not(.js) .nav__menu>li,html:not(.js) .nav__actions>*{opacity:1;transform:none}
  html:not(.js) :is(.mega,.drop){display:block;margin:0 0 12px;padding:6px 8px 10px;border-radius:var(--r);background:var(--pale-2);border:1px solid var(--line)}
  html:not(.js) .nav__btn svg{display:none}
}
/* Menu Moduły przy 1201–1279 px: węższe odstępy, żeby najdłuższe nazwy (np. Powiadomienia i alerty flotowe) mieściły się bez wielokropka */
@media (min-width:1201px) and (max-width:1279px){.mega__in--modules .mega__col ul a{gap:8px;padding-inline:8px}}
/* Menu ☰ na tablecie (od 700 px, niżej nazwy by się ucinały): podmenu w 2 kolumnach, Zastosowania w 5 (krótsze przewijanie, mniejsze zdjęcia) */
@media (min-width:700px) and (max-width:1200px){.mega__in--modules,.mega__in--devices{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}}
@media (min-width:901px) and (max-width:1200px){.mega__uses{grid-template-columns:repeat(5,minmax(0,1fr))}}