/* ============================================================
   Flexxt — стили раздела «Услуги» (выпадающее меню) для главной
   Подключать после main.css. Отдельный файл, чтобы не менять main.css.
   ============================================================ */

/* минималистичный шеврон вниз */
.nav-caret {
  display: inline-block; width: 7px; height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); margin-left: 6px; margin-top: -3px;
  transition: transform .25s ease;
}

/* ---------- десктоп ---------- */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-link--drop {
  display: inline-flex; align-items: center;
  background: none; border: none; cursor: pointer;
  font: inherit; color: inherit; padding: 0;
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret { transform: rotate(-135deg); margin-top: 2px; }

.nav-menu {
  position: absolute; top: calc(100% + 12px); left: -18px;
  display: flex; flex-direction: column; min-width: 230px;
  padding: 16px 18px; border-radius: 14px;
  background:
    radial-gradient(rgba(22,23,46,.10) 1.1px, transparent 1.1px) 0 0 / 26px 26px,
    radial-gradient(70% 60% at 50% 0%, rgba(52,60,237,.08), transparent 72%),
    var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(22,23,46,.10);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 60;
}
.nav-menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu-link {
  padding: 8px 0; font-size: 15px; color: var(--ink-soft); transition: color .15s;
}
.nav-menu-link:hover { color: var(--accent); }

/* ---------- мобильная панель ---------- */
.mobile-menu-group { border: none; }
.mobile-menu-group > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
}
.mobile-menu-group > summary::-webkit-details-marker { display: none; }
.mobile-menu-group[open] > summary .nav-caret { transform: rotate(-135deg); margin-top: 2px; }
.mobile-submenu-link {
  display: block; padding: 9px 0 9px 20px; font-size: 16px; color: var(--ink-soft);
  animation: submenu-in .2s ease backwards;
}
.mobile-submenu-link:hover { color: var(--accent); }
@keyframes submenu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }