/* ============================================================
   ВЫПАДАЮЩЕЕ МЕНЮ УСЛУГ В ШАПКЕ

   Механика взята с saw-triumph.com (`css/header-menu.css`,
   `js/header-menu.js`): панель абсолютом под пунктом, открытие
   классом, закрытие по клику вне. Оформление — наше: там стеклянные
   «таблетки» с оранжевым, здесь общая светлая тема проекта.

   Открывается и по наведению, и по клику. Наведение — для мыши,
   клик — для клавиатуры и тач-экранов, где наведения нет вовсе.
   ============================================================ */

.nav__item{
  position:relative;                /* якорь для панели */
  display:inline-flex;
  align-items:center;
}

/* Пункт с выпадением обязан быть флексом.
   У обычного .nav__link из common.css стоит display:block, и вложенный
   svg остаётся инлайновым: он садится на базовую линию и добавляет
   под строкой место под свисающие буквы. Замер до правки: «Услуги»
   46.6px против 37.6 у соседей, ровно на высоту значка — пункт вставал
   выше остальных, и меню шло лесенкой. Флекс убирает базовую линию
   из расчёта, высота становится как у соседних пунктов. */
.nav__link--drop{
  display:inline-flex;
  align-items:center;
}

/* Шеврон у пункта с выпадением. Поворачивается, когда открыто. */
.nav__chev{
  width:9px; height:9px;
  margin-left:.42em;
  flex:none;
  transition:transform .22s var(--ease);
}
.nav__item.is-open .nav__chev{ transform:rotate(180deg); }

/* ------------------------------------------------------------
   ПАНЕЛЬ
   Появляется под пунктом. `visibility` вместе с `opacity`, а не
   `display:none`: иначе не отработает переход и панель будет
   выскакивать рывком.
   ------------------------------------------------------------ */
.drop{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%, 10px) scale(.98);
  transform-origin:top center;
  margin-top:14px;
  width:min(720px, calc(100vw - var(--gutter) * 2));
  padding:clamp(12px, 1vw, 18px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-lift);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index:120;
}
.nav__item.is-open .drop{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%, 0) scale(1);
}

/* Мостик до панели: между пунктом и панелью 14px пустоты, и без него
   курсор «проваливается» по дороге, меню закрывается на полпути. */
.drop::before{
  content:'';
  position:absolute;
  left:0; right:0; top:-16px;
  height:16px;
}

.drop__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
}

/* ------------------------------------------------------------
   ПУНКТ СО ЗНАЧКОМ
   ------------------------------------------------------------ */
.drop__item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:11px 12px;
  border-radius:var(--r-inner);
  text-decoration:none;
  color:inherit;
  transition:background .18s var(--ease);
}
.drop__item:hover,
.drop__item:focus-visible{ background:var(--accent-wash); }

.drop__ico{
  flex:none;
  width:34px; height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--accent-wash);
  color:var(--accent-1);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.drop__item:hover .drop__ico{
  background:var(--accent-1);
  color:#fff;
}
.drop__ico svg{
  width:19px; height:19px;
  stroke:currentColor;
  stroke-width:1.6;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.drop__body{ display:flex; flex-direction:column; gap:2px; min-width:0; }

.drop__name{
  font-size:14.5px;
  font-weight:600;
  line-height:1.25;
  color:var(--fg);
}
.drop__item:hover .drop__name{ color:var(--accent-1); }

.drop__note{
  font-size:12.5px;
  font-style:normal;
  line-height:1.35;
  color:var(--fg-mute);
}

/* ------------------------------------------------------------
   02.10.2026: услуг стало 21 — три колонки по группам из
   data/services.json. Панель шире пункта «Услуги», поэтому стоит
   по центру окна (fixed), а не под пунктом: под пунктом на 1140–1440
   она вылезала за левый край. Пункты плотнее, чем были при шести.
   ------------------------------------------------------------ */
.drop{
  position:fixed; left:50%; top:calc(var(--header-h) - 4px); margin-top:0;
  width:min(var(--drop-w, 1040px), calc(100vw - var(--gutter) * 2));
  max-height:calc(100vh - var(--header-h) - 16px); overflow-y:auto;
}
.drop::before{ top:-20px; height:20px; }
.drop:has(.drop__cols[style*="--n:2"]){ --drop-w:720px; }
.drop__cols{ display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); gap:4px 14px; }
.drop__col{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.drop__cap{
  margin:4px 12px 6px; padding-bottom:8px; border-bottom:1px solid var(--line);
  font:600 12px/1 var(--font); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-mute);
}
.drop__cols .drop__item{ padding:8px 10px; gap:10px; }
.drop__cols .drop__ico{ width:30px; height:30px; border-radius:7px; }
.drop__cols .drop__ico svg{ width:17px; height:17px; }
.drop__cols .drop__name{ font-size:14px; }
.drop__cols .drop__note{ font-size:12px; }
.drop__item[aria-current="page"]{ background:var(--accent-wash); }
@media (max-width: 1100px){ .drop__cols .drop__note{ display:none; } }

/* Подвал панели — ссылка на весь раздел. */
.drop__all{
  display:flex;
  align-items:center;
  gap:.4em;
  margin-top:6px;
  padding:10px 12px 4px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent-1);
  text-decoration:none;
}
.drop__all:hover{ gap:.7em; }
.drop__all svg{ width:11px; height:11px; stroke:currentColor; stroke-width:1.8; fill:none; }

/* ------------------------------------------------------------
   Над тёмной полосой шапка перекрашивается (.header.is-dark).
   Панель при этом остаётся светлой — она собственная поверхность,
   а не часть шапки. Меняется только цвет самого пункта, и это
   делает common.css. Здесь нужно вернуть тексту внутри панели
   обычный цвет: он наследуется от шапки и на тёмной стал белым.
   ------------------------------------------------------------ */
.header.is-dark .drop{ color:var(--fg); }
.header.is-dark .drop__name{ color:var(--fg); }
.header.is-dark .drop__note{ color:var(--fg-mute); }

/* ------------------------------------------------------------
   Узкие экраны: меню в шапке прячется целиком (правило из
   common.css), поэтому панель тут не нужна — но если пункт
   всё же виден, раскладка становится в одну колонку.
   ------------------------------------------------------------ */
@media (max-width: 900px){
  .drop{ width:min(420px, calc(100vw - var(--gutter) * 2)); }
  .drop__grid, .drop__cols{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  .drop, .nav__chev{ transition:none; }
}