/* ============================================
   NAV DROPDOWN — menu horizontal com submenus
   Aparece no hover · clean · identidade Banca Virtual
   ============================================ */

/* ============================================
   SUB-BAR de "Material de estudos" — 2ª linha do header
   ============================================ */
.header-sub {
  background:
    linear-gradient(180deg, rgba(216, 227, 218, 0.6) 0%, rgba(216, 227, 218, 0.4) 100%),
    var(--bg-deep);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.header-sub-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-2) 0;
  min-height: 44px;
}

/* Rótulo "Material para Estudos" — AMARELO/âmbar pra chamar atenção */
.sub-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #b8860b;
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(180deg, rgba(201,164,73,0.18) 0%, rgba(201,164,73,0.08) 100%);
  border: 1px solid rgba(201,164,73,0.4);
  border-radius: 8px;
}
.sub-eyebrow svg {
  width: 16px;
  height: 16px;
  fill: #b8860b;
  stroke: none;
}

/* Lista de itens da sub-bar */
.sub-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.sub-nav .has-dropdown { position: relative; }
.sub-nav .dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.sub-nav .dropdown-trigger:hover {
  background: var(--bg-surface);
  border-color: var(--moss-300);
  color: var(--moss-900);
}
.sub-nav .dropdown-trigger .caret {
  font-size: 10px;
  transition: transform 0.25s var(--ease-out);
  opacity: 0.7;
}
.sub-nav .has-dropdown:hover .dropdown-trigger {
  background: var(--bg-surface);
  border-color: var(--moss-500);
  color: var(--moss-900);
  box-shadow: 0 4px 12px rgba(74, 106, 82, 0.12);
}
.sub-nav .has-dropdown:hover .dropdown-trigger .caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* Posicionamento do dropdown vindo da sub-bar */
.sub-nav .dropdown-menu {
  top: calc(100% + 10px);
}
.sub-nav .has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
}

/* ============================================
   DROPDOWN HORIZONTAL CLÁSSICO (menu principal)
   ============================================ */

/* Container do item com dropdown */
.nav-menu .has-dropdown {
  position: relative;
}

/* Container do item com dropdown */
.nav-menu .has-dropdown {
  position: relative;
}

.nav-menu .dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.nav-menu .dropdown-trigger .caret {
  font-size: 10px;
  transition: transform 0.25s var(--ease-out);
  opacity: 0.7;
}

/* Painel do dropdown */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 260px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(247,248,246,0.96) 100%),
    var(--bg-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 12px 32px rgba(42,58,48,0.12),
    0 4px 12px rgba(42,58,48,0.06);
  padding: var(--space-3) 0;
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  transition: opacity 0.22s var(--ease-out), transform 0.28s var(--ease-out);
}

/* Pontinha (triangulo) que conecta dropdown ao item do menu */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: inherit;
  border-top: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
}

/* Hover do item → mostra dropdown */
.nav-menu .has-dropdown:hover .dropdown-menu,
.nav-menu .has-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-menu .has-dropdown:hover .dropdown-trigger .caret,
.nav-menu .has-dropdown:focus-within .dropdown-trigger .caret {
  transform: rotate(180deg);
  opacity: 1;
}
.nav-menu .has-dropdown:hover .dropdown-trigger,
.nav-menu .has-dropdown:focus-within .dropdown-trigger {
  color: var(--moss-700);
}

/* Abertura por CLIQUE (classe .open via JS) — funciona em qualquer tela */
.has-dropdown.open .dropdown-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
  display: block !important;
}
.has-dropdown.open .dropdown-trigger .caret { transform: rotate(180deg); opacity: 1; }
.sub-nav .has-dropdown.open .dropdown-trigger {
  background: var(--bg-surface);
  border-color: var(--moss-500);
  color: var(--moss-900);
  box-shadow: 0 4px 12px rgba(74, 106, 82, 0.12);
}

/* Itens do dropdown */
.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out), border-color 0.18s var(--ease-out), padding-left 0.18s var(--ease-out);
}
.dropdown-menu a::before {
  content: '›';
  color: var(--moss-300);
  font-weight: 700;
  font-size: 16px;
  width: 12px;
  flex-shrink: 0;
  transition: color 0.18s, transform 0.18s var(--ease-out);
}
.dropdown-menu a:hover {
  background: var(--moss-100);
  color: var(--moss-900);
  border-left-color: var(--moss-500);
  padding-left: calc(var(--space-5) + 4px);
}
.dropdown-menu a:hover::before {
  color: var(--moss-700);
  transform: translateX(2px);
}

/* Bridge invisível entre item do menu e dropdown — evita perder hover */
.nav-menu .has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

/* ============================================
   MOBILE — dropdown vira accordion no mobile drawer
   ============================================ */
@media (max-width: 1023px) {
  /* Em telas estreitas o nav-menu já está escondido.
     O drawer existente mostra os links flat — dropdowns
     viram links diretos com setinha. Pra MVP mobile,
     mostramos só o trigger principal (sem sub-itens),
     ou expandimos em vez de hover. */
  .dropdown-menu { display: none; }
}

/* ============================================
   RANKING — pódio no canto direito da sub-bar
   ============================================ */
.rank-corner { position: relative; margin-left: auto; flex-shrink: 0; }
.rank-corner-trig {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 8px; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, rgba(201,164,73,0.18), rgba(201,164,73,0.08));
  border: 1px solid rgba(201,164,73,0.45);
  color: #7a5d00; font-weight: 800; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.1em;
  transition: background 0.2s, transform 0.2s;
}
.rank-corner-trig:hover { background: linear-gradient(180deg, rgba(201,164,73,0.32), rgba(201,164,73,0.16)); }
.rank-corner-trig .caret { font-size: 10px; opacity: 0.7; transition: transform 0.25s; }
.rank-corner.open .rank-corner-trig .caret { transform: rotate(180deg); }
/* mini pódio 3-1-2 */
.rank-podium-mini { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.rank-podium-mini .rb { width: 5px; border-radius: 2px 2px 0 0; display: block; }
.rank-podium-mini .rb-1 { height: 16px; background: #e8c860; }
.rank-podium-mini .rb-2 { height: 11px; background: #aab4c0; }
.rank-podium-mini .rb-3 { height: 8px; background: #d09a5e; }
/* dropdown do ranking — abre só por CLIQUE, ancorado à direita */
.rank-corner-dd { right: 0; left: auto; min-width: 300px; padding: 10px; transform: translateY(-8px); }
.rank-corner.open .rank-corner-dd { transform: translateY(0) !important; left: auto !important; right: 0 !important; }
.rcd-head { text-align: center; font-weight: 800; font-size: var(--fs-sm); color: var(--text-primary); padding: 4px 8px 8px; border-bottom: 1px solid var(--border-soft); }
.rcd-all { font-size: var(--fs-xs); color: var(--moss-700); font-weight: 700; }
.rcd-list, .rcd-mat-list { list-style: none; margin: 6px 0 0; padding: 0; }
.rcd-list li, .rcd-mat-list li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; font-size: var(--fs-sm); }
.rcd-list li:hover, .rcd-mat-list li:hover { background: rgba(122,158,126,0.1); }
.rcd-pos { width: 26px; flex-shrink: 0; font-weight: 800; color: #000; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-xs); }
.rcd-mat { flex: 1; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcd-nota { font-weight: 800; color: var(--moss-700); font-variant-numeric: tabular-nums; }
.rcd-sep { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 10px 8px 4px; margin-top: 6px; border-top: 1px solid var(--border-soft); }
.rcd-cta { display: block; text-align: center; margin-top: 10px; padding: 10px; border-radius: 8px; background: linear-gradient(180deg, #e8c860, #d9a93a); color: #000; font-weight: 800; font-size: var(--fs-sm); text-decoration: none; letter-spacing: 0.01em; }
.rcd-cta:hover { filter: brightness(1.06); }
@media (max-width: 700px) {
  .rank-corner-label { display: none; }
  .rank-corner-dd { min-width: 250px; }
}

/* widget ranking — top 3 por cor (sem emoji) + sem a setinha torta */
.rank-corner-dd::before { display: none; }
.rcd-list li:nth-child(1) .rcd-pos, .rcd-mat-list li:nth-child(1) .rcd-pos { color: #b8860b; }
.rcd-list li:nth-child(2) .rcd-pos, .rcd-mat-list li:nth-child(2) .rcd-pos { color: #6b7785; }
.rcd-list li:nth-child(3) .rcd-pos, .rcd-mat-list li:nth-child(3) .rcd-pos { color: #a9743c; }
.rcd-list li:nth-child(1) { background: rgba(201,164,73,0.1); }
.rank-corner-dd a::before { display: none; }
.rank-corner-dd a { border-left: none; padding-left: 8px; }

/* brilho dourado no 1º (Desenvolvedor) do widget */
@keyframes rkShineW { 0%,100%{background-position:0% 50%} 50%{background-position:120% 50%} }
.rcd-list li:nth-child(1) {
  background: linear-gradient(90deg, rgba(201,164,73,.24), rgba(201,164,73,.06), rgba(201,164,73,.24));
  background-size: 220% 100%;
  animation: rkShineW 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .rcd-list li:nth-child(1){ animation:none } }

/* "Material para Estudos" agora é um link pras gavetas (material.html) */
.sub-eyebrow-link { text-decoration: none; cursor: pointer; transition: background .2s, transform .2s, border-color .2s; }
.sub-eyebrow-link:hover { background: linear-gradient(180deg, rgba(201,164,73,0.34), rgba(201,164,73,0.16)); border-color: var(--gold-attn); transform: translateY(-1px); }
.sub-eyebrow-go { font-weight: 800; opacity: .85; }

/* "Material para Estudos →" = rótulo (não clica); a setinha aponta pra "Os Arquivos" (clicável) */
.sub-eyebrow-static { cursor: default; }
.arq-link { text-decoration: none; cursor: pointer; font-weight: 800; transition: background .2s, transform .2s, border-color .2s; }
.arq-link:hover { background: linear-gradient(180deg, rgba(201,164,73,0.34), rgba(201,164,73,0.16)); border-color: var(--gold-attn); transform: translateY(-1px); }