/*
   guias.css · Guias de licitação (/guias e /guias/:slug)
   Tipografia de leitura (medida ~70ch), sumário lateral no desktop e no topo no
   celular. Cores só por tokens --mb-* (theme-tokens.css), então funciona no
   claro e no escuro sem bloco de override. Sem JS.
   Mexeu aqui? Bumpe o ?v=N do <link> em views/guia.ejs e views/guias_index.ejs.
*/

/* Base fixa em px: o root do tema escuro encolhe para 13,5px em laptop
   (densidade adaptativa do theme-tokens.css), o que deixava o texto corrido
   pequeno demais para leitura. Tudo abaixo é em "em", relativo a esta base. */
.guia-page {
  max-width: 1120px;
  font-size: 16px;
  color: var(--mb-text-primary);
}

/* ── Layout: cabeçalho, sumário e corpo ───────────────────────────────────
   Celular: cabeçalho → sumário → corpo (o h1 aparece antes do sumário).
   Desktop: sumário fixo à esquerda, ao lado do cabeçalho e do corpo. */
.guia-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "cabecalho"
    "sumario"
    "corpo";
  gap: 1.5em;
}
.guia-cabecalho { grid-area: cabecalho; }
.guia-toc { grid-area: sumario; }
.guia-corpo { grid-area: corpo; }

.guia-toc {
  border: 1px solid var(--mb-border-subtle);
  border-radius: 12px;
  background: var(--mb-surface-1);
  padding: 1em 1.125em;
}
.guia-toc__titulo {
  margin: 0 0 0.5em;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mb-text-tertiary);
}
.guia-toc__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.guia-toc__lista a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25em 0;
  color: var(--mb-text-secondary);
  text-decoration: none;
  font-size: 0.9375em;
  line-height: 1.35;
  border-bottom: 1px solid var(--mb-border-subtle);
}
.guia-toc__lista li:last-child a { border-bottom: 0; }
.guia-toc__lista a:hover,
.guia-toc__lista a:focus-visible {
  color: var(--mb-primary);
}

@media (min-width: 960px) {
  .guia-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "sumario cabecalho"
      "sumario corpo";
    column-gap: 3em;
    row-gap: 0;
    align-items: start;
  }
  .guia-toc {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--mb-border-default);
    border-radius: 0;
    padding: 0.25em 0 0.25em 1em;
  }
  .guia-toc__lista a {
    min-height: 0;
    padding: 0.4em 0;
    border-bottom: 0;
    font-size: 0.875em;
  }
}

/* ── Artigo ───────────────────────────────────────────────────────────────── */
.guia-corpo {
  max-width: 70ch;
  font-size: 1.0625em;
  line-height: 1.7;
  color: var(--mb-text-primary);
}

.guia-cabecalho { max-width: 46em; margin-bottom: 0.5em; }

.guia-etapa {
  margin: 0 0 0.75em;
  font-size: 0.8125em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mb-text-tertiary);
}
.guia-etapa a {
  color: var(--mb-primary);
  text-decoration: none;
}
.guia-etapa a:hover { text-decoration: underline; }

.guia-titulo {
  margin: 0 0 0.4em;
  font-size: clamp(1.75em, 1.2em + 2.2vw, 2.5em);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mb-text-primary);
}

.guia-lead {
  margin: 0 0 1em;
  font-size: 1.1875em;
  line-height: 1.55;
  color: var(--mb-text-secondary);
  max-width: 62ch;
}

.guia-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.25em;
  margin: 0;
  font-size: 0.875em;
  color: var(--mb-text-tertiary);
}
.guia-meta i { margin-right: 0.25em; }

.guia-secao {
  scroll-margin-top: 96px;
  padding-top: 0.5em;
  margin-bottom: 2.25em;
}
.guia-secao h2,
.guia-mabus h2,
.guia-fontes h2 {
  margin: 0 0 0.75em;
  font-size: 1.375em;
  line-height: 1.3;
  font-weight: 700;
  color: var(--mb-text-primary);
}
.guia-secao h3 {
  margin: 1.5em 0 0.5em;
  font-size: 1.125em;
  color: var(--mb-text-primary);
}
.guia-secao p { margin: 0 0 1em; }
.guia-secao ul,
.guia-secao ol {
  margin: 0 0 1em;
  padding-left: 1.25em;
}
.guia-secao li { margin-bottom: 0.5em; }
.guia-secao li::marker { color: var(--mb-text-tertiary); }
.guia-secao strong { color: var(--mb-text-primary); font-weight: 650; }
.guia-secao a,
.guia-fontes a {
  color: var(--mb-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.guia-secao a:hover,
.guia-fontes a:hover { text-decoration-thickness: 2px; }

/* Lista de conferência: marcador em caixa, sem bolinha. */
.guia-secao .guia-checklist {
  list-style: none;
  padding-left: 0;
}
.guia-secao .guia-checklist li {
  position: relative;
  padding-left: 1.75em;
}
.guia-secao .guia-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1em;
  height: 1em;
  border: 2px solid var(--mb-primary);
  border-radius: 4px;
}

/* Exemplo e fórmula: blocos de destaque discretos. */
.guia-exemplo {
  border-left: 3px solid var(--mb-accent);
  background: var(--mb-surface-1);
  border-radius: 0 10px 10px 0;
  padding: 0.875em 1em;
  font-size: 1em;
}
.guia-formula {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1em;
  background: var(--mb-surface-1);
  border: 1px solid var(--mb-border-subtle);
  border-radius: 8px;
  padding: 0.75em 1em;
  overflow-x: auto;
}

/* Tabela: vira cartão no celular (padrão da casa: data-label). */
.guia-tabela {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1em;
  font-size: 0.9375em;
  line-height: 1.45;
}
.guia-tabela th,
.guia-tabela td {
  text-align: left;
  vertical-align: top;
  padding: 0.625em 0.75em;
  border-bottom: 1px solid var(--mb-border-subtle);
}
.guia-tabela th {
  font-size: 0.8125em;
  font-weight: 600;
  color: var(--mb-text-tertiary);
  border-bottom: 2px solid var(--mb-border-default);
}
@media (max-width: 640px) {
  .guia-tabela thead { display: none; }
  .guia-tabela tr {
    display: block;
    border: 1px solid var(--mb-border-subtle);
    border-radius: 10px;
    background: var(--mb-surface-1);
    padding: 0.5em 0.875em;
    margin-bottom: 0.75em;
  }
  .guia-tabela td {
    display: block;
    border-bottom: 0;
    padding: 0.25em 0;
  }
  .guia-tabela td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75em;
    font-weight: 600;
    color: var(--mb-text-tertiary);
  }
}

/* ── Na Mabus ─────────────────────────────────────────────────────────────── */
.guia-mabus {
  scroll-margin-top: 96px;
  margin: 2.5em 0 2em;
  padding: 1.5em;
  border: 1px solid var(--mb-border-default);
  border-radius: 14px;
  background: var(--mb-surface-1);
}
.guia-mabus__intro {
  margin: -0.25em 0 1em;
  font-size: 0.9375em;
  color: var(--mb-text-secondary);
}
.guia-mabus__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1em;
}
.guia-mabus__item {
  padding-top: 1em;
  border-top: 1px solid var(--mb-border-subtle);
}
.guia-mabus__item:first-child { padding-top: 0; border-top: 0; }
.guia-mabus__item h3 {
  margin: 0 0 0.25em;
  font-size: 1.0625em;
  color: var(--mb-text-primary);
}
.guia-mabus__item p {
  margin: 0 0 0.5em;
  font-size: 0.9375em;
  line-height: 1.6;
  color: var(--mb-text-secondary);
}
.guia-mabus__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.9375em;
  color: var(--mb-primary);
  text-decoration: none;
}
.guia-mabus__cta:hover { text-decoration: underline; }

/* ── Fontes, aviso e próximo guia ─────────────────────────────────────────── */
.guia-fontes {
  scroll-margin-top: 96px;
  margin-bottom: 1.5em;
}
.guia-fontes ul {
  margin: 0;
  padding-left: 1.25em;
  font-size: 0.9375em;
  line-height: 1.55;
}
.guia-fontes li { margin-bottom: 0.4em; padding: 0.15em 0; overflow-wrap: anywhere; }

.guia-aviso {
  margin: 1.5em 0;
  padding: 0.75em 1em;
  border-radius: 10px;
  border: 1px dashed var(--mb-border-default);
  font-size: 0.875em;
  line-height: 1.5;
  color: var(--mb-text-secondary);
}
.guia-aviso i { margin-right: 0.35em; }

.guia-proximo {
  display: grid;
  gap: 0.75em;
  margin: 2em 0 1em;
}
.guia-proximo__link,
.guia-proximo__fim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25em 1em;
  padding: 1.125em 1.25em;
  border-radius: 14px;
  border: 1px solid var(--mb-border-default);
  background: var(--mb-surface-1);
  color: var(--mb-text-primary);
  text-decoration: none;
}
.guia-proximo__link:hover,
.guia-proximo__link:focus-visible {
  border-color: var(--mb-primary);
}
.guia-proximo__rotulo {
  grid-column: 1;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mb-text-tertiary);
}
.guia-proximo__link strong,
.guia-proximo__fim strong {
  grid-column: 1;
  font-size: 1.125em;
  line-height: 1.35;
}
.guia-proximo__link i {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--mb-primary);
  font-size: 1.125em;
}
.guia-proximo__fim .guia-mabus__cta { grid-column: 1; }
.guia-proximo__indice {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375em;
  color: var(--mb-text-secondary);
}

/* ── Índice /guias: a trilha ──────────────────────────────────────────────── */
.guias-hero {
  max-width: 70ch;
  margin-bottom: 2.5em;
}

.trilha {
  list-style: none;
  margin: 0;
  padding: 0;
}
.trilha-etapa {
  position: relative;
  scroll-margin-top: 96px;
  padding-left: 3em;
  padding-bottom: 2.5em;
}
/* Linha vertical que liga uma etapa à próxima. */
.trilha-etapa::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 2.25em;
  bottom: 0;
  width: 2px;
  background: var(--mb-border-default);
}
.trilha-etapa:last-child::before { display: none; }

.trilha-etapa__cabeca {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  margin-left: -3em;
  margin-bottom: 1em;
}
.trilha-etapa__passo {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9375em;
  color: var(--mb-primary-content);
  background: var(--mb-primary);
  margin-top: 0.1em;
}
.trilha-etapa__cabeca h2 {
  margin: 0 0 0.25em;
  font-size: 1.375em;
  line-height: 1.3;
  color: var(--mb-text-primary);
}
.trilha-etapa__cabeca p {
  margin: 0;
  max-width: 62ch;
  color: var(--mb-text-secondary);
  line-height: 1.55;
}

.trilha-guias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75em;
}
@media (min-width: 760px) {
  .trilha-guias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.trilha-guia {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  height: 100%;
  box-sizing: border-box;
  padding: 1em 1.125em;
  border-radius: 12px;
  border: 1px solid var(--mb-border-default);
  background: var(--mb-surface-1);
  color: var(--mb-text-primary);
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.trilha-guia:hover,
.trilha-guia:focus-visible { border-color: var(--mb-primary); }
.trilha-guia__num {
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mb-text-tertiary);
}
.trilha-guia__titulo {
  font-size: 1.0625em;
  line-height: 1.35;
  color: var(--mb-text-primary);
}
.trilha-guia__resumo {
  font-size: 0.9375em;
  line-height: 1.5;
  color: var(--mb-text-secondary);
}
.trilha-guia__meta {
  margin-top: auto;
  padding-top: 0.25em;
  font-size: 0.8125em;
  color: var(--mb-text-tertiary);
}
.trilha-guia__meta i { margin-right: 0.25em; }

.guias-cta { max-width: 70ch; }

@media (max-width: 480px) {
  .guia-corpo { font-size: 1em; }
  .guia-lead { font-size: 1.0625em; }
  .guia-mabus { padding: 1.125em; }
  .trilha-etapa { padding-left: 2.5em; }
  .trilha-etapa__cabeca { margin-left: -2.5em; gap: 0.5em; }
}

/* Tema claro: o licitacao-public.css pinta TODO link com a tinta do texto
   ([data-theme="mabus-light"] a { ... !important }). Aqui link precisa parecer
   link, então os nossos voltam para a cor de marca (seletor mais específico). */
[data-theme="mabus-light"] .guia-page .guia-secao a,
[data-theme="mabus-light"] .guia-page .guia-fontes a,
[data-theme="mabus-light"] .guia-page .guia-etapa a,
[data-theme="mabus-light"] .guia-page .guia-mabus__cta,
[data-theme="mabus-light"] .guia-page .guia-toc__lista a:hover,
[data-theme="mabus-light"] .guia-page .guia-toc__lista a:focus-visible {
  color: var(--mb-primary) !important;
}
[data-theme="mabus-light"] .guia-page .guia-toc__lista a,
[data-theme="mabus-light"] .guia-page .guia-proximo__indice {
  color: var(--mb-text-secondary) !important;
}

@media (prefers-reduced-motion: reduce) {
  .trilha-guia { transition: none; }
}