/*
 * Índices navegáveis — /categorias, /cidades e /cidades/{cidade}
 *
 * Arquivo próprio para não mexer no style.css de 60 KB. O minificador varre
 * esta pasta inteira (source/Boot/Minify/Web.php), então basta existir aqui.
 * As classes indice_* não aparecem em nenhum outro lugar do tema, então não há
 * conflito de cascata seja qual for a ordem de concatenação.
 */

.indice_grupos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--area-normal);
    margin: var(--area-box) 0;
}

.indice_grupo {
    background: var(--color-white);
    border: 1px solid var(--color-graylight1);
    padding: var(--area-normal);
}

.indice_grupo h2 {
    font-size: var(--font-medium);
    font-weight: var(--weight-bold);
    color: var(--color-bluedark);
    padding-bottom: var(--area-small);
    margin-bottom: var(--area-small);
    border-bottom: 3px solid var(--color-green);
}

.indice_lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.indice_lista li {
    display: flex;
    align-items: baseline;
    gap: var(--area-small);
    padding: 7px 0;
    border-bottom: 1px solid var(--color-graylight);
}

.indice_lista li:last-child {
    border-bottom: 0;
}

.indice_lista a {
    color: var(--color-blue);
    text-decoration: none;
    flex: 1;
    transition: color var(--hover-duration);
}

.indice_lista a:hover,
.indice_lista a:focus {
    color: var(--color-green);
    text-decoration: underline;
}

/* contagem de empresas: informação secundária, não compete com o link */
.indice_contagem {
    flex: none;
    font-size: var(--font-small);
    font-weight: var(--weight-bold);
    color: var(--color-default);
    background: var(--color-graylight1);
    border-radius: 12px;
    padding: 1px 9px;
    min-width: 34px;
    text-align: center;
}

.indice_trilha {
    font-size: var(--font-small);
    color: var(--color-default);
    margin-top: var(--area-small);
}

.indice_trilha a {
    color: var(--color-blue);
}

.indice_rodape {
    margin-top: var(--area-box);
    padding-top: var(--area-normal);
    border-top: 1px solid var(--color-graylight1);
    font-size: var(--font-small);
}

/* duas colunas a partir de tablet, três no desktop —
   as listas são longas e uma coluna só obriga a rolar demais */
@media (min-width: 730px) {
    .indice_grupos {
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
    }
}

@media (min-width: 980px) {
    .indice_grupos {
        grid-template-columns: repeat(3, 1fr);
    }
}