/* new-ui/header.css — the visitor header (operator 2026-10-23 evening, "Redesign / reorganize the KosovaJob website header"):
   [logo] Kompanitë · Trajnime · Llogarit Pagën · Për Biznese ▾ · Rreth Nesh ▾ … Publiko Konkurs · Kyçu · Krijo Profil · SQ ▾ as one row
   from 1280px; below 1280 the bar keeps the logo, "Publiko Konkurs" (from 360px) and the burger, and the drawer carries the rest.
   Linked by headerArea_new.php for visitors only, after base.css, so an equal selector wins here. Scoped to .kj-nav-wrap--pub and
   .kj-drawer--pub: the signed-in header and drawer are untouched. docs/features/site-chrome.md "2026-10-23 evening". */

/* ---- the row ---- */
.kj-nav-wrap--pub .kj-nav--pub .kj-nav__links { gap: 4px; }
.kj-nav-wrap--pub .kj-nav__actions--pub { gap: 8px; }
.kj-nav-wrap--pub .kj-nav__dd { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.kj-nav-wrap--pub .kj-nav__ddbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1;
  color: var(--kj-b3-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--kj-dur-base) var(--kj-ease-out);
}
.kj-nav-wrap--pub .kj-nav__ddbtn:hover,
.kj-nav-wrap--pub .kj-nav__dd.is-open .kj-nav__ddbtn,
.kj-nav-wrap--pub .kj-nav__dd.is-active .kj-nav__ddbtn { color: var(--kj-b3-title); }
.kj-nav-wrap--pub .kj-nav__ddbtn:focus-visible,
.kj-nav-wrap--pub .kj-nav__langbtn:focus-visible { outline: 2px solid var(--kj-coral-400); outline-offset: 2px; }
.kj-nav-wrap--pub .kj-nav__chev { flex: none; transition: transform var(--kj-dur-base) var(--kj-ease-out); }
.kj-nav-wrap--pub .kj-nav__dd.is-open .kj-nav__chev { transform: rotate(180deg); }

/* the menus */
.kj-nav-wrap--pub .kj-nav__ddmenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  min-width: 232px;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid #E7EAF0;
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(4, 30, 66, .28), 0 2px 6px rgba(4, 30, 66, .06);
}
.kj-nav-wrap--pub .kj-nav__ddmenu[hidden] { display: none; }
/* a bridge over the 10px gap, so the pointer can travel from the button into the menu */
.kj-nav-wrap--pub .kj-nav__ddmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.kj-nav-wrap--pub .kj-nav--pub .kj-nav__ddmenu a,
.kj-nav-wrap--pub .kj-nav--pub .kj-nav__ddmenu span {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: var(--kj-b3-title);
  background: transparent;
  white-space: nowrap;
}
.kj-nav-wrap--pub .kj-nav--pub .kj-nav__ddmenu a:hover,
.kj-nav-wrap--pub .kj-nav--pub .kj-nav__ddmenu a:focus-visible { background: #F6F8FB; color: var(--kj-b3-title); }
.kj-nav-wrap--pub .kj-nav--pub .kj-nav__ddmenu a:focus-visible { outline: 2px solid var(--kj-coral-400); outline-offset: -2px; }
.kj-nav-wrap--pub .kj-nav--pub .kj-nav__ddmenu a[aria-current="page"] { color: var(--kj-coral-600); }

/* the language: "SQ ▾" — the current language listed with a tick, the other one switches (.menuAreaUrlsLangs) */
.kj-nav-wrap--pub .kj-nav__langbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 10px 0 12px;
  border: 1.5px solid #E7EAF0;
  border-radius: var(--kj-r-pill);
  background: #FFFFFF;
  font: inherit;
  font-weight: 800;
  font-size: 13px;
  color: var(--kj-b3-title);
  cursor: pointer;
}
.kj-nav-wrap--pub .kj-nav__langbtn:hover,
.kj-nav-wrap--pub .kj-nav__dd--lang.is-open .kj-nav__langbtn { border-color: #CDD4E0; }
.kj-nav-wrap--pub .kj-nav__dd--lang .kj-nav__ddmenu { left: auto; right: 0; min-width: 168px; }
.kj-nav-wrap--pub .kj-nav--pub .kj-nav__ddmenu span.is-active { color: var(--kj-b3-muted); cursor: default; }
.kj-nav-wrap--pub .kj-nav--pub .kj-nav__ddmenu span.is-active::after { content: "\2713"; margin-left: auto; color: var(--kj-coral-600); }

/* "Publiko Konkurs" — the highlighted action: the coral pill gets its outline */
.kj-nav-wrap--pub .kj-nav__actions--pub .kj-nav__post { margin-left: 0; border: 1.5px solid var(--kj-coral-200); }

/* ---- from 1280: the whole row, no burger ---- */
@media (min-width: 1280px) {
  .kj-nav-wrap--pub .kj-nav--pub .kj-nav__links { display: inline-flex; }
  .kj-nav-wrap--pub .kj-nav--pub .kj-nav__burger { display: none; }
}
/* ---- below 1280: logo · "Publiko Konkurs" · burger; the drawer has the rest ---- */
@media (max-width: 1279px) {
  .kj-nav-wrap--pub .kj-nav--pub .kj-nav__links { display: none; }
  .kj-nav-wrap--pub .kj-nav--pub .kj-nav__burger { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .kj-nav-wrap--pub .kj-nav__actions--pub { display: inline-flex; margin-left: auto; }
  .kj-nav-wrap--pub .kj-nav__actions--pub .kj-signin--bar,
  .kj-nav-wrap--pub .kj-nav__actions--pub .kj-nav__create,
  .kj-nav-wrap--pub .kj-nav__actions--pub .kj-nav__dd--lang { display: none; }
  .kj-nav-wrap--pub .kj-nav__actions--pub .kj-nav__post { display: inline-flex; height: 40px; }
}
@media (max-width: 359px) {
  .kj-nav-wrap--pub .kj-nav__actions--pub .kj-nav__post { display: none; }
}

/* ---- the drawer (visitor) ---- */
.kj-drawer--pub .kj-drawer__grp > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  color: var(--kj-b3-title);
  cursor: pointer;
  list-style: none;
}
.kj-drawer--pub .kj-drawer__grp > summary::-webkit-details-marker { display: none; }
.kj-drawer--pub .kj-drawer__grp > summary:hover { background: #F6F8FB; }
.kj-drawer--pub .kj-drawer__grp > summary:focus-visible { outline: 2px solid var(--kj-coral-400); outline-offset: -2px; }
.kj-drawer--pub .kj-drawer__chev { flex: none; color: var(--kj-b3-muted); transition: transform var(--kj-dur-base) var(--kj-ease-out); }
.kj-drawer--pub .kj-drawer__grp[open] > summary .kj-drawer__chev { transform: rotate(180deg); }
.kj-drawer--pub .kj-drawer__sub { display: flex; flex-direction: column; padding: 0 0 6px 12px; }
.kj-drawer--pub .kj-drawer__links .kj-drawer__sub a { font-weight: 600; }
.kj-drawer--pub .kj-drawer__links a[aria-current="page"] { color: var(--kj-coral-600); }
.kj-drawer--pub .kj-drawer__create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  border-radius: var(--kj-r-pill);
  background: var(--kj-b3-gradient);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 15px;
}
.kj-drawer--pub .kj-drawer__langs { display: flex; gap: 6px; padding: 4px; border-radius: var(--kj-r-pill); background: #F6F8FB; }
.kj-drawer--pub .kj-drawer__langs > * {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: var(--kj-r-pill);
  font-weight: 800;
  font-size: 14px;
  color: var(--kj-b3-muted);
}
.kj-drawer--pub .kj-drawer__langs > .is-active { background: var(--kj-b3-navy); color: #FFFFFF; }
.kj-drawer--pub .kj-drawer__langs > a:focus-visible { outline: 2px solid var(--kj-coral-400); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .kj-nav-wrap--pub .kj-nav__chev, .kj-drawer--pub .kj-drawer__chev { transition: none; }
}

/* the drawer's "Kyçu" as the bar's: an outline pill — "Krijo Profil" below it is the gradient one */
.kj-drawer--pub .kj-signin--drawer .kj-signin__btn {
  background: #FFFFFF;
  color: var(--kj-b3-title);
  border: 1.5px solid #E7EAF0;
  box-shadow: none;
}
.kj-drawer--pub .kj-signin--drawer .kj-signin__btn:hover,
.kj-drawer--pub .kj-signin--drawer.is-open .kj-signin__btn { background: #F6F8FB; color: var(--kj-b3-title); filter: none; }