/* ================================================================
   Alien's TI — estilos comuns a todas as páginas (home e subpáginas)
   1. Barra de rolagem
   2. Menu "Serviços" (lista suspensa) do header — comportamento em
      Assets/js/menu.js; o HTML do menu vem de ferramentas/menu.html.
   A aparência do header (.header, .menu a) continua no CSS de cada página.
   ================================================================ */

/* ---------- 1. Barra de rolagem fina, na cor da marca ---------- */
/* Firefox (no Chrome as propriedades padrão desligariam o degradê do ::-webkit-scrollbar) */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: #9211ee #060011; }
}
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #060011; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #9211ee, #1929f0);
  border-radius: 99px;
  border: 2px solid #060011;
}

/* ---------- 2. Menu "Serviços" ---------- */

@keyframes menuSobe {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;  /* centralizado sob "Serviços" (margin em vez de transform, que a animação usa) */
  width: 236px;
  margin-left: -118px;
  padding: 8px 0;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  text-align: left;
}

/* Links dentro da lista: ícone + texto alinhados à esquerda */
.menu .dropdown-content a {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 8px 2px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  background: none; /* reseta o texto em degradê do menu principal */
  -webkit-background-clip: border-box;
  background-clip: border-box;
  transition: background 0.2s ease;
}

.menu .dropdown-content a:last-child { margin-bottom: 0; }

/* o sublinhado animado do menu principal não se aplica aqui */
.menu .dropdown-content a::after { display: none; }

.dropdown-content a i {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 1.05rem;
  color: #d9c2ff;
  background: rgba(146, 17, 238, 0.16);
  border: 1px solid rgba(146, 17, 238, 0.35);
  transition: background 0.2s ease, color 0.2s ease;
}

.menu .dropdown-content a:hover,
.menu .dropdown-content a:focus-visible,
.menu .dropdown-content a[aria-current="page"] {
  color: #fff;
  text-shadow: none;
  background: rgba(146, 17, 238, 0.14);
  outline: none;
}

.dropdown-content a:hover i,
.dropdown-content a:focus-visible i,
.dropdown-content a[aria-current="page"] i {
  color: #fff;
  background: linear-gradient(135deg, #9211ee 0%, #1929f0 100%);
  border-color: transparent;
}

/* Mostrar a lista ao passar o mouse, pelo teclado (Tab) ou no clique/toque (.aberto via menu.js).
   Teclado por :focus-visible (não :focus-within): o foco que o clique do mouse deixa no link
   não pode prender a lista aberta depois que o mouse sai. */
.dropdown:has(:focus-visible) .dropdown-content,
.dropdown.aberto .dropdown-content {
  display: block;
  animation: menuSobe 0.3s ease forwards;
}
/* hover só com mouse: no toque o :hover "gruda" e o 2º toque não fecharia a lista */
@media (hover: hover) {
  .dropdown:hover .dropdown-content {
    display: block;
    animation: menuSobe 0.3s ease forwards;
  }
}
@supports not selector(:has(*)) {
  .dropdown:focus-within .dropdown-content { display: block; }
}

.dropdown:hover .dropbtn::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .dropdown-content { animation: none !important; }
}