/* =========================================================
   Roiatek AI · nav.css
   Top menu: "AI Agents" dropdown (Voice, WhatsApp, Automation)
   plus Solutions, Architecture, About, Contact. Behaviour in js/nav.js.
   ========================================================= */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px 8px 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.2s;
}
.nav-drop-btn:hover,
.nav-drop.is-open .nav-drop-btn,
.nav-drop-btn.is-active { color: var(--text); }
.nav-drop-btn.is-active { text-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 45%, transparent); }
.nav-caret { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease); }
.nav-drop.is-open .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -12px;
  z-index: 5;
  display: grid;
  gap: 4px;
  width: 340px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(10, 24, 62, 0.97);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s 0.2s;
}
/* small bridge so the menu stays open while the pointer moves down to it */
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-drop.is-open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  transition: background-color 0.2s;
}
.nav-item:hover,
.nav-item:focus-visible { background: rgba(255, 255, 255, 0.05); }
.nav-item.is-active { background: color-mix(in srgb, var(--cyan) 9%, transparent); }
.nav-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 75%, #1a2f70), color-mix(in srgb, var(--tone) 35%, #0a1a44));
  border: 1px solid color-mix(in srgb, var(--tone) 70%, #fff);
  box-shadow: 0 6px 16px -8px var(--tone);
}
.nav-ico .ico { width: 19px; height: 19px; }
.nav-item-txt { display: grid; min-width: 0; line-height: 1.3; }
.nav-item-txt strong { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9063rem; font-weight: 600; color: var(--text); }
.nav-item-txt em {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
}
.nav-item-txt small { margin-top: 2px; font-size: 0.78rem; color: var(--text-3); }

/* Light theme */
html[data-theme="light"] .nav-menu { background: #fff; border-color: var(--line); box-shadow: 0 24px 50px -24px rgba(11, 26, 63, 0.4); }
html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .nav-item:focus-visible { background: #f1f5fd; }

/* Laptop widths: tighter spacing so everything fits on one line */
@media (min-width: 1025px) and (max-width: 1240px) {
  .site-nav { gap: 16px; }
  .nav-link { padding: 8px 9px; }
  .nav-drop-btn { padding: 8px 6px 8px 9px; }
  .nav-cta { padding-inline: 16px; }
}

/* Mobile drawer: the AI Agents group is shown open, as a list with icons */
@media (max-width: 1024px) {
  .site-nav { background: #061330; }
  .nav-drop-btn {
    width: 100%;
    padding: 18px 4px 8px;
    font-family: var(--font-display);
    font-stretch: 110%;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    pointer-events: none;
  }
  .nav-caret { display: none; }
  .nav-menu {
    position: static;
    width: auto;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-menu::before { display: none; }
  html[data-theme="light"] .nav-menu { background: none; box-shadow: none; }
}