/* ═══════════════════════════════════════════════════════════
   PATH BAR · romanovskis.xyz v3 (replaces .nav and .mobile-menu)
   The bar shows where you are, not a row of links:
   "Edgars Romanovskis / Services 3/6". The field opens the contents,
   written as the buyer's questions. Next walks the page in order.
   "Start a project" is always one tap away.
   Desktop: top edge. Phone and small tablet (860px and below):
   bottom edge, in thumb reach. Load after css/v3.css.
   Only tokens from style.css. No blur, no glass, no hide on scroll.
═══════════════════════════════════════════════════════════ */

:root { --pb-h: 56px; }

/* viewport-fit=cover lets the bar use the iPhone safe area; the page
   gutter then has to clear the notch in landscape as well */
@supports (padding: max(0px)) {
  :root { --gutter: max(clamp(20px, 4vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
}

html { scroll-padding-top: calc(var(--pb-h) + 16px); }

/* sections receive focus after a jump (a screen reader continues there); no ring on the whole block */
main[tabindex="-1"]:focus, section[tabindex="-1"]:focus { outline: none; }

.pb-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Skip link: visible only on keyboard focus ─────────────── */
.pb-skip {
  position: fixed; left: 12px; top: 8px; z-index: 1001;
  padding: 12px 16px; border-radius: 12px; background: var(--fg); color: var(--bg);
  font-size: 14px; font-weight: 500; transform: translateY(calc(-100% - 16px));
}
.pb-skip:focus { transform: none; }

/* ── The bar ───────────────────────────────────────────────── */
/* never put transform, filter or will-change on .pathbar, .pb-bar, .pb-menu or .pb-seg:
   the click-outside layer below is position:fixed and would be trapped */
.pathbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; /* under the case study (.cs, 2000) */
  background: var(--bg);
  transition: box-shadow 0.3s var(--ease);
}
/* edge only once content passes under the bar */
.pathbar.is-scrolled, html:not(.js) .pathbar { box-shadow: 0 1px 0 var(--line); }
.pb-bar { height: var(--pb-h); display: flex; align-items: center; gap: 6px; padding: 0 var(--gutter); }

/* Root of the path: who */
.pb-root { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 4px; border-radius: 8px; }
.pb-who { display: flex; flex-direction: column; }
.pb-name { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; line-height: 1.15; white-space: nowrap; }
.pb-role { display: none; margin-top: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); line-height: 1.2; white-space: nowrap; }
.pb-slash { flex: none; margin: 0 4px; font-family: var(--display); font-size: 18px; line-height: 1; color: var(--muted); }

/* The field: the section you are reading, and the door to the contents */
.pb-menu { position: relative; flex: none; }
.pb-seg { display: block; list-style: none; cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.pb-seg::-webkit-details-marker { display: none; }
.pb-seg::marker { content: ''; }
.pb-seg-in {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px;
  height: 44px; min-width: 232px; padding: 0 12px 0 14px; border-radius: 12px;
  background: var(--bg-2); transition: background-color 0.25s var(--ease);
}
.pb-seg:hover .pb-seg-in, .pb-menu[open] .pb-seg-in { background: var(--card); }
.pb-now { flex: 1 1 auto; min-width: 0; height: 20px; overflow: hidden; }
.pb-roll { display: flex; align-items: baseline; gap: 8px; height: 20px; line-height: 20px; white-space: nowrap; }
.pb-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 500; }
/* small mono on a grey field stays ink: --muted would fall under 4.5:1 there */
.pb-count { flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg); }
.pb-chev { flex: none; color: var(--fg); transition: transform 0.3s var(--ease); }
.pb-menu[open] .pb-chev { transform: rotate(180deg); }

/* Click outside closes, also without JS: a transparent layer that belongs to <summary> */
.pb-menu[open] > .pb-seg::before { content: ''; position: fixed; inset: 0; z-index: 0; cursor: default; }

/* Contents panel */
.pb-panel {
  position: absolute; z-index: 2; top: calc(100% + 8px); left: 0; width: 360px;
  max-height: calc(100vh - var(--pb-h) - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 48px rgba(15, 15, 15, 0.10);
}
.pb-menu[open] .pb-panel { animation: pb-drop 0.26s var(--ease); }
@keyframes pb-drop { from { transform: translateY(-8px); opacity: 0; } }
@keyframes pb-rise { from { transform: translateY(10px); opacity: 0; } }

.pb-home { display: none; }

.pb-list a {
  display: grid; grid-template-columns: 24px 1fr 6px; gap: 12px; align-items: center;
  min-height: 56px; padding: 9px 12px; border-radius: 12px;
  transition: background-color 0.2s var(--ease);
}
.pb-list a:hover { background: var(--bg-2); }
.pb-list a:focus-visible, .pb-home:focus-visible { outline-offset: -2px; }
.pb-n { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.pb-t b { display: block; font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; line-height: 1.2; }
.pb-t small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.pb-list a:hover .pb-n, .pb-list a:hover small { color: var(--fg); }
/* you are here: the signal-red square, backed by aria-current */
.pb-list a::after { content: ''; width: 6px; height: 6px; border-radius: 1px; background: var(--signal); transform: scale(0); transition: transform 0.3s var(--ease); }
.pb-list a[aria-current]::after { transform: none; }
.pb-list li[hidden] { display: none; }

/* Next section: secondary, its destination in ink */
.pb-next {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px; margin-left: auto; border-radius: 12px;
  font-size: 13.5px; font-weight: 500; color: var(--fg); white-space: nowrap;
  transition: background-color 0.25s var(--ease);
}
.pb-next:hover { background: var(--bg-2); }
.pb-next-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pb-next:hover .pb-next-k { color: var(--fg); }
.pb-next-k[hidden] { display: none; }
.pb-next svg { flex: none; transition: transform 0.3s var(--ease); }
.pb-next:hover svg { transform: translateY(2px); }
.pb-next.is-up svg { transform: rotate(180deg); }
.pb-next.is-up:hover svg { transform: rotate(180deg) translateY(2px); }
html:not(.js) .pb-next { display: none; }

/* Start a project: always there (.pathbar raises specificity over .btn.sm) */
.pathbar .pb-cta { position: relative; z-index: 1; flex: none; justify-content: center; min-height: 44px; padding: 0 18px; }
html:not(.js) .pathbar .pb-cta { margin-left: auto; }

/* Masthead: phones only, scrolls away with the page */
.masthead { display: none; }

/* Layout under a 56px bar (v3.css had 128px for the old floating pill) */
.hero-v3 { padding-top: 96px; }

/* ── Widths ────────────────────────────────────────────────── */
@media (min-width: 1100px) { .pb-role { display: block; } }
@media (min-width: 861px) and (max-width: 1099px) {
  .pb-next:not(.is-up) .pb-next-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ── Phone and small tablet: bottom edge, thumb zone ──────── */
@media (max-width: 860px) {
  :root { --pb-h: 60px; }
  html { scroll-padding-top: 16px; scroll-padding-bottom: calc(var(--pb-h) + env(safe-area-inset-bottom, 0px) + 16px); }
  body { padding-bottom: calc(var(--pb-h) + env(safe-area-inset-bottom, 0px)); }

  .masthead { display: flex; align-items: center; gap: 12px; padding: 18px var(--gutter) 0; }
  .masthead b { display: block; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; line-height: 1.2; }
  .masthead span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); line-height: 1.3; }
  .hero-v3 { padding-top: 32px; }

  .pathbar { top: auto; bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -1px 0 var(--line); }
  .pathbar.is-scrolled, html:not(.js) .pathbar { box-shadow: 0 -1px 0 var(--line); }
  .pb-bar { padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); gap: 8px; }
  .pb-root, .pb-slash, .pb-next { display: none; }

  .pb-menu { position: static; flex: 1 1 auto; min-width: 0; }
  .pb-seg-in { min-width: 0; padding: 0 12px 0 14px; }
  .pb-chev { transform: rotate(180deg); }
  .pb-menu[open] .pb-chev { transform: none; }

  .pb-panel {
    position: fixed; top: auto; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); width: auto;
    bottom: calc(var(--pb-h) + env(safe-area-inset-bottom, 0px) + 8px);
    max-height: calc(100svh - var(--pb-h) - env(safe-area-inset-bottom, 0px) - 40px);
    box-shadow: 0 -12px 40px rgba(15, 15, 15, 0.12);
  }
  .pb-menu[open] .pb-panel { animation-name: pb-rise; }

  /* who and back to the top, inside the sheet */
  .pb-home { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 12px; }
  .pb-home b { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; }
  .pb-home-k { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

  .pathbar .pb-cta { padding: 0 16px; }
}
@media (max-width: 359px) {
  .pb-count-u { display: none; }
  .pathbar .pb-cta { padding: 0 12px; }
}

/* ── Motion off ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pathbar, .pathbar *, .pathbar *::before, .pathbar *::after { animation: none !important; transition: none !important; }
}

/* ── Screenshots (?static=) and print ──────────────────────── */
.static-shot .pathbar, .static-shot .masthead, .static-shot .pb-skip { display: none; }
body.static-shot { padding-bottom: 0; }
@media print {
  .pathbar, .pb-skip, .ink-canvas { display: none !important; } body { padding-bottom: 0; }
  html.js .reveal { opacity: 1 !important; transform: none !important; }
  .contact, .btn:not(.ghost) { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Desktop: barra essenziale (AD, 6 ott: "puoi togliere questo dal menu") ──
   Via la barra obliqua, il campo dell'indice e Next: restano il nome (torna in cima) e Start a project.
   Il telefono tiene la sua barra in basso (campo + bottone). js/pathbar.js continua a lavorare uguale:
   indirizzo che segue la sezione, "Email me" dentro Contact. */
@media (min-width: 861px) {
  .pb-slash, .pb-menu, .pb-next { display: none; }
  .pathbar .pb-cta { margin-left: auto; }
}

/* ── Telefono: niente barra fissa in basso (AD, 6 ott 2026: "quel menu inutile sempre attaccato in basso") ──
   Resta l'intestazione con il nome in cima (.masthead); "Start a project" è nella hero e nel Contact.
   --pb-h a 0: lo spazio riservato alla barra sparisce anche dal volo dell'About e dagli ancoraggi. */
@media (max-width: 860px) {
  .pathbar { display: none; }
  :root { --pb-h: 0px; }
  body { padding-bottom: 0; }
  html { scroll-padding-bottom: 16px; }
}