/* ═══════════════════════════════════════════════════════════════════════
   hb-public-nav.css — OMMAVIY (tashqi tashrifchi ko'radigan) sahifalar
   uchun YAGONA yuqori navigatsiya: bosh sahifa landing'i (/hrm/),
   yangiliklar (/hrm/news/) va vakansiyalar.

   NEGA ALOHIDA FAYL: 2026-08-10 gacha navbar FAQAT `hrm_launcher/index.html`
   ichida, `.hb-authgate` blokining ichki `<style>`ida yashardi — ya'ni uni
   boshqa ommaviy sahifada ishlatib bo'lmasdi va har sahifa o'z navbarini
   qayta yozardi. Endi markup `template/shared/hb_public_nav.html`,
   ko'rinish esa shu yerda — BITTA joyda.

   Tokenlar `hb-tokens.css` dan (`--hb-*`) olinadi, shuning uchun yorug'/qorong'i
   tema avtomatik ishlaydi va alohida dark-mode qoidasi yozilmagan.
   ═══════════════════════════════════════════════════════════════════════ */

/* Tokenlar IKKALA konteynerda ham e'lon qilinadi. Sabab: bosh sahifa
   landing'ida to'liq `.hbpn` paneli YO'Q — u yerda faqat `.hbpn-links`
   guruhi shell topbar'ining ichiga ko'chiriladi. Tokenlar faqat `.hbpn`da
   bo'lganda `color:var(--hbpn-mut)` o'sha sahifada ANIQLANMAGAN bo'lib
   qolib, punktlar hb-components.css dagi umumiy havola rangini (yashil)
   olib ketardi va faol punkt ostidagi chiziq ko'rinmasdi. */
.hbpn, .hbpn-links{
  --hbpn-ink: var(--hb-txt);
  --hbpn-mut: var(--hb-mut);
  --hbpn-line: var(--hb-brd);
  --hbpn-acc: var(--hb-acc, #24C29A);
  --hbpn-bg: var(--hb-bg);
}
.hbpn{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:18px;
  padding:0 clamp(14px,3vw,34px); height:60px;
  background:color-mix(in srgb, var(--hbpn-bg) 82%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
/* Sahifa aylantirilganda pastki chiziq paydo bo'ladi (JS `.hbpn-stuck`
   qo'shadi) — tepada turganda navbar "suzib" turgandek toza ko'rinadi. */
.hbpn.hbpn-stuck{ border-bottom-color:var(--hbpn-line) }

/* ── Brend ── */
.hbpn-brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--hbpn-ink);
  font-weight:800; font-size:14.5px; letter-spacing:-.3px; flex:none;
}
.hbpn-brand:hover{ text-decoration:none; color:var(--hbpn-ink) }
.hbpn-logo{
  width:30px; height:30px; border-radius:10px; flex:none;
  background:var(--hbpn-acc); color:var(--hb-acc-ink,#0B1F19);
  display:grid; place-items:center; font-weight:800; font-size:14px;
}

/* ── Havolalar ── */
.hbpn-links{
  display:flex; align-items:center; gap:4px; flex:1; min-width:0;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.hbpn-links::-webkit-scrollbar{ display:none }
/* `a.hbpn-item` — hb-components.css dagi umumiy `a` rangidan kuchliroq
   bo'lishi uchun element+klass (aks holda havolalar yashil qolardi). */
.hbpn-item, a.hbpn-item{
  position:relative; flex:none; text-decoration:none;
  padding:8px 12px; border-radius:var(--hb-pill,999px);
  font-size:13.5px; font-weight:600; letter-spacing:-.1px;
  color:var(--hbpn-mut); white-space:nowrap;
  transition:color .18s ease, background .18s ease;
}
a.hbpn-item:hover{ color:var(--hbpn-ink); background:var(--hb-bg2); text-decoration:none }
.hbpn-item.active, a.hbpn-item.active{ color:var(--hbpn-ink) }
/* Faol punkt ostidagi nozik chiziq — `::after` transform bilan (width
   animatsiyasi layout'ni qayta hisoblaydi, bu esa 60fps'ni buzadi). */
.hbpn-item::after{
  content:''; position:absolute; left:12px; right:12px; bottom:2px; height:2px;
  border-radius:2px; background:var(--hbpn-acc);
  transform:scaleX(0); transform-origin:center;
  transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.hbpn-item.active::after{ transform:scaleX(1) }
a.hbpn-item:hover::after{ transform:scaleX(.55) }
.hbpn-item.active:hover::after{ transform:scaleX(1) }

/* "Tez orada" — hali ochilmagan bo'lim (havola emas, <span>) */
.hbpn-soon{ opacity:.45; cursor:default }
.hbpn-soon::before{
  content:'· tez orada'; font-size:9px; margin-left:5px; opacity:.85;
  font-weight:600; letter-spacing:.02em;
}
@media (max-width:640px){ .hbpn-soon::before{ display:none } }

/* ── O'ng tomon (harakatlar) ── */
.hbpn-right{ display:flex; align-items:center; gap:8px; flex:none }
.hbpn-btn{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  height:34px; padding:0 14px; border-radius:var(--hb-pill,999px);
  font-size:13px; font-weight:700; letter-spacing:-.1px;
  border:1px solid var(--hbpn-line); background:transparent; color:var(--hbpn-ink);
  cursor:pointer; transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.hbpn-btn:hover{ background:var(--hb-bg2); border-color:var(--hb-brd2); text-decoration:none; color:var(--hbpn-ink) }
.hbpn-btn:active{ transform:translateY(1px) }
.hbpn-btn-acc{
  background:var(--hbpn-acc); border-color:transparent; color:var(--hb-acc-ink,#0B1F19);
}
.hbpn-btn-acc:hover{ background:var(--hb-acc-d,#1FA884); color:var(--hb-acc-ink,#0B1F19) }
.hbpn-icbtn{
  width:34px; height:34px; padding:0; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--hbpn-line); background:transparent;
  color:var(--hbpn-mut); cursor:pointer; flex:none;
  transition:color .18s ease, background .18s ease;
}
.hbpn-icbtn:hover{ color:var(--hbpn-ink); background:var(--hb-bg2) }

@media (max-width:560px){
  .hbpn{ height:54px; gap:10px }
  .hbpn-brandname{ display:none }
  .hbpn-item{ padding:7px 9px; font-size:13px }
  .hbpn-item::after{ left:9px; right:9px }
  .hbpn-btn span{ display:none }
  .hbpn-btn{ padding:0 11px }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBIL (2026-08-10, buyurtmachi: "mobilga ham moslashtir")

   7 punkt tor ekranga sig'maydi. Yashirin gorizontal scroll ISHLAYDI,
   lekin foydalanuvchi buni BILMAYDI — chetdagi punktlar "yo'q" bo'lib
   ko'rinadi. Shuning uchun:
     · o'ng chetda soyabon (fade) — "davomi bor" signali;
     · scroll-snap — punktlar chala kesilmaydi;
     · ixchamroq oraliq va o'lcham.
   Hamburger menyu ATAYLAB qilinmadi: 7 punkt uchun bitta bosishli
   gorizontal ro'yxat ochiladigan menyudan tezroq.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:980px){
  .hbpn-links{
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    /* O'ng chetda yumshoq so'nish — "yana punkt bor" degan ishora.
       `mask` faqat KO'RINISHGA ta'sir qiladi, bosishga emas. */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    padding-right:20px;
  }
  .hbpn-item{ scroll-snap-align:start }
}
@media (max-width:640px){
  .hbpn-item{ padding:7px 10px; font-size:13px }
  .hbpn-item::after{ left:10px; right:10px }
  /* Faol punkt scroll boshida ko'rinib tursin (JS pastda uni markazlaydi). */
  .hbpn-links{ gap:2px }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBIL NAVIGATSIYA — ochiladigan ro'yxat (2026-08-10, ikkinchi urinish)

   BIRINCHI urinish: gorizontal scroll + fade + faol punktga surish.
   Ishlardi, lekin baribir noqulay edi — 7 punktdan bir vaqtda 2-3 tasi
   ko'rinardi, foydalanuvchi qolganini "yo'q" deb o'ylardi va butun
   ro'yxatni BIR QARASHDA ko'ra olmasdi.

   ENDI: ixcham tugma — JORIY sahifa nomi + shevron. Bosilganda barcha
   punktlar to'liq ro'yxat bo'lib ochiladi. Yutuq: (1) qayerdaligingiz
   yozib turibdi, (2) hamma bo'lim bir bosishda, (3) topbar'dagi
   tema/til/qo'ng'iroq tugmalari bilan joy talashmaydi.

   Tugma va ro'yxat JS'da MAVJUD havolalardan yasaladi (hb_public_base.html)
   — markup ikkinchi marta yozilmaydi, yagona manba saqlanadi.
   ═══════════════════════════════════════════════════════════════════════ */
.hbpn-mob{ display:none }

@media (max-width:760px){
  /* Gorizontal ro'yxat o'rniga tugma.
     ⚠️ `body.hbp-public` SHART EMAS: bosh sahifa landing'i (hrm_launcher)
     o'sha klassni QO'YMAYDI — u umumiy ommaviy bazadan meros olmaydi.
     `.hbpn-links` faqat ommaviy navigatsiyada uchraydi, shuning uchun
     selektor shusiz ham xavfsiz. (Avval `body.hbp-public` bilan edi va
     landing'da ro'yxat yashirilmay, tugma ustiga chiqib qolgan edi.) */
  .hb-topbar .hbpn-links{ display:none }
  .hbpn-mob{
    display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    max-width:100%; min-width:0;
    height:36px; padding:0 12px; border-radius:var(--hb-pill,999px);
    border:1px solid var(--hb-brd); background:transparent; color:var(--hb-txt);
    font:inherit; font-size:14px; font-weight:700; letter-spacing:-.1px;
  }
  .hbpn-mob-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .hbpn-mob-chev{ flex:none; transition:transform .25s ease; color:var(--hb-mut) }
  .hbpn-mob[aria-expanded="true"]{ border-color:var(--hb-acc) }
  .hbpn-mob[aria-expanded="true"] .hbpn-mob-chev{ transform:rotate(180deg) }

  /* Ochiladigan ro'yxat — topbar ostida, butun enlikda */
  .hbpn-sheet{
    position:fixed; left:0; right:0; z-index:70;
    background:var(--hb-bg); border-bottom:1px solid var(--hb-brd);
    box-shadow:var(--hb-shadow, 0 14px 30px rgba(0,0,0,.2));
    padding:6px 0 10px; display:none;
    max-height:70vh; overflow-y:auto;
  }
  .hbpn-sheet.open{ display:block }
  .hbpn-sheet a{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:13px clamp(16px,5vw,24px); text-decoration:none;
    color:var(--hb-txt); font-size:15.5px; font-weight:600;
    border-bottom:1px solid var(--hb-brd);
  }
  .hbpn-sheet a:last-child{ border-bottom:0 }
  .hbpn-sheet a:hover{ background:var(--hb-bg2); text-decoration:none; color:var(--hb-txt) }
  .hbpn-sheet a.active{ color:var(--hb-acc-text, var(--hb-acc)) }
  .hbpn-sheet a.active::after{
    content:''; width:8px; height:8px; border-radius:50%; flex:none;
    background:var(--hb-acc);
  }
  /* Fon — bosilganda yopiladi */
  .hbpn-scrim{
    position:fixed; inset:0; z-index:69; background:rgba(0,0,0,.28);
    display:none;
  }
  .hbpn-scrim.open{ display:block }
}