/* header.css — шапка сайта и панель каталога. Отдельный файл, чтобы правки навигации
   не тонули в 250 КБ styles.css. Префикс классов: .hdr-

   Переделка 09.2026 (§навигация). Верхняя строка — четыре элемента: логотип, кнопка «Каталог»,
   крупный поиск, правый блок. Поиск получает всю свободную ширину: он главный вход на сервисе
   документов, а четыре выпадающих пункта раньше отжимали его до 230 px и ниже 1040 прятали
   совсем. Вся навигация — в одной панели #hdr-panel, она же открывается бургером на мобильном.

   Цвета/радиусы — только переменные из styles.css (--ink, --muted, --line, --accent, --surface,
   --surface-2, --tint, --radius): своя палитра в отдельном файле разъезжается с остальным сайтом.
   Старые классы шапки (.header-bar, .nav, .navbtn, .header-search, .mega*) остались в styles.css
   и здесь не используются. */

/* Шапка белая, а не бежевая (--bg): крупное белое поле поиска на бежевом фоне читалось
   как «вставка из другого макета». Сам .site-header (sticky/z-index) живёт в styles.css. */
.site-header{background:var(--surface)}

.hdr-bar{display:flex;align-items:center;gap:16px;height:72px}

.hdr-logo{display:flex;align-items:center;flex:0 0 auto}
.hdr-logo img{height:26px;width:auto;display:block}

/* Кнопка «Каталог». Одна вместо четырёх пунктов: разделы, ситуации, комплекты и отрасли —
   внутри панели. Заливка --tint (а не рамка): рядом с белым полем поиска рамочная кнопка
   сливалась с ним в одну длинную «строку ввода». */
.hdr-cat{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;height:44px;padding:0 18px;
  border:1px solid transparent;border-radius:var(--radius);background:var(--tint);
  color:var(--ink);font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer}
.hdr-cat .ic{width:17px;height:17px;stroke-width:2.2;flex:none}
.hdr-cat:hover{background:var(--tint-2);color:var(--accent)}
.hdr-cat[aria-expanded="true"]{background:var(--tint-2);border-color:var(--tint-line);color:var(--accent)}

/* Поиск. flex:1 — занимает всю свободную ширину; max-width не задаём намеренно, «львиная доля
   строки» здесь и есть решение. position:relative нужен .suggest-pop (выпадающие подсказки). */
.hdr-search{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;
  height:44px;padding:0 14px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);transition:border-color .12s,box-shadow .12s}
.hdr-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--tint)}
/* Лупа = кнопка submit (см. site-header.blade.php): и видимая иконка, и рабочая отправка формы. */
.hdr-search-go{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  margin-left:-4px;padding:0;border:none;background:none;color:var(--faint);cursor:pointer}
.hdr-search-go .ic{width:18px;height:18px;stroke-width:2}
.hdr-search-go:hover{color:var(--accent)}
/* !important — база :where(input) в styles.css задаёт рамку и паддинг всем полям сайта. */
.hdr-search input{flex:1;min-width:0;height:100%;padding:0;border:none!important;background:none;
  box-shadow:none!important;outline:none;color:var(--ink);font-size:15.5px}
.hdr-search input::placeholder{color:var(--faint)}
.hdr-search input::-webkit-search-cancel-button{-webkit-appearance:none}

.hdr-right{display:flex;align-items:center;gap:20px;flex:0 0 auto;margin-left:4px}
.hdr-mydocs,.hdr-link{font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap}
.hdr-mydocs{display:inline-flex;align-items:center;gap:8px}
.hdr-mydocs .ic{width:17px;height:17px;color:var(--faint);stroke-width:1.8;flex:none}
.hdr-mydocs:hover,.hdr-link:hover{color:var(--accent)}
.hdr-mydocs:hover .ic{color:var(--accent)}
/* Счётчик — мягкий, а не красный: это напоминание о своих черновиках, а не тревога. */
.hdr-num{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--tint);
  color:var(--accent);font-size:12px;font-weight:700;line-height:20px;text-align:center;flex:none}
.hdr-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--radius);color:var(--muted)}
.hdr-cart:hover{background:var(--tint);color:var(--accent)}
.hdr-cart .hdr-num{position:absolute;top:-1px;right:-3px;min-width:18px;height:18px;line-height:18px;
  padding:0 5px;background:var(--accent);color:#fff}
.hdr-cta{flex:none;white-space:nowrap}
.hdr-burger{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:8px;
  border-radius:var(--radius)}
.hdr-burger:hover{background:var(--tint)}
.hdr-burger[aria-expanded="true"]{background:var(--tint-2);color:var(--accent)}

/* ── Панель каталога ─────────────────────────────────────────────────────────
   На всю ширину контента, под шапкой. max-height — чтобы длинная панель на ноутбуке
   и на телефоне прокручивалась внутри себя, а не уезжала за экран. */
.hdr-panel{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--surface);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:var(--shadow-pop);
  max-height:calc(100vh - 72px);overflow-y:auto;overscroll-behavior:contain}
.hdr-panel[hidden]{display:none}
.hdr-panel-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;padding:26px 0 30px}
.hdr-h{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px}
.hdr-h-sep{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-2)}
/* Три колонки — столько же, сколько в макете; счётчик прижат к правому краю своей колонки,
   поэтому числа выстраиваются в столбик и раздел читается как список с объёмом. */
.hdr-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.hdr-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 0;
  font-size:15px;font-weight:500;color:var(--ink);min-width:0}
.hdr-row .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-row .n{flex:none;font-size:13.5px;font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums}
.hdr-row:hover{color:var(--accent)}
.hdr-row.is-active{color:var(--accent);font-weight:600}
.hdr-row.is-active .n{color:var(--accent)}
.hdr-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:14.5px;
  font-weight:600;color:var(--accent)}
.hdr-more .ic{width:15px;height:15px;stroke-width:2.2}
.hdr-more:hover{color:var(--accent-ink)}

.hdr-card{background:var(--surface-2);border-radius:var(--radius);padding:18px 20px 16px}
.hdr-pkg{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:15px;font-weight:500;color:var(--ink);min-width:0}
.hdr-pkg .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-pkg .p{flex:none;color:var(--accent);font-weight:600}
.hdr-pkg:hover .t{color:var(--accent)}
.hdr-card .hdr-more{margin-top:12px}

.hdr-extra,.hdr-acct{margin-top:22px}
.hdr-xlink{display:block;padding:7px 0;font-size:15px;font-weight:500;color:var(--ink)}
.hdr-xlink:hover{color:var(--accent)}
/* Блок аккаунта дублирует правую часть верхней строки и нужен только там, где она свёрнута. */
.hdr-acct{display:none}
.hdr-acct-cta{margin-top:10px}

/* ── Ступени сжатия ──────────────────────────────────────────────────────────
   Порядок жертв задан явно. Сначала ужимаются отступы правого блока, затем «Мои документы»
   остаются иконкой, затем вся правая часть и «Каталог» уходят в бургер. Поиск не жертвуем
   ни на одной ступени: он и на телефоне остаётся полем, а не иконкой. */
@media (max-width:1180px){
  .hdr-bar{gap:14px}
  .hdr-right{gap:14px}
  .hdr-panel-grid{grid-template-columns:minmax(0,1fr) 300px;gap:28px}
}
@media (max-width:1040px){
  .hdr-mydocs span:not(.hdr-num){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hdr-mydocs{gap:4px}
  .hdr-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px}
}
/* Мобильная шапка: логотип, поиск, бургер — в одну строку 60 px. Поиск виден всегда. */
@media (max-width:900px){
  .hdr-bar{height:60px;gap:10px}
  .hdr-cat,.hdr-mydocs,.hdr-link,.hdr-cta{display:none}
  .hdr-burger{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  .hdr-right{gap:6px;margin-left:0}
  .hdr-search{height:42px;padding:0 12px}
  .hdr-search input{font-size:16px}   /* 16px — иначе iOS зумит страницу при фокусе */
  .hdr-panel{max-height:calc(100vh - 60px)}
  .hdr-panel-grid{grid-template-columns:1fr;gap:22px;padding:18px 0 24px}
  .hdr-acct{display:block}
}
@media (max-width:620px){
  .hdr-cols{grid-template-columns:1fr}
  .hdr-logo img{height:22px}
}
/* Ниже 520 px поиск переезжает на свою строку во всю ширину. В одну строку с логотипом и
   бургером ему остаётся ~150 px — видно два слова, и «поиск важнее» превращается в лозунг.
   Шапка становится выше на ~40 px, и это осознанный размен: поле, в котором виден запрос,
   стоит дороже сорока пикселей липкой шапки. */
@media (max-width:520px){
  .hdr-bar{flex-wrap:wrap;height:auto;padding:7px 0;gap:7px 10px}
  .hdr-logo{margin-right:auto}
  .hdr-search{order:3;flex:1 0 100%;height:40px}
  .hdr-burger{min-height:40px}
  .hdr-panel{max-height:calc(100vh - 100px)}
}
@media (max-width:380px){
  .hdr-bar{gap:7px 8px}
  .hdr-logo img{height:20px}
  .hdr-search{padding:0 10px;gap:7px}
}