/* The one site header (lib/site-header.js): white bar, original logo, menu, sign-in area, thin bottom line.
   Loaded on every page after the page's own styles. Token fallbacks = the token values (pages without tokens.css). */
.pz-header {
  position: relative; z-index: 50; background: var(--c-surface, #FFFFFF); border-bottom: 1px solid var(--c-border, #E1E4E8);
  color: var(--c-text, #172B3D); font-family: var(--font, "Inter", system-ui, sans-serif); line-height: 1.25;
}
.pz-header *, .pz-header *::before, .pz-header *::after { box-sizing: border-box; }
.pz-header__bar {
  display: flex; align-items: center; gap: var(--sp-3, 12px); width: min(100% - 2 * var(--gutter, 16px), 1200px);
  min-height: 64px; margin-inline: auto;
}
.pz-header__logo { display: flex; flex: none; align-items: center; min-height: 44px; margin-right: auto; border-radius: var(--r-sm, 6px); }
.pz-header__logo img { display: block; width: 108px; height: auto; max-width: none; } /* image has equal space above/below: centred */
.pz-header__nav { display: none; }
.pz-header__nav a, .pz-header__mobile > a {
  color: var(--c-navy, #0F2438); font-size: var(--fs-sm, .875rem); font-weight: var(--fw-semibold, 600); text-decoration: none;
}
.pz-header__nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.pz-header__nav a:hover { color: var(--c-slate, #3A4D63); text-decoration: underline; text-underline-offset: 3px; }
.pz-header__menu {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--r-md, 10px); background: transparent; color: var(--c-navy, #0F2438); cursor: pointer;
}
.pz-header__menu:hover { background: var(--c-bg, #F5F6F7); }
.pz-header__mobile[hidden] { display: none; }
.pz-header__mobile:not([hidden]) {
  display: flex; flex-direction: column; width: min(100% - 2 * var(--gutter, 16px), 1200px); margin-inline: auto;
  padding-bottom: var(--sp-3, 12px); border-top: 1px solid var(--c-border, #E1E4E8);
}
.pz-header__mobile a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--c-border, #E1E4E8); font-size: var(--fs-base, 1rem); }
.pz-header__mobile .site-account-mobile { display: flex; flex-direction: column; }
.pz-header__mobile .site-account-mobile[hidden] { display: none; }
.pz-header__mobile .site-account-mobile a { color: var(--c-navy, #0F2438); font-weight: var(--fw-semibold, 600); text-decoration: none; }
.pz-header a:focus-visible, .pz-header button:focus-visible {
  outline: none; box-shadow: var(--focus-ring, 0 0 0 2px #FFFFFF, 0 0 0 4px #0F2438); border-radius: var(--r-sm, 6px);
}

/* Sign-in area (site-header.js): "Увійти" = outlined button with a person icon, "Опублікувати поїздку" = filled navy
   (main action); signed in: photo / initials with a short menu. */
.site-account { display: flex; align-items: center; gap: var(--sp-2, 8px); font-family: inherit; }
.site-account[hidden] { display: none; }
.site-account a { text-decoration: none; }
.site-account-login, .site-account-publish {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2, 8px); min-height: 44px;
  padding-inline: var(--sp-4, 16px); border: 1px solid transparent; border-radius: var(--r-md, 10px);
  font-size: var(--fs-sm, .875rem); font-weight: var(--fw-semibold, 600); white-space: nowrap;
}
.site-account-login { border-color: var(--c-input-border, #868F99); background: var(--c-surface, #FFFFFF); color: var(--c-navy, #0F2438); }
.site-account-login:hover { border-color: var(--c-navy, #0F2438); }
.site-account-login svg { flex: none; }
.site-account-publish { background: var(--c-navy, #0F2438); color: var(--c-surface, #FFFFFF); }
.site-account-publish:hover { background: var(--c-slate, #3A4D63); }
.site-account a:focus-visible, .site-avatar-button:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 2px #FFFFFF, 0 0 0 4px #0F2438); }

.site-account-user { position: relative; }
.site-avatar-button {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--r-full, 999px); background: none; cursor: pointer;
}
.site-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; overflow: hidden;
  border-radius: var(--r-full, 999px); background: var(--c-navy, #0F2438); color: var(--c-surface, #FFFFFF);
  font-size: var(--fs-sm, .875rem); font-weight: var(--fw-semibold, 600); line-height: 1;
}
.site-avatar img { width: 100%; height: 100%; object-fit: cover; }
.site-avatar-button { position: relative; }
/* unread messages (count from the account pages, site-header.js) */
.site-avatar-badge {
  position: absolute; top: 0; right: -2px; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding-inline: 5px;
  border-radius: var(--r-full, 999px); background: var(--c-navy, #0F2438); color: var(--c-surface, #FFFFFF); box-shadow: 0 0 0 2px var(--c-surface, #FFFFFF);
  font-size: var(--fs-xs, .75rem); font-weight: var(--fw-semibold, 600); line-height: 1;
}
.site-avatar-button[aria-expanded="true"] .site-avatar { box-shadow: 0 0 0 2px var(--c-surface, #FFFFFF), 0 0 0 4px var(--c-navy, #0F2438); }

.site-menu {
  position: absolute; right: 0; top: calc(100% + var(--sp-2, 8px)); z-index: 200; width: 260px;
  padding: var(--sp-2, 8px); border-radius: var(--r-lg, 16px); background: var(--c-surface, #FFFFFF);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 36, 56, .08)), 0 0 0 1px var(--c-border, #E1E4E8);
  color: var(--c-text, #172B3D); font-size: var(--fs-base, 1rem); line-height: var(--lh-snug, 1.25); text-align: left;
}
.site-menu[hidden] { display: none; }
.site-menu-who { display: grid; gap: 2px; padding: var(--sp-2, 8px) var(--sp-3, 12px) var(--sp-3, 12px); border-bottom: 1px solid var(--c-border, #E1E4E8); margin-bottom: var(--sp-1, 4px); }
.site-menu-who strong { color: var(--c-navy, #0F2438); font-weight: var(--fw-semibold, 600); overflow-wrap: anywhere; }
.site-menu-who span { color: var(--c-muted, #5E6873); font-size: var(--fs-sm, .875rem); overflow-wrap: anywhere; }
.site-menu-list { list-style: none; margin: 0; padding: 0; }
.site-menu-list a {
  display: flex; align-items: center; min-height: 44px; padding-inline: var(--sp-3, 12px); border-radius: var(--r-sm, 6px);
  color: var(--c-text, #172B3D); font-weight: var(--fw-regular, 400);
}
.site-menu-list a:hover { background: var(--c-bg, #F5F6F7); color: var(--c-navy, #0F2438); }
.site-menu-list a[aria-current="page"] { font-weight: var(--fw-semibold, 600); color: var(--c-navy, #0F2438); }
.site-menu-publish { display: none; }
.site-menu-out { border-top: 1px solid var(--c-border, #E1E4E8); margin-top: var(--sp-1, 4px); padding-top: var(--sp-1, 4px); }

/* Phones: logo · "Увійти" (or the photo) · menu button; publishing moves into the menus. */
@media (max-width: 1023px) { /* the full menu (5 entries + sign-in + publish) needs 1024 px (with "Подорожі", ADR 031) */
  .site-account .site-account-publish { display: none; }
  .site-menu-publish { display: block; }
  .site-menu-publish a { font-weight: var(--fw-semibold, 600); color: var(--c-navy, #0F2438); }
  .site-account-user { position: static; }
  .site-menu { position: absolute; left: var(--gutter, 16px); right: var(--gutter, 16px); width: auto; top: calc(100% - var(--sp-1, 4px)); }
}
@media (max-width: 359px) {
  .site-account-login { padding-inline: var(--sp-3, 12px); }
}
@media (min-width: 1024px) {
  .pz-header__bar { min-height: 64px; gap: var(--sp-5, 24px); }
  .pz-header__logo img { width: 126px; }
  .pz-header__nav { display: flex; gap: var(--sp-5, 24px); }
  .pz-header__menu, .pz-header__mobile:not([hidden]) { display: none; }
}