/* Pakstoor :: pks-header-bigger.css :: v1.0-000004 :: 2026-10-23 */
/**
 * Copyright (c) 2026 Pakstoor (Pty) Ltd. All rights reserved.
 * Proprietary and confidential.
 * Unauthorized copying, distribution, modification, or use of this file is prohibited.
 */
/*
 * Bigger, calmer header (owner 2026-10-21: "the menus need to be bigger ... look at Vinted").
 * Loaded LAST in <head> on every page with the site header. Sizes only: colours stay with
 * light-mode.css / pks-fresh.css / pks-brand.css, so both themes follow automatically.
 * The header logo is LOCKED and is not touched here. The category bar is not touched here.
 *
 * Specificity: `html:not(#pkb):not(#pkc) body ...` (the pks-brand pattern) plus !important,
 * because shell.css sets the menu row padding with !important and pks-fresh sets the
 * section-label size with !important at (1,2,1).
 */

/* 1. Sold/listed ticker in the top system bar: removed (shell.js no longer fills or polls it).
      The empty div stays in the grid (hidden, not display:none) so it keeps column 2 of the
      1fr auto 1fr grid and the language/theme group stays at the right edge. */
#sysbarLedger { visibility: hidden !important; pointer-events: none; }
@media (min-width: 861px) {
  html:not(#pkb):not(#pkc) body .sysbar-inner > .sysbar-right { grid-column: 3; }
}

/* 2. Top bar text links (desktop only: shell.css hides them at 980px and below) */
html:not(#pkb):not(#pkc) body header.nav .nav-links { gap: 4px; }
html:not(#pkb):not(#pkc) body header.nav .nav-links .nav-link,
html:not(#pkb):not(#pkc) body header.nav .nav-links button.nav-link.nav-link-btn {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  padding: 10px 12px !important;
  white-space: nowrap !important;
}
/* Narrow desktops: keep one row (the links only show on the home hero). The "Sell" text link
   duplicates the "Sell an item" button next to it, so it steps aside here to make room. */
@media (min-width: 981px) and (max-width: 1279px) {
  html:not(#pkb):not(#pkc) body header.nav .nav-links { gap: 0; }
  html:not(#pkb):not(#pkc) body header.nav .nav-links .nav-link {
    padding: 10px 7px !important;
  }
  html:not(#pkb):not(#pkc) body header.nav .nav-links button.nav-link.nav-link-btn[data-action="sell"] {
    display: none !important;
  }
}
/* Smallest desktops (signed-out row has Log in + Sign up): "Track" is also in the footer and menu,
   and the signed-out login icon repeats the "Log in" button next to it (needed for Afrikaans). */
@media (min-width: 981px) and (max-width: 1099px) {
  html:not(#pkb):not(#pkc) body header.nav .nav-links a.nav-link[href="/parcels"],
  html:not(#pkb):not(#pkc) body header.nav .nav-actions .nav-login-icon {
    display: none !important;
  }
  /* Afrikaans signed-out labels are longer (Veiligheid, Registreer, Verkoop veilig): "Safety" is
     also in the footer, so it steps aside here only for that case. */
  html[lang="af"]:not(#pkb):not(#pkc) body:not([data-auth="in"]) header.nav .nav-links a.nav-link[href="/safety"] {
    display: none !important;
  }
}

/* 3. Right-side actions: 24px icons in 44px hit areas */
@media (min-width: 981px) {
  html:not(#pkb):not(#pkc) body header.nav .nav-actions { gap: 10px; }
  html:not(#pkb):not(#pkc) body header.nav .nav-action-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  html:not(#pkb):not(#pkc) body header.nav .nav-action-icon svg {
    width: 24px !important;
    height: 24px !important;
  }
  html:not(#pkb):not(#pkc) body header.nav .nav-avatar {
    width: 42px !important;
    height: 42px !important;
    font-size: 14px !important;
  }
  html:not(#pkb):not(#pkc) body header.nav .nav-login-icon {
    width: 42px !important;
    height: 42px !important;
  }
  html:not(#pkb):not(#pkc) body header.nav .nav-login-icon svg {
    width: 22px !important;
    height: 22px !important;
  }
  html:not(#pkb):not(#pkc) body header.nav .nav-actions .btn.nav-sell {
    font-size: 14px !important;
    padding: 10px 18px !important;
    white-space: nowrap !important;
  }
  html:not(#pkb):not(#pkc) body header.nav .nav-actions .btn.nav-sell svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* 4. Account menu (opens from the avatar).
      Review item 7 (owner 2026-10-22): "The desktop account menu requires internal scrolling. Reduce excessive spacing
      and prioritise My purchases, Messages, My listings and My Store. Group account settings and support beneath them."
      shell.js builds: name and email, the four main rows (My purchases, Messages, My listings, My Store), then compact
      two-column groups (Saved + Local Businesses; Account; Support), then Log out. Measured to fit with no inner
      scrolling at 1280x720 and 1440x900, admins (Admin portal) and Afrikaans included; on a shorter window it still
      scrolls inside the window (shell.css max-height). Phones: one column with 44px rows. */
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-menu {
  width: 408px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-head {
  padding: 10px 12px 9px !important;
  margin-bottom: 4px !important;
}
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-name {
  font-size: 15px !important;
  line-height: 1.3 !important;
}
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-email {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-item {
  font-size: 14px !important;
  line-height: 1.25 !important;
  min-height: 36px !important;
  min-width: 0 !important;
  padding: 8px 10px !important;
  gap: 10px !important;
  align-items: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-item svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}
/* the four main rows */
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-group--main .nav-profile-item {
  font-size: 15px !important;
  font-weight: 600 !important;
  min-height: 40px !important;
  padding: 9px 12px !important;
  gap: 12px !important;
}
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-group--main .nav-profile-item svg {
  width: 20px !important;
  height: 20px !important;
  flex-basis: 20px !important;
}
/* two-column groups (in the order they read: left to right, then down) */
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-group--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4px;
}
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-group--quick {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
html[data-theme="light"]:not(#pkb):not(#pkc) body .nav-profile .nav-profile-group--quick { border-top-color: #ECE9E4; }
/* position markers for pks-stores-nav.js (My Store, Local Businesses) and toggleAdminLink() (Admin portal) */
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-slot,
html:not(#pkb):not(#pkc) body .nav-profile [data-admin-slot] { display: none !important; }
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-section-label {
  font-size: 12px !important;
  padding: 8px 10px 2px !important;
}
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-sep {
  margin: 4px 6px !important;
}
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-item-danger { margin-top: 0 !important; }
/* keyboard focus: a clear ring drawn inside the row (the menu box clips anything outside it) */
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-item:focus { outline: none; }
html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-item:focus-visible {
  outline: 2px solid #F47A20 !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}
html[data-theme="light"]:not(#pkb):not(#pkc) body .nav-profile .nav-profile-item:focus-visible { outline-color: #B5520F !important; }

/* Phones: the account menu is the whole member menu here (no drawer when signed in): one column, 44px rows, inside
   the screen; it scrolls inside the window when the screen is too short for it. */
@media (max-width: 560px) {
  html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-menu {
    width: min(400px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    right: 4px !important;
  }
  html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-group--grid { grid-template-columns: minmax(0, 1fr); }
  html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-item {
    font-size: 15px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
  }
  html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-group--main .nav-profile-item { min-height: 46px !important; }
}
/* the avatar ends 16px from the screen edge: this centres the menu with 12px on both sides (narrower phones keep 4px) */
@media (min-width: 340px) and (max-width: 560px) {
  html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-menu { right: -4px !important; }
}

/* 5. Help icon beside the chat icon (shell.js adds a.nav-action-icon.nav-action-help -> /help), 2026-10-21.
      Desktop: same 44px box and 24px icon as its neighbours (section 3). Phones and tablets: shell.css hides every
      .nav-action-icon at 980px and below; Help stays visible there with the 44px tap size the phone icons use. */
@media (max-width: 980px) {
  html:not(#pkb):not(#pkc) body header.nav .nav-actions .nav-action-icon.nav-action-help {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px;
  }
  html:not(#pkb):not(#pkc) body header.nav .nav-action-icon.nav-action-help svg {
    width: 22px !important;
    height: 22px !important;
  }
}
html:not(#pkb):not(#pkc) body header.nav .nav-action-icon.nav-action-help[aria-current="page"] { color: var(--ink); }
/* Signed out, room check (measured 2026-10-21):
   - 1100-1439px: Help takes the place of the round person icon, which repeats the "Log in" button next to it (the
     same step as 981-1099px in section 2), so the row keeps its width and never runs into the centred search box.
   - Phones under 390px: Help, Sell, the person icon and the menu button do not fit next to the locked logo, so Help
     stays in the menu (the drawer has Help) there. Signed in, phones always show the Help icon. */
@media (min-width: 1100px) and (max-width: 1439px) {
  html:not(#pkb):not(#pkc) body:not([data-auth="in"]) header.nav .nav-actions:has(.nav-action-help) .nav-login-icon { display: none !important; }
}
@media (max-width: 389px) {
  html:not(#pkb):not(#pkc) body:not([data-auth="in"]) header.nav .nav-actions .nav-action-icon.nav-action-help { display: none !important; }
}
/* Desktop: the search box is centred on the bar and does not know how wide the right-hand actions are. Help adds
   54px there, so while it is present the box sits 54px further left (from 981px; the logo keeps its space). */
@media (min-width: 981px) {
  html:not(#pkb):not(#pkc) body header.nav:has(.nav-action-help) .nav-search-slot { margin-left: -54px !important; }
}
/* The home hero shows the text links too: "Help" there repeats the Help icon right next to it, and with the
   "Pakstoor Local" link (business stores on) the Afrikaans signed-in row ran 36px past the right edge at 981-1016px.
   While the icon is present the text link steps aside (it frees 47px; the footer and the menu still have Help). */
@media (min-width: 981px) {
  html:not(#pkb):not(#pkc) body header.nav:has(.nav-action-help) .nav-links a.nav-link[href="/help"] { display: none !important; }
}

/* 6. Newsroom link (owner brief 2026-10-23, DESIGN-newsroom.md 5.1).
      shell.js puts a.nav-newsroom FIRST in .nav-actions: on the right, away from the two shopping tabs of the category
      bar (never touched here), so it reads as a secondary destination and not as a third marketplace category. A quiet
      text link with a thin divider after it, so it does not look like one of the action buttons. On headers with the
      centred search box it is a 44px newspaper icon from 981 to 1439px (the text link ran into the box in Afrikaans
      there, measured 2026-10-23); text again from 1440px. At 980px and below it is hidden: the phone drawer (signed
      out) and the account menu (signed in) carry it. The account menu row is for phones and tablets only (hidden from
      981px), so the desktop menu keeps its measured no-scroll height. */
html:not(#pkb):not(#pkc) body header.nav .nav-actions .nav-newsroom { display: none !important; }
@media (min-width: 981px) {
  html:not(#pkb):not(#pkc) body header.nav .nav-actions .nav-newsroom {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 44px;
    padding: 0 10px;
    margin: 0 15px 0 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--ink-muted);
    text-decoration: none;
    transition: color .15s ease;
  }
  html:not(#pkb):not(#pkc) body header.nav .nav-actions .nav-newsroom:hover { color: var(--ink); }
  html:not(#pkb):not(#pkc) body header.nav .nav-actions .nav-newsroom .nav-newsroom-icon { display: none; }
  html:not(#pkb):not(#pkc) body header.nav .nav-actions .nav-newsroom::after {
    content: "";
    position: absolute;
    top: 11px;
    right: -13px;
    width: 1px;
    height: 22px;
    background: var(--line-2);
    pointer-events: none;
  }
  /* on the Newsroom pages: ink text and a 2px orange underline */
  html:not(#pkb):not(#pkc) body header.nav .nav-actions .nav-newsroom[aria-current="page"] { color: var(--ink); }
  html:not(#pkb):not(#pkc) body header.nav .nav-actions .nav-newsroom[aria-current="page"] .nav-newsroom-label {
    text-decoration: underline;
    text-decoration-color: #F47A20;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  html[data-theme="light"]:not(#pkb):not(#pkc) body header.nav .nav-actions .nav-newsroom[aria-current="page"] .nav-newsroom-label { text-decoration-color: #B5520F; }
  html:not(#pkb):not(#pkc) body header.nav .nav-actions .nav-newsroom:focus { outline: none; }
  html:not(#pkb):not(#pkc) body header.nav .nav-actions .nav-newsroom:focus-visible { outline: 2px solid #F47A20; outline-offset: 2px; }
  html[data-theme="light"]:not(#pkb):not(#pkc) body header.nav .nav-actions .nav-newsroom:focus-visible { outline-color: #B5520F; }
  /* the account menu row is for smaller screens only */
  html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-group--news { display: none !important; }
}
/* headers with the search box, 981 to 1439px: the 44px newspaper icon (same box and 20px glyph as the Help icon) */
@media (min-width: 981px) and (max-width: 1439px) {
  html:not(#pkb):not(#pkc) body header.nav:has(.nav-search-slot) .nav-actions .nav-newsroom {
    width: 44px;
    min-width: 44px;
    padding: 0;
    margin-right: 0;
    color: var(--ink-muted);
  }
  html:not(#pkb):not(#pkc) body header.nav:has(.nav-search-slot) .nav-actions .nav-newsroom .nav-newsroom-icon {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }
  html:not(#pkb):not(#pkc) body header.nav:has(.nav-search-slot) .nav-actions .nav-newsroom .nav-newsroom-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  html:not(#pkb):not(#pkc) body header.nav:has(.nav-search-slot) .nav-actions .nav-newsroom::after { display: none; }
  html:not(#pkb):not(#pkc) body header.nav:has(.nav-search-slot) .nav-actions .nav-newsroom:hover,
  html:not(#pkb):not(#pkc) body header.nav:has(.nav-search-slot) .nav-actions .nav-newsroom[aria-current="page"] { color: var(--ink); }
}
/* phones and tablets, signed in: the Newsroom row of the account menu sits apart from the Support group */
@media (max-width: 980px) {
  html:not(#pkb):not(#pkc) body .nav-profile .nav-profile-group--news {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  html[data-theme="light"]:not(#pkb):not(#pkc) body .nav-profile .nav-profile-group--news { border-top-color: #ECE9E4; }
}