/* header.css - the header of every page and the call card (Dima 07.11: «меню говнище стало», «A: со списками»,
   «Карточка в углу»). One file for the home page and the static pages: the markup comes from headerHtml() in
   src/sitelinks.js, the behaviour from public/header.js and public/callcard.js. Sentence case, 15px ink, no tracking:
   the old header set nine grey uppercase capsules of the same weight. The bar stays on top while the page scrolls and
   sits on the page grid (1200px, 32px gutters), the same as the content under it.
   Audit 07.11 (five independent checks after the deploy): the home page's React wrapper kept the bar from sticking,
   anchors and keyboard focus landed under the bar, the phone menu sent Tab behind its panel, a hovered panel ignored
   Escape; the fixes are marked «audit 07.11» below and in header.js and callcard.js. */

:root { --nv-h: 72px; }
@media (max-width: 600px) { :root { --nv-h: 60px; } }

/* audit 07.11: the home page renders the header inside a React wrapper as tall as the bar, so the bar could not stick;
   display: contents lets it stick to the page itself */
.nv-host { display: contents; }
/* audit 07.11: in-page links and keyboard focus land below the bar instead of under it (WCAG 2.4.11) */
html { scroll-padding-top: calc(var(--nv-h) + 16px); }

.nv { position: sticky; top: 0; z-index: 60; background: var(--canvas, #f5f5f6); border-bottom: 1px solid transparent; transition: border-color 200ms; }
.nv.is-scrolled { border-bottom-color: var(--line, #0b0b0d33); }
.nv-bar { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: var(--nv-h); display: flex; align-items: center; gap: 36px; }
.nv-brand { order: 0; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; flex: none; color: var(--ink, #0b0b0d); text-decoration: none; }
.nv-logo { display: block; height: 18px; width: auto; }
.nv-suffix { padding-left: 12px; border-left: 1px solid var(--ink, #0b0b0d); font: 500 13px/16px var(--font-sans, system-ui, sans-serif); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink, #0b0b0d); white-space: nowrap; }
.nv-brand:focus-visible, .nv-link:focus-visible, .nv-cta:focus-visible, .nv-menu:focus-visible, .nv-panel a:focus-visible, .nv-panel-cta:focus-visible { outline: 2px solid var(--focus-ring, #1954ec); outline-offset: 4px; border-radius: 4px; }

/* the Menu button comes right after the lockup in the markup (keyboard order: lockup, Menu, the open panel), and sits
   at the far right by `order` (audit 07.11: it came after the panel, so Tab went behind the open panel) */
.nv-nav { order: 1; flex: 1; display: flex; align-items: center; }
.nv-list { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nv-item { position: relative; margin: 0; }
.nv-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 500 15px/1.2 var(--font-sans, system-ui, sans-serif); letter-spacing: 0; text-transform: none; color: var(--ink, #0b0b0d); text-decoration: none; white-space: nowrap; }
.nv-link[aria-current="page"], .nv-item[data-current] > .nv-link { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
/* hover underlines in the control grey, the current page in ink (audit 07.11: with a panel open two items looked current) */
.nv-link:hover { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; text-decoration-color: var(--line-control, #0b0b0d8c); }
.nv-link[aria-current="page"]:hover, .nv-item[data-current] > .nv-link:hover { text-decoration-color: var(--ink, #0b0b0d); }
.nv-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 150ms; }
.nv-item.is-open > .nv-toggle .nv-chev { transform: translateY(2px) rotate(-135deg); }

/* the panel under GPUs and Prices: columns of links on paper, opened by hover, a click, Enter or Space */
.nv-panel { display: none; position: absolute; top: calc(100% + 14px); left: -28px; z-index: 2; min-width: 560px; padding: 24px 28px 20px; background: #fff;
  border: 1px solid var(--line, #0b0b0d33); box-shadow: 0 18px 40px rgba(11, 11, 13, .08); grid-auto-flow: column; grid-auto-columns: minmax(170px, auto); gap: 32px; }
.nv-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px; } /* the hover bridge */
.nv-item.is-open > .nv-panel { display: grid; }
@media (hover: hover) and (min-width: 1000px) { .nv-has-panel:hover > .nv-panel { display: grid; } }
/* Escape closes a panel the pointer opened, until the pointer leaves (audit 07.11, WCAG 1.4.13) */
.nv-has-panel.is-dismissed > .nv-panel { display: none; }
.nv-col-title { margin: 0 0 8px; font: 500 13px/1.3 var(--font-sans, system-ui, sans-serif); color: var(--ink-muted, #5c5d63); }
.nv-col ul { list-style: none; margin: 0; padding: 0; }
.nv-col li { margin: 0; }
.nv-panel a { display: block; padding: 6px 0; font: 400 15px/1.35 var(--font-sans, system-ui, sans-serif); color: var(--ink, #0b0b0d); text-decoration: none; white-space: nowrap; }
.nv-panel a:hover, .nv-panel a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

.nv-cta, .nv-panel-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; background: var(--ink, #0b0b0d); color: #fff;
  border: 1px solid var(--ink, #0b0b0d); font: 500 15px/1 var(--font-sans, system-ui, sans-serif); letter-spacing: 0; text-decoration: none; white-space: nowrap; transition: background-color 150ms, color 150ms; }
.nv-cta { order: 2; margin-left: auto; flex: none; }
.nv-cta:hover, .nv-panel-cta:hover { background: none; color: var(--ink, #0b0b0d); }
.nv-panel-cta { display: none; }
.nv-menu { order: 3; display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0; margin-left: auto; background: none; border: 0; cursor: pointer; font: 500 15px/1 var(--font-sans, system-ui, sans-serif); color: var(--ink, #0b0b0d); }
.nv-burger, .nv-burger::before { display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; }
.nv-burger::before { content: ""; position: absolute; top: 5px; }
.nv-burger { transform: translateY(-2.5px); }
.nv.is-open .nv-burger { transform: rotate(45deg); }
.nv.is-open .nv-burger::before { top: 0; transform: rotate(-90deg); }

/* below 1000px (audit 07.11: at 1024 the full bar fits with room to spare, so the collapse moved down from 1080): the
   lockup, Book a call and Menu; in the panel GPUs and Prices open like an accordion */
@media (max-width: 999px) {
  .nv-bar { gap: 16px; }
  .nv-menu { display: inline-flex; margin-left: 0; }
  .nv-cta { margin-left: auto; }
  .nv-nav { display: none; position: fixed; left: 0; right: 0; top: var(--nv-h); bottom: 0; z-index: 59; flex-direction: column; align-items: stretch; overflow: auto;
    padding: 8px 32px 40px; background: var(--canvas, #f5f5f6); border-top: 1px solid var(--line, #0b0b0d33); }
  .nv.is-open .nv-nav { display: flex; }
  html.nv-lock { overflow: hidden; }
  .nv-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nv-item { border-bottom: 1px solid var(--line, #0b0b0d33); }
  .nv-link { width: 100%; min-height: 56px; font-size: 18px; }
  .nv-toggle { justify-content: space-between; }
  .nv-chev { margin-right: 4px; }
  .nv-link:hover, .nv-link[aria-current="page"], .nv-item[data-current] > .nv-link { text-decoration: none; }
  .nv-panel { display: none; position: static; min-width: 0; padding: 0 0 16px; background: none; border: 0; box-shadow: none; grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 24px; }
  .nv-item.is-open > .nv-panel { display: grid; }
  .nv-panel::before { content: none; }
  .nv-panel a { font-size: 16px; padding: 10px 0; min-height: 44px; }
}
@media (max-width: 600px) {
  .nv-bar { padding: 0 16px; }
  .nv-logo { height: 15px; }
  .nv-suffix { padding-left: 10px; font-size: 11px; line-height: 14px; letter-spacing: 0.18em; }
  .nv-cta { display: none; }
  .nv-menu { margin-left: auto; }
  .nv-nav { padding: 4px 16px 24px; }
  /* the panel's own Book a call, only where the bar has none; it stays in view while the panel scrolls (audit 07.11:
     with a group open it fell below the screen, and from 600px up it doubled the bar's button) */
  .nv-panel-cta { display: flex; min-height: 52px; margin-top: 24px; position: sticky; bottom: 0; box-shadow: 0 -16px 16px var(--canvas, #f5f5f6); }
}
/* the narrowest phones keep the whole lockup, smaller (audit 07.11: it was hidden from 340px down) */
@media (max-width: 340px) {
  .nv-brand { gap: 8px; }
  .nv-logo { height: 13px; }
  .nv-suffix { padding-left: 8px; font-size: 10px; letter-spacing: 0.14em; }
}

/* == the call card (Dima 07.11, «го созвон» with his photo, «Карточка в углу»): public/callcard.js puts it on the page
   after half of it and 40 seconds; a computer gets a card in the corner, a phone a bar at the bottom == */
.callcard { position: fixed; right: 24px; bottom: 24px; z-index: 55; width: 320px; padding: 16px; background: #fff; color: var(--ink, #0b0b0d);
  border: 1px solid var(--line, #0b0b0d33); box-shadow: 0 24px 48px rgba(11, 11, 13, .12); font: 400 14px/1.45 var(--font-sans, system-ui, sans-serif); letter-spacing: 0;
  animation: callcard-in 320ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes callcard-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.callcard-who { display: flex; align-items: center; gap: 12px; padding-right: 28px; }
.callcard-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.callcard-name { margin: 0; font-weight: 500; font-size: 16px; line-height: 1.25; color: var(--ink, #0b0b0d); }
.callcard-role { margin: 0; font-size: 13px; color: var(--ink-muted, #5c5d63); }
.callcard-q { margin: 12px 0 4px; font: 400 24px/1.1 var(--font-serif, Georgia, serif); color: var(--ink, #0b0b0d); }
.callcard-text { margin: 0 0 12px; color: var(--ink, #0b0b0d); }
.callcard-go { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; background: var(--ink, #0b0b0d); color: #fff; font-weight: 500; font-size: 15px; text-decoration: none; }
.callcard-go:hover { background: #2a2b30; color: #fff; }
.callcard-x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; padding: 0; background: none; border: 0; cursor: pointer; font: 300 24px/1 var(--font-sans, system-ui, sans-serif); color: var(--ink-muted, #5c5d63); }
.callcard-x:hover { color: var(--ink, #0b0b0d); }
.callcard a:focus-visible, .callcard button:focus-visible { outline: 2px solid var(--focus-ring, #1954ec); outline-offset: 2px; }
.callcard-short { display: none; }
@media (max-width: 720px) {
  /* the bar keeps a light edge, so it stays visible over the dark operators band (audit 07.11) */
  .callcard { left: 12px; right: 12px; bottom: 12px; width: auto; display: flex; align-items: center; gap: 12px; padding: 8px 4px 8px 10px; background: var(--ink, #0b0b0d); color: #fff;
    border-color: rgba(255, 255, 255, .28); }
  .callcard-who { padding: 0; flex: none; }
  .callcard-who img { width: 40px; height: 40px; }
  .callcard-who > div, .callcard-text, .callcard-q { display: none; }
  .callcard-short { display: block; flex: 1; min-width: 0; color: #fff; font-size: 14px; line-height: 1.3; }
  .callcard-short b { display: block; font-weight: 500; font-size: 15px; }
  .callcard-go { flex: none; min-height: 40px; padding: 0 12px; background: #fff; color: var(--ink, #0b0b0d); font-size: 14px; }
  .callcard-go span { display: none; }
  .callcard-go:hover { background: var(--carbon, #e9e9ec); color: var(--ink, #0b0b0d); }
  .callcard-x { position: static; flex: none; width: 36px; height: 40px; color: rgba(255, 255, 255, .75); }
  .callcard-x:hover { color: #fff; }
  .callcard-short { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* white rings on the dark bar (audit 07.11: cobalt on ink was 3.3:1) */
  .callcard a:focus-visible, .callcard button:focus-visible { outline-color: #fff; }
}
@media (max-width: 360px) { .callcard-who { display: none; } .callcard { gap: 8px; padding-left: 12px; } }
/* hidden while a form is on screen, so it never covers a field (audit 07.11: at 768 and 1024 it sat over the form) */
.callcard.is-hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .callcard { animation: none; } .nv, .nv-chev, .nv-cta { transition: none; } }
@media print { .nv, .callcard { display: none; } }