/* Dropdowns do menu de navegação (desktop) e grupos expansíveis do menu mobile.
   Mesma técnica do seletor de localização (header-location.css): painel absoluto
   colado ao top:100% do gatilho — qualquer vão faria o :hover se perder no
   trajeto e fechar o painel antes de o mouse alcançar os itens. */

/* --- Desktop --- */

.nav-item {
  position: relative;
}

/* Com os dropdowns (caret) e o selo "Em breve", o menu não cabe mais com a
   fonte fixa de 1.8rem do main.min.css: os links quebravam linha (caret e
   selo caíam para baixo do texto, "CADASTRE-SE" partia em dois). Aqui o
   texto nunca quebra e fonte/espaçamentos acompanham a largura da tela. */
@media (min-width: 992px) {
  /* Conteúdo do topo numa faixa centralizada de até 128rem (layout novo):
     em telas largas o menu não se espalha até as bordas. */
  .header .container {
    max-width: min(90%, 128rem);
    gap: clamp(1rem, 1.2vw, 2.4rem);
  }

  .header .logo {
    flex-shrink: 0;
    max-width: clamp(10rem, 10vw, 16rem);
  }

  .header .nav > li > a {
    display: inline-block;
    white-space: nowrap;
    font-size: clamp(1.1rem, 1.05vw, 1.6rem);
    /* topo mais baixo: 2.2rem em vez dos 3rem do main.min */
    padding: 2.2rem clamp(0.6rem, 0.8vw, 1.3rem);
  }

  .nav-item.has-dropdown > a::after {
    margin-left: 0.5rem;
  }

  .header .nav-badge {
    font-size: 0.9rem;
    margin-left: 0.5rem;
    padding: 0.1rem 0.7rem;
  }

  .header .btn-login {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: clamp(1.2rem, 1.05vw, 1.6rem);
    padding: 0.9rem clamp(1.4rem, 1.4vw, 2.2rem);
  }

  .header .location {
    flex-shrink: 0;
  }

  .header .location span {
    white-space: nowrap;
    font-size: clamp(1.1rem, 0.95vw, 1.5rem);
  }
}

/* Desktop estreito: os 90% do main.min.css deixam pouco espaço para o menu */
@media (min-width: 992px) and (max-width: 1100px) {
  .header .container {
    max-width: 96%;
  }
}

/* Caret para os grupos com dropdown, mesmo recurso do .location-select */
.nav-item.has-dropdown > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 0.45rem solid transparent;
  border-right: 0.45rem solid transparent;
  border-top: 0.55rem solid #ea3636;
  margin-left: 0.7rem;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.nav-item.has-dropdown:hover > a::after,
.nav-item.has-dropdown:focus-within > a::after {
  transform: rotate(180deg);
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9998;
  min-width: 32rem;
  background-color: #14191d;
  border: 1px solid #303838;
  border-radius: 0 0 0.8rem 0.8rem;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.45);
  padding: 1rem 0;
}

.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown {
  display: block;
}

/* Grupo com muitos itens (CONSULTAS): duas colunas fixas e alinhado à direita
   do item — auto-fill deixaria o painel crescer para além da viewport. */
.nav-dropdown-wide {
  left: auto;
  right: 0;
  min-width: 56rem;
  max-width: 90vw;
  padding: 1.2rem;
}

.nav-item.has-dropdown:hover .nav-dropdown-wide,
.nav-item.has-dropdown:focus-within .nav-dropdown-wide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 0.8rem;
}

/* ".header .nav .nav-dropdown a" (três classes) para vencer o ".header .nav li a"
   do main.min.css, que mira qualquer <a> dentro do nav — inclusive os do
   dropdown — com padding 3rem e fonte 1.4rem. */
.header .nav .nav-dropdown a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 2rem;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.4;
  text-decoration: none;
  border-bottom: 1px solid rgba(48, 56, 56, 0.6);
  transition: background-color 0.2s ease;
}

.header .nav .nav-dropdown-wide a {
  padding: 1rem 1.4rem;
  border-radius: 0.6rem;
  border-bottom: none;
}

.header .nav .nav-dropdown > a:last-child {
  border-bottom: none;
}

.header .nav .nav-dropdown a strong {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: #fff;
}

.header .nav .nav-dropdown a span {
  font-size: 1.2rem;
  color: #9aa3a8;
}

.header .nav .nav-dropdown a:hover {
  background-color: rgba(234, 54, 54, 0.08);
  /* mantém o separador escuro: o hover do ".nav li a:hover" do main pintaria de vermelho */
  border-bottom-color: rgba(48, 56, 56, 0.6);
}

.header .nav .nav-dropdown a:hover strong {
  color: #ea3636;
}

/* Selo "Em breve" no grupo CONSULTAS */
.nav-badge {
  display: inline-block;
  font-size: 1rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.05em;
  color: #ea3636;
  border: 1px solid #ea3636;
  border-radius: 3rem;
  padding: 0.1rem 0.9rem;
  margin-left: 0.8rem;
  vertical-align: middle;
}

/* --- Menu mobile: grupos expansíveis, no padrão do .location-mobile --- */

.menu-mobile .box .nav-group summary {
  display: block;
  padding: 20px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.4s ease;
}

.menu-mobile .box .nav-group summary::-webkit-details-marker {
  display: none;
}

.menu-mobile .box .nav-group summary::after {
  content: "+";
  float: right;
  color: #fff;
  font-size: 2rem;
  line-height: 1.2;
}

.menu-mobile .box .nav-group[open] summary::after {
  content: "−";
}

.menu-mobile .box .nav-group summary:hover {
  background-color: #a51d24;
}

.menu-mobile .box .nav-group summary .nav-badge {
  margin-left: 0.6rem;
  border-color: #fff;
  color: #fff;
}

/* Seletores longos para vencerem .menu-mobile .box ul li a:hover do main.min.css */
.menu-mobile .box .nav-group .nav-group-items {
  /* Sobre o vermelho do menu (#d71921), um véu mais escuro separa os itens
     e melhora o contraste do texto branco (pedido do usuário: ilegível) */
  background-color: rgba(0, 0, 0, 0.3);
}

.menu-mobile .box .nav-group .nav-group-items a {
  display: block;
  padding: 1.4rem 2rem 1.4rem 3rem;
  text-align: left;
  text-transform: none;
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
  border-bottom: 1px solid rgba(131, 47, 51, 0.3);
}

.menu-mobile .box .nav-group .nav-group-items a:last-child {
  border-bottom: none;
}

/* O "*" do main.min.css pinta TODO elemento com #2d3643: sem esta regra, o
   título (<strong>) herda esse cinza escuro em vez do branco do <a> —
   contraste ~1.7:1 sobre o vermelho do menu (ilegível). */
.menu-mobile .box .nav-group .nav-group-items a strong {
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

.menu-mobile .box .nav-group .nav-group-items a span {
  display: block;
  font-size: 1.3rem;
  font-weight: 400;
  /* Branco sólido: com 80% de opacidade sobre o vermelho, a descrição
     ficava abaixo do mínimo de contraste (quase ilegível no celular) */
  color: #fff;
  line-height: 1.4;
  margin-top: 0.3rem;
}

.menu-mobile .box .nav-group .nav-group-items a:hover {
  background-color: rgba(0, 0, 0, 0.2);
  padding-left: 3rem;
}

/* --- Topo translúcido ---
   Fixo ao rolar (todo o site): preto translúcido com desfoque, o conteúdo
   aparece passando por baixo. Na home com banner (desktop), o topo fica por
   cima do banner com o mesmo efeito. No celular o topo segue sólido: o
   banner é baixo demais para ficar sob ele. */
.header.fixed-header {
  background-color: rgba(20, 25, 29, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@media (min-width: 992px) {
  .header.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: rgba(20, 25, 29, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  .header.header-overlay.fixed-header {
    position: fixed;
    background-color: rgba(20, 25, 29, 0.78);
  }
}

/* Páginas de título com banner (comparar, anuncie, quanto vale, quiz,
   documentos...): topo translúcido por cima do banner também no celular.
   O banner ganha uma borda transparente da altura do topo (main.js mede em
   --topo-altura) e a imagem de fundo passa por baixo dela. */
.header.header-overlay-sempre {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: rgba(20, 25, 29, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.header.header-overlay-sempre.fixed-header {
  position: fixed;
  background-color: rgba(20, 25, 29, 0.78);
}

.header.header-overlay-sempre .location-bar-mobile,
.header.header-overlay-sempre .location-select {
  background-color: transparent;
}

.header-overlay-sempre ~ :is(.compare-hero, .anuncie-hero, .coming-hero, .legal-hero, .qv-hero, .qz-hero) {
  border-top: var(--topo-altura, 6.5rem) solid transparent;
  background-origin: border-box;
}

@media (max-width: 991px) {
  .header-overlay-sempre ~ :is(.compare-hero, .anuncie-hero, .coming-hero, .legal-hero, .qv-hero, .qz-hero) {
    border-top-width: var(--topo-altura, 10.8rem);
  }
}