/* Pakstoor :: pks-sticky-header.css :: v1.0-000003 :: 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.
 */
/*
 * Sticky site header (owner 2026-10-20: "make it always stay there like Vinted").
 *
 * Why the header did not stick before: core.css gives body `overflow-x: hidden`. Because html is
 * `overflow-x: clip`, body's overflow is not handed to the viewport, so body became its own (never
 * scrolling) scroll container and the existing `position: sticky; top: 0` on header.nav was measured
 * against body instead of the window. `overflow-x: clip` clips the same way without making a scroll
 * container, so the header (and the category bar under it) now stick to the window.
 *
 * Loaded render-blocking in <head> on every customer page that has header.nav (not admin, not login),
 * so the smaller header height is applied before first paint: no layout shift.
 * No backdrop-filter, no animation, no JS (iPhone WebGL/compositor rule, CLAUDE.md 9).
 *
 * Heights (border included): desktop 69 -> 62 px; phones/tablets with the search row 111-119 -> 103 px;
 * phone pages without a search box 69 -> 61 px; short landscape phones one row, 53 px.
 * The logo keeps its artwork and aspect ratio; only its box height scales (desktop 60 -> 54, phone 44 -> 40),
 * and the @3x source keeps it crisp.
 *
 * MERGE NOTE (catsub category bar): the .pks-catbar rules at the end are the only coupling. catsub's
 * pks-cat-bar.css makes the bar sticky on desktop only; this file also makes it sticky on phones/tablets
 * in portrait, directly under the header (top: var(--pks-nav-h)), and leaves it in the page flow on short
 * landscape screens. catsub's pks-cat-bar.js measures header.nav into --pks-nav-h; the values below are the
 * same numbers, used as the CSS fallback before that script runs.
 */

/* ---------- 1. Make sticky work (body must not be a scroll container) ---------- */
html body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  /* Older browsers without `clip`: let the viewport do the horizontal clipping instead of body. */
  html { overflow-x: hidden; }
  html body { overflow-x: visible; }
}

/* Scroll lock for the menu drawer and modals (body.is-locked, shell.css: overflow hidden + height 100dvh).
   That old lock shrank the page to one screen, so opening the menu half way down jumped to the top and
   stayed there. Now that the menu button is always on screen, lock the viewport instead: the page keeps
   its place and the header stays stuck behind the drawer. Browsers without :has() keep the old lock. */
@supports selector(:has(a)) {
  html:has(> body.is-locked) { overflow: hidden; }
  html body.is-locked { overflow-x: clip; overflow-y: visible; height: auto; }
}

:root { --pks-nav-h: 62px; }
@media (max-width: 980px) {
  :root { --pks-nav-h: 103px; }
  /* pages whose header has no search box (help, legal, account pages) are one row on phones: 8 + 44 + 8 + 1 */
  :root:not(:has(header.nav .nav-search-slot)) { --pks-nav-h: 61px; }
}
@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) { :root { --pks-nav-h: 53px; } }

/* ---------- 2. The header itself ---------- */
html body header.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav, 100);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: rgb(26, 23, 21) !important; /* opaque version of the old rgba(27,24,21,.82) over #141414 */
}
html[data-theme="light"] body header.nav { background: #FFFFFF !important; }

/* Desktop: one row, 61 px + 1 px border */
html body header.nav .nav-inner {
  min-height: 61px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center;
}
html body header.nav .nav-logo-mark { height: 54px !important; width: auto !important; max-width: none !important; }

/* Phones and tablets: two rows (logo + actions, then search), 4 + 44 + 6 + 44 + 4 + 1 px border */
@media (max-width: 980px) {
  html body header.nav .nav-inner {
    min-height: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    row-gap: 6px !important;
  }
  html body header.nav .nav-logo-mark { height: 44px !important; }
  /* the home link keeps a 44 px tap height even when the artwork is 40 px (row is 44 px anyway) */
  html body header.nav .nav-logo { min-height: 44px; display: inline-flex; align-items: center; }
  html body header.nav .nav-actions { min-height: 44px; align-items: center; }
  html body header.nav .nav-menu-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; }
  html body header.nav .nav-search-slot { margin-top: 0 !important; }
  html body header.nav .nav-search-input { height: 44px; min-height: 44px; }
  html body header.nav .nav-inner:not(:has(.nav-search-slot)) { padding-top: 8px !important; padding-bottom: 8px !important; }
}
@media (max-width: 640px) {
  html body header.nav .nav-logo-mark { height: 40px !important; }
}
/* 2026-10-23 QA: under 360px the 40px logo, the actions and the 12px gap were 341px wide in a 320px screen (avatar and
   header search cut off). 32px is the height shell.css already gives the logo up to 420px; artwork unchanged. */
@media (max-width: 359px) {
  html body header.nav .nav-logo-mark { height: 32px !important; }
  html body header.nav .nav-inner { column-gap: 8px !important; }
}

/* Short landscape phones: one row (logo | search | actions) so the sticky header stays small */
@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
  html body header.nav .nav-inner {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    row-gap: 0 !important;
    column-gap: 12px !important;
  }
  html body header.nav .nav-logo { grid-column: 1 !important; grid-row: 1 !important; }
  html body header.nav .nav-search-slot { order: 0 !important; grid-column: 2 !important; grid-row: 1 !important; }
  html body header.nav .nav-actions { grid-column: 3 !important; grid-row: 1 !important; }
  html body header.nav .nav-logo-mark { height: 40px !important; }
}

/* The verify-email banner sits under the header and used to scroll away (sticky never worked).
   Keep it in the flow so it does not slide underneath the now-sticky header. */
html body .pks-verify-banner { position: relative; top: auto; }

/* ---------- 3. Nothing hidden under the header (hash links, scrollIntoView) ---------- */
/* core.css gave every [id] a fixed scroll-margin-top (clamp 72-110 px) for the old header. Size it to the real
   sticky header instead. Deliberately scroll-margin on targets, NOT scroll-padding on html: with scroll-padding,
   Chrome treats the sticky header itself as "under the padding", so focusing the search box or the menu button
   while scrolled made the page jump about half a screen. :focus-visible is included so Shift+Tab never parks
   the keyboard focus ring under the header (WCAG 2.4.11 Focus Not Obscured). */
html :target, html [id]:not(body), html body :focus-visible { scroll-margin-top: calc(var(--pks-nav-h) + 12px); }

/* Elements inside the stuck bars never need a margin (focusing the menu button or search box must not scroll). */
html body header.nav [id], html body header.nav[id], html body .pks-catbar [id], html body .pks-catbar[id],
html body header.nav :focus-visible, html body .pks-catbar :focus-visible { scroll-margin-top: 0; }

@media print {
  html body header.nav { position: static; }
}

/* ---------- 4. Category bar slot (catsub, when present): sticks directly under the header ---------- */
html:has(.pks-catbar) :target, html:has(.pks-catbar) [id]:not(body), html:has(.pks-catbar) :focus-visible { scroll-margin-top: calc(var(--pks-nav-h) + var(--pks-catbar-h, 48px) + 12px); }
@media (max-width: 980px) {
  html body .pks-catbar { position: sticky; top: var(--pks-nav-h); }
}
@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
  html body .pks-catbar { position: relative; top: auto; }
  html:has(.pks-catbar) :target, html:has(.pks-catbar) [id]:not(body), html:has(.pks-catbar) :focus-visible { scroll-margin-top: calc(var(--pks-nav-h) + 12px); }
}

/* 7. Fix A, 2026-10-21 (blank screen on "Protected deal link" and "Report"): shell.css runs the .page-main entrance
      animation with fill-mode both, so <main> kept transform:translateY(0) for ever. A transformed <main> becomes the
      box for every position:fixed pop-up inside it, and since this file's scroll lock (section 1) no longer shrinks
      <main> to one screen, those pop-ups opened below the visible screen with scrolling locked. Same entrance; after it
      <main> keeps no transform, so fixed pop-ups are placed against the screen again. */
html body .page-main { animation-fill-mode: backwards !important; }
/* Side effect of Fix A, held back until the owner decides: the home trust ladder (#trustLadder, pks-trust-ladder.js,
   position:fixed) was pinned to the transformed <main> on live, far down the page and never seen. Without the transform
   it would sit over the hero for every signed-in desktop visitor, still in the old gold style. Keep it hidden; restyle
   it to Brand Pack v1.0 (orange) before it is ever shown. */
html body #trustLadder { display: none !important; }

/* 2026-10-23 QA: once .nav-links is hidden (body[data-scrolled=hero-past]: every page except the top of home) the
   actions fell into the 1fr track, and the empty last track plus its 24px gap left the avatar 24px short of the edge. */
@media (min-width: 981px) {
  html body header.nav .nav-inner > .nav-actions { grid-column: -2; }
}

/* 2026-10-23 QA: on short landscape phones the menu list got 184-206px between the head and the Log in / Sign up
   buttons (most links hidden, no cue). There the whole drawer scrolls and the buttons follow the links. */
@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
  html body .drawer { overflow-y: auto; }
  html body .drawer > .drawer-body { flex: 0 0 auto; overflow: visible; }
}