/* ============================================================
   BOOKATOON — Navegação com dropdowns (desktop) / acordeão (mobile)
   Fase 5. Progressive enhancement: sem JS, os painéis ficam SEMPRE
   visíveis (nenhum link fica inalcançável sem JavaScript) — é js/nav.js
   quem fecha por padrão e liga o clique/Escape/clique-fora. Mesmo
   princípio já usado em [data-reveal]/base.css: visível por padrão,
   JS é quem esconde.
   Etapa 3 da migração de @layer (docs/layer-proposal.md) — mesma layer
   de components.css (convivem hoje, .nav-desktop ul de lá já precisou
   ganhar especificidade extra por causa de um seletor daqui, ver o
   comentário na regra abaixo).
   ============================================================ */
@layer components {

.nav-dropdown {
  position: relative;
}

.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: var(--tap-min);
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: var(--r-pill);
  cursor: var(--cursor-hand);
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}

.nav-dropdown__toggle:hover {
  background: var(--ambar-suave);
}

.nav-dropdown__toggle.is-current {
  color: var(--roxo-profundo);
}

.nav-dropdown__seta {
  width: 0.65em;
  height: 0.65em;
  flex: none;
  transition: rotate var(--dur-micro) var(--ease-energy);
}

.nav-dropdown__toggle[aria-expanded="true"] .nav-dropdown__seta {
  rotate: 180deg;
}

html:not(.motion-on) .nav-dropdown__seta {
  transition: none;
}

.nav-dropdown__painel {
  display: grid;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------------- Desktop: painel flutua como um cartão ---------------- */
@media (min-width: 56rem) {
  /* ".nav-desktop ul" (components.css) tem especificidade maior que a
     regra genérica ".nav-dropdown__painel" acima e forçava display:flex
     em vez de grid — precisa ser redeclarado aqui, mais específico. */
  .nav-desktop .nav-dropdown__painel {
    display: grid;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: var(--z-header);
    min-width: 15.5rem;
    padding: 0.5rem;
    background: var(--branco);
    border: var(--stroke) solid var(--ink);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sticker);
  }

  .nav-desktop .nav-dropdown--fechado .nav-dropdown__painel {
    display: none;
  }

  .nav-desktop .nav-dropdown__painel a {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.98rem;
  }

  .nav-desktop .nav-dropdown__painel a:hover,
  .nav-desktop .nav-dropdown__painel a:focus-visible {
    background: var(--ambar-suave);
  }

  .nav-desktop .nav-dropdown__painel a.is-current {
    color: var(--roxo-profundo);
    background: var(--creme);
  }
}

/* ---------------- Mobile: acordeão inline, mesma cara do .nav-mobile a ---------------- */
@media (max-width: 55.99rem) {
  .nav-mobile .nav-dropdown__toggle {
    width: 100%;
    justify-content: space-between;
    min-height: var(--tap-min);
    padding: 0.9rem 1.2rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--papel-sobre-escuro);
    border-radius: var(--r-lg);
    border: var(--stroke) solid transparent;
  }

  .nav-mobile .nav-dropdown__toggle:hover,
  .nav-mobile .nav-dropdown__toggle:focus-visible {
    background: var(--roxo-ink);
    border-color: var(--ambar);
  }

  .nav-mobile .nav-dropdown__seta {
    width: 0.55em;
    height: 0.55em;
  }

  .nav-mobile .nav-dropdown--fechado .nav-dropdown__painel {
    display: none;
  }

  .nav-mobile .nav-dropdown__painel {
    padding: 0.25rem 0.25rem 0.75rem 1.25rem;
  }

  .nav-mobile .nav-dropdown__painel a {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0.55rem 1rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--papel-sobre-escuro);
    text-decoration: none;
    border-radius: var(--r-md);
    border: var(--stroke) solid transparent;
  }

  .nav-mobile .nav-dropdown__painel a:hover,
  .nav-mobile .nav-dropdown__painel a:focus-visible {
    background: var(--roxo-ink);
    border-color: var(--ambar);
  }

  .nav-mobile .nav-dropdown__painel a.is-current {
    border-color: var(--ambar);
  }
}

/* ---------------- Navegação relacionada (fim de página) ---------------- */

.nav-relacionada {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: var(--creme);
}

.nav-relacionada__titulo {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.nav-relacionada__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.nav-relacionada__lista a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0.6rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  background: var(--branco);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: 0.18rem 0.22rem 0 rgba(var(--ink-rgb), 0.15);
  transition: transform var(--dur-micro) var(--ease-energy), background-color var(--dur-fast) linear;
}

.nav-relacionada__lista a:hover {
  background: var(--ambar-suave);
}

.motion-on .nav-relacionada__lista a:hover {
  transform: translateY(-2px);
}

/* ---------------- Breadcrumb (só páginas institucionais) ---------------- */

.breadcrumb {
  padding-top: 1.25rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.breadcrumb a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb [aria-current="page"] {
  font-weight: 700;
  color: var(--ink);
}

} /* fim de @layer components */